fix(dashboard): refactor widget type

awslabs · Mar 4, 2023 · fc3e41e · fc3e41e
1 parent 0e8c167
commit fc3e41e
Show file tree

Hide file tree

Showing 143 changed files with 2,890 additions and 1,920 deletions.
diff --git a/.github/workflows/ui-tests.yml b/.github/workflows/ui-tests.yml
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dashboard/src/components/actions/index.tsx b/packages/dashboard/src/components/actions/index.tsx
@@ -13,15 +13,13 @@ export type ActionsProps = {
   readOnly: boolean;
   hasEditPermission: boolean;
   dashboardConfiguration: DashboardState['dashboardConfiguration'];
-  assetsDescriptionMap: DashboardState['assetsDescriptionMap'];
   onSave?: (dashboard: SaveableDashboard) => void;
 };
 
 const Actions: React.FC<ActionsProps> = ({
   grid,
   dashboardConfiguration,
   messageOverrides,
-  assetsDescriptionMap,
   hasEditPermission,
   readOnly,
   onSave,
@@ -34,7 +32,6 @@ const Actions: React.FC<ActionsProps> = ({
     onSave({
       grid: { height, width, cellSize, stretchToFit },
       dashboardConfiguration,
-      assetsDescriptionMap,
     });
   };
 

diff --git a/packages/dashboard/src/components/dashboard/index.tsx b/packages/dashboard/src/components/dashboard/index.tsx
@@ -16,6 +16,11 @@ import { ClientContext } from './clientContext';
 
 import '@cloudscape-design/global-styles/index.css';
 import '../../styles/variables.css';
+import { DataSourceProvider } from '~/customization/hooks/useDataSource';
+import { setupDashboardPlugins } from '~/customization/api';
+import plugins from '~/customization/pluginsConfiguration';
+
+setupDashboardPlugins(plugins);
 
 export type DashboardProps = {
   messageOverrides?: RecursivePartial<DashboardMessages>;
@@ -43,12 +48,14 @@ const Dashboard: React.FC<DashboardProps> = ({
             enableKeyboardEvents: true,
           }}
         >
-          <InternalDashboard
-            query={query}
-            onSave={onSave}
-            hasEditPermission={hasEditPermission}
-            messageOverrides={merge(messageOverrides, DefaultDashboardMessages)}
-          />
+          <DataSourceProvider query={query}>
+            <InternalDashboard
+              query={query}
+              onSave={onSave}
+              hasEditPermission={hasEditPermission}
+              messageOverrides={merge(messageOverrides, DefaultDashboardMessages)}
+            />
+          </DataSourceProvider>
         </DndProvider>
       </Provider>
     </ClientContext.Provider>

diff --git a/packages/dashboard/src/components/dragLayer/components/widget.tsx b/packages/dashboard/src/components/dragLayer/components/widget.tsx
@@ -1,6 +1,5 @@
 import React, { CSSProperties } from 'react';
 
-import { ComponentTag } from '~/types';
 import DynamicWidgetComponent, { getDragLayerProps } from '../../widgets/dynamicWidget';
 
 import { DashboardState } from '~/store/state';
@@ -11,12 +10,11 @@ import './widget.css';
 import { DashboardMessages } from '~/messages';
 
 export type DragLayerWidgetProps = {
-  componentTag: ComponentTag;
+  componentTag: string;
   messageOverrides: DashboardMessages;
 };
 
 const DragLayerWidget: React.FC<DragLayerWidgetProps> = ({ componentTag, messageOverrides }) => {
-  const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
   const grid = useSelector((state: DashboardState) => state.grid);
 
   const widgetPreset = widgetCreator(grid)(componentTag);
@@ -31,7 +29,7 @@ const DragLayerWidget: React.FC<DragLayerWidgetProps> = ({ componentTag, message
   return (
     <div style={styles} className='drag-layer-widget'>
       <DynamicWidgetComponent
-        {...getDragLayerProps({ widget: widgetPreset, viewport, widgetsMessages: messageOverrides.widgets })}
+        {...getDragLayerProps({ widget: widgetPreset, widgetsMessages: messageOverrides.widgets })}
       />
     </div>
   );

diff --git a/packages/dashboard/src/components/grid/index.tsx b/packages/dashboard/src/components/grid/index.tsx
@@ -2,7 +2,7 @@ import React, { PointerEventHandler, useEffect, useState } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import { useKeyPress } from '~/hooks/useKeyPress';
 import { DashboardState } from '~/store/state';
-import { ComponentTag, MouseClick, Position } from '~/types';
+import { MouseClick, Position } from '~/types';
 import { ItemTypes } from '../dragLayer/itemTypes';
 import { gestureable } from '../internalDashboard/gestures/determineTargetGestures';
 import { ComponentPaletteDraggable } from '../palette/types';
@@ -26,7 +26,7 @@ export type PointClickEvent = {
 export type DropEvent = {
   position: Position;
   item: {
-    componentTag: ComponentTag;
+    componentTag: string;
   };
 };
 

diff --git a/packages/dashboard/src/components/internalDashboard/gestures/index.ts b/packages/dashboard/src/components/internalDashboard/gestures/index.ts
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DashboardState } from '~/store/state';
-import { Widget } from '~/types';
+import { AnyWidget } from '~/types';
 import { DragEvent, PointClickEvent } from '../../grid';
 import { determineTargetGestures } from './determineTargetGestures';
 import { Gesture } from './types';
@@ -10,7 +10,7 @@ import { useSelectionGestures } from './useSelection';
 
 type GestureHooksProps = {
   dashboardConfiguration: DashboardState['dashboardConfiguration'];
-  selectedWidgets: Widget[];
+  selectedWidgets: AnyWidget[];
   cellSize: DashboardState['grid']['cellSize'];
 };
 

diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useMove.ts b/packages/dashboard/src/components/internalDashboard/gestures/useMove.ts
@@ -2,14 +2,14 @@ import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { onMoveWidgetsAction } from '~/store/actions';
 import { DashboardState } from '~/store/state';
-import { Position, Widget } from '~/types';
+import { Position, AnyWidget } from '~/types';
 import { toGridPosition } from '~/util/position';
 import { DragEvent } from '../../grid';
 import { Gesture } from './types';
 
 type MoveHooksProps = {
   setActiveGesture: React.Dispatch<React.SetStateAction<Gesture>>;
-  selectedWidgets: Widget[];
+  selectedWidgets: AnyWidget[];
   cellSize: DashboardState['grid']['cellSize'];
 };
 

diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts b/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts
@@ -2,14 +2,14 @@ import React, { useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { Anchor, onResizeWidgetsAction } from '~/store/actions';
 import { DashboardState } from '~/store/state';
-import { Position, Widget } from '~/types';
+import { Position, AnyWidget } from '~/types';
 import { toGridPosition } from '~/util/position';
 import { DragEvent } from '../../grid';
 import { Gesture } from './types';
 
 type ResizeHooksProps = {
   setActiveGesture: React.Dispatch<React.SetStateAction<Gesture>>;
-  selectedWidgets: Widget[];
+  selectedWidgets: AnyWidget[];
   cellSize: DashboardState['grid']['cellSize'];
 };
 

diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts b/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts
@@ -2,7 +2,7 @@ import React, { useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import { onSelectWidgetsAction } from '~/store/actions';
 import { DashboardState } from '~/store/state';
-import { Position, Widget, Selection } from '~/types';
+import { Position, AnyWidget, Selection } from '~/types';
 import { getSelectedWidgets, pointSelect, selectedRect } from '~/util/select';
 import { DragEvent } from '../../grid';
 import { Gesture } from './types';
@@ -15,7 +15,7 @@ type SelectionHooksProps = {
 
 export const useSelectionGestures = ({ setActiveGesture, dashboardConfiguration, cellSize }: SelectionHooksProps) => {
   const dispatch = useDispatch();
-  const selectWidgets = (widgets: Widget[], union: boolean) => {
+  const selectWidgets = (widgets: AnyWidget[], union: boolean) => {
     dispatch(
       onSelectWidgetsAction({
         widgets,

diff --git a/packages/dashboard/src/components/internalDashboard/index.test.tsx b/packages/dashboard/src/components/internalDashboard/index.test.tsx
@@ -61,7 +61,6 @@ describe('InternalDashboard', () => {
         widgets: [],
         viewport: { duration: '5m' },
       },
-      assetsDescriptionMap: {},
     };
     const onSave = jest.fn(noop);
 

diff --git a/packages/dashboard/src/components/internalDashboard/index.tsx b/packages/dashboard/src/components/internalDashboard/index.tsx
@@ -4,7 +4,7 @@ import Box from '@cloudscape-design/components/box';
 import { SiteWiseQuery } from '@iot-app-kit/source-iotsitewise';
 import { WebglContext } from '@iot-app-kit/react-components';
 
-import { Position, Widget } from '~/types';
+import { AnyWidget, Position } from '~/types';
 import { selectedRect } from '~/util/select';
 import { DashboardMessages } from '~/messages';
 
@@ -37,12 +37,13 @@ import {
 import { DashboardState, SaveableDashboard } from '~/store/state';
 import { widgetCreator } from '~/store/actions/createWidget/presets';
 
-import './index.css';
-import '@iot-app-kit/components/styles.css';
 import { toGridPosition } from '~/util/position';
 import { useGestures } from './gestures';
 import { useKeyboardShortcuts } from './keyboardShortcuts';
 
+import '@iot-app-kit/components/styles.css';
+import './index.css';
+
 type InternalDashboardProps = {
   messageOverrides: DashboardMessages;
   hasEditPermission: boolean;
@@ -60,7 +61,6 @@ const InternalDashboard: React.FC<InternalDashboardProps> = ({
    * Store variables
    */
   const dashboardConfiguration = useSelector((state: DashboardState) => state.dashboardConfiguration);
-  const assetsDescriptionMap = useSelector((state: DashboardState) => state.assetsDescriptionMap);
   const viewport = useSelector((state: DashboardState) => state.dashboardConfiguration.viewport);
   const grid = useSelector((state: DashboardState) => state.grid);
   const cellSize = useSelector((state: DashboardState) => state.grid.cellSize);
@@ -71,7 +71,7 @@ const InternalDashboard: React.FC<InternalDashboardProps> = ({
   const [viewFrame, setViewFrameElement] = useState<HTMLDivElement | undefined>(undefined);
 
   const dispatch = useDispatch();
-  const createWidgets = (widgets: Widget[]) =>
+  const createWidgets = (widgets: AnyWidget[]) =>
     dispatch(
       onCreateWidgetsAction({
         widgets,
@@ -132,7 +132,7 @@ const InternalDashboard: React.FC<InternalDashboardProps> = ({
 
     const { x, y } = toGridPosition(position, cellSize);
 
-    const widget: Widget = {
+    const widget: AnyWidget = {
       ...widgetPresets,
       x: Math.floor(x),
       y: Math.floor(y),
@@ -192,7 +192,6 @@ const InternalDashboard: React.FC<InternalDashboardProps> = ({
             onSave={onSave}
             dashboardConfiguration={dashboardConfiguration}
             grid={grid}
-            assetsDescriptionMap={assetsDescriptionMap}
           />
         </div>
         <div className='iot-dashboard-grid iot-dashboard-grid-with-overlay'>
@@ -218,7 +217,6 @@ const InternalDashboard: React.FC<InternalDashboardProps> = ({
           onSave={onSave}
           dashboardConfiguration={dashboardConfiguration}
           grid={grid}
-          assetsDescriptionMap={assetsDescriptionMap}
         />
       </div>
       <div className='iot-dashboard-panes-area'>

diff --git a/packages/dashboard/src/components/internalDashboard/useLayers.spec.tsx b/packages/dashboard/src/components/internalDashboard/useLayers.spec.tsx
@@ -19,6 +19,7 @@ it('has default layers', () => {
   expect(result.current.selectionBoxLayer).toBeGreaterThan(0);
   expect(result.current.userSelectionLayer).toBeGreaterThan(0);
   expect(result.current.contextMenuLayer).toBeGreaterThan(0);
+  expect(result.current.selectionGestureLayer).toBeLessThan(0);
 
   expect(result.current.userSelectionLayer).toBeGreaterThan(result.current.selectionBoxLayer);
   expect(result.current.contextMenuLayer).toBeGreaterThan(result.current.userSelectionLayer);
@@ -41,6 +42,7 @@ it('has updates the layers to be greater than the highest widget in the dashboar
   expect(result.current.selectionBoxLayer).toBeGreaterThan(zTest);
   expect(result.current.userSelectionLayer).toBeGreaterThan(zTest);
   expect(result.current.contextMenuLayer).toBeGreaterThan(zTest);
+  expect(result.current.selectionGestureLayer).toBeLessThan(zTest);
 
   expect(result.current.userSelectionLayer).toBeGreaterThan(result.current.selectionBoxLayer);
   expect(result.current.contextMenuLayer).toBeGreaterThan(result.current.userSelectionLayer);

diff --git a/packages/dashboard/src/components/internalDashboard/useLayers.ts b/packages/dashboard/src/components/internalDashboard/useLayers.ts
@@ -1,27 +1,32 @@
 import { useSelector } from 'react-redux';
 import max from 'lodash/max';
+import min from 'lodash/min';
 
 import { DashboardState } from '~/store/state';
 
 type Layers = {
   userSelectionLayer: number;
   selectionBoxLayer: number;
   contextMenuLayer: number;
+  selectionGestureLayer: number;
 };
 const layers: Layers = {
   userSelectionLayer: 2,
   selectionBoxLayer: 1,
   contextMenuLayer: 3,
+  selectionGestureLayer: 1,
 };
 
 export const useLayers = (): Layers => {
   const widgets = useSelector((state: DashboardState) => state.dashboardConfiguration.widgets);
 
-  const z = max(widgets.map(({ z }) => z)) ?? 0;
+  const top = max(widgets.map(({ z }) => z)) ?? 0;
+  const bottom = min(widgets.map(({ z }) => z)) ?? 0;
 
   return {
-    userSelectionLayer: z + layers.userSelectionLayer,
-    selectionBoxLayer: z + layers.selectionBoxLayer,
-    contextMenuLayer: z + layers.contextMenuLayer,
+    userSelectionLayer: top + layers.userSelectionLayer,
+    selectionBoxLayer: top + layers.selectionBoxLayer,
+    contextMenuLayer: top + layers.contextMenuLayer,
+    selectionGestureLayer: bottom - layers.selectionGestureLayer,
   };
 };
diff --git a/packages/dashboard/src/components/palette/component.tsx b/packages/dashboard/src/components/palette/component.tsx
@@ -2,18 +2,19 @@ import React, { useRef } from 'react';
 import { useDrag } from 'react-dnd';
 
 import { ItemTypes } from '../dragLayer/itemTypes';
-import { ComponentTag } from '~/types';
 import { ComponentPaletteDraggable } from './types';
+
 import PaletteComponentIcon from './icons';
 
 import './component.css';
 
 type PaletteComponentProps = {
   name: string;
-  componentTag: ComponentTag;
+  componentTag: string;
+  IconComponent: React.FC;
 };
 
-const PaletteComponent: React.FC<PaletteComponentProps> = ({ componentTag, name }) => {
+const PaletteComponent: React.FC<PaletteComponentProps> = ({ componentTag, name, IconComponent }) => {
   const node = useRef(null);
 
   const [collected, dragRef] = useDrag(
@@ -38,7 +39,7 @@ const PaletteComponent: React.FC<PaletteComponentProps> = ({ componentTag, name
   return (
     <div ref={node} className={`palette-component ${isDragging ? 'palette-component-dragging' : ''}`}>
       <div ref={dragRef} className='palette-component-draggable'>
-        <PaletteComponentIcon icon={componentTag} />
+        <PaletteComponentIcon Icon={IconComponent} />
       </div>
       <h1 className='palette-component-name'>{name}</h1>
     </div>