fix: add eslint rule for hooks

packages/dashboard/.eslintrc.js

@@ -1,4 +1,4 @@
 module.exports = {
   root: true,
-  extends: ['iot-app-kit'],
+  extends: ['iot-app-kit', 'plugin:react-hooks/recommended'],
 };

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Menu from './menu';
 import ContextMenuOption from './option';
 import { DASHBOARD_CONTAINER_ID, getDashboardPosition } from '../grid/getDashboardPosition';
@@ -48,10 +48,10 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
 
   useKeyPress('esc', () => toggleContextMenu());
 
-  const onContextMenu = (e: MouseEvent) => {
+  const onContextMenu = useCallback((e: MouseEvent) => {
     e.preventDefault();
     toggleContextMenu(getDashboardPosition(e));
-  };
+  }, []);
 
   const onClickOutside = () => {
     toggleContextMenu();
@@ -66,7 +66,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
     return () => {
       dashboardContainer.removeEventListener('contextmenu', onContextMenu);
     };
-  }, []);
+  }, [onContextMenu]);
 
   const withClose = (action: () => void) => () => {
     action();

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

@@ -42,7 +42,7 @@ const CustomDragLayer: React.FC<CustomDragLayerProps> = ({ onDrag }) => {
 
   useEffect(() => {
     onDrag(isDragging);
-  }, [isDragging]);
+  }, [isDragging, onDrag]);
 
   const layer = () => {
     switch (itemType) {

packages/dashboard/src/components/grid/autoCellSize.tsx

@@ -26,7 +26,7 @@ export const AutoCellSize: React.FC<AutoCellSizeProps> = ({ width, cellSize, chi
     if (cellSize !== fittedCellSize) {
       dispatch(onChangeDashboardCellSizeAction({ cellSize: fittedCellSize }));
     }
-  }, [measuredWidth, width, cellSize]);
+  }, [measuredWidth, width, cellSize, dispatch]);
 
   return <div ref={measureRef}>{children}</div>;
 };

packages/dashboard/src/components/grid/gestures/useDragMonitor.ts

@@ -72,9 +72,9 @@ export const useDragMonitor = ({
     [union, startTracker.getPosition(), endTracker.getPosition()]
   );
 
-  useEffect(() => {
-    const { isDragging, clientOffset } = collected;
+  const { isDragging, clientOffset } = collected;
 
+  useEffect(() => {
     if (isDragging && clientOffset) {
       if (!dashboardGrid) return;
       const constrainedOffset = constrainPosition({
@@ -113,7 +113,8 @@ export const useDragMonitor = ({
       deltaTracker.setPosition(clientOffset);
       setCancelClick(true);
     }
-  }, [collected.isDragging, collected.clientOffset]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isDragging, clientOffset]);
 
   return {
     dragRef,

packages/dashboard/src/components/internalDashboard/gestures/useMove.ts

@@ -26,7 +26,7 @@ export const useMoveGestures = ({ setActiveGesture, selectedWidgets, cellSize }:
         })
       );
     },
-    [selectedWidgets, cellSize]
+    [selectedWidgets, cellSize, dispatch]
   );
 
   const onMoveStart = () => {

packages/dashboard/src/components/internalDashboard/gestures/useResize.ts

@@ -28,7 +28,7 @@ export const useResizeGestures = ({ setActiveGesture, selectedWidgets, cellSize
         })
       );
     },
-    [selectedWidgets, cellSize]
+    [selectedWidgets, cellSize, dispatch]
   );
 
   const [anchor, setAnchor] = useState<Anchor | null>(null);

packages/dashboard/src/components/internalDashboard/gestures/useSelection.ts

@@ -15,14 +15,17 @@ type SelectionHooksProps = {
 
 export const useSelectionGestures = ({ setActiveGesture, dashboardWidgets, cellSize }: SelectionHooksProps) => {
   const dispatch = useDispatch();
-  const selectWidgets = (widgets: DashboardWidget[], union: boolean) => {
-    dispatch(
-      onSelectWidgetsAction({
-        widgets,
-        union,
-      })
-    );
-  };
+  const selectWidgets = useCallback(
+    (widgets: DashboardWidget[], union: boolean) => {
+      dispatch(
+        onSelectWidgetsAction({
+          widgets,
+          union,
+        })
+      );
+    },
+    [dispatch]
+  );
 
   const [userSelection, setUserSelection] = useState<Selection | undefined>(undefined);
 
@@ -36,7 +39,7 @@ export const useSelectionGestures = ({ setActiveGesture, dashboardWidgets, cellS
 
       selectWidgets(intersectedWidget ? [intersectedWidget] : [], union);
     },
-    [dashboardWidgets, cellSize]
+    [dashboardWidgets, cellSize, selectWidgets]
   );
 
   const onSelectionStart = (dragEvent: DragEvent) => {
@@ -65,7 +68,7 @@ export const useSelectionGestures = ({ setActiveGesture, dashboardWidgets, cellS
 
       selectWidgets(intersectedWidgets, union);
     },
-    [dashboardWidgets, cellSize]
+    [dashboardWidgets, cellSize, selectWidgets]
   );
 
   const onSelectionEnd = () => {

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

@@ -66,10 +66,6 @@ const disabledUserSelect: CSSProperties = { userSelect: 'none' };
 const InternalDashboard: React.FC<InternalDashboardProperties> = ({ onSave, editable, propertiesPanel }) => {
   const { iotSiteWiseClient, iotTwinMakerClient } = useClients();
 
-  if (iotSiteWiseClient == null || iotTwinMakerClient == null) {
-    return null;
-  }
-
   /**
    * disable user select styles on drag to prevent highlighting of text under the pointer
    */
@@ -91,6 +87,7 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({ onSave, edit
   const [visible, setVisible] = useState<boolean>(false);
 
   const dispatch = useDispatch();
+
   const createWidgets = (widgets: DashboardWidget[]) =>
     dispatch(
       onCreateWidgetsAction({
@@ -206,6 +203,10 @@ const InternalDashboard: React.FC<InternalDashboardProperties> = ({ onSave, edit
     hasSelectedWidgets: selectedWidgets.length > 0,
   };
 
+  if (iotSiteWiseClient == null || iotTwinMakerClient == null) {
+    return null;
+  }
+
   const EditComponent = (
     <div className='dashboard' style={userSelect}>
       <CustomDragLayer onDrag={(isDragging) => setUserSelect(isDragging ? disabledUserSelect : defaultUserSelect)} />

packages/dashboard/src/components/internalDashboard/keyboardShortcuts.ts

@@ -36,7 +36,7 @@ export const useKeyboardShortcuts = ({ deleteWidgets: handleDeleteWidgetModal }:
         widgets: selectedWidgets,
       })
     );
-  }, [selectedWidgets]);
+  }, [dispatch, selectedWidgets]);
 
   const pasteWidgets = () => {
     dispatch(onPasteWidgetsAction({ position: undefined }));
@@ -60,7 +60,7 @@ export const useKeyboardShortcuts = ({ deleteWidgets: handleDeleteWidgetModal }:
         })
       );
     }
-  }, [selectedWidgets]);
+  }, [selectedWidgets, dispatch, handleDeleteWidgetModal]);
 
   /**
    * Keyboard hotkey / shortcut configuration

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 import type { MouseEvent, FC, ReactNode } from 'react';
 import { useSelector } from 'react-redux';
 
@@ -169,7 +169,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
    * proportionally when the screen is resized to prevent these collisions.
    */
 
-  const resizeSidePanes = () => {
+  const resizeSidePanes = useCallback(() => {
     const el = panes.current as HTMLElement | null;
     if (!el) return;
     const elementWidth = el.offsetWidth;
@@ -208,7 +208,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
     // Set pane widths
     setLeftPaneWidth(nextLeftPaneWidth);
     setRightPaneWidth(nextRightPaneWidth);
-  };
+  }, [rightPaneWidth, leftPaneWidth]);
 
   // expand and collapse left pane
   const onLeftCollapsedPaneClick = () => {
@@ -235,7 +235,7 @@ export const ResizablePanes: FC<ResizablePanesProps> = ({ leftPane, centerPane,
   useEffect(() => {
     window.addEventListener('resize', resizeSidePanes);
     return () => window.removeEventListener('resize', resizeSidePanes);
-  }, [leftPaneWidth, rightPaneWidth]);
+  }, [leftPaneWidth, rightPaneWidth, resizeSidePanes]);
 
   return (
     <div

packages/dashboard/src/customization/propertiesSection.ts

@@ -44,7 +44,7 @@ type Setter<T, V> = (target: T, value: V) => T;
 type Lens<W> = <T>(selector: Getter<W, T>, updater: Setter<W, T>) => [Maybe<T>, (newValue: T) => void];
 
 // Lense specifically for widget properties
-type PropertyLens<W extends DashboardWidget> = Lens<W['properties']>;
+export type PropertyLens<W extends DashboardWidget> = Lens<W['properties']>;
 
 const NO_SIZE = { height: 0, width: 0 };
 const NO_POSITION = { x: 0, y: 0 };

packages/dashboard/src/customization/propertiesSections/aggregationSettings/index.tsx

@@ -4,7 +4,7 @@ import { PropertiesSection } from '~/customization/propertiesSectionComponent';
 import { QueryWidget } from '~/customization/widgets/types';
 import { DashboardWidget } from '~/types';
 import AggregationSettings from './section';
-import { FilterPredicate } from '~/customization/propertiesSection';
+import { FilterPredicate, PropertyLens } from '~/customization/propertiesSection';
 
 const supportsRawData: readonly string[] = ['line-chart', 'scatter-chart', 'status-timeline', 'table', 'kpi', 'status'];
 const doesNotSupportRawData: readonly string[] = ['bar-chart'];
@@ -15,6 +15,23 @@ export const isRawDataAggregationsSupported = (widget: DashboardWidget): widget
 export const isAggregationsSupportedWithoutRawData = (widget: DashboardWidget): widget is QueryWidget =>
   doesNotSupportRawData.some((t) => t === widget.type);
 
+const RenderAggregationsPropertiesSection = ({
+  useProperty,
+  supportsRawData,
+}: {
+  useProperty: PropertyLens<QueryWidget>;
+  supportsRawData: boolean;
+}) => {
+  const [query, updateQuery] = useProperty(
+    (properties) => properties.queryConfig.query,
+    (properties, updatedQuery) => ({
+      ...properties,
+      queryConfig: { ...properties.queryConfig, query: updatedQuery },
+    })
+  );
+  return <AggregationSettings supportsRawData={supportsRawData} queryConfig={query} updateQuery={updateQuery} />;
+};
+
 const AggregationsPropertiesSection = ({
   isVisible,
   supportsRawData,
@@ -24,16 +41,9 @@ const AggregationsPropertiesSection = ({
 }) => (
   <PropertiesSection
     isVisible={isVisible}
-    render={({ useProperty }) => {
-      const [query, updateQuery] = useProperty(
-        (properties) => properties.queryConfig.query,
-        (properties, updatedQuery) => ({
-          ...properties,
-          queryConfig: { ...properties.queryConfig, query: updatedQuery },
-        })
-      );
-      return <AggregationSettings supportsRawData={supportsRawData} queryConfig={query} updateQuery={updateQuery} />;
-    }}
+    render={({ useProperty }) => (
+      <RenderAggregationsPropertiesSection useProperty={useProperty} supportsRawData={supportsRawData} />
+    )}
   />
 );
 

packages/dashboard/src/customization/propertiesSections/aggregationSettings/section.tsx

@@ -31,11 +31,11 @@ const Section: React.FC<React.PropsWithChildren> = ({ children }) => (
 
 const getAggregationSectionOptions = (
   siteWiseQuery: Partial<SiteWiseAssetQuery & SiteWisePropertyAliasQuery> | undefined,
-  supportsRawData: boolean
+  supportsRawData: boolean,
+  dataTypeSet: Set<string>
 ) => {
   const { aggregationType, resolution } = siteWiseQuery?.assets?.at(0)?.properties?.at(0) ?? {};
 
-  const dataTypeSet = useWidgetDataTypeSet(siteWiseQuery);
   const filteredResolutionOptions = getResolutionOptions(supportsRawData);
   const filteredAggregationOptions = getAggregationOptions(supportsRawData, dataTypeSet, resolution);
 
@@ -60,6 +60,8 @@ type AggregationSettingsProps = {
 };
 const AggregationSettings: FC<AggregationSettingsProps> = ({ queryConfig, updateQuery, supportsRawData }) => {
   const aggregationsEnabled = isJust(queryConfig);
+  const siteWiseAssetQuery = aggregationsEnabled ? queryConfig.value : undefined;
+  const dataTypeSet = useWidgetDataTypeSet(siteWiseAssetQuery as SiteWiseAssetQuery);
 
   if (!aggregationsEnabled)
     return (
@@ -68,10 +70,8 @@ const AggregationSettings: FC<AggregationSettingsProps> = ({ queryConfig, update
       </Section>
     );
 
-  const siteWiseAssetQuery = queryConfig.value;
-
   const { filteredResolutionOptions, filteredAggregationOptions, selectedAggregation, selectedResolution } =
-    getAggregationSectionOptions(siteWiseAssetQuery as SiteWiseAssetQuery, supportsRawData);
+    getAggregationSectionOptions(siteWiseAssetQuery as SiteWiseAssetQuery, supportsRawData, dataTypeSet);
 
   // given a resolution, determine what the new aggregation should be
   const getUpdatedAggregation = (resolution?: string) => {

packages/dashboard/src/customization/propertiesSections/axisSettings/index.tsx

@@ -5,6 +5,7 @@ import { AxisSettings } from '~/customization/settings';
 import { DashboardWidget } from '~/types';
 import { maybeWithDefault } from '~/util/maybe';
 import AxisSection from './section';
+import { PropertyLens } from '~/customization/propertiesSection';
 
 const axisWidgetTypes: readonly string[] = ['line-chart', 'scatter-chart', 'bar-chart', 'status-timeline'];
 // The <StatusTimeline /> widget does not support the Y axis
@@ -18,6 +19,21 @@ const supportsYAxis = (w: DashboardWidget): w is AxisWidget =>
 const isAxisWidgetWithYAxis = (w: DashboardWidget): w is AxisWidget => isAxisWidget(w) && supportsYAxis(w);
 const isAxisWidgetWithoutYAxis = (w: DashboardWidget): w is AxisWidget => isAxisWidget(w) && !supportsYAxis(w);
 
+const RenderAxisSettingSection = ({
+  useProperty,
+  usesYAxis,
+}: {
+  useProperty: PropertyLens<AxisWidget>;
+  usesYAxis: boolean;
+}) => {
+  const [axis, updateAxis] = useProperty(
+    (properties) => properties.axis,
+    (properties, updatedAxis) => ({ ...properties, axis: updatedAxis })
+  );
+
+  return <AxisSection axis={maybeWithDefault(undefined, axis)} updateAxis={updateAxis} usesYAxis={usesYAxis} />;
+};
+
 const AxisSettingSection = ({
   isVisible,
   usesYAxis,
@@ -27,14 +43,7 @@ const AxisSettingSection = ({
 }) => (
   <PropertiesSection
     isVisible={isVisible}
-    render={({ useProperty }) => {
-      const [axis, updateAxis] = useProperty(
-        (properties) => properties.axis,
-        (properties, updatedAxis) => ({ ...properties, axis: updatedAxis })
-      );
-
-      return <AxisSection axis={maybeWithDefault(undefined, axis)} updateAxis={updateAxis} usesYAxis={usesYAxis} />;
-    }}
+    render={({ useProperty }) => <RenderAxisSettingSection useProperty={useProperty} usesYAxis={usesYAxis} />}
   />
 );