feat: FIT-450: Improve empty state for data manager (#8149)

Co-authored-by: ricardoantoniocm <[email protected]>
Co-authored-by: robot-ci-heartex <[email protected]>

Author: ricardoantoniocm

poetry.lock

@@ -73,7 +73,7 @@ dependencies = [
     "djangorestframework-simplejwt[crypto] (>=5.4.0,<6.0.0)",
     "tldextract (>=5.1.3)",
     ## HumanSignal repo dependencies :start
-    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/a80479402d230f5e097a3052f4fe39647e05250a.zip",
+    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/2868d5981a9398edef1141dc1ddb0d3c24411d92.zip",
     ## HumanSignal repo dependencies :end
 ]
 

pyproject.toml

@@ -1,8 +1,8 @@
+import { Button, buttonVariant, ToastContext, ToastType } from "@humansignal/ui";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { generatePath, useHistory } from "react-router";
 import { Link, NavLink } from "react-router-dom";
 import { Spinner } from "../../components";
-import { Button, buttonVariant } from "@humansignal/ui";
 import { modal } from "../../components/Modal/Modal";
 import { Space } from "../../components/Space/Space";
 import { useAPI } from "../../providers/ApiProvider";
@@ -14,7 +14,6 @@ import { isDefined } from "../../utils/helpers";
 import { ImportModal } from "../CreateProject/Import/ImportModal";
 import { ExportPage } from "../ExportPage/ExportPage";
 import { APIConfig } from "./api-config";
-import { ToastContext, ToastType } from "@humansignal/ui";
 
 import "./DataManager.scss";
 
@@ -127,6 +126,11 @@ export const DataManagerPage = ({ ...props }) => {
       history.push(buildLink("/data/import", { id: params.id }));
     });
 
+    // Navigate to Storage Settings and auto-open Add Source Storage modal
+    dataManager.on("openSourceStorageModal", () => {
+      history.push(buildLink("/settings/storage?open=source", { id: params.id }));
+    });
+
     dataManager.on("exportClicked", () => {
       history.push(buildLink("/data/export", { id: params.id }));
     });
@@ -289,7 +293,13 @@ DataManagerPage.context = ({ dmRef }) => {
           onClick={() => {
             modal({
               title: "Instructions",
-              body: () => <div dangerouslySetInnerHTML={{ __html: project.expert_instruction }} />,
+              body: () => (
+                <div
+                  dangerouslySetInnerHTML={{
+                    __html: project.expert_instruction,
+                  }}
+                />
+              ),
             });
           }}
         >

web/apps/labelstudio/src/pages/DataManager/DataManager.jsx

@@ -1,38 +1,30 @@
-import { useCallback, useContext } from "react";
-import { Columns } from "../../../components";
+import { StorageProviderForm } from "@humansignal/app-common/blocks/StorageProviderForm";
+import { ff } from "@humansignal/core";
 import { Button } from "@humansignal/ui";
+import { useAtomValue } from "jotai";
+import { forwardRef, useCallback, useContext, useImperativeHandle } from "react";
+import { Columns } from "../../../components";
 import { confirm, modal } from "../../../components/Modal/Modal";
 import { Spinner } from "../../../components/Spinner/Spinner";
 import { ApiContext } from "../../../providers/ApiProvider";
 import { projectAtom } from "../../../providers/ProjectProvider";
-import { StorageCard } from "./StorageCard";
-import { StorageForm } from "./StorageForm";
-import { useAtomValue } from "jotai";
 import { useStorageCard } from "./hooks/useStorageCard";
-import { ff } from "@humansignal/core";
-import { StorageProviderForm } from "@humansignal/app-common/blocks/StorageProviderForm";
 import { providers } from "./providers";
+import { StorageCard } from "./StorageCard";
+import { StorageForm } from "./StorageForm";
 
-export const StorageSet = ({ title, target, rootClass, buttonLabel }) => {
+export const StorageSet = forwardRef(({ title, target, rootClass, buttonLabel }, ref) => {
   const api = useContext(ApiContext);
   const project = useAtomValue(projectAtom);
-  const storageTypesQueryKey = ["storage-types", target];
-  const storagesQueryKey = ["storages", target, project?.id];
+  // The useStorageCard hook now consolidates this
+  // logic providing only the essential state needed by this component/
+
   const useNewStorageScreen = ff.isActive(ff.FF_NEW_STORAGES);
 
-  const {
-    storageTypes,
-    storageTypesLoading,
-    storageTypesLoaded,
-    reloadStorageTypes,
-    storages,
-    storagesLoading,
-    storagesLoaded,
-    reloadStoragesList,
-    loading,
-    loaded,
-    fetchStorages,
-  } = useStorageCard(target, project?.id);
+  const { storageTypes, storages, storagesLoaded, loading, loaded, fetchStorages } = useStorageCard(
+    target,
+    project?.id,
+  );
 
   const showStorageFormModal = useCallback(
     (storage) => {
@@ -92,12 +84,21 @@ export const StorageSet = ({ title, target, rootClass, buttonLabel }) => {
     [showStorageFormModal],
   );
 
+  // Expose showStorageFormModal to parent via ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      openAddModal: () => showStorageFormModal(),
+    }),
+    [showStorageFormModal],
+  );
+
   const onDeleteStorage = useCallback(
     async (storage) => {
       confirm({
         title: "Deleting storage",
         body: "This action cannot be undone. Are you sure?",
-        buttonLook: "destructive",
+        buttonLook: "negative",
         onOk: async () => {
           const response = await api.callApi("deleteStorage", {
             params: {
@@ -141,4 +142,4 @@ export const StorageSet = ({ title, target, rootClass, buttonLabel }) => {
       )}
     </Columns.Column>
   );
-};
+});

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSet.jsx

@@ -1,12 +1,31 @@
+import { Typography } from "@humansignal/ui";
+import { useEffect, useRef } from "react";
+import { useHistory, useLocation } from "react-router-dom";
 import { cn } from "../../../utils/bem";
-import { StorageSet } from "./StorageSet";
 import { isInLicense, LF_CLOUD_STORAGE_FOR_MANAGERS } from "../../../utils/license-flags";
-import { Typography } from "@humansignal/ui";
+import { StorageSet } from "./StorageSet";
 
 const isAllowCloudStorage = !isInLicense(LF_CLOUD_STORAGE_FOR_MANAGERS);
 
 export const StorageSettings = () => {
   const rootClass = cn("storage-settings"); // TODO: Remove in the next BEM cleanup
+  const history = useHistory();
+  const location = useLocation();
+  const sourceStorageRef = useRef();
+
+  // Handle auto-open query parameter
+  useEffect(() => {
+    const urlParams = new URLSearchParams(location.search);
+    if (urlParams.get("open") === "source") {
+      // Auto-trigger "Add Source Storage" modal
+      setTimeout(() => {
+        sourceStorageRef.current?.openAddModal();
+      }, 100); // Small delay to ensure component is mounted
+
+      // Clean URL by removing the query parameter
+      history.replace(location.pathname);
+    }
+  }, [location, history]);
 
   return isAllowCloudStorage ? (
     <section className="max-w-[680px]">
@@ -18,7 +37,12 @@ export const StorageSettings = () => {
       </Typography>
 
       <div className="grid grid-cols-2 gap-8">
-        <StorageSet title="Source Cloud Storage" buttonLabel="Add Source Storage" rootClass={rootClass} />
+        <StorageSet
+          ref={sourceStorageRef}
+          title="Source Cloud Storage"
+          buttonLabel="Add Source Storage"
+          rootClass={rootClass}
+        />
 
         <StorageSet
           title="Target Cloud Storage"

web/apps/labelstudio/src/pages/Settings/StorageSettings/StorageSettings.jsx

@@ -10,7 +10,8 @@ export const MenuItem = ({
   to,
   className,
   href,
-  danger,
+  danger, // deprecated, use variant="negative" instead
+  variant,
   exact = false,
   forceReload = false,
   active = false,
@@ -39,19 +40,24 @@ export const MenuItem = ({
     </>
   );
 
+  // Support both deprecated danger prop and new variant prop
+  const isNegative = danger || variant === "negative";
+
   const linkAttributes = {
     className: rootClass
       .mod({
         active: isActive || active,
-        look: danger && "danger",
+        look: isNegative && "danger", // Keep existing CSS class for compatibility
       })
       .mix(className),
     onClick,
     ...rest,
   };
 
   if (forceReload) {
-    linkAttributes.onClick = () => (window.location.href = to ?? href);
+    linkAttributes.onClick = () => {
+      window.location.href = to ?? href;
+    };
   }
 
   return (

web/libs/datamanager/src/components/Common/Menu/MenuItem.jsx

@@ -1,7 +1,7 @@
+import { Button } from "@humansignal/ui";
 import { createRef } from "react";
 import { render } from "react-dom";
 import { cn } from "../../../utils/bem";
-import { Button } from "@humansignal/ui";
 import { Space } from "../Space/Space";
 import { Modal } from "./ModalPopup";
 
@@ -51,10 +51,10 @@ export const confirm = ({ okText, onOk, cancelText, onCancel, buttonLook, ...pro
             onCancel?.();
             modal.close();
           }}
-          size="small"
           look="outlined"
           autoFocus
           aria-label="Cancel"
+          data-testid="dialog-cancel-button"
         >
           {cancelText ?? "Cancel"}
         </Button>
@@ -64,8 +64,9 @@ export const confirm = ({ okText, onOk, cancelText, onCancel, buttonLook, ...pro
             onOk?.();
             modal.close();
           }}
-          size="small"
+          variant={buttonLook === "negative" ? "negative" : "primary"}
           aria-label={okText ?? "OK"}
+          data-testid="dialog-ok-button"
         >
           {okText ?? "OK"}
         </Button>
@@ -86,8 +87,8 @@ export const info = ({ okText, onOkPress, ...props }) => {
             onOkPress?.();
             modal.close();
           }}
-          size="small"
           aria-label="OK"
+          data-testid="dialog-ok-button"
         >
           {okText ?? "OK"}
         </Button>

web/libs/datamanager/src/components/Common/Modal/Modal.jsx

@@ -24,8 +24,8 @@
   }
 
   &__content {
-    width: 400px;
-    min-width: 400px;
+    width: 600px;
+    min-width: 600px;
     min-height: 100px;
     margin: 0 auto;
     background-color: var(--color-neutral-background);

web/libs/datamanager/src/components/Common/Modal/Modal.scss

@@ -1,7 +1,7 @@
 import { useSDK } from "../../providers/SDKProvider";
 import { Button } from "@humansignal/ui";
 
-const SDKButton = ({ eventName, ...props }) => {
+const SDKButton = ({ eventName, testId, ...props }) => {
   const sdk = useSDK();
 
   return sdk.hasHandler(eventName) ? (
@@ -11,6 +11,7 @@ const SDKButton = ({ eventName, ...props }) => {
       look={props.look ?? "outlined"}
       variant={props.variant ?? "neutral"}
       aria-label={`${eventName.replace("Clicked", "")} button`}
+      data-testid={testId}
       onClick={() => {
         sdk.invoke(eventName);
       }}
@@ -23,9 +24,9 @@ export const SettingsButton = ({ ...props }) => {
 };
 
 export const ImportButton = ({ ...props }) => {
-  return <SDKButton {...props} eventName="importClicked" />;
+  return <SDKButton {...props} eventName="importClicked" testId="dm-import-button" />;
 };
 
 export const ExportButton = ({ ...props }) => {
-  return <SDKButton {...props} eventName="exportClicked" />;
+  return <SDKButton {...props} eventName="exportClicked" testId="dm-export-button" />;
 };