From 2c16b02b4bb7f228db9c9f53cc21ff95e1925157 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Wed, 29 Nov 2023 09:16:00 -0500
Subject: [PATCH 1/2] fix: DIA-736: [FE] disable add to project actions when
 dataset sync is not complete

---
 src/components/DataManager/Toolbar/ActionsButton.js   | 10 ++++++----
 src/components/DataManager/Toolbar/ActionsButton.styl |  8 ++++++++
 src/stores/Action.js                                  |  2 ++
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
index a38403f7..50e07723 100644
--- a/src/components/DataManager/Toolbar/ActionsButton.js
+++ b/src/components/DataManager/Toolbar/ActionsButton.js
@@ -88,12 +88,13 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
           isSeparator: action.isSeparator,
           isTitle: action.isTitle,
           danger: isDeleteAction,
+          disabled: action.disabled,
         }}
         name='actionButton'
       >
-        <Elem name='titleContainer'>
+        <Elem name='titleContainer' {...(action.disabled ? { title: action.disabledReason } : {})}>
           <Elem name='title'>{action.title}</Elem>
-          {hasChildren ? <Elem name='icon' tag={FaChevronRight} /> : null}
+          {(hasChildren && !action.disabled) ? <Elem name='icon' tag={FaChevronRight} /> : null}
         </Elem>
       </Block>
     );
@@ -104,7 +105,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
         align="top-right-outside"
         toggle={false}
         ref={submenuRef}
-        content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{action.children.map(ActionButton, parentRef)}</Block>}
+        content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{(!action.disabled) && action.children.map(ActionButton, parentRef)}</Block>}
       >
         {titleContainer}
       </Dropdown.Trigger>  
@@ -125,8 +126,9 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
           key={action.id}
           danger={isDeleteAction}
           onClick={onClick}
-          className={`actionButton${action.isSeparator ? "_isSeparator" : (action.isTitle ? "_isTitle" : "")}`}
+          className={`actionButton${action.isSeparator ? "_isSeparator" : (action.isTitle ? "_isTitle" : "")} ${(action.disabled) ? "actionButton_disabled" : ""}`}
           icon={isDeleteAction && <FaTrash />}
+          title={action.disabled ? action.disabledReason : null}
         >
           {action.title}
         </Menu.Item>
diff --git a/src/components/DataManager/Toolbar/ActionsButton.styl b/src/components/DataManager/Toolbar/ActionsButton.styl
index ddf0a72e..285a1aa0 100644
--- a/src/components/DataManager/Toolbar/ActionsButton.styl
+++ b/src/components/DataManager/Toolbar/ActionsButton.styl
@@ -50,6 +50,14 @@
       background-color rgba(0,0,0,0.04)
   &_danger
     color #d00
+  &_disabled
+    background-color rgba(0,0,0,0.04)
+    color rgba(0,0,0,0.25)
+    cursor initial
+    &:hover
+      background-color rgba(0,0,0,0.04) !important
+      color rgba(0,0,0,0.25) !important
+      cursor initial
 
 .actionButtonPrime
   gap 8px
diff --git a/src/stores/Action.js b/src/stores/Action.js
index adc9e14a..ad8f1c61 100644
--- a/src/stores/Action.js
+++ b/src/stores/Action.js
@@ -59,6 +59,8 @@ export const Action = types.model("Action", {
     isSeparator: types.optional(types.boolean, false),
     isTitle: types.optional(types.boolean, false),
     newStyle: types.optional(types.boolean, false),
+    disabled: types.optional(types.boolean, false),
+    disabledReason: types.optional(types.string, ""),
   } : {}),
 }).volatile(() => ({
   caller: null,

From 34742575d6ef9f77a41204c64eb753148688d742 Mon Sep 17 00:00:00 2001
From: Yousif Yassi <yousif@heartex.com>
Date: Wed, 29 Nov 2023 13:26:12 -0500
Subject: [PATCH 2/2] allowing submenu to appear

---
 src/components/DataManager/Toolbar/ActionsButton.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
index 50e07723..539685c8 100644
--- a/src/components/DataManager/Toolbar/ActionsButton.js
+++ b/src/components/DataManager/Toolbar/ActionsButton.js
@@ -73,6 +73,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
     const onClick = useCallback((e) => {
       e.preventDefault();
       e.stopPropagation();
+      if (action.disabled) return;
       action?.callback ? action?.callback(store.currentView?.selected?.snapshot, action) : invokeAction(action, isDeleteAction);
       parentRef?.current?.close?.();
     }, [store.currentView?.selected]);
@@ -94,7 +95,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
       >
         <Elem name='titleContainer' {...(action.disabled ? { title: action.disabledReason } : {})}>
           <Elem name='title'>{action.title}</Elem>
-          {(hasChildren && !action.disabled) ? <Elem name='icon' tag={FaChevronRight} /> : null}
+          {(hasChildren) ? <Elem name='icon' tag={FaChevronRight} /> : null}
         </Elem>
       </Block>
     );
@@ -105,7 +106,7 @@ export const ActionsButton = injector(observer(({ store, size, hasSelected, ...r
         align="top-right-outside"
         toggle={false}
         ref={submenuRef}
-        content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{(!action.disabled) && action.children.map(ActionButton, parentRef)}</Block>}
+        content={<Block name='actionButton-submenu' tag="ul" mod={{ newUI: isNewUI }}>{action.children.map(ActionButton, parentRef)}</Block>}
       >
         {titleContainer}
       </Dropdown.Trigger>