fix: dont move widget when resizing legend

packages/dashboard/e2e/tests/utils/grid.ts

@@ -1,13 +1,14 @@
 import { Locator, Page } from '@playwright/test';
 
 import { DragPosition, dragAndDrop } from './dragAndDrop';
-import { center } from './mousePosition';
+import { topCenter } from './mousePosition';
 import { BoundingBox, getBoundingBox } from './locator';
 
 export const GRID_SIZE = 10;
 
 const WidgetSelector = '[data-gesture=widget]';
 const SelectionSelector = '[data-gesture=selection]';
+const MoveableSelector = '[data-gesture=moveable]';
 const GridSelector = '#container';
 
 const WidgetSelectorMap = {
@@ -75,11 +76,11 @@ export const gridUtil = (page: Page) => {
       await page.mouse.up({ button: 'left' });
     },
     /**
-     * @param widgetLocator - click the center of the locator
+     * @param widgetLocator - click the top center of the locator
      */
     clickWidget: async (widgetLocator: Locator) => {
       const bounds = await getBoundingBox(widgetLocator);
-      await page.mouse.move(...center(bounds));
+      await page.mouse.move(...topCenter(bounds));
       await page.mouse.down({ button: 'left' });
       await page.mouse.up({ button: 'left' });
     },
@@ -108,7 +109,7 @@ export const gridUtil = (page: Page) => {
      * @param targetPosition - the position offset of the selection to move to
      */
     moveSelection: async (targetPosition: DragPosition) => {
-      const selectionLocator = page.locator(SelectionSelector);
+      const selectionLocator = page.locator(MoveableSelector);
       await dragGenerator(selectionLocator).dragTo(gridArea, {
         targetPosition,
       });

packages/dashboard/e2e/tests/utils/mousePosition.ts

@@ -6,3 +6,10 @@ import { BoundingBox } from './locator';
  * @returns the midpoint of the bounding box
  */
 export const center = (box: BoundingBox): [x: number, y: number] => [box.x + box.width / 2, box.y + box.height / 2];
+
+/**
+ *
+ * @param box bounding box
+ * @returns the midpoint of the bounding box
+ */
+export const topCenter = (box: BoundingBox): [x: number, y: number] => [box.x + box.width / 2, box.y + 10];

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

@@ -5,7 +5,7 @@ const GESTURE_ATTRIBUTE = 'data-gesture';
 const ANCHOR_ATTRIBUTE = 'data-anchor';
 const ID_ATTRIBUTE = 'data-id';
 
-type GestureAttribute = 'grid' | 'resize' | 'selection' | 'widget';
+type GestureAttribute = 'grid' | 'resize' | 'selection' | 'widget' | 'moveable';
 
 export const idable = (id: string) => ({
   [ID_ATTRIBUTE]: id,

packages/dashboard/src/components/widgets/selectionBox.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import SelectionBoxAnchor from './selectionBoxAnchor';
-import { gestureable } from '../internalDashboard/gestures/determineTargetGestures';
 import { getSelectionBox } from '~/util/getSelectionBox';
 
 import './selectionBox.css';
 import { useLayers } from '../internalDashboard/useLayers';
 import type { DashboardWidget } from '~/types';
+import { gestureable } from '../internalDashboard/gestures/determineTargetGestures';
 
 export type SelectionBoxProps = {
   selectedWidgets: DashboardWidget[];

packages/dashboard/src/components/widgets/tile/tile.tsx

@@ -1,5 +1,5 @@
-import React, { PropsWithChildren } from 'react';
-import { useSelector } from 'react-redux';
+import React, { PropsWithChildren, SyntheticEvent } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 
 import Box from '@cloudscape-design/components/box';
 import SpaceBetween from '@cloudscape-design/components/space-between';
@@ -19,6 +19,8 @@ import { DashboardState } from '~/store/state';
 import { useDeleteWidgets } from '~/hooks/useDeleteWidgets';
 
 import './tile.css';
+import { onChangeDashboardGridEnabledAction } from '~/store/actions';
+import { gestureable } from '~/components/internalDashboard/gestures/determineTargetGestures';
 
 type DeletableTileActionProps = {
   widget: DashboardWidget;
@@ -48,10 +50,19 @@ export type WidgetTileProps = PropsWithChildren<{
  */
 const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, removeable }) => {
   const isReadOnly = useSelector((state: DashboardState) => state.readOnly);
+  const dispatch = useDispatch();
 
   const isRemoveable = !isReadOnly && removeable;
   const headerVisible = !isReadOnly || title;
 
+  const disableGridMovement = (_event: SyntheticEvent) => {
+    dispatch(onChangeDashboardGridEnabledAction({ enabled: false }));
+  };
+
+  const enableGridMovement = (_event: SyntheticEvent) => {
+    dispatch(onChangeDashboardGridEnabledAction({ enabled: true }));
+  };
+
   return (
     <div
       role='widget'
@@ -71,6 +82,7 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
             padding: `${spaceScaledXs} ${spaceScaledXs} ${spaceScaledXxs} ${spaceScaledM}`,
             borderBottom: `2px solid ${colorBorderDividerDefault}`,
           }}
+          {...gestureable('moveable')}
         >
           <Box variant='h1' fontSize='body-m'>
             {title}
@@ -80,7 +92,9 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
           </SpaceBetween>
         </div>
       )}
-      <div className='widget-tile-body'>{children}</div>
+      <div className='widget-tile-body' onPointerEnter={disableGridMovement} onPointerLeave={enableGridMovement}>
+        {children}
+      </div>
     </div>
   );
 };