From 9dde27b34f64f3a99b6203713bdacbb0fcb39ceb Mon Sep 17 00:00:00 2001
From: yyassi-heartex <104568407+yyassi-heartex@users.noreply.github.com>
Date: Thu, 30 Nov 2023 09:39:12 -0500
Subject: [PATCH] fix: DIA-736: [FE] disable add to project actions when
 dataset sync is not complete (#276)

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

diff --git a/src/components/DataManager/Toolbar/ActionsButton.js b/src/components/DataManager/Toolbar/ActionsButton.js
index a38403f7..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]);
@@ -88,12 +89,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) ? <Elem name='icon' tag={FaChevronRight} /> : null}
         </Elem>
       </Block>
     );
@@ -125,8 +127,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,