fix(dashboard): improve widget drag and resize

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

@@ -1,14 +1,13 @@
 import { Locator, Page } from '@playwright/test';
 
 import { DragPosition, dragAndDrop } from './dragAndDrop';
-import { topCenter } from './mousePosition';
+import { center } 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 = {
@@ -76,11 +75,11 @@ export const gridUtil = (page: Page) => {
       await page.mouse.up({ button: 'left' });
     },
     /**
-     * @param widgetLocator - click the top center of the locator
+     * @param widgetLocator - click the center of the locator
      */
     clickWidget: async (widgetLocator: Locator) => {
       const bounds = await getBoundingBox(widgetLocator);
-      await page.mouse.move(...topCenter(bounds));
+      await page.mouse.move(...center(bounds));
       await page.mouse.down({ button: 'left' });
       await page.mouse.up({ button: 'left' });
     },
@@ -109,7 +108,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(MoveableSelector);
+      const selectionLocator = page.locator(SelectionSelector);
       await dragGenerator(selectionLocator).dragTo(gridArea, {
         targetPosition,
       });

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' | 'moveable';
+type GestureAttribute = 'grid' | 'resize' | 'selection' | 'widget';
 
 export const idable = (id: string) => ({
   [ID_ATTRIBUTE]: id,

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

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, SyntheticEvent, useState } from 'react';
+import React, { PropsWithChildren, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Box from '@cloudscape-design/components/box';
@@ -21,7 +21,6 @@ import { DashboardState } from '~/store/state';
 
 import './tile.css';
 import { onChangeDashboardGridEnabledAction } from '~/store/actions';
-import { gestureable } from '~/components/internalDashboard/gestures/determineTargetGestures';
 
 type DeletableTileActionProps = {
   handleDelete: CancelableEventHandler<ClickDetail>;
@@ -59,14 +58,6 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
   const isRemoveable = !isReadOnly && removeable;
   const headerVisible = !isReadOnly || title;
 
-  const disableGridMovement = (_event: SyntheticEvent) => {
-    dispatch(onChangeDashboardGridEnabledAction({ enabled: false }));
-  };
-
-  const enableGridMovement = (_event: SyntheticEvent) => {
-    dispatch(onChangeDashboardGridEnabledAction({ enabled: true }));
-  };
-
   const handleDelete: CancelableEventHandler<ClickDetail> = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -104,7 +95,6 @@ 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}
@@ -134,9 +124,7 @@ const WidgetTile: React.FC<WidgetTileProps> = ({ children, widget, title, remove
           </SpaceBetween>
         </div>
       )}
-      <div className='widget-tile-body' onPointerEnter={disableGridMovement} onPointerLeave={enableGridMovement}>
-        {children}
-      </div>
+      <div className='widget-tile-body'>{children}</div>
     </div>
   );
 };

packages/react-components/src/components/chart/baseChart.tsx

@@ -146,6 +146,7 @@ const BaseChart = ({ viewport, queries, size = { width: 500, height: 500 }, ...o
         axis='x'
         minConstraints={minConstraints}
         maxConstraints={maxConstraints}
+        handle={<span className='react-resizable-handle react-resizable-handle-se' data-gesture='resize' />}
         onResizeStart={(e) => e.stopPropagation()}
         onResizeStop={(e) => e.stopPropagation()}
       >