fix: dashboard settings to set correct columns and rows #2313

awslabs · Dec 18, 2023 · cd952c5 · cd952c5
1 parent 5f9aa42
commit cd952c5
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 1 deletion.
diff --git a/packages/dashboard/src/store/actions/changeDashboardGrid/changeHeight.spec.ts b/packages/dashboard/src/store/actions/changeDashboardGrid/changeHeight.spec.ts
@@ -1,5 +1,6 @@
 import { changeDashboardHeight, onChangeDashboardHeightAction } from './changeHeight';
 import { initialState } from '../../state';
+import { MOCK_LINE_CHART_WIDGET } from '../../../../testing/mocks';
 
 it('can change the height of the dashboard', () => {
   expect(
@@ -12,6 +13,32 @@ it('can change the height of the dashboard', () => {
   ).toEqual(10);
 });
 
+it('can update the widget selection with changed height of the dashboard', () => {
+  const store = {
+    ...initialState,
+    dashboardConfiguration: {
+      ...initialState.dashboardConfiguration,
+      widgets: [{ ...MOCK_LINE_CHART_WIDGET }],
+    },
+    selectedWidgets: [{ ...MOCK_LINE_CHART_WIDGET }],
+  };
+  const updatedStore = changeDashboardHeight(
+    store,
+    onChangeDashboardHeightAction({
+      height: 10,
+    })
+  );
+  expect(updatedStore.selectedWidgets[0].height).toEqual(10);
+  expect(
+    changeDashboardHeight(
+      updatedStore,
+      onChangeDashboardHeightAction({
+        height: 100,
+      })
+    ).selectedWidgets[0].height
+  ).toEqual(20);
+});
+
 it('does not allow negative heights', () => {
   expect(
     changeDashboardHeight(

diff --git a/packages/dashboard/src/store/actions/changeDashboardGrid/changeWidth.spec.ts b/packages/dashboard/src/store/actions/changeDashboardGrid/changeWidth.spec.ts
@@ -1,5 +1,6 @@
 import { changeDashboardWidth, onChangeDashboardWidthAction } from './changeWidth';
 import { initialState } from '../../state';
+import { MOCK_LINE_CHART_WIDGET } from '../../../../testing/mocks';
 
 it('can change the width of the dashboard', () => {
   expect(
@@ -12,6 +13,32 @@ it('can change the width of the dashboard', () => {
   ).toEqual(10);
 });
 
+it('can update the widget selection with changed width of the dashboard', () => {
+  const store = {
+    ...initialState,
+    dashboardConfiguration: {
+      ...initialState.dashboardConfiguration,
+      widgets: [{ ...MOCK_LINE_CHART_WIDGET }],
+    },
+    selectedWidgets: [{ ...MOCK_LINE_CHART_WIDGET }],
+  };
+  const updatedStore = changeDashboardWidth(
+    store,
+    onChangeDashboardWidthAction({
+      width: 10,
+    })
+  );
+  expect(updatedStore.selectedWidgets[0].width).toEqual(10);
+  expect(
+    changeDashboardWidth(
+      updatedStore,
+      onChangeDashboardWidthAction({
+        width: 100,
+      })
+    ).selectedWidgets[0].width
+  ).toEqual(33);
+});
+
 it('does not allow negative widths', () => {
   expect(
     changeDashboardWidth(

diff --git a/packages/dashboard/src/store/actions/changeDashboardGrid/updateGrid.ts b/packages/dashboard/src/store/actions/changeDashboardGrid/updateGrid.ts
@@ -1,5 +1,7 @@
 import { constrainWidgetPositionToGrid } from '~/util/constrainWidgetPositionToGrid';
 import type { DashboardState } from '../../state';
+import { WidgetPropertiesGeneratorMap } from '~/customization/widgetPropertiesGeneratorMap';
+import { WIDGET_INITIAL_HEIGHT, WIDGET_INITIAL_WIDTH } from '~/customization/widgets/constants';
 
 type GridProperties = keyof DashboardState['grid'];
 type GridValues = DashboardState['grid'][GridProperties];
@@ -14,7 +16,23 @@ export const changeGridProperty = (
     [property]: value,
   };
   const widgets = state.dashboardConfiguration.widgets.map((w) => {
-    return constrainWidgetPositionToGrid({ x: 0, y: 0, width: grid.width, height: grid.height }, w);
+    const { initialSize } = WidgetPropertiesGeneratorMap[w.type] || {};
+
+    const { width: widgetPixelWidth, height: widgetPixelHeight } = initialSize || {
+      height: WIDGET_INITIAL_HEIGHT,
+      width: WIDGET_INITIAL_WIDTH,
+    };
+    const width = Math.min(Math.ceil(widgetPixelWidth / state.grid.cellSize), grid.width);
+    const height = Math.min(Math.ceil(widgetPixelHeight / state.grid.cellSize), grid.height);
+
+    return constrainWidgetPositionToGrid(
+      { x: 0, y: 0, width: grid.width, height: grid.height },
+      { ...w, ...(property !== 'cellSize' && { width: width, height: height }) }
+    );
+  });
+
+  const updatedSelectedWidgets = state.selectedWidgets.map((w) => {
+    return widgets.find((k) => k.id === w.id) || w;
   });
 
   return {
@@ -24,5 +42,6 @@ export const changeGridProperty = (
       widgets,
     },
     grid,
+    selectedWidgets: [...updatedSelectedWidgets],
   };
 };