fix: DIA-736: [FE] disable add to project actions when dataset sync i…

…s not complete (#276)

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>

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

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,