feat(dashboard): default viewport setting

Author: corteggiano

packages/core-util/src/index.ts

@@ -4,3 +4,10 @@ export { colorPalette } from './sdks/colorPalette';
 export { round } from './sdks/number';
 export { isNumeric } from './sdks/number';
 export { Colorizer } from './sdks/colorizer';
+export {
+  viewportToDateRange,
+  relativeViewportOptions,
+  dateRangeToViewport,
+  getViewportDateRelativeToAbsolute,
+} from './sdks/viewportAdapters';
+export { rangeValidator } from './sdks/rangeValidator';

packages/react-components/src/components/time-sync/rangeValidator.spec.tsx packages/core-util/src/sdks/rangeValidator.spec.ts

@@ -1,45 +1,45 @@
 import {
   dateRangeToViewport,
   viewportToDateRange,
-  relativeOptions,
+  relativeViewportOptions,
   getViewportDateRelativeToAbsolute,
-} from './viewportAdapter';
+} from './viewportAdapters';
 
 describe('dateRangeToViewport', () => {
   it('can convert a relative date range option to the correct viewport', () => {
-    expect(dateRangeToViewport(relativeOptions[0])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[0])).toEqual({
       duration: '1 minute',
     });
 
-    expect(dateRangeToViewport(relativeOptions[1])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[1])).toEqual({
       duration: '5 minute',
     });
 
-    expect(dateRangeToViewport(relativeOptions[2])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[2])).toEqual({
       duration: '10 minute',
     });
 
-    expect(dateRangeToViewport(relativeOptions[3])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[3])).toEqual({
       duration: '30 minute',
     });
 
-    expect(dateRangeToViewport(relativeOptions[4])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[4])).toEqual({
       duration: '1 hour',
     });
 
-    expect(dateRangeToViewport(relativeOptions[5])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[5])).toEqual({
       duration: '1 day',
     });
 
-    expect(dateRangeToViewport(relativeOptions[6])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[6])).toEqual({
       duration: '7 day',
     });
 
-    expect(dateRangeToViewport(relativeOptions[7])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[7])).toEqual({
       duration: '30 day',
     });
 
-    expect(dateRangeToViewport(relativeOptions[8])).toEqual({
+    expect(dateRangeToViewport(relativeViewportOptions[8])).toEqual({
       duration: '90 day',
     });
   });
@@ -90,23 +90,27 @@ describe('dateRangeToViewport', () => {
 describe('viewportToDateRange', () => {
   it('can convert a relative duration to a date range', () => {
     expect(viewportToDateRange({ duration: '1 minute' })).toEqual(
-      relativeOptions[0]
+      relativeViewportOptions[0]
     );
 
-    expect(viewportToDateRange({ duration: '1m' })).toEqual(relativeOptions[0]);
+    expect(viewportToDateRange({ duration: '1m' })).toEqual(
+      relativeViewportOptions[0]
+    );
 
     expect(viewportToDateRange({ duration: '5 minute' })).toEqual(
-      relativeOptions[1]
+      relativeViewportOptions[1]
     );
 
-    expect(viewportToDateRange({ duration: '5m' })).toEqual(relativeOptions[1]);
+    expect(viewportToDateRange({ duration: '5m' })).toEqual(
+      relativeViewportOptions[1]
+    );
 
     expect(viewportToDateRange({ duration: '10 minute' })).toEqual(
-      relativeOptions[2]
+      relativeViewportOptions[2]
     );
 
     expect(viewportToDateRange({ duration: '10m' })).toEqual(
-      relativeOptions[2]
+      relativeViewportOptions[2]
     );
 
     expect(viewportToDateRange({ duration: '1m 60s' })).toEqual({

packages/react-components/src/components/time-sync/rangeValidator.tsx packages/core-util/src/sdks/rangeValidator.ts

@@ -17,7 +17,7 @@ const relativeOption = (
   type: 'relative',
 });
 
-export const relativeOptions: DateRangePickerProps.RelativeOption[] = [
+export const relativeViewportOptions: DateRangePickerProps.RelativeOption[] = [
   relativeOption(1, 'minute'),
   relativeOption(5, 'minute'),
   relativeOption(10, 'minute'),
@@ -121,7 +121,7 @@ export const viewportToDateRange = (
     const key = relativeOptionKey(amount, unit);
     return {
       // If key is undefined, cloudscape will default to selecting the custom option.
-      key: relativeOptions.find((ro) => ro.key === key)?.key,
+      key: relativeViewportOptions.find((ro) => ro.key === key)?.key,
       amount,
       unit,
       type: 'relative',

packages/react-components/src/components/time-sync/viewportAdapter.spec.ts packages/core-util/src/sdks/viewportAdapters.spec.ts

@@ -11,6 +11,7 @@ import type { DashboardState } from '~/store/state';
 import { DashboardSave } from '~/types';
 import DashboardSettings from './settings';
 import CustomOrangeButton from '../customOrangeButton';
+import { parseViewport } from '~/util/parseViewport';
 
 const DEFAULT_VIEWPORT = { duration: '10m' };
 
@@ -50,6 +51,7 @@ const Actions: React.FC<ActionsProps> = ({
           significantDigits,
         },
         ...dashboardConfiguration,
+        defaultViewport: parseViewport(dashboardConfiguration.defaultViewport),
         viewport: viewport ?? DEFAULT_VIEWPORT,
       },
       readOnly ? 'preview' : 'edit'

packages/react-components/src/components/time-sync/viewportAdapter.tsx packages/core-util/src/sdks/viewportAdapters.ts

@@ -7,6 +7,7 @@ import { useGridSettings } from './useGridSettings';
 import { numberFromDetail } from '~/util/inputEvent';
 import DecimalPlaces from '../decimalPlaces';
 import { isNumeric } from '@iot-app-kit/core-util';
+import { DefaultViewport } from '../defaultViewport';
 
 export type DashboardSettingsProps = {
   onClose: () => void;
@@ -44,6 +45,7 @@ const DashboardSettings: React.FC<DashboardSettingsProps> = ({
     >
       <Box>
         <SpaceBetween direction='vertical' size='l'>
+          <DefaultViewport />
           <DecimalPlaces
             showFormFieldLabel={true}
             onSignificantDigitsChange={onSignificantDigitsChange}

packages/dashboard/src/components/actions/index.tsx

@@ -47,7 +47,7 @@ const Dashboard: React.FC<DashboardProperties> = ({
   name,
 }) => {
   useDashboardPlugins();
-  useDashboardViewport(dashboardConfiguration.viewport);
+  useDashboardViewport(dashboardConfiguration.defaultViewport);
 
   const readOnly = initialViewMode && initialViewMode === 'preview';
   return (
@@ -77,7 +77,7 @@ const Dashboard: React.FC<DashboardProperties> = ({
                   editable={true}
                   name={name}
                   propertiesPanel={<PropertiesPanel />}
-                  viewport={dashboardConfiguration.viewport}
+                  defaultViewport={dashboardConfiguration.defaultViewport}
                 />
               </DndProvider>
             </Provider>

packages/dashboard/src/components/actions/settings.tsx

@@ -0,0 +1,7 @@
+export const messages = {
+  title: 'Default viewport',
+  dateRangeIncompleteError:
+    'The selected date range is incomplete. Select a start and end date for the date range.',
+  dateRangeInvalidError:
+    'The selected date range is invalid. The start date must be before the end date.',
+};

packages/dashboard/src/components/dashboard/index.tsx

@@ -0,0 +1,59 @@
+import { DateRangePicker, FormField } from '@cloudscape-design/components';
+import {
+  relativeViewportOptions,
+  viewportToDateRange,
+  dateRangeToViewport,
+  rangeValidator,
+} from '@iot-app-kit/core-util';
+import { Viewport } from '@iot-app-kit/core';
+import React, { useEffect } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { messages } from './constants';
+import { useDefaultViewport } from './useDefaultViewport';
+
+export const DefaultViewport = () => {
+  const { defaultViewport, onUpdateDefaultViewport } = useDefaultViewport();
+
+  const { control, setValue, clearErrors } = useForm<{
+    defaultViewport: Viewport | undefined;
+  }>({
+    mode: 'onChange',
+  });
+
+  useEffect(() => {
+    setValue('defaultViewport', defaultViewport);
+    clearErrors();
+  }, [clearErrors, setValue, defaultViewport]);
+
+  const { title, dateRangeIncompleteError, dateRangeInvalidError } = messages;
+
+  return (
+    <Controller
+      control={control}
+      name='defaultViewport'
+      render={({ field, fieldState }) => {
+        return (
+          <FormField label={title} errorText={fieldState.error?.message}>
+            <DateRangePicker
+              expandToViewport={true}
+              onChange={({ detail: { value } }) => {
+                if (!value) return;
+                field.onChange(value);
+                onUpdateDefaultViewport(
+                  JSON.stringify(dateRangeToViewport(value))
+                );
+              }}
+              value={viewportToDateRange(defaultViewport)}
+              showClearButton={false}
+              relativeOptions={relativeViewportOptions}
+              isValidRange={rangeValidator({
+                dateRangeIncompleteError,
+                dateRangeInvalidError,
+              })}
+            />
+          </FormField>
+        );
+      }}
+    />
+  );
+};

packages/dashboard/src/components/defaultViewport/constants.ts

@@ -0,0 +1 @@
+export { DefaultViewport } from './defaultViewport';

packages/dashboard/src/components/defaultViewport/defaultViewport.tsx

@@ -0,0 +1,25 @@
+import { useDispatch, useSelector } from 'react-redux';
+import { onUpdateDefaultViewportAction } from '~/store/actions/updateDefaultViewport';
+import { DashboardState } from '~/store/state';
+import { parseViewport } from '~/util/parseViewport';
+
+export const useDefaultViewport = () => {
+  const dispatch = useDispatch();
+
+  const { defaultViewport } = useSelector(
+    (state: DashboardState) => state.dashboardConfiguration
+  );
+
+  const onUpdateDefaultViewport = (updatedDefaultViewport?: string) => {
+    dispatch(
+      onUpdateDefaultViewportAction({
+        defaultViewport: updatedDefaultViewport,
+      })
+    );
+  };
+
+  return {
+    defaultViewport: parseViewport(defaultViewport),
+    onUpdateDefaultViewport,
+  };
+};

packages/dashboard/src/components/defaultViewport/index.ts

@@ -10,6 +10,8 @@ import {
   spaceScaledXxxs,
 } from '@cloudscape-design/design-tokens';
 import { ContentLayout } from '@cloudscape-design/components';
+import messages from '@cloudscape-design/components/i18n/messages/all.all';
+import { I18nProvider } from '@cloudscape-design/components/i18n';
 
 import { selectedRect } from '~/util/select';
 
@@ -65,7 +67,7 @@ type InternalDashboardProperties = {
   editable?: boolean;
   name?: string;
   propertiesPanel?: ReactNode;
-  viewport?: Viewport;
+  defaultViewport?: Viewport;
 };
 
 const defaultUserSelect: CSSProperties = { userSelect: 'initial' };
@@ -76,7 +78,7 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
   editable,
   name,
   propertiesPanel,
-  viewport,
+  defaultViewport,
 }) => {
   const { iotSiteWiseClient, iotTwinMakerClient } = useClients();
 
@@ -384,36 +386,38 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({
   );
 
   return (
-    <TimeSync
-      initialViewport={viewport ?? { duration: '5m' }}
-      group='dashboard-timesync'
-    >
-      {readOnly ? ReadOnlyComponent : EditComponent}
-      <ConfirmDeleteModal
-        visible={visible}
-        headerTitle={`Delete selected widget${
-          selectedWidgets.length > 1 ? 's' : ''
-        }?`}
-        cancelTitle='Cancel'
-        submitTitle='Delete'
-        description={
-          <Box>
-            <Box variant='p'>
-              {`Are you sure you want to delete the selected widget${
-                selectedWidgets.length > 1 ? 's' : ''
-              }? You'll lose all the progress you made to the
+    <I18nProvider locale='en' messages={[messages]}>
+      <TimeSync
+        initialViewport={defaultViewport ?? { duration: '5m' }}
+        group='dashboard-timesync'
+      >
+        {readOnly ? ReadOnlyComponent : EditComponent}
+        <ConfirmDeleteModal
+          visible={visible}
+          headerTitle={`Delete selected widget${
+            selectedWidgets.length > 1 ? 's' : ''
+          }?`}
+          cancelTitle='Cancel'
+          submitTitle='Delete'
+          description={
+            <Box>
+              <Box variant='p'>
+                {`Are you sure you want to delete the selected widget${
+                  selectedWidgets.length > 1 ? 's' : ''
+                }? You'll lose all the progress you made to the
                         widget${selectedWidgets.length > 1 ? 's' : ''}`}
+              </Box>
+              <Box variant='p' padding={{ top: 'm' }}>
+                You cannot undo this action.
+              </Box>
             </Box>
-            <Box variant='p' padding={{ top: 'm' }}>
-              You cannot undo this action.
-            </Box>
-          </Box>
-        }
-        handleDismiss={() => setVisible(false)}
-        handleCancel={() => setVisible(false)}
-        handleSubmit={onDelete}
-      />
-    </TimeSync>
+          }
+          handleDismiss={() => setVisible(false)}
+          handleCancel={() => setVisible(false)}
+          handleSubmit={onDelete}
+        />
+      </TimeSync>
+    </I18nProvider>
   );
 };
 

packages/dashboard/src/components/defaultViewport/useDefaultViewport.ts

@@ -17,6 +17,7 @@ import type { SendWidgetsToBackAction } from './sendToBack';
 import type { UpdateWidgetsAction } from './updateWidget';
 import type { UpdateSignificantDigitsAction } from './updateSignificantDigits';
 import { UpdateRefreshRateAction } from './changeRefreshRate';
+import { UpdateDefaultViewportAction } from './updateDefaultViewport';
 
 export * from './createWidget';
 export * from './deleteWidgets';
@@ -32,6 +33,7 @@ export * from './changeDashboardGrid';
 export * from './toggleReadOnly';
 export * from './updateSignificantDigits';
 export * from './changeRefreshRate';
+export * from './updateDefaultViewport';
 
 export type DashboardAction =
   | CreateWidgetsAction
@@ -50,4 +52,5 @@ export type DashboardAction =
   | ChangeDashboardCellSizeAction
   | ChangeDashboardGridEnabledAction
   | UpdateSignificantDigitsAction
-  | UpdateRefreshRateAction;
+  | UpdateRefreshRateAction
+  | UpdateDefaultViewportAction;