Merge pull request #271 from Ferlab-Ste-Justine/fix/SKFP-664/fix-grid

fix(grid): SKFP-664 fix gridcard and default grid width
Ferlab-Ste-Justine · Apr 20, 2023 · 913df6a · 913df6a
2 parents 789e641 + 9d30cda
commit 913df6a
Show file tree

Hide file tree

Showing 7 changed files with 124 additions and 65 deletions.
diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "6.1.0",
+    "version": "6.1.1",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
@@ -95,6 +95,7 @@
         "query-string": "^7.0.1",
         "react-grid-layout": "^1.3.4",
         "react-icons": "^4.2.0",
+        "react-sizeme": "^3.0.2",
         "simplebar-react": "^2.4.3",
         "uuid": "^8.3.2",
         "xss": "^1.0.9"

diff --git a/packages/ui/src/layout/ResizableGridLayout/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/index.module.scss
@@ -7,4 +7,9 @@
     justify-content: flex-end;
     margin-top: 2px;
   }
+
+  .grid {
+    width: 100%;
+    height: 100%;
+  }
 }
diff --git a/packages/ui/src/layout/ResizableGridLayout/index.test.tsx b/packages/ui/src/layout/ResizableGridLayout/index.test.tsx
@@ -154,35 +154,6 @@ const getSerializedLayout = (): TSerializedResizableGridLayoutConfig[] => [
 ];
 
 describe('ResizableGridLayout', () => {
-    test('make sure resizable grid layout is rendered correctly', () => {
-        const props = {
-            defaultLayouts: getDefaultLayouts(),
-            layouts: getDefaultLayouts(),
-            onConfigUpdate: (_layouts: TSerializedResizableGridLayoutConfig[]) => {},
-            onReset: (_layouts: TSerializedResizableGridLayoutConfig[]) => {},
-        };
-        render(<ResizableGridLayout {...props} />);
-
-        expect(screen.getByText('card_1')).toBeTruthy();
-        expect(screen.getByText('card_2')).toBeTruthy();
-        expect(screen.getByText('card_3')).toBeTruthy();
-        expect(screen.getByText('card_4')).toBeTruthy();
-    });
-
-    test('make sure resizable grid layout is rendered correctly with serialized data', () => {
-        const props = {
-            defaultLayouts: getDefaultLayouts(),
-            layouts: getSerializedLayout(),
-            onConfigUpdate: (_layouts: TSerializedResizableGridLayoutConfig[]) => {},
-            onReset: (_layouts: TSerializedResizableGridLayoutConfig[]) => {},
-        };
-        render(<ResizableGridLayout {...props} />);
-        expect(screen.getByText('card_1')).toBeTruthy();
-        expect(screen.getByText('card_2')).toBeTruthy();
-        expect(screen.queryByText('card_3')).toBeNull();
-        expect(screen.queryByText('card_4')).toBeNull();
-    });
-
     test('make sure serialize function return TSerializedResizableGridLayoutConfig[]', () => {
         const config = [
             {

diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx
@@ -1,11 +1,10 @@
 import React, { useState } from 'react';
-import { Layout, Layouts, Responsive, ResponsiveProps, WidthProvider } from 'react-grid-layout';
+import { Layout, Layouts, Responsive as ResponsiveGridLayout, ResponsiveProps } from 'react-grid-layout';
+import { SizeMe } from 'react-sizeme';
 import { Space } from 'antd';
 
 import ResizableItemSelector from './ResizableItemSelector';
 
-const ResponsiveGridLayout = WidthProvider(Responsive);
-
 import 'react-grid-layout/css/styles.css';
 import 'react-resizable/css/styles.css';
 import styles from './index.module.scss';
@@ -186,35 +185,42 @@ const ResizableGridLayout = ({
                 />
             </div>
 
-            <ResponsiveGridLayout
-                breakpoints={BREAKPOINTS}
-                className="layout"
-                cols={{ lg: 16, md: 12, sm: 10, xs: 6, xxs: 4 }}
-                compactType="horizontal"
-                layouts={responsiveDefaultLayouts}
-                margin={[12, 12]}
-                maxRows={10}
-                onBreakpointChange={(newBreakpoint: string, newCols: number) => {
-                    setCurrentBreakpoint(newBreakpoint);
-                }}
-                onLayoutChange={(currentLayout, allLayouts) => {
-                    onConfigUpdate(serializeLayoutsToConfig(allLayouts, configs));
-                }}
-                rowHeight={98}
-                verticalCompact
-                {...props}
-            >
-                {configs.map((layout) => {
-                    if (layout.hidden) {
-                        return;
-                    }
-                    return (
-                        <div data-grid={layout[currentBreakpoint as keyof IResizableGridLayoutConfig]} key={layout.id}>
-                            {layout.component}
-                        </div>
-                    );
-                })}
-            </ResponsiveGridLayout>
+            <SizeMe>
+                {({ size }) => (
+                    <ResponsiveGridLayout
+                        breakpoints={BREAKPOINTS}
+                        className="layout"
+                        cols={{ lg: 16, md: 12, sm: 10, xs: 6, xxs: 4 }}
+                        containerPadding={[0, 0]}
+                        layouts={responsiveDefaultLayouts}
+                        margin={[12, 12]}
+                        maxRows={10}
+                        onBreakpointChange={(newBreakpoint: string, newCols: number) => {
+                            setCurrentBreakpoint(newBreakpoint);
+                        }}
+                        onLayoutChange={(currentLayout, allLayouts) => {
+                            onConfigUpdate(serializeLayoutsToConfig(allLayouts, configs));
+                        }}
+                        rowHeight={98}
+                        width={size.width !== null ? size.width : 1280}
+                        {...props}
+                    >
+                        {configs.map((layout) => {
+                            if (layout.hidden) {
+                                return;
+                            }
+                            return (
+                                <div
+                                    data-grid={layout[currentBreakpoint as keyof IResizableGridLayoutConfig]}
+                                    key={layout.id}
+                                >
+                                    {layout.component}
+                                </div>
+                            );
+                        })}
+                    </ResponsiveGridLayout>
+                )}
+            </SizeMe>
         </Space>
     );
 };

diff --git a/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss b/packages/ui/src/view/v2/GridCard/GridCardHeader/GridCardHeader.module.scss
@@ -5,7 +5,6 @@
   align-items: center;
   justify-content: space-between;
   font-size: 12px !important;
-  font-weight: 600;
 
   .dragHandle {
     font-size: 12px;

diff --git a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss
@@ -42,8 +42,7 @@ $padding-side-and-bottom: 24px;
 
       div[class$="-head"] {
         div[class$="-head-title"] {
-          padding-bottom: 0;
-          padding: 8px 0
+          padding: 2px 0;
         }
       }
     }