fix: Save/load plugin data with layout (#1866)

- Plugin data was not getting saved with the workspace
- Reload the dashboard when a layout is imported by updating the key
- Fixes #1861

Author: mofojed

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

@@ -18,6 +18,7 @@ interface AppDashboardsProps {
   dashboards: {
     id: string;
     layoutConfig: ItemConfigType[];
+    key?: string;
   }[];
   activeDashboard: string;
   onGoldenLayoutChange: (goldenLayout: LayoutManager) => void;
@@ -65,6 +66,7 @@ export function AppDashboards({
         >
           <LazyDashboard
             id={d.id}
+            key={d.key}
             isActive={d.id === activeDashboard}
             emptyDashboard={
               d.id === DEFAULT_DASHBOARD_ID ? (

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { Provider } from 'react-redux';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
 import { ConnectionContext } from '@deephaven/app-utils';
 import { ToolType } from '@deephaven/dashboard-core-plugins';
 import {
@@ -112,17 +112,39 @@ function renderAppMainContainer({
     </Provider>
   );
 }
+
+const EMPTY_LAYOUT = {
+  filterSets: [],
+  layoutConfig: [],
+  links: [],
+  version: 2,
+};
+
 let mockProp = {};
 let mockId = DEFAULT_DASHBOARD_ID;
+let mockIteration = 0;
 jest.mock('@deephaven/dashboard', () => ({
   ...jest.requireActual('@deephaven/dashboard'),
   __esModule: true,
   LazyDashboard: jest.fn(({ hydrate }) => {
+    const { useMemo } = jest.requireActual('react');
+    // We use the `key` to determine how many times this LazyDashboard component was re-rendered with a new key
+    // When rendered with a new key, the `useMemo` will be useless and will return a new key
+    const key = useMemo(() => {
+      const newKey = `${mockIteration}`;
+      mockIteration += 1;
+      return newKey;
+    }, []);
     const result = hydrate(mockProp, mockId);
     if (result.fetch != null) {
       result.fetch();
     }
-    return <p>{JSON.stringify(result)}</p>;
+    return (
+      <>
+        <p>{JSON.stringify(result)}</p>
+        <p data-testid="dashboard-key">{key}</p>
+      </>
+    );
   }),
   default: jest.fn(),
 }));
@@ -136,6 +158,8 @@ beforeEach(() => {
     cb(0);
     return 0;
   });
+  mockProp = {};
+  mockIteration = 0;
 });
 
 afterEach(() => {
@@ -241,3 +265,36 @@ describe('hydrates widgets correctly', () => {
     expect(objectFetcher).toHaveBeenCalled();
   });
 });
+
+describe('imports layout correctly', () => {
+  it('uses a new key when layout is imported', async () => {
+    renderAppMainContainer();
+
+    expect(screen.getByText('{"localDashboardId":"default"}')).toBeTruthy();
+
+    const oldKey = screen.getByTestId('dashboard-key').textContent ?? '';
+    expect(oldKey.length).not.toBe(0);
+
+    await act(async () => {
+      const text = JSON.stringify(EMPTY_LAYOUT);
+      const file = TestUtils.createMockProxy<File>({
+        text: () => Promise.resolve(text),
+        name: 'layout.json',
+        type: 'application/json',
+      });
+
+      // Technically, the "Import Layout" button in the panels list is what the user clicks on to show the file picker
+      // However, the testing library uses the `.upload` command on the `input` element directly, which we don't display
+      // So just fetch it by testid and use the `.upload` command: https://testing-library.com/docs/user-event/utility/#upload
+      const importInput = screen.getByTestId('input-import-layout');
+      await userEvent.upload(importInput, file);
+    });
+
+    expect(screen.getByText('{"localDashboardId":"default"}')).toBeTruthy();
+
+    const newKey = screen.getByTestId('dashboard-key').textContent ?? '';
+
+    expect(newKey.length).not.toBe(0);
+    expect(newKey).not.toBe(oldKey);
+  });
+});

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

@@ -50,8 +50,6 @@ import {
   getDashboardSessionWrapper,
   ControlType,
   ToolType,
-  FilterSet,
-  Link,
   getDashboardConnection,
   NotebookPanel,
 } from '@deephaven/dashboard-core-plugins';
@@ -155,6 +153,9 @@ interface AppMainContainerState {
   widgets: DhType.ide.VariableDefinition[];
   tabs: NavTabItem[];
   activeTabKey: string;
+
+  // Number of times the layout has been re-initialized
+  layoutIteration: number;
 }
 
 export class AppMainContainer extends Component<
@@ -255,6 +256,7 @@ export class AppMainContainer extends Component<
           title: value.title ?? 'Untitled',
         })),
       activeTabKey: DEFAULT_DASHBOARD_ID,
+      layoutIteration: 0,
     };
   }
 
@@ -577,13 +579,7 @@ export class AppMainContainer extends Component<
     try {
       const { workspace } = this.props;
       const { data } = workspace;
-      const exportedConfig = UserLayoutUtils.exportLayout(
-        data as {
-          filterSets: FilterSet[];
-          links: Link[];
-          layoutConfig: ItemConfigType[];
-        }
-      );
+      const exportedConfig = UserLayoutUtils.exportLayout(data);
 
       log.info('handleExportLayoutClick exportedConfig', exportedConfig);
 
@@ -658,14 +654,18 @@ export class AppMainContainer extends Component<
       const { updateDashboardData, updateWorkspaceData } = this.props;
       const fileText = await file.text();
       const exportedLayout = JSON.parse(fileText);
-      const { filterSets, layoutConfig, links } =
+      const { filterSets, layoutConfig, links, pluginDataMap } =
         UserLayoutUtils.normalizeLayout(exportedLayout);
 
       updateWorkspaceData({ layoutConfig });
       updateDashboardData(DEFAULT_DASHBOARD_ID, {
         filterSets,
         links,
+        pluginDataMap,
       });
+      this.setState(({ layoutIteration }) => ({
+        layoutIteration: layoutIteration + 1,
+      }));
     } catch (e) {
       log.error('Unable to import layout', e);
     }
@@ -832,8 +832,9 @@ export class AppMainContainer extends Component<
   getDashboards(): {
     id: string;
     layoutConfig: ItemConfigType[];
+    key?: string;
   }[] {
-    const { tabs } = this.state;
+    const { layoutIteration, tabs } = this.state;
     const { allDashboardData, workspace } = this.props;
     const { data: workspaceData } = workspace;
     const { layoutConfig } = workspaceData;
@@ -842,11 +843,13 @@ export class AppMainContainer extends Component<
       {
         id: DEFAULT_DASHBOARD_ID,
         layoutConfig: layoutConfig as ItemConfigType[],
+        key: `${DEFAULT_DASHBOARD_ID}-${layoutIteration}`,
       },
       ...tabs.map(tab => ({
         id: tab.key,
         layoutConfig: (allDashboardData[tab.key]?.layoutConfig ??
           EMPTY_ARRAY) as ItemConfigType[],
+        key: `${tab.key}-${layoutIteration}`,
       })),
     ];
   }
@@ -1019,6 +1022,7 @@ export class AppMainContainer extends Component<
           accept=".json"
           style={{ display: 'none' }}
           onChange={this.handleImportLayoutFiles}
+          data-testid="input-import-layout"
         />
         <DebouncedModal
           isOpen={isDisconnected && !isAuthFailed}

packages/code-studio/src/main/UserLayoutUtils.ts

@@ -2,12 +2,10 @@ import {
   CommandHistoryPanel,
   ConsolePanel,
   FileExplorerPanel,
-  FilterSet,
-  Link,
   LogPanel,
 } from '@deephaven/dashboard-core-plugins';
-import type { ItemConfigType } from '@deephaven/golden-layout';
 import Log from '@deephaven/log';
+import { CustomizableWorkspaceData } from '@deephaven/redux';
 import LayoutStorage, {
   ExportedLayout,
   ExportedLayoutV2,
@@ -137,16 +135,18 @@ export async function getDefaultLayout(
     : DEFAULT_LAYOUT_CONFIG_NO_CONSOLE;
 }
 
-export function exportLayout(data: {
-  filterSets: FilterSet[];
-  links: Link[];
-  layoutConfig: ItemConfigType[];
-}): ExportedLayoutV2 {
-  const { filterSets, layoutConfig, links } = data;
+export function exportLayout(
+  data: CustomizableWorkspaceData
+): ExportedLayoutV2 {
+  const { filterSets, layoutConfig, links, pluginDataMap } = data as Omit<
+    ExportedLayoutV2,
+    'version'
+  >;
   const exportedLayout: ExportedLayoutV2 = {
     filterSets,
     layoutConfig,
     links,
+    pluginDataMap,
     version: 2,
   };
   return exportedLayout;

packages/code-studio/src/storage/LayoutStorage.ts

@@ -1,5 +1,6 @@
 import type { ItemConfigType } from '@deephaven/golden-layout';
 import { FilterSet, Link } from '@deephaven/dashboard-core-plugins';
+import { PluginDataMap } from '@deephaven/redux';
 
 /**
  * Have a different version to support legacy layout exports
@@ -10,6 +11,7 @@ export type ExportedLayoutV2 = {
   filterSets: FilterSet[];
   links: Link[];
   layoutConfig: ItemConfigType[];
+  pluginDataMap?: PluginDataMap;
   version: 2;
 };