fix: preserve viewMode onSave

awslabs · Feb 28, 2024 · 731756a · 731756a
1 parent 0272167
commit 731756a
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 15 deletions.
diff --git a/packages/dashboard/src/components/actions/index.tsx b/packages/dashboard/src/components/actions/index.tsx
@@ -41,16 +41,19 @@ const Actions: React.FC<ActionsProps> = ({
 
   const handleOnSave = () => {
     if (!onSave) return;
-    onSave({
-      displaySettings: {
-        numColumns: grid.width,
-        numRows: grid.height,
-        cellSize: grid.cellSize,
-        significantDigits,
+    onSave(
+      {
+        displaySettings: {
+          numColumns: grid.width,
+          numRows: grid.height,
+          cellSize: grid.cellSize,
+          significantDigits,
+        },
+        ...dashboardConfiguration,
+        viewport: viewport ?? DEFAULT_VIEWPORT,
       },
-      ...dashboardConfiguration,
-      viewport: viewport ?? DEFAULT_VIEWPORT,
-    });
+      readOnly ? 'preview' : 'edit'
+    );
 
     metricsRecorder?.record({
       metricName: 'DashboardSave',

diff --git a/packages/dashboard/src/components/dashboard/index.test.tsx b/packages/dashboard/src/components/dashboard/index.test.tsx
@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import {
   createMockIoTEventsSDK,
   createMockSiteWiseSDK,
@@ -38,7 +38,7 @@ it('renders', function () {
 });
 
 it('renders in readonly initially', function () {
-  const { queryByText, queryByTestId } = render(
+  const { baseElement, queryByText, queryByTestId } = render(
     <Dashboard
       onSave={() => Promise.resolve()}
       dashboardConfiguration={{
@@ -61,11 +61,91 @@ it('renders in readonly initially', function () {
     />
   );
 
+  expect(
+    baseElement.querySelector('[data-test-id="read-only-mode-dashboard"]')
+  ).toBeTruthy();
+  expect(
+    baseElement.querySelector('[data-test-id="edit-mode-dashboard"]')
+  ).not.toBeTruthy();
+
   expect(queryByText(/component library/i)).not.toBeInTheDocument();
   expect(queryByTestId(/dashboard-actions/i)).toBeInTheDocument();
   expect(queryByTestId(/time-selection/i)).toBeInTheDocument();
 });
 
+it('renders in edit initially', function () {
+  const { baseElement } = render(
+    <Dashboard
+      onSave={() => Promise.resolve()}
+      dashboardConfiguration={{
+        displaySettings: {
+          numColumns: 100,
+          numRows: 100,
+        },
+        widgets: [],
+        viewport: { duration: '5m' },
+      }}
+      clientConfiguration={{
+        iotEventsClient: createMockIoTEventsSDK(),
+        iotSiteWiseClient:
+          createMockSiteWiseSDK() as unknown as IoTSiteWiseClient,
+        iotTwinMakerClient: {
+          send: jest.fn(),
+        } as unknown as IoTTwinMakerClient,
+      }}
+      initialViewMode='edit'
+    />
+  );
+
+  expect(
+    baseElement.querySelector('[data-test-id="read-only-mode-dashboard"]')
+  ).not.toBeTruthy();
+  expect(
+    baseElement.querySelector('[data-test-id="edit-mode-dashboard"]')
+  ).toBeTruthy();
+});
+
+it('passes the correct viewMode to onSave', function () {
+  const onSave = jest.fn();
+
+  const savedConfig = {
+    displaySettings: {
+      numColumns: 100,
+      cellSize: 20,
+      numRows: 100,
+      significantDigits: 4,
+    },
+    widgets: [],
+    viewport: { duration: '5m' },
+  };
+
+  render(
+    <Dashboard
+      onSave={onSave}
+      dashboardConfiguration={savedConfig}
+      clientConfiguration={{
+        iotEventsClient: createMockIoTEventsSDK(),
+        iotSiteWiseClient:
+          createMockSiteWiseSDK() as unknown as IoTSiteWiseClient,
+        iotTwinMakerClient: {
+          send: jest.fn(),
+        } as unknown as IoTTwinMakerClient,
+      }}
+      initialViewMode='edit'
+    />
+  );
+
+  // in edit mode it passes 'edit' string
+  fireEvent.click(screen.getByRole('button', { name: /save/i }));
+  expect(onSave).toBeCalledWith(savedConfig, 'edit');
+
+  fireEvent.click(screen.getByRole('button', { name: /preview/i }));
+
+  // in preview mode it passes 'preview' string
+  fireEvent.click(screen.getByRole('button', { name: /save/i }));
+  expect(onSave).toBeCalledWith(savedConfig, 'preview');
+});
+
 it('renders dashboard name', function () {
   const { queryByText } = render(
     <Dashboard

diff --git a/packages/dashboard/src/components/internalDashboard/index.tsx b/packages/dashboard/src/components/internalDashboard/index.tsx
@@ -270,7 +270,11 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
         />
       }
     >
-      <div className='dashboard' style={userSelect}>
+      <div
+        className='dashboard'
+        data-test-id='edit-mode-dashboard'
+        style={userSelect}
+      >
         <CustomDragLayer
           onDrag={(isDragging) =>
             setUserSelect(isDragging ? disabledUserSelect : defaultUserSelect)
@@ -325,7 +329,7 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
         />
       }
     >
-      <div className='dashboard'>
+      <div className='dashboard' data-test-id='read-only-mode-dashboard'>
         {hasValidAssetModelData && (
           <div
             style={dashboardToolbarBottomBorder}

diff --git a/packages/dashboard/src/types.ts b/packages/dashboard/src/types.ts
@@ -33,8 +33,10 @@ export type DashboardClientConfiguration =
   | DashboardIotSiteWiseClients
   | DashboardClientCredentials;
 
+// OnSave has an optional viewMode value which can be used to persist the dashboard's viewMode after the save action
 export type DashboardSave = (
-  dashboardConfiguration: DashboardConfiguration
+  dashboardConfiguration: DashboardConfiguration,
+  viewModeOnSave?: 'preview' | 'edit'
 ) => Promise<void>;
 
 export type DashboardWidget<

diff --git a/packages/dashboard/stories/dashboard/sitewise-dashboard.stories.tsx b/packages/dashboard/stories/dashboard/sitewise-dashboard.stories.tsx
@@ -48,11 +48,18 @@ export const Main: ComponentStory<typeof Dashboard> = () => {
   const [dashboardConfig, setDashboardConfig] = useState(
     getInitialDashboardConfig()
   );
+  const [initialViewMode, setInitialViewMode] = useState<'preview' | 'edit'>(
+    'edit'
+  );
 
   // on save not only updates local storage but forces the dashboard to reload given the updated config
   // this is done to more realistically match the dashboard implementation in iot-application
-  const onSave = async (dashboard: DashboardConfiguration) => {
+  const onSave = async (
+    dashboard: DashboardConfiguration,
+    viewModeOnSave?: 'preview' | 'edit'
+  ) => {
     console.log(dashboard);
+    viewModeOnSave && setInitialViewMode(viewModeOnSave);
     window.localStorage.setItem('dashboard', JSON.stringify(dashboard));
     return new Promise(() => setDashboardConfig(dashboard)) as Promise<void>;
   };
@@ -61,6 +68,7 @@ export const Main: ComponentStory<typeof Dashboard> = () => {
     <Dashboard
       clientConfiguration={CLIENT_CONFIGURATION}
       onSave={onSave}
+      initialViewMode={initialViewMode}
       dashboardConfiguration={dashboardConfig}
     />
   );