From 780fb44047610759aba10dca86ef3347b215d1df Mon Sep 17 00:00:00 2001
From: lflangis <lflangis@ferlab.bio>
Date: Tue, 25 Apr 2023 13:35:15 -0400
Subject: [PATCH] fix(resizablegrid): SKFP-664 fix drag handle and menu
 behavior

---
 packages/ui/package.json                      |  2 +-
 .../ResizableItemSelector/index.module.scss   |  1 -
 .../ResizableItemSelector/index.tsx           | 19 ++++++++++++++++---
 .../ResizableGridLayout/index.module.scss     | 13 +++++++++++++
 .../src/layout/ResizableGridLayout/index.tsx  |  7 +++++++
 .../src/view/v2/GridCard/Gridcard.module.scss |  1 +
 packages/ui/themes/default/_colors.scss       |  4 +++-
 7 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index e5a34bfd1..552b8aab1 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "6.1.1",
+    "version": "6.1.2",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"
diff --git a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss
index 7a527fb72..bd41e9266 100644
--- a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss
+++ b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.module.scss
@@ -1,4 +1,3 @@
-
 .popover {
   div[class$="-inner-content"] {
     padding: 12px;
diff --git a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx
index 20b9fba2a..553cece9d 100644
--- a/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx
+++ b/packages/ui/src/layout/ResizableGridLayout/ResizableItemSelector/index.tsx
@@ -12,6 +12,7 @@ type TResizableItem = {
 
 type TResizableItemSelector = {
     items: TResizableItem[];
+    defaultItems: TResizableItem[];
     onReset: () => void;
     onChange: (id: string, checkbox: boolean) => void;
     dictionary?: {
@@ -19,7 +20,13 @@ type TResizableItemSelector = {
     };
 };
 
-const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResizableItemSelector): JSX.Element => (
+const ResizableItemSelector = ({
+    defaultItems,
+    dictionary,
+    items,
+    onChange,
+    onReset,
+}: TResizableItemSelector): JSX.Element => (
     <Popover
         align={{ offset: [-9, 0] }}
         content={
@@ -39,7 +46,13 @@ const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResiza
                         ))}
                     </Space>
                     <div className={styles.resetWrapper}>
-                        <Button className={styles.reset} onClick={onReset} size="small" type="link">
+                        <Button
+                            className={styles.reset}
+                            disabled={JSON.stringify(items) === JSON.stringify(defaultItems)}
+                            onClick={onReset}
+                            size="small"
+                            type="link"
+                        >
                             {dictionary?.columnSelector?.reset || 'Reset'}
                         </Button>
                     </div>
@@ -50,7 +63,7 @@ const ResizableItemSelector = ({ dictionary, items, onChange, onReset }: TResiza
         placement="bottomLeft"
         trigger="click"
     >
-        <Tooltip title={dictionary?.columnSelector?.tooltips?.columns || 'Columns'}>
+        <Tooltip title={dictionary?.chartsSelector?.tooltips?.charts || 'Charts'}>
             <Button icon={<SettingOutlined />} size="small" type="text"></Button>
         </Tooltip>
     </Popover>
diff --git a/packages/ui/src/layout/ResizableGridLayout/index.module.scss b/packages/ui/src/layout/ResizableGridLayout/index.module.scss
index d4e1ebe27..a339476af 100644
--- a/packages/ui/src/layout/ResizableGridLayout/index.module.scss
+++ b/packages/ui/src/layout/ResizableGridLayout/index.module.scss
@@ -1,3 +1,5 @@
+@import "theme.template";
+
 .wrapper {
   width: 100%;
 
@@ -12,4 +14,15 @@
     width: 100%;
     height: 100%;
   }
+}
+
+:global(.react-grid-item > .react-resizable-handle ) {
+  width: 16px;
+  height: 16px;
+
+  &::after {
+    border-color: $grid-layout-resize-color;
+    width: 8px;
+    height: 8px;
+  }
 }
\ No newline at end of file
diff --git a/packages/ui/src/layout/ResizableGridLayout/index.tsx b/packages/ui/src/layout/ResizableGridLayout/index.tsx
index 4bdbe9ed0..dd68c5734 100644
--- a/packages/ui/src/layout/ResizableGridLayout/index.tsx
+++ b/packages/ui/src/layout/ResizableGridLayout/index.tsx
@@ -172,11 +172,17 @@ const ResizableGridLayout = ({
         label: title,
         value: hidden === undefined ? true : !hidden,
     }));
+    const defaultResizableItemsList = defaultLayouts.map(({ hidden, id, title }) => ({
+        id,
+        label: title,
+        value: hidden === undefined ? true : !hidden,
+    }));
 
     return (
         <Space className={styles.wrapper} direction="vertical">
             <div className={styles.graphSelector}>
                 <ResizableItemSelector
+                    defaultItems={defaultResizableItemsList}
                     items={resizableItemsList}
                     onChange={(targetId, checked) => {
                         onConfigUpdate(serialize(updateConfig(configs, targetId, 'hidden', !checked)));
@@ -192,6 +198,7 @@ const ResizableGridLayout = ({
                         className="layout"
                         cols={{ lg: 16, md: 12, sm: 10, xs: 6, xxs: 4 }}
                         containerPadding={[0, 0]}
+                        draggableHandle=".ant-card-head"
                         layouts={responsiveDefaultLayouts}
                         margin={[12, 12]}
                         maxRows={10}
diff --git a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss
index 22ea84205..77684b523 100644
--- a/packages/ui/src/view/v2/GridCard/Gridcard.module.scss
+++ b/packages/ui/src/view/v2/GridCard/Gridcard.module.scss
@@ -41,6 +41,7 @@ $padding-side-and-bottom: 24px;
       padding: 0;
 
       div[class$="-head"] {
+        cursor: move;
         div[class$="-head-title"] {
           padding: 2px 0;
         }
diff --git a/packages/ui/themes/default/_colors.scss b/packages/ui/themes/default/_colors.scss
index a996db4de..e5caaced5 100644
--- a/packages/ui/themes/default/_colors.scss
+++ b/packages/ui/themes/default/_colors.scss
@@ -90,4 +90,6 @@ $processing-color: $blue-6;
 $error-color: $red-8;
 $highlight-color: $magenta-6;
 $normal-color: $gray-5;
-$border-color-split: $gray-4;
\ No newline at end of file
+$border-color-split: $gray-4;
+
+$grid-layout-resize-color: $gray-7;
\ No newline at end of file