fix: DIA-736: [FE] disable add to project actions when dataset sync is not complete

Author: yyassi-heartex

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>

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,