feat: Multiple dashboards

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

@@ -0,0 +1,95 @@
+import React, { useCallback } from 'react';
+import classNames from 'classnames';
+import {
+  DashboardUtils,
+  DEFAULT_DASHBOARD_ID,
+  DehydratedDashboardPanelProps,
+  LazyDashboard,
+} from '@deephaven/dashboard';
+import { useConnection } from '@deephaven/jsapi-components';
+import { VariableDefinition } from '@deephaven/jsapi-types';
+import LayoutManager, { ItemConfigType } from '@deephaven/golden-layout';
+import { LoadingOverlay } from '@deephaven/components';
+import EmptyDashboard from './EmptyDashboard';
+
+interface AppDashboardsProps {
+  dashboards: {
+    id: string;
+    layoutConfig: ItemConfigType[];
+  }[];
+  activeDashboard: string;
+  onGoldenLayoutChange: (goldenLayout: LayoutManager) => void;
+  plugins: JSX.Element[];
+  onAutoFillClick: (event: React.MouseEvent) => void;
+}
+
+export function AppDashboards({
+  dashboards,
+  activeDashboard,
+  onGoldenLayoutChange,
+  plugins,
+  onAutoFillClick,
+}: AppDashboardsProps): JSX.Element {
+  const connection = useConnection();
+
+  const hydratePanel = useCallback(
+    (hydrateProps: DehydratedDashboardPanelProps, id: string) => {
+      const { metadata } = hydrateProps;
+      if (
+        metadata?.type != null &&
+        (metadata?.id != null || metadata?.name != null)
+      ) {
+        // Looks like a widget, hydrate it as such
+        const widget: VariableDefinition =
+          metadata.id != null
+            ? {
+                type: metadata.type,
+                id: metadata.id,
+              }
+            : {
+                type: metadata.type,
+                name: metadata.name,
+                title: metadata.name,
+              };
+        return {
+          fetch: async () => connection?.getObject(widget),
+          ...hydrateProps,
+          localDashboardId: id,
+        };
+      }
+      return DashboardUtils.hydrate(hydrateProps, id);
+    },
+    [connection]
+  );
+
+  return (
+    <div className="tab-content">
+      {dashboards.map(d => (
+        <div
+          key={d.id}
+          className={classNames('tab-pane', {
+            active: d.id === activeDashboard,
+          })}
+        >
+          <LazyDashboard
+            id={d.id}
+            isActive={d.id === activeDashboard}
+            emptyDashboard={
+              d.id === DEFAULT_DASHBOARD_ID ? (
+                <EmptyDashboard onAutoFillClick={onAutoFillClick} />
+              ) : (
+                <LoadingOverlay />
+              )
+            }
+            layoutConfig={d.layoutConfig}
+            onGoldenLayoutChange={onGoldenLayoutChange}
+            hydrate={hydratePanel}
+            plugins={plugins}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default AppDashboards;

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

@@ -42,7 +42,9 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
   width: 100%;
   justify-content: space-between;
   align-items: center;
+}
 
+.app-main-right-menu-buttons {
   .btn-link {
     font-size: $tab-font-size;
     text-decoration: none;
@@ -67,7 +69,9 @@ $nav-space: 4px; // give a gap around some buttons for focus area that are in na
 }
 
 .tab-pane {
+  height: 100%;
   width: 100%;
+  flex-grow: 1;
 }
 
 .app-main-tabs {

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

@@ -1,19 +1,21 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
+import { Provider } from 'react-redux';
 import { render, screen } from '@testing-library/react';
 import { ToolType } from '@deephaven/dashboard-core-plugins';
 import { ApiContext } from '@deephaven/jsapi-bootstrap';
+import { ConnectionContext } from '@deephaven/jsapi-components';
 import dh from '@deephaven/jsapi-shim';
 import type {
   IdeConnection,
   IdeSession,
   VariableChanges,
 } from '@deephaven/jsapi-types';
 import { TestUtils } from '@deephaven/utils';
-import { Workspace } from '@deephaven/redux';
+import { Workspace, createMockStore } from '@deephaven/redux';
 import userEvent from '@testing-library/user-event';
 import { DEFAULT_DASHBOARD_ID } from '@deephaven/dashboard';
-import { AppMainContainer, AppDashboardData } from './AppMainContainer';
+import { AppMainContainer } from './AppMainContainer';
 import LocalWorkspaceStorage from '../storage/LocalWorkspaceStorage';
 import LayoutStorage from '../storage/LayoutStorage';
 
@@ -69,38 +71,46 @@ function renderAppMainContainer({
   match = makeMatch(),
   plugins = new Map(),
 } = {}) {
+  const store = createMockStore();
   return render(
-    <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>
+    <Provider store={store}>
+      <ApiContext.Provider value={dh}>
+        <ConnectionContext.Provider value={connection}>
+          <AppMainContainer
+            dashboardData={dashboardData}
+            allDashboardData={dashboardData}
+            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}
+          />
+        </ConnectionContext.Provider>
+      </ApiContext.Provider>
+    </Provider>
   );
 }
 let mockProp = {};
 let mockId = DEFAULT_DASHBOARD_ID;
 jest.mock('@deephaven/dashboard', () => ({
   ...jest.requireActual('@deephaven/dashboard'),
   __esModule: true,
-  Dashboard: jest.fn(({ hydrate }) => {
+  LazyDashboard: jest.fn(({ hydrate }) => {
     const result = hydrate(mockProp, mockId);
     if (result.fetch != null) {
       result.fetch();