feat: De-globalize JSAPI in Console package (#1292)

- Remove global `dh` references in the Console package, update
consumers.
- Add `SET_API` reducer.


BREAKING CHANGE:
- Components `IrisGrid`, `Chart`, `ChartBuilder`,
`AdvancedFilterCreator`, `GotoRow`, `IrisGridModelUpdater`,
`TableCSVExporter` get the JSAPI reference from the `model` prop. `dh`
prop removed.
- `makeApi` props in `IrisGridPanel` and `ChartPanel` removed.
- Components `Console`, `ConsoleMenu`, `ConsoleStatusBar` now require
the JSAPI instance in the `dh` prop.
- `ConsoleUtils`: static methods `isTableType`, `isWidgetType`,
`isOpenableType`, `isFigureType`, `isPandas` require JSAPI instance
passed in the first argument.
- `SessionUtils`: static methods `createSessionWrapper`,
`loadSessionWrapper` require JSAPI instance passed in the first
argument.
- Class `IrisGridModel` requires JSAPI instance passed in the
constructor args.
- Components `DashboardLayout`, `ObjectIcon` has to be wrapped in
`ApiContext.Provider` passing the JSAPI instance.

Author: vbabich

package-lock.json

@@ -1,7 +1,7 @@
 import React, { createContext, useEffect, useState } from 'react';
 import { LoadingOverlay } from '@deephaven/components';
 import { useApi, useClient } from '@deephaven/jsapi-bootstrap';
-import { IdeConnection } from '@deephaven/jsapi-types';
+import type { IdeConnection } from '@deephaven/jsapi-types';
 import Log from '@deephaven/log';
 
 const log = Log.module('@deephaven/jsapi-components.ConnectionBootstrap');

packages/app-utils/src/components/ConnectionBootstrap.tsx

@@ -7,7 +7,6 @@ import {
   dhWarningFilled,
   IconDefinition,
 } from '@deephaven/icons';
-import type { dh as DhType } from '@deephaven/jsapi-types';
 import {
   Formatter,
   FormatterUtils,
@@ -36,7 +35,6 @@ type FormatterSettings = ColumnFormatSettings &
   };
 
 interface ChartProps {
-  dh: DhType;
   model: ChartModel;
   settings: FormatterSettings;
   isActive: boolean;
@@ -507,16 +505,14 @@ export class Chart extends Component<ChartProps, ChartState> {
   }
 
   updateFormatter(): void {
-    const { dh } = this.props;
+    const { model } = this.props;
     const formatter = new Formatter(
-      dh,
+      model.dh,
       this.columnFormats,
       this.dateTimeFormatterOptions,
       this.decimalFormatOptions,
       this.integerFormatOptions
     );
-
-    const { model } = this.props;
     model.setFormatter(formatter);
   }
 

packages/chart/src/Chart.tsx

@@ -1,6 +1,7 @@
 /* eslint class-methods-use-this: "off" */
 /* eslint no-unused-vars: "off" */
 
+import type { dh as DhType } from '@deephaven/jsapi-types';
 import { Formatter } from '@deephaven/jsapi-utils';
 import { Layout, PlotData } from 'plotly.js';
 import { FilterColumnMap, FilterMap } from './ChartUtils';
@@ -28,11 +29,14 @@ class ChartModel {
 
   static EVENT_LOADFINISHED = 'ChartModel.EVENT_LOADFINISHED';
 
-  constructor() {
+  constructor(dh: DhType) {
+    this.dh = dh;
     this.listeners = [];
     this.isDownsamplingDisabled = false;
   }
 
+  dh: DhType;
+
   listeners: ((event: ChartEvent) => void)[];
 
   formatter?: Formatter;

packages/chart/src/ChartModel.ts

@@ -46,7 +46,7 @@ class FigureChartModel extends ChartModel {
     settings: Partial<ChartModelSettings> = {},
     theme: typeof ChartTheme = ChartTheme
   ) {
-    super();
+    super(dh);
 
     this.handleFigureUpdated = this.handleFigureUpdated.bind(this);
     this.handleFigureDisconnected = this.handleFigureDisconnected.bind(this);

packages/chart/src/FigureChartModel.ts

@@ -167,7 +167,7 @@ class MockChartModel extends ChartModel {
       filterFields = [],
     } = {}
   ) {
-    super();
+    super(dh);
 
     this.data = data;
     this.layout = layout;

packages/chart/src/MockChartModel.js

@@ -126,6 +126,7 @@ function AppInit(props: AppInitProps) {
         try {
           const sessionDetails = await getSessionDetails();
           const sessionWrapper = await loadSessionWrapper(
+            api,
             connection,
             sessionDetails
           );
@@ -279,6 +280,7 @@ AppInit.propTypes = {
   workspaceStorage: PropTypes.shape({ close: PropTypes.func }),
 
   setActiveTool: PropTypes.func.isRequired,
+  setApi: PropTypes.func.isRequired,
   setCommandHistoryStorage: PropTypes.func.isRequired,
   setDashboardData: PropTypes.func.isRequired,
   setFileStorage: PropTypes.func.isRequired,

packages/code-studio/src/main/AppInit.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ToolType } from '@deephaven/dashboard-core-plugins';
+import { ApiContext } from '@deephaven/jsapi-bootstrap';
 import dh from '@deephaven/jsapi-shim';
 import type {
   IdeConnection,
@@ -69,27 +70,29 @@ function renderAppMainContainer({
   plugins = new Map(),
 } = {}) {
   return render(
-    <AppMainContainer
-      dashboardData={dashboardData as AppDashboardData}
-      layoutStorage={layoutStorage as LayoutStorage}
-      saveWorkspace={saveWorkspace}
-      updateDashboardData={updateDashboardData}
-      updateWorkspaceData={updateWorkspaceData}
-      user={user}
-      workspace={workspace as Workspace}
-      workspaceStorage={workspaceStorage}
-      activeTool={activeTool}
-      setActiveTool={setActiveTool}
-      setDashboardIsolatedLinkerPanelId={setDashboardIsolatedLinkerPanelId}
-      client={client}
-      serverConfigValues={serverConfigValues}
-      dashboardOpenedPanelMaps={dashboardOpenedPanelMaps}
-      connection={connection}
-      session={(session as unknown) as IdeSession}
-      sessionConfig={sessionConfig}
-      match={match}
-      plugins={plugins}
-    />
+    <ApiContext.Provider value={dh}>
+      <AppMainContainer
+        dashboardData={dashboardData as AppDashboardData}
+        layoutStorage={layoutStorage as LayoutStorage}
+        saveWorkspace={saveWorkspace}
+        updateDashboardData={updateDashboardData}
+        updateWorkspaceData={updateWorkspaceData}
+        user={user}
+        workspace={workspace as Workspace}
+        workspaceStorage={workspaceStorage}
+        activeTool={activeTool}
+        setActiveTool={setActiveTool}
+        setDashboardIsolatedLinkerPanelId={setDashboardIsolatedLinkerPanelId}
+        client={client}
+        serverConfigValues={serverConfigValues}
+        dashboardOpenedPanelMaps={dashboardOpenedPanelMaps}
+        connection={connection}
+        session={(session as unknown) as IdeSession}
+        sessionConfig={sessionConfig}
+        match={match}
+        plugins={plugins}
+      />
+    </ApiContext.Provider>
   );
 }
 let mockProp = {};

packages/code-studio/src/main/AppMainContainer.test.tsx

@@ -756,7 +756,6 @@ export class AppMainContainer extends Component<
       getDownloadWorker: DownloadServiceWorkerUtils.getServiceWorker,
       loadPlugin: this.handleLoadTablePlugin,
       localDashboardId: id,
-      makeApi: () => Promise.resolve(dh),
       makeModel: () => createGridModel(dh, connection, props.metadata, type),
     };
   }
@@ -766,7 +765,6 @@ export class AppMainContainer extends Component<
     return {
       ...props,
       localDashboardId: id,
-      makeApi: () => Promise.resolve(dh),
       makeModel: () => {
         const { metadata, panelState } = props;
         return createChartModel(dh, connection, metadata, panelState);

packages/code-studio/src/main/AppMainContainer.tsx

@@ -10,7 +10,7 @@ function Charts(): ReactElement {
     <div>
       <h2 className="ui-title">Chart</h2>
       <div style={{ height: 500 }}>
-        <Chart dh={dh} model={model as ChartModel} />
+        <Chart model={model as ChartModel} />
       </div>
     </div>
   );