Merge pull request #348 from Ferlab-Ste-Justine/fix/SKFP-852/summary

fix(summary): SKFP-852 fix missing base object in config
Ferlab-Ste-Justine · Nov 14, 2023 · ab96711 · ab96711
2 parents 71d699f + 819d04b
commit ab96711
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/packages/ui/Release.md b/packages/ui/Release.md
@@ -1,3 +1,6 @@
+### 7.14.5 2023-11-08
+- fix: SKFP-852 fix unnecessary breakpoint change for grid-layout
+
 ### 7.14.4 2023-11-08
 - fix: SKFP-852 fix infinite loop on page summary
 

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "7.14.4",
+    "version": "7.14.5",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/packages/ui/src/layout/ResizableGridLayout/index.test.tsx b/packages/ui/src/layout/ResizableGridLayout/index.test.tsx
@@ -133,11 +133,13 @@ describe('ResizableGridLayout', () => {
                     h: 10,
                     w: 10,
                     x: 10,
+                    y: 0,
                 },
                 sm: {
                     h: 10,
                     w: 10,
                     x: 10,
+                    y: 0,
                 },
                 title: 'Card 1',
             },
@@ -275,11 +277,13 @@ describe('ResizableGridLayout', () => {
                     h: 10,
                     w: 10,
                     x: 10,
+                    y: 0,
                 },
                 sm: {
                     h: 10,
                     w: 10,
                     x: 10,
+                    y: 0,
                 },
                 title: 'Card 1',
             },
@@ -456,6 +460,7 @@ describe('ResizableGridLayout', () => {
                     h: 4,
                     w: 6,
                     x: 6,
+                    y: 0,
                 },
                 title: 'card 1',
             },
@@ -479,6 +484,7 @@ describe('ResizableGridLayout', () => {
                     static: false, // default value added by RCL
                     w: 6,
                     x: 6,
+                    y: 0,
                 },
                 title: 'card 1',
             },
@@ -500,6 +506,7 @@ describe('ResizableGridLayout', () => {
                     h: 5, // changed
                     w: 6,
                     x: 10, // changed
+                    y: 0,
                 },
                 title: 'card 1',
             },
@@ -618,6 +625,7 @@ describe('ResizableGridLayout', () => {
                     static: false, // default value added by RCL
                     w: 6,
                     x: 6,
+                    y: 0,
                 },
                 title: 'card 1',
             },

diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx
@@ -2,7 +2,6 @@ import React, { createContext, useState } from 'react';
 import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout';
 import { SizeMe } from 'react-sizeme';
 import { Space } from 'antd';
-import { debounce } from 'lodash';
 import isEqual from 'lodash/isEqual';
 
 import ResizableItemSelector from './ResizableItemSelector';
@@ -24,18 +23,19 @@ type TOptionalBaseType = {
     isResizable?: boolean;
 };
 
-interface ILayoutItemConfig extends Omit<Layout, 'i' | 'y' | 'minH'> {
-    y?: number;
+interface ILayoutItemConfig extends Omit<Layout, 'i' | 'minH' | 'minW'> {
     minH?: number;
-    minX?: number;
+    minW?: number;
 }
 
+type IBaseLayoutItemConfig = Omit<Layout, 'i'>;
+
 export interface IResizableGridLayoutConfig {
     component: React.ReactNode;
     id: string;
     title: string;
     hidden?: boolean;
-    base: ILayoutItemConfig;
+    base: IBaseLayoutItemConfig;
     lg?: ILayoutItemConfig;
     md?: ILayoutItemConfig;
     sm?: ILayoutItemConfig;
@@ -90,14 +90,11 @@ export const deserialize = (
     configs.map((config) => {
         const serializedConfig = (serializedConfigs ?? []).find((item) => item.id == config.id);
         const optionalBaseValues = generateOptionalBaseConfig(config.base);
-
         return {
             ...config,
             ...serializedConfig,
             base: {
-                ...serializedConfig?.base,
-                minH: config.base.minH,
-                minW: config.base.minW,
+                ...config.base,
                 ...optionalBaseValues,
             },
             title: config.title,
@@ -379,6 +376,9 @@ const ResizableGridLayout = ({
                             margin={[12, 12]}
                             maxRows={10}
                             onBreakpointChange={(newBreakpoint: string, newCols: number) => {
+                                if (newBreakpoint === currentBreakpoint) {
+                                    return;
+                                }
                                 setCurrentBreakpoint(newBreakpoint);
                             }}
                             onLayoutChange={(currentLayout, allLayouts) => {