feat: De-globalize JSAPI in Console package

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

@@ -126,6 +126,7 @@ function AppInit(props: AppInitProps) {
         try {
           const sessionDetails = await getSessionDetails();
           const sessionWrapper = await loadSessionWrapper(
+            api,
             connection,
             sessionDetails
           );

packages/code-studio/src/main/AppMainContainer.test.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/console/package.json

@@ -26,7 +26,7 @@
     "@deephaven/chart": "file:../chart",
     "@deephaven/components": "file:../components",
     "@deephaven/icons": "file:../icons",
-    "@deephaven/jsapi-shim": "file:../jsapi-shim",
+    "@deephaven/jsapi-bootstrap": "file:../icons",
     "@deephaven/log": "file:../log",
     "@deephaven/storage": "file:../storage",
     "@deephaven/utils": "file:../utils",
@@ -48,6 +48,7 @@
     "react-dom": "^17.x"
   },
   "devDependencies": {
+    "@deephaven/jsapi-shim": "file:../jsapi-shim",
     "@deephaven/mocks": "file:../mocks",
     "@deephaven/tsconfig": "file:../tsconfig"
   },

packages/console/src/Console.test.tsx

@@ -37,6 +37,7 @@ function makeConsoleWrapper(consoleRef = React.createRef<Console>()) {
   const commandHistoryStorage = makeMockCommandHistoryStorage();
   return render(
     <Console
+      dh={dh}
       ref={consoleRef}
       commandHistoryStorage={commandHistoryStorage}
       focusCommandHistory={() => undefined}

packages/console/src/Console.tsx

@@ -14,8 +14,8 @@ import classNames from 'classnames';
 import memoize from 'memoize-one';
 import throttle from 'lodash.throttle';
 import type { JSZipObject } from 'jszip';
-import dh from '@deephaven/jsapi-shim';
 import type {
+  dh as DhType,
   IdeSession,
   LogItem,
   VariableChanges,
@@ -53,6 +53,7 @@ const DEFAULT_SETTINGS: Settings = {
 } as const;
 
 interface ConsoleProps {
+  dh: DhType;
   statusBarChildren: ReactNode;
   settings: Partial<Settings>;
   focusCommandHistory: () => void;
@@ -215,7 +216,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   componentDidMount(): void {
     this.initConsoleLogging();
 
-    const { session } = this.props;
+    const { dh, session } = this.props;
     session.addEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
       this.handleCommandStarted
@@ -234,7 +235,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   }
 
   componentWillUnmount(): void {
-    const { session } = this.props;
+    const { dh, session } = this.props;
 
     session.removeEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
@@ -733,7 +734,13 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   }
 
   handleOpenCsvTable(title: string): void {
-    const { openObject, commandHistoryStorage, language, scope } = this.props;
+    const {
+      dh,
+      openObject,
+      commandHistoryStorage,
+      language,
+      scope,
+    } = this.props;
     const { consoleHistory, objectMap } = this.state;
     const object = { name: title, title, type: dh.VariableType.TABLE };
     const isExistingObject = objectMap.has(title);
@@ -941,6 +948,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
   render(): ReactElement {
     const {
       actions,
+      dh,
       historyChildren,
       language,
       statusBarChildren,
@@ -974,6 +982,7 @@ export class Console extends PureComponent<ConsoleProps, ConsoleState> {
       >
         <div className="console-pane" ref={this.consolePane}>
           <ConsoleStatusBar
+            dh={dh}
             session={session}
             overflowActions={this.handleOverflowActions}
             openObject={openObject}

packages/console/src/ConsoleMenu.tsx

@@ -19,14 +19,15 @@ import {
   vsTriangleDown,
 } from '@deephaven/icons';
 import Log from '@deephaven/log';
-import type { VariableDefinition } from '@deephaven/jsapi-types';
+import type { dh as DhType, VariableDefinition } from '@deephaven/jsapi-types';
 import memoize from 'memoize-one';
 import './ConsoleMenu.scss';
 import ConsoleUtils from './common/ConsoleUtils';
 
 const log = Log.module('ConsoleMenu');
 
 interface ConsoleMenuProps {
+  dh: DhType;
   openObject: (object: VariableDefinition) => void;
   objects: VariableDefinition[];
   overflowActions: () => DropdownAction[];
@@ -103,8 +104,9 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
       filterText: string,
       openObject: (object: VariableDefinition) => void
     ): DropdownAction[] => {
+      const { dh } = this.props;
       const tables = objects.filter(object =>
-        ConsoleUtils.isTableType(object.type)
+        ConsoleUtils.isTableType(dh, object.type)
       );
       return ConsoleMenu.makeItemActions(
         tables,
@@ -124,8 +126,9 @@ class ConsoleMenu extends PureComponent<ConsoleMenuProps, ConsoleMenuState> {
       filterText: string,
       openObject: (object: VariableDefinition) => void
     ): DropdownAction[] => {
+      const { dh } = this.props;
       const widgets = objects.filter(object =>
-        ConsoleUtils.isWidgetType(object.type)
+        ConsoleUtils.isWidgetType(dh, object.type)
       );
       return ConsoleMenu.makeItemActions(
         widgets,

packages/console/src/ConsoleStatusBar.test.tsx

@@ -15,6 +15,7 @@ function makeConsoleStatusBarWrapper(
   const session = new (dh as any).IdeSession('test');
   const wrapper = render(
     <ConsoleStatusBar
+      dh={dh}
       session={session}
       openObject={() => undefined}
       objects={[]}

packages/console/src/ConsoleStatusBar.tsx

@@ -1,14 +1,18 @@
 import React, { PureComponent, ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
-import dh from '@deephaven/jsapi-shim';
-import type { IdeSession, VariableDefinition } from '@deephaven/jsapi-types';
+import type {
+  dh as DhType,
+  IdeSession,
+  VariableDefinition,
+} from '@deephaven/jsapi-types';
 import { DropdownAction, Tooltip } from '@deephaven/components';
 import { CanceledPromiseError, Pending } from '@deephaven/utils';
 import ConsoleMenu from './ConsoleMenu';
 import './ConsoleStatusBar.scss';
 
 interface ConsoleStatusBarProps {
   children: ReactNode;
+  dh: DhType;
   session: IdeSession;
   openObject: (object: VariableDefinition) => void;
   objects: VariableDefinition[];
@@ -54,15 +58,15 @@ export class ConsoleStatusBar extends PureComponent<
   pending: Pending;
 
   startListening(): void {
-    const { session } = this.props;
+    const { dh, session } = this.props;
     session.addEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
       this.handleCommandStarted
     );
   }
 
   stopListening(): void {
-    const { session } = this.props;
+    const { dh, session } = this.props;
     session.removeEventListener(
       dh.IdeSession.EVENT_COMMANDSTARTED,
       this.handleCommandStarted
@@ -96,7 +100,7 @@ export class ConsoleStatusBar extends PureComponent<
   }
 
   render(): ReactElement {
-    const { children, openObject, overflowActions, objects } = this.props;
+    const { children, dh, openObject, overflowActions, objects } = this.props;
     const { isDisconnected, isCommandRunning } = this.state;
 
     let statusIconClass = null;
@@ -123,6 +127,7 @@ export class ConsoleStatusBar extends PureComponent<
         </div>
         {children}
         <ConsoleMenu
+          dh={dh}
           overflowActions={overflowActions}
           openObject={openObject}
           objects={objects}

packages/console/src/common/ConsoleUtils.ts

@@ -1,6 +1,5 @@
 import ShellQuote, { ParseEntry, ControlOperator } from 'shell-quote';
-import dh from '@deephaven/jsapi-shim';
-import type { VariableTypeUnion } from '@deephaven/jsapi-types';
+import type { dh as DhType, VariableTypeUnion } from '@deephaven/jsapi-types';
 
 class ConsoleUtils {
   static hasComment(arg: ParseEntry): arg is { comment: string } {
@@ -53,31 +52,33 @@ class ConsoleUtils {
     return `${hours}:${minutes}:${seconds}.${milliseconds}`;
   }
 
-  static isTableType(type: VariableTypeUnion): boolean {
+  static isTableType(dh: DhType, type: VariableTypeUnion): boolean {
     return (
       type === dh.VariableType.TABLE ||
       type === dh.VariableType.TREETABLE ||
       type === dh.VariableType.HIERARCHICALTABLE
     );
   }
 
-  static isWidgetType(type: VariableTypeUnion): boolean {
+  static isWidgetType(dh: DhType, type: VariableTypeUnion): boolean {
     return (
       type === dh.VariableType.FIGURE ||
       type === dh.VariableType.OTHERWIDGET ||
       type === dh.VariableType.PANDAS
     );
   }
 
-  static isOpenableType(type: VariableTypeUnion): boolean {
-    return ConsoleUtils.isTableType(type) || ConsoleUtils.isWidgetType(type);
+  static isOpenableType(dh: DhType, type: VariableTypeUnion): boolean {
+    return (
+      ConsoleUtils.isTableType(dh, type) || ConsoleUtils.isWidgetType(dh, type)
+    );
   }
 
-  static isFigureType(type: VariableTypeUnion): boolean {
+  static isFigureType(dh: DhType, type: VariableTypeUnion): boolean {
     return type === dh.VariableType.FIGURE;
   }
 
-  static isPandas(type: VariableTypeUnion): boolean {
+  static isPandas(dh: DhType, type: VariableTypeUnion): boolean {
     return type === dh.VariableType.PANDAS;
   }
 }

packages/console/src/common/ObjectIcon.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { dhPandas, dhTable, vsGraph, vsPreview } from '@deephaven/icons';
-import dh from '@deephaven/jsapi-shim';
+import { useApi } from '@deephaven/jsapi-bootstrap';
 
 export type ObjectIconProps = {
   type: string;
 };
 
 function ObjectIcon({ type }: ObjectIconProps): JSX.Element {
+  const dh = useApi();
   switch (type) {
     case dh.VariableType.TABLE:
     case dh.VariableType.TABLEMAP:

packages/console/tsconfig.json

@@ -10,6 +10,12 @@
     {
       "path": "../components"
     },
+    {
+      "path": "../jsapi-bootstrap"
+    },
+    {
+      "path": "../jsapi-types"
+    },
     {
       "path": "../jsapi-shim"
     },