From bcf37eac24331651a8a2665bc7581013a7e6439d Mon Sep 17 00:00:00 2001 From: Bill Li Date: Fri, 10 Mar 2023 13:02:50 -0500 Subject: [PATCH] chore(dashboard): remove AnyWidget type use default Widget type instead --- .../components/internalDashboard/gestures/index.ts | 4 ++-- .../internalDashboard/gestures/useMove.ts | 4 ++-- .../internalDashboard/gestures/useResize.ts | 6 +++--- .../internalDashboard/gestures/useSelection.ts | 6 +++--- .../src/components/internalDashboard/index.tsx | 8 ++++---- .../sections/axisSettingSection/index.tsx | 4 ++-- .../sections/baseSettingSection/index.tsx | 14 +++++++------- .../sections/propertiesAlarmSection/index.tsx | 4 ++-- .../thresholdsSection/thresholdsSection.tsx | 4 ++-- .../components/sidePanel/utils/useWidgetLense.ts | 4 ++-- .../src/components/widgets/dynamicWidget.tsx | 6 +++--- packages/dashboard/src/components/widgets/list.tsx | 4 ++-- .../src/components/widgets/selectionBox.tsx | 4 ++-- .../dashboard/src/components/widgets/widget.tsx | 4 ++-- packages/dashboard/src/customization/api.ts | 12 ++++++------ .../src/customization/hooks/useIsSelected.ts | 4 ++-- .../src/customization/hooks/useWidgetActions.ts | 4 ++-- .../customization/widgetPropertiesGeneratorMap.ts | 13 +++++++------ .../src/store/actions/bringToFront/index.spec.ts | 6 +++--- .../src/store/actions/copyWidgets/index.spec.ts | 4 ++-- .../src/store/actions/copyWidgets/index.ts | 5 +++-- .../src/store/actions/createWidget/index.ts | 5 +++-- .../store/actions/createWidget/presets/index.ts | 4 ++-- .../src/store/actions/deleteWidgets/index.spec.ts | 6 +++--- .../src/store/actions/deleteWidgets/index.ts | 5 +++-- .../src/store/actions/moveWidgets/index.spec.ts | 6 +++--- .../src/store/actions/moveWidgets/index.ts | 5 +++-- .../src/store/actions/pasteWidgets/index.spec.ts | 6 +++--- .../src/store/actions/resizeWidgets/index.spec.ts | 8 +++----- .../src/store/actions/resizeWidgets/index.ts | 9 +++++---- .../src/store/actions/selectWidgets/index.ts | 5 +++-- .../src/store/actions/sendToBack/index.spec.ts | 6 +++--- .../src/store/actions/toggleReadOnly/index.spec.ts | 4 ++-- .../src/store/actions/updateWidget/index.spec.ts | 8 ++++---- .../src/store/actions/updateWidget/index.ts | 5 +++-- packages/dashboard/src/store/state.ts | 6 +++--- packages/dashboard/src/types.ts | 8 ++------ .../src/util/constrainWidgetPositionToGrid.ts | 4 ++-- packages/dashboard/src/util/getSelectionBox.ts | 4 ++-- packages/dashboard/src/util/select.ts | 4 ++-- packages/dashboard/src/util/trimWidgetPosition.ts | 4 ++-- packages/dashboard/testing/mocks.ts | 8 ++++---- 42 files changed, 123 insertions(+), 121 deletions(-) diff --git a/packages/dashboard/src/components/internalDashboard/gestures/index.ts b/packages/dashboard/src/components/internalDashboard/gestures/index.ts index e860e657c..9398e2788 100644 --- 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 { AnyWidget } from '~/types'; +import { Widget } 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: AnyWidget[]; + selectedWidgets: Widget[]; cellSize: DashboardState['grid']['cellSize']; }; diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useMove.ts b/packages/dashboard/src/components/internalDashboard/gestures/useMove.ts index bdc4886e8..26b065d6b 100644 --- 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, AnyWidget } from '~/types'; +import { Position, Widget } from '~/types'; import { toGridPosition } from '~/util/position'; import { DragEvent } from '../../grid'; import { Gesture } from './types'; type MoveHooksProps = { setActiveGesture: React.Dispatch>; - selectedWidgets: AnyWidget[]; + selectedWidgets: Widget[]; cellSize: DashboardState['grid']['cellSize']; }; diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts b/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts index daebfa1fc..c6d3e1ed5 100644 --- a/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts +++ b/packages/dashboard/src/components/internalDashboard/gestures/useResize.ts @@ -1,15 +1,15 @@ -import React, { useState, useCallback } from 'react'; +import React, { useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; import { Anchor, onResizeWidgetsAction } from '~/store/actions'; import { DashboardState } from '~/store/state'; -import { Position, AnyWidget } from '~/types'; +import { Position, Widget } from '~/types'; import { toGridPosition } from '~/util/position'; import { DragEvent } from '../../grid'; import { Gesture } from './types'; type ResizeHooksProps = { setActiveGesture: React.Dispatch>; - selectedWidgets: AnyWidget[]; + selectedWidgets: Widget[]; cellSize: DashboardState['grid']['cellSize']; }; diff --git a/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts b/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts index 9734338ea..386625b24 100644 --- a/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts +++ b/packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts @@ -1,8 +1,8 @@ -import React, { useState, useCallback } from 'react'; +import React, { useCallback, useState } from 'react'; import { useDispatch } from 'react-redux'; import { onSelectWidgetsAction } from '~/store/actions'; import { DashboardState } from '~/store/state'; -import { Position, AnyWidget, Selection } from '~/types'; +import { Position, Selection, Widget } 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: AnyWidget[], union: boolean) => { + const selectWidgets = (widgets: Widget[], union: boolean) => { dispatch( onSelectWidgetsAction({ widgets, diff --git a/packages/dashboard/src/components/internalDashboard/index.tsx b/packages/dashboard/src/components/internalDashboard/index.tsx index 180a88884..73f293e9c 100644 --- 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 { AnyWidget, Position } from '~/types'; +import { Position, Widget } from '~/types'; import { selectedRect } from '~/util/select'; import { DashboardMessages } from '~/messages'; @@ -30,9 +30,9 @@ import { onBringWidgetsToFrontAction, onCopyWidgetsAction, onCreateWidgetsAction, + onDeleteWidgetsAction, onPasteWidgetsAction, onSendWidgetsToBackAction, - onDeleteWidgetsAction, } from '~/store/actions'; import { DashboardState, SaveableDashboard } from '~/store/state'; import { widgetCreator } from '~/store/actions/createWidget/presets'; @@ -71,7 +71,7 @@ const InternalDashboard: React.FC = ({ const [viewFrame, setViewFrameElement] = useState(undefined); const dispatch = useDispatch(); - const createWidgets = (widgets: AnyWidget[]) => + const createWidgets = (widgets: Widget[]) => dispatch( onCreateWidgetsAction({ widgets, @@ -132,7 +132,7 @@ const InternalDashboard: React.FC = ({ const { x, y } = toGridPosition(position, cellSize); - const widget: AnyWidget = { + const widget: Widget = { ...widgetPresets, x: Math.floor(x), y: Math.floor(y), diff --git a/packages/dashboard/src/components/sidePanel/sections/axisSettingSection/index.tsx b/packages/dashboard/src/components/sidePanel/sections/axisSettingSection/index.tsx index a9a7a8cc4..fbc73b7da 100644 --- a/packages/dashboard/src/components/sidePanel/sections/axisSettingSection/index.tsx +++ b/packages/dashboard/src/components/sidePanel/sections/axisSettingSection/index.tsx @@ -10,13 +10,13 @@ import { } from '@cloudscape-design/components'; import ExpandableSectionHeader from '../../shared/expandableSectionHeader'; import { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { useWidgetLense } from '../../utils/useWidgetLense'; import { BarChartWidget, LineChartWidget, ScatterChartWidget } from '~/customization/widgets/types'; import { merge } from 'lodash'; import { AxisSettings } from '../../../../customization/settings'; -export const isAxisSettingsSupported = (widget: AnyWidget): boolean => +export const isAxisSettingsSupported = (widget: Widget): boolean => ['iot-line', 'iot-scatter', 'iot-bar'].some((t) => t === widget.type); export type AxisWidget = LineChartWidget | ScatterChartWidget | BarChartWidget; diff --git a/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx b/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx index c58fa9557..aae950755 100644 --- a/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx +++ b/packages/dashboard/src/components/sidePanel/sections/baseSettingSection/index.tsx @@ -3,7 +3,7 @@ import { BaseChangeDetail } from '@cloudscape-design/components/input/interfaces import { ExpandableSection, Grid, Input } from '@cloudscape-design/components'; import { trimWidgetPosition } from '~/util/trimWidgetPosition'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { useWidgetLense } from '../../utils/useWidgetLense'; const defaultMessages = { @@ -14,23 +14,23 @@ const defaultMessages = { title: 'Size and position', }; -export const BaseSettings: FC = (widget) => { - const [x, updateX] = useWidgetLense( +export const BaseSettings: FC = (widget) => { + const [x, updateX] = useWidgetLense( widget, (w) => w.x, (w, x) => ({ ...w, x }) ); - const [y, updateY] = useWidgetLense( + const [y, updateY] = useWidgetLense( widget, (w) => w.y, (w, y) => ({ ...w, y }) ); - const [width, updateWidth] = useWidgetLense( + const [width, updateWidth] = useWidgetLense( widget, (w) => w.width, (w, width) => ({ ...w, width }) ); - const [height, updateHeight] = useWidgetLense( + const [height, updateHeight] = useWidgetLense( widget, (w) => w.height, (w, height) => ({ ...w, height }) @@ -46,7 +46,7 @@ export const BaseSettings: FC = (widget) => { updateHeight(Math.round(parseFloat(value))); const gridDefinition = [{ colspan: 2 }, { colspan: 4 }, { colspan: 2 }, { colspan: 4 }]; - const formattedValue = trimWidgetPosition({ x, y, width, height } as AnyWidget); + const formattedValue = trimWidgetPosition({ x, y, width, height } as Widget); return ( diff --git a/packages/dashboard/src/components/sidePanel/sections/propertiesAlarmSection/index.tsx b/packages/dashboard/src/components/sidePanel/sections/propertiesAlarmSection/index.tsx index 033b965e8..1b04b4f74 100644 --- a/packages/dashboard/src/components/sidePanel/sections/propertiesAlarmSection/index.tsx +++ b/packages/dashboard/src/components/sidePanel/sections/propertiesAlarmSection/index.tsx @@ -9,9 +9,9 @@ import ExpandableSectionHeader from '../../shared/expandableSectionHeader'; import { PropertyComponent } from './propertyComponent'; import { useWidgetLense } from '../../utils/useWidgetLense'; import { StyleSettingsMap } from '@iot-app-kit/core'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -export const isPropertiesAndAlarmsSupported = (widget: AnyWidget): boolean => +export const isPropertiesAndAlarmsSupported = (widget: Widget): boolean => ['iot-line', 'iot-scatter', 'iot-bar', 'iot-table', 'iot-kpi', 'iot-status'].some((t) => t === widget.type); export type PropertiesAlarmsSectionProps = { diff --git a/packages/dashboard/src/components/sidePanel/sections/thresholdsSection/thresholdsSection.tsx b/packages/dashboard/src/components/sidePanel/sections/thresholdsSection/thresholdsSection.tsx index 9f5a5da73..b3d36f4bd 100644 --- a/packages/dashboard/src/components/sidePanel/sections/thresholdsSection/thresholdsSection.tsx +++ b/packages/dashboard/src/components/sidePanel/sections/thresholdsSection/thresholdsSection.tsx @@ -19,7 +19,7 @@ import { StatusWidget, TableWidget, } from '~/customization/widgets/types'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; export type ThresholdWidget = | KPIWidget @@ -29,7 +29,7 @@ export type ThresholdWidget = | BarChartWidget | TableWidget; -export const isThresholdsSupported = (widget: AnyWidget): boolean => +export const isThresholdsSupported = (widget: Widget): boolean => ['iot-kpi', 'iot-status', 'iot-line', 'iot-scatter', 'iot-bar', 'iot-table'].some((t) => t === widget.type); const widgetsSupportsContainOp: string[] = ['iot-kpi', 'iot-status', 'iot-table']; diff --git a/packages/dashboard/src/components/sidePanel/utils/useWidgetLense.ts b/packages/dashboard/src/components/sidePanel/utils/useWidgetLense.ts index fe623253c..ffe890588 100644 --- a/packages/dashboard/src/components/sidePanel/utils/useWidgetLense.ts +++ b/packages/dashboard/src/components/sidePanel/utils/useWidgetLense.ts @@ -1,8 +1,8 @@ import { useCallback, useMemo } from 'react'; import { useWidgetActions } from '~/customization/hooks/useWidgetActions'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -export const useWidgetLense = ( +export const useWidgetLense = ( widget: W, selector: (widget: W) => T, updater: (widget: W, value: T) => W diff --git a/packages/dashboard/src/components/widgets/dynamicWidget.tsx b/packages/dashboard/src/components/widgets/dynamicWidget.tsx index ae92017d7..45aae81ae 100644 --- a/packages/dashboard/src/components/widgets/dynamicWidget.tsx +++ b/packages/dashboard/src/components/widgets/dynamicWidget.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { WidgetsMessages } from '~/messages'; import { WidgetComponentMap } from '~/customization/widgetComponentMap'; @@ -21,7 +21,7 @@ const IconX: React.FC = () => ( ); export type DynamicWidgetProps = { - widget: AnyWidget; + widget: Widget; widgetsMessages: WidgetsMessages; }; @@ -29,7 +29,7 @@ export const getDragLayerProps = ({ widget, widgetsMessages, }: { - widget: AnyWidget; + widget: Widget; widgetsMessages: WidgetsMessages; }): DynamicWidgetProps => ({ widget, diff --git a/packages/dashboard/src/components/widgets/list.tsx b/packages/dashboard/src/components/widgets/list.tsx index 7f7ee5381..a38343701 100644 --- a/packages/dashboard/src/components/widgets/list.tsx +++ b/packages/dashboard/src/components/widgets/list.tsx @@ -4,7 +4,7 @@ import map from 'lodash/map'; import includes from 'lodash/includes'; import { SiteWiseQuery } from '@iot-app-kit/source-iotsitewise'; -import { AnyWidget, DashboardConfiguration } from '~/types'; +import { DashboardConfiguration, Widget } from '~/types'; import WidgetComponent from './widget'; import SelectionBox from './selectionBox'; import { DashboardMessages } from '~/messages'; @@ -15,7 +15,7 @@ export type WidgetsProps = { readOnly: boolean; query?: SiteWiseQuery; dashboardConfiguration: DashboardConfiguration; - selectedWidgets: AnyWidget[]; + selectedWidgets: Widget[]; cellSize: number; dragEnabled: boolean; messageOverrides: DashboardMessages; diff --git a/packages/dashboard/src/components/widgets/selectionBox.tsx b/packages/dashboard/src/components/widgets/selectionBox.tsx index 0645dd7a4..e80587ae4 100644 --- a/packages/dashboard/src/components/widgets/selectionBox.tsx +++ b/packages/dashboard/src/components/widgets/selectionBox.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import SelectionBoxAnchor from './selectionBoxAnchor'; import { gestureable } from '../internalDashboard/gestures/determineTargetGestures'; import { getSelectionBox } from '~/util/getSelectionBox'; @@ -9,7 +9,7 @@ import './selectionBox.css'; import { useLayers } from '../internalDashboard/useLayers'; export type SelectionBoxProps = { - selectedWidgets: AnyWidget[]; + selectedWidgets: Widget[]; cellSize: number; dragEnabled: boolean; }; diff --git a/packages/dashboard/src/components/widgets/widget.tsx b/packages/dashboard/src/components/widgets/widget.tsx index 05169672e..116ea05f8 100644 --- a/packages/dashboard/src/components/widgets/widget.tsx +++ b/packages/dashboard/src/components/widgets/widget.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { SiteWiseQuery } from '@iot-app-kit/source-iotsitewise'; import { DashboardMessages } from '~/messages'; -import { DashboardConfiguration, AnyWidget } from '~/types'; +import { DashboardConfiguration, Widget } from '~/types'; import { gestureable, idable } from '../internalDashboard/gestures/determineTargetGestures'; import DynamicWidgetComponent from './dynamicWidget'; @@ -14,7 +14,7 @@ export type WidgetProps = { query?: SiteWiseQuery; isSelected: boolean; cellSize: number; - widget: AnyWidget; + widget: Widget; viewport: DashboardConfiguration['viewport']; messageOverrides: DashboardMessages; }; diff --git a/packages/dashboard/src/customization/api.ts b/packages/dashboard/src/customization/api.ts index 6489211e4..e3ec6effa 100644 --- a/packages/dashboard/src/customization/api.ts +++ b/packages/dashboard/src/customization/api.ts @@ -1,26 +1,26 @@ import React from 'react'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { ComponentLibraryComponentMap, ComponentLibraryComponentOrdering } from './componentLibraryComponentMap'; import { WidgetComponentMap } from './widgetComponentMap'; import { WidgetPropertiesGeneratorMap } from './widgetPropertiesGeneratorMap'; -type RenderFunc = (widget: T) => React.ReactElement; +type RenderFunc = (widget: T) => React.ReactElement; -type WidgetRegistrationOptions = { +type WidgetRegistrationOptions = { render: RenderFunc; componentLibrary?: { name: string; icon: React.FC; }; properties?: () => T['properties']; - initialSize?: Pick; + initialSize?: Pick; }; -type RegisterWidget = (type: string, options: WidgetRegistrationOptions) => void; +type RegisterWidget = (type: string, options: WidgetRegistrationOptions) => void; /** * function to register a new widget type in the dashboard */ -export const registerWidget: RegisterWidget = ( +export const registerWidget: RegisterWidget = ( type: string, options: WidgetRegistrationOptions ) => { diff --git a/packages/dashboard/src/customization/hooks/useIsSelected.ts b/packages/dashboard/src/customization/hooks/useIsSelected.ts index 05395456b..6292afc81 100644 --- a/packages/dashboard/src/customization/hooks/useIsSelected.ts +++ b/packages/dashboard/src/customization/hooks/useIsSelected.ts @@ -3,7 +3,7 @@ import includes from 'lodash/includes'; import map from 'lodash/map'; import { DashboardState } from '~/store/state'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { useCallback } from 'react'; /** @@ -12,7 +12,7 @@ import { useCallback } from 'react'; * used to determine if this widget is in the selection * */ -export const useIsSelected = (widget: T) => { +export const useIsSelected = (widget: T) => { const selectedWidgets = useSelector((state: DashboardState) => state.selectedWidgets); const isSelected = useCallback( diff --git a/packages/dashboard/src/customization/hooks/useWidgetActions.ts b/packages/dashboard/src/customization/hooks/useWidgetActions.ts index eb462bdb9..32a6f052c 100644 --- a/packages/dashboard/src/customization/hooks/useWidgetActions.ts +++ b/packages/dashboard/src/customization/hooks/useWidgetActions.ts @@ -1,7 +1,7 @@ import { useDispatch } from 'react-redux'; import { onUpdateWidgetsAction } from '~/store/actions'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; /** * Helper hook that can be exposed to consumers making their own widget components @@ -9,7 +9,7 @@ import { AnyWidget } from '~/types'; * used to update itself in the store * */ -export const useWidgetActions = () => { +export const useWidgetActions = () => { const dispatch = useDispatch(); const update = (widget: T) => diff --git a/packages/dashboard/src/customization/widgetPropertiesGeneratorMap.ts b/packages/dashboard/src/customization/widgetPropertiesGeneratorMap.ts index e1d6d07b4..cb0c6c24d 100644 --- a/packages/dashboard/src/customization/widgetPropertiesGeneratorMap.ts +++ b/packages/dashboard/src/customization/widgetPropertiesGeneratorMap.ts @@ -1,4 +1,4 @@ -import { AnyWidget } from '../types'; +import { Widget } from '~/types'; /** * map of widget type to a generator func to create properties when this widget is dropped into the grid @@ -6,10 +6,11 @@ import { AnyWidget } from '../types'; * also the initial size of that widget in real pixels * */ -export const WidgetPropertiesGeneratorMap: { + +type WidgetPropertiesGenerator = { [key in string]: { - //eslint-disable-next-line - properties?: () => Record; - initialSize?: Pick; + properties?: () => W['properties']; + initialSize?: Pick; }; -} = {}; +}; +export const WidgetPropertiesGeneratorMap: WidgetPropertiesGenerator = {}; diff --git a/packages/dashboard/src/store/actions/bringToFront/index.spec.ts b/packages/dashboard/src/store/actions/bringToFront/index.spec.ts index a7f121227..097ba336d 100644 --- a/packages/dashboard/src/store/actions/bringToFront/index.spec.ts +++ b/packages/dashboard/src/store/actions/bringToFront/index.spec.ts @@ -1,10 +1,10 @@ import { bringWidgetsToFront } from '.'; import { DashboardState, initialState } from '../../state'; -import { MockWidgetFactory, MOCK_KPI_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { MOCK_KPI_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = [], selectedWidgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = [], selectedWidgets: Widget[] = []): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/copyWidgets/index.spec.ts b/packages/dashboard/src/store/actions/copyWidgets/index.spec.ts index d1ea447ce..9de236eea 100644 --- a/packages/dashboard/src/store/actions/copyWidgets/index.spec.ts +++ b/packages/dashboard/src/store/actions/copyWidgets/index.spec.ts @@ -2,9 +2,9 @@ import { copyWidgets, onCopyWidgetsAction } from '.'; import { DashboardState, initialState } from '../../state'; import { MOCK_KPI_WIDGET, MOCK_LINE_CHART_WIDGET, MOCK_SCATTER_CHART_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = [], pasteCounter = 0): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = [], pasteCounter = 0): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/copyWidgets/index.ts b/packages/dashboard/src/store/actions/copyWidgets/index.ts index 1c7ed9c6f..2263615ec 100644 --- a/packages/dashboard/src/store/actions/copyWidgets/index.ts +++ b/packages/dashboard/src/store/actions/copyWidgets/index.ts @@ -2,12 +2,13 @@ import { Action } from 'redux'; import intersectionBy from 'lodash/intersectionBy'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { DashboardState } from '../../state'; type CopyWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; }; + export interface CopyWidgetsAction extends Action { type: 'COPY_WIDGETS'; payload: CopyWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/createWidget/index.ts b/packages/dashboard/src/store/actions/createWidget/index.ts index bb9eb64ac..344926209 100644 --- a/packages/dashboard/src/store/actions/createWidget/index.ts +++ b/packages/dashboard/src/store/actions/createWidget/index.ts @@ -1,13 +1,14 @@ import { Action } from 'redux'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { constrainWidgetPositionToGrid } from '~/util/constrainWidgetPositionToGrid'; import { trimWidgetPosition } from '~/util/trimWidgetPosition'; import { DashboardState } from '../../state'; type CreateWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; }; + export interface CreateWidgetsAction extends Action { type: 'CREATE_WIDGETS'; payload: CreateWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/createWidget/presets/index.ts b/packages/dashboard/src/store/actions/createWidget/presets/index.ts index 67d6b6fa1..6e7612216 100644 --- a/packages/dashboard/src/store/actions/createWidget/presets/index.ts +++ b/packages/dashboard/src/store/actions/createWidget/presets/index.ts @@ -1,5 +1,5 @@ import { nanoid } from '@reduxjs/toolkit'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { DashboardState } from '~/store/state'; import { WidgetPropertiesGeneratorMap } from '~/customization/widgetPropertiesGeneratorMap'; @@ -11,7 +11,7 @@ const BASE_POSITION = { export const widgetCreator = (gridState: DashboardState['grid']) => - (type: string): AnyWidget => { + (type: string): Widget => { const { width, height, cellSize } = gridState; const { properties, initialSize } = WidgetPropertiesGeneratorMap[type]; diff --git a/packages/dashboard/src/store/actions/deleteWidgets/index.spec.ts b/packages/dashboard/src/store/actions/deleteWidgets/index.spec.ts index df2df2bfa..a1495fb01 100644 --- a/packages/dashboard/src/store/actions/deleteWidgets/index.spec.ts +++ b/packages/dashboard/src/store/actions/deleteWidgets/index.spec.ts @@ -1,10 +1,10 @@ import { deleteWidgets, onDeleteWidgetsAction } from './index'; import { DashboardState, initialState } from '../../state'; -import { MockWidgetFactory, MOCK_KPI_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { MOCK_KPI_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = []): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/deleteWidgets/index.ts b/packages/dashboard/src/store/actions/deleteWidgets/index.ts index 694a90df5..7394bfc37 100644 --- a/packages/dashboard/src/store/actions/deleteWidgets/index.ts +++ b/packages/dashboard/src/store/actions/deleteWidgets/index.ts @@ -1,11 +1,12 @@ import { Action } from 'redux'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { DashboardState } from '../../state'; type DeleteWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; }; + export interface DeleteWidgetsAction extends Action { type: 'DELETE_WIDGETS'; payload: DeleteWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/moveWidgets/index.spec.ts b/packages/dashboard/src/store/actions/moveWidgets/index.spec.ts index 55df17dcb..da7389621 100644 --- a/packages/dashboard/src/store/actions/moveWidgets/index.spec.ts +++ b/packages/dashboard/src/store/actions/moveWidgets/index.spec.ts @@ -1,10 +1,10 @@ import { moveWidgets, onMoveWidgetsAction } from './index'; import { DashboardState, initialState } from '../../state'; -import { MockWidgetFactory, MOCK_KPI_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { MOCK_KPI_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = []): DashboardState => ({ ...initialState, grid: { ...initialState.grid, diff --git a/packages/dashboard/src/store/actions/moveWidgets/index.ts b/packages/dashboard/src/store/actions/moveWidgets/index.ts index 6f1f76691..643d6c253 100644 --- a/packages/dashboard/src/store/actions/moveWidgets/index.ts +++ b/packages/dashboard/src/store/actions/moveWidgets/index.ts @@ -1,15 +1,16 @@ import { Action } from 'redux'; -import { Position, AnyWidget } from '~/types'; +import { Position, Widget } from '~/types'; import { constrainWidgetPositionToGrid } from '~/util/constrainWidgetPositionToGrid'; import { trimWidgetPosition } from '~/util/trimWidgetPosition'; import { DashboardState } from '../../state'; type MoveWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; vector: Position; complete?: boolean; }; + export interface MoveWidgetsAction extends Action { type: 'MOVE_WIDGETS'; payload: MoveWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/pasteWidgets/index.spec.ts b/packages/dashboard/src/store/actions/pasteWidgets/index.spec.ts index b6d831171..46be74537 100644 --- a/packages/dashboard/src/store/actions/pasteWidgets/index.spec.ts +++ b/packages/dashboard/src/store/actions/pasteWidgets/index.spec.ts @@ -1,10 +1,10 @@ -import { pasteWidgets, onPasteWidgetsAction } from '.'; +import { onPasteWidgetsAction, pasteWidgets } from '.'; import { DashboardState, initialState } from '../../state'; import { MOCK_KPI_WIDGET, MOCK_LINE_CHART_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = [], copiedWidgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = [], copiedWidgets: Widget[] = []): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts b/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts index 27606641d..3207d373d 100644 --- a/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts +++ b/packages/dashboard/src/store/actions/resizeWidgets/index.spec.ts @@ -1,12 +1,10 @@ -import { MockWidgetFactory } from '../../../../testing/mocks'; +import { MOCK_KPI_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; import { onResizeWidgetsAction, resizeWidgets } from './index'; import { DashboardState, initialState } from '../../state'; +import { Widget } from '~/types'; -import { MOCK_KPI_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; - -const setupDashboardState = (widgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = []): DashboardState => ({ ...initialState, grid: { ...initialState.grid, diff --git a/packages/dashboard/src/store/actions/resizeWidgets/index.ts b/packages/dashboard/src/store/actions/resizeWidgets/index.ts index a64f7cfb5..4662f5460 100644 --- a/packages/dashboard/src/store/actions/resizeWidgets/index.ts +++ b/packages/dashboard/src/store/actions/resizeWidgets/index.ts @@ -1,5 +1,5 @@ import { Action } from 'redux'; -import { Position, Rect, AnyWidget } from '~/types'; +import { Position, Rect, Widget } from '~/types'; import { constrainWidgetPositionToGrid } from '~/util/constrainWidgetPositionToGrid'; import { getSelectionBox } from '~/util/getSelectionBox'; import { trimWidgetPosition } from '~/util/trimWidgetPosition'; @@ -11,20 +11,21 @@ const MIN_WIDTH = 2; export type Anchor = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'left' | 'right' | 'top' | 'bottom'; type ResizeProps = { - widgets: AnyWidget[]; + widgets: Widget[]; selectedWidgetIds: string[]; vector: Position; selectionBox: Rect; }; -type Resizer = (props: ResizeProps) => AnyWidget[]; +type Resizer = (props: ResizeProps) => Widget[]; type ResizeWidgetsActionPayload = { anchor: Anchor; - widgets: AnyWidget[]; + widgets: Widget[]; vector: Position; complete?: boolean; }; + export interface ResizeWidgetsAction extends Action { type: 'RESIZE_WIDGETS'; payload: ResizeWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/selectWidgets/index.ts b/packages/dashboard/src/store/actions/selectWidgets/index.ts index e330af58e..a1fd24381 100644 --- a/packages/dashboard/src/store/actions/selectWidgets/index.ts +++ b/packages/dashboard/src/store/actions/selectWidgets/index.ts @@ -1,13 +1,14 @@ import { Action } from 'redux'; import uniqBy from 'lodash/uniqBy'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { DashboardState } from '../../state'; type SelectWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; union: boolean; }; + export interface SelectWidgetsAction extends Action { type: 'SELECT_WIDGETS'; payload: SelectWidgetsActionPayload; diff --git a/packages/dashboard/src/store/actions/sendToBack/index.spec.ts b/packages/dashboard/src/store/actions/sendToBack/index.spec.ts index 54689abd9..70be4358a 100644 --- a/packages/dashboard/src/store/actions/sendToBack/index.spec.ts +++ b/packages/dashboard/src/store/actions/sendToBack/index.spec.ts @@ -1,9 +1,9 @@ import { sendWidgetsToBack } from '.'; -import { MockWidgetFactory, MOCK_KPI_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { MOCK_KPI_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; +import { Widget } from '~/types'; import { DashboardState, initialState } from '../../state'; -const setupDashboardState = (widgets: AnyWidget[] = [], selectedWidgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = [], selectedWidgets: Widget[] = []): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/toggleReadOnly/index.spec.ts b/packages/dashboard/src/store/actions/toggleReadOnly/index.spec.ts index b11528435..cc9eba0c2 100644 --- a/packages/dashboard/src/store/actions/toggleReadOnly/index.spec.ts +++ b/packages/dashboard/src/store/actions/toggleReadOnly/index.spec.ts @@ -2,9 +2,9 @@ import { toggleReadOnly } from '.'; import { DashboardState, initialState } from '../../state'; import { MOCK_KPI_WIDGET, MOCK_LINE_CHART_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = [], pasteCounter = 0): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = [], pasteCounter = 0): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/updateWidget/index.spec.ts b/packages/dashboard/src/store/actions/updateWidget/index.spec.ts index 6094b1427..7c9e124da 100644 --- a/packages/dashboard/src/store/actions/updateWidget/index.spec.ts +++ b/packages/dashboard/src/store/actions/updateWidget/index.spec.ts @@ -1,10 +1,10 @@ -import { updateWidgets, onUpdateWidgetsAction } from '.'; +import { onUpdateWidgetsAction, updateWidgets } from '.'; import { DashboardState, initialState } from '../../state'; -import { MockWidgetFactory, MOCK_TEXT_WIDGET } from '../../../../testing/mocks'; -import { AnyWidget } from '~/types'; +import { MOCK_TEXT_WIDGET, MockWidgetFactory } from '../../../../testing/mocks'; +import { Widget } from '~/types'; -const setupDashboardState = (widgets: AnyWidget[] = []): DashboardState => ({ +const setupDashboardState = (widgets: Widget[] = []): DashboardState => ({ ...initialState, dashboardConfiguration: { ...initialState.dashboardConfiguration, diff --git a/packages/dashboard/src/store/actions/updateWidget/index.ts b/packages/dashboard/src/store/actions/updateWidget/index.ts index b90124476..2557859f0 100644 --- a/packages/dashboard/src/store/actions/updateWidget/index.ts +++ b/packages/dashboard/src/store/actions/updateWidget/index.ts @@ -1,13 +1,14 @@ import { Action } from 'redux'; -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; import { constrainWidgetPositionToGrid } from '~/util/constrainWidgetPositionToGrid'; import { trimWidgetPosition } from '~/util/trimWidgetPosition'; import { DashboardState } from '../../state'; type UpdateWidgetsActionPayload = { - widgets: AnyWidget[]; + widgets: Widget[]; }; + export interface UpdateWidgetsAction extends Action { type: 'UPDATE_WIDGET'; payload: UpdateWidgetsActionPayload; diff --git a/packages/dashboard/src/store/state.ts b/packages/dashboard/src/store/state.ts index 25a6fa80a..56ba55a2f 100644 --- a/packages/dashboard/src/store/state.ts +++ b/packages/dashboard/src/store/state.ts @@ -1,4 +1,4 @@ -import { AnyWidget, DashboardConfiguration } from '~/types'; +import { DashboardConfiguration, Widget } from '~/types'; export type DashboardState = { grid: { @@ -9,8 +9,8 @@ export type DashboardState = { stretchToFit: boolean; }; readOnly: boolean; - selectedWidgets: AnyWidget[]; - copiedWidgets: AnyWidget[]; + selectedWidgets: Widget[]; + copiedWidgets: Widget[]; pasteCounter: number; dashboardConfiguration: DashboardConfiguration; }; diff --git a/packages/dashboard/src/types.ts b/packages/dashboard/src/types.ts index 464a0891e..baf77e331 100644 --- a/packages/dashboard/src/types.ts +++ b/packages/dashboard/src/types.ts @@ -1,7 +1,6 @@ import { Viewport } from '@iot-app-kit/core'; -//eslint-disable-next-line -export type Widget> = { +export type Widget = Record> = { type: string; id: string; x: number; @@ -12,11 +11,8 @@ export type Widget> = { properties: T; }; -//eslint-disable-next-line -export type AnyWidget = Widget>; - export type DashboardConfiguration = { - widgets: AnyWidget[]; + widgets: Widget[]; viewport: Viewport; }; diff --git a/packages/dashboard/src/util/constrainWidgetPositionToGrid.ts b/packages/dashboard/src/util/constrainWidgetPositionToGrid.ts index 42fc46d11..9d3d3c92a 100644 --- a/packages/dashboard/src/util/constrainWidgetPositionToGrid.ts +++ b/packages/dashboard/src/util/constrainWidgetPositionToGrid.ts @@ -1,6 +1,6 @@ -import { Rect, AnyWidget } from '~/types'; +import { Rect, Widget } from '~/types'; -export const constrainWidgetPositionToGrid = (gridRect: Rect, widget: AnyWidget): AnyWidget => ({ +export const constrainWidgetPositionToGrid = (gridRect: Rect, widget: Widget): Widget => ({ ...widget, x: Math.min(gridRect.width - widget.width, Math.max(gridRect.x, widget.x)), y: Math.min(gridRect.height - widget.height, Math.max(gridRect.y, widget.y)), diff --git a/packages/dashboard/src/util/getSelectionBox.ts b/packages/dashboard/src/util/getSelectionBox.ts index 02e11518c..10792c157 100644 --- a/packages/dashboard/src/util/getSelectionBox.ts +++ b/packages/dashboard/src/util/getSelectionBox.ts @@ -1,7 +1,7 @@ -import { Rect, AnyWidget } from '~/types'; +import { Rect, Widget } from '~/types'; // Returns the smallest rectangle which can contain all the selected widgets -export const getSelectionBox = (selectedWidgets: AnyWidget[]): Rect | null => { +export const getSelectionBox = (selectedWidgets: Widget[]): Rect | null => { if (selectedWidgets.length === 0) { return null; } diff --git a/packages/dashboard/src/util/select.ts b/packages/dashboard/src/util/select.ts index 0af54545f..303f7d207 100644 --- a/packages/dashboard/src/util/select.ts +++ b/packages/dashboard/src/util/select.ts @@ -1,7 +1,7 @@ import last from 'lodash/last'; import sortBy from 'lodash/sortBy'; -import { AnyWidget, DashboardConfiguration, Position, Rect, Selection } from '~/types'; +import { DashboardConfiguration, Position, Rect, Selection, Widget } from '~/types'; import { isContained } from './isContained'; export const getSelectedWidgets = ({ @@ -55,7 +55,7 @@ export const pointSelect = ({ position: Position; cellSize: number; dashboardConfiguration: DashboardConfiguration; -}): AnyWidget | undefined => { +}): Widget | undefined => { /** * TODO edge case where bottom most pixel on a widget does not pick up the intersection * and the top most pixel above a widget picks up the intersection diff --git a/packages/dashboard/src/util/trimWidgetPosition.ts b/packages/dashboard/src/util/trimWidgetPosition.ts index 1b82dda2b..a5d906e87 100644 --- a/packages/dashboard/src/util/trimWidgetPosition.ts +++ b/packages/dashboard/src/util/trimWidgetPosition.ts @@ -1,6 +1,6 @@ -import { AnyWidget } from '~/types'; +import { Widget } from '~/types'; -export const trimWidgetPosition = (widget: AnyWidget): AnyWidget => { +export const trimWidgetPosition = (widget: Widget): Widget => { return { ...widget, x: Math.round(widget.x), diff --git a/packages/dashboard/testing/mocks.ts b/packages/dashboard/testing/mocks.ts index 038aafde3..c3fa5e3a2 100644 --- a/packages/dashboard/testing/mocks.ts +++ b/packages/dashboard/testing/mocks.ts @@ -12,7 +12,7 @@ import { /** * Shared mocks for testing purposes */ -import { AnyWidget, DashboardConfiguration } from '../src/types'; +import { DashboardConfiguration, Widget } from '../src/types'; import { DEMO_TURBINE_ASSET_1, @@ -23,8 +23,8 @@ import { } from './siteWiseQueries'; export const createMockWidget = - (baseWidget: AnyWidget) => - (partialWidget?: Partial): AnyWidget => ({ + (baseWidget: Widget) => + (partialWidget?: Partial): Widget => ({ ...baseWidget, ...partialWidget, id: partialWidget?.id ?? Math.random().toFixed(20), @@ -190,7 +190,7 @@ export const MockWidgetFactory = { getTextWidget: createMockWidget(MOCK_TEXT_WIDGET), }; -export const getRandomWidget = (partialWidget?: Partial): AnyWidget => { +export const getRandomWidget = (partialWidget?: Partial): Widget => { switch (random(0, 3)) { default: case 0: