refactor(dashboard): Migrate ResizableContainer to TypeScript and fun…

…ctional component (apache#31452)
preset-io · Jan 10, 2025 · 472ca9d · 472ca9d
1 parent 41ed37a
commit 472ca9d
Show file tree

Hide file tree

Showing 7 changed files with 347 additions and 365 deletions.
diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.jsx
@@ -56,7 +56,6 @@ const GridContent = styled.div`
   ${({ theme, editMode }) => css`
     display: flex;
     flex-direction: column;
-
     /* gutters between rows */
     & > div:not(:last-child):not(.empty-droptarget) {
       ${!editMode && `margin-bottom: ${theme.gridUnit * 4}px`};
@@ -154,8 +153,12 @@ class DashboardGrid extends PureComponent {
     }));
   }
 
-  handleResizeStop({ id, widthMultiple: width, heightMultiple: height }) {
-    this.props.resizeComponent({ id, width, height });
+  handleResizeStop(_event, _direction, _elementRef, delta, id) {
+    this.props.resizeComponent({
+      id,
+      width: delta.width,
+      height: delta.height,
+    });
 
     this.setState(() => ({
       isResizing: false,

diff --git a/superset-frontend/src/dashboard/components/DashboardGrid.test.jsx b/superset-frontend/src/dashboard/components/DashboardGrid.test.jsx
@@ -24,8 +24,6 @@ import newComponentFactory from 'src/dashboard/util/newComponentFactory';
 import { DASHBOARD_GRID_TYPE } from 'src/dashboard/util/componentTypes';
 import { GRID_COLUMN_COUNT } from 'src/dashboard/util/constants';
 
-const args = { id: 'id', widthMultiple: 1, heightMultiple: 3 };
-
 jest.mock(
   'src/dashboard/containers/DashboardComponent',
   () =>
@@ -34,7 +32,9 @@ jest.mock(
         type="button"
         data-test="mock-dashboard-component"
         onClick={() => onResizeStart()}
-        onBlur={() => onResizeStop(args)}
+        onBlur={() =>
+          onResizeStop(null, null, null, { width: 1, height: 3 }, 'id')
+        }
       >
         Mock
       </button>

diff --git a/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx b/superset-frontend/src/dashboard/components/gridComponents/DynamicComponent.tsx
@@ -21,6 +21,7 @@ import { DashboardComponentMetadata, JsonObject, t } from '@superset-ui/core';
 import backgroundStyleOptions from 'src/dashboard/util/backgroundStyleOptions';
 import cx from 'classnames';
 import { shallowEqual, useSelector } from 'react-redux';
+import { ResizeCallback, ResizeStartCallback } from 're-resizable';
 import { Draggable } from '../dnd/DragDroppable';
 import { COLUMN_TYPE, ROW_TYPE } from '../../util/componentTypes';
 import WithPopoverMenu from '../menu/WithPopoverMenu';
@@ -45,9 +46,9 @@ type FilterSummaryType = {
   editMode: boolean;
   columnWidth: number;
   availableColumnCount: number;
-  onResizeStart: Function;
-  onResizeStop: Function;
-  onResize: Function;
+  onResizeStart: ResizeStartCallback;
+  onResizeStop: ResizeCallback;
+  onResize: ResizeCallback;
   deleteComponent: Function;
   updateComponents: Function;
   parentId: number;
@@ -140,6 +141,7 @@ const DynamicComponent: FC<FilterSummaryType> = ({
           >
             <ResizableContainer
               id={component.id}
+              editMode={editMode}
               adjustableWidth={parentComponent.type === ROW_TYPE}
               widthStep={columnWidth}
               widthMultiple={widthMultiple}

diff --git a/superset-frontend/src/dashboard/components/resizable/ResizableContainer.jsx b/superset-frontend/src/dashboard/components/resizable/ResizableContainer.jsx