Merge pull request #475 from EyeSeeTea/feature/dataset-actions

add dataSet actions in project page
EyeSeeTea · Dec 12, 2024 · dcffeaa · dcffeaa
2 parents 2679969 + 75a7b3f
commit dcffeaa
Show file tree

Hide file tree

Showing 4 changed files with 226 additions and 153 deletions.
diff --git a/src/webapp/components/dataset-table/DataSetActions.tsx b/src/webapp/components/dataset-table/DataSetActions.tsx
@@ -0,0 +1,88 @@
+import React from "react";
+import i18n from "$/utils/i18n";
+import { useSnackbar } from "@eyeseetea/d2-ui-components";
+import _ from "$/domain/entities/generic/Collection";
+import { Id } from "$/domain/entities/Ref";
+import { ConfirmationModal } from "$/webapp/components/confirmation-modal/ConfirmationModal";
+import { EditSharing } from "$/webapp/components/edit-sharing/EditSharing";
+import { EditOrgUnits } from "$/webapp/components/edit-orgunits/EditOrgUnits";
+import { DataSetLogs } from "$/webapp/components/dataset-logs/DataSetLogs";
+import { Maybe } from "$/utils/ts-utils";
+import { useDeleteDataSets } from "$/webapp/hooks/useDataSets";
+import { component } from "$/utils/react";
+
+export type DataSetActionsProps = {
+    tableAction: Maybe<TableAction>;
+    onChangeAction: (isCancelAction: boolean) => void;
+};
+
+function getSelectedIds(tableAction: Maybe<TableAction>): Id[] {
+    return tableAction?.ids || [];
+}
+
+function getSelectedAction(tableAction: Maybe<TableAction>) {
+    return tableAction?.action;
+}
+
+const DataSetActions_ = React.memo((props: DataSetActionsProps) => {
+    const { onChangeAction, tableAction } = props;
+    const snackbar = useSnackbar();
+    const action = getSelectedAction(tableAction);
+    const selectedIds = getSelectedIds(tableAction);
+
+    const clearTableAction = React.useCallback(
+        (isCancelAction?: boolean) => {
+            onChangeAction(isCancelAction ?? false);
+        },
+        [onChangeAction]
+    );
+
+    const { deleteDataSets } = useDeleteDataSets({
+        ids: selectedIds,
+        onSuccess: () => {
+            clearTableAction();
+            snackbar.success(i18n.t("DataSets removed"));
+        },
+        onError: message => {
+            snackbar.error(message);
+            clearTableAction();
+        },
+    });
+
+    const renderActions = () => {
+        switch (action) {
+            case "remove":
+                return (
+                    <ConfirmationModal
+                        visible
+                        onCancel={clearTableAction}
+                        onSave={deleteDataSets}
+                    />
+                );
+            case "sharing":
+                return (
+                    <EditSharing onCancel={() => clearTableAction(true)} dataSetIds={selectedIds} />
+                );
+            case "orgUnits":
+                return (
+                    <EditOrgUnits
+                        onCancel={() => clearTableAction(true)}
+                        dataSetIds={selectedIds}
+                    />
+                );
+            case "logs":
+                return <DataSetLogs onCancel={clearTableAction} dataSetIds={selectedIds} />;
+            default:
+                return null;
+        }
+    };
+
+    return renderActions();
+});
+
+export type TableAction = {
+    ids: Id[];
+    action: "remove" | "sharing" | "orgUnits" | "logs" | "details";
+};
+export type TableConfigProps = { onAction: (action: TableAction) => void; refreshTable: number };
+export const DataSetActions = component(DataSetActions_);
diff --git a/src/webapp/components/dataset-table/DataSetTable.tsx b/src/webapp/components/dataset-table/DataSetTable.tsx
@@ -1,89 +1,30 @@
 import React from "react";
 import { DataSetAttrs } from "$/domain/entities/DataSet";
-import i18n from "$/utils/i18n";
-import { ObjectsTable, useSnackbar } from "@eyeseetea/d2-ui-components";
+import { ObjectsTable } from "@eyeseetea/d2-ui-components";
 import _ from "$/domain/entities/generic/Collection";
-import { Id } from "$/domain/entities/Ref";
-import { ConfirmationModal } from "$/webapp/components/confirmation-modal/ConfirmationModal";
-import { EditSharing } from "$/webapp/components/edit-sharing/EditSharing";
-import { EditOrgUnits } from "$/webapp/components/edit-orgunits/EditOrgUnits";
-import { DataSetLogs } from "$/webapp/components/dataset-logs/DataSetLogs";
+
 import { HomeTabs } from "$/webapp/components/home-tabs/HomeTabs";
-import { Maybe } from "$/utils/ts-utils";
-import { useDataSetsRoutes, useDeleteDataSets } from "$/webapp/hooks/useDataSets";
+import { useDataSetsRoutes } from "$/webapp/hooks/useDataSets";
 import { useTableConfig } from "$/webapp/components/dataset-table/DataSetTableConfig";
 import { DataSetDetails } from "$/webapp/components/dataset-table/DataSetDetails";
+import { DataSetActions, TableAction } from "$/webapp/components/dataset-table/DataSetActions";
+import { component } from "$/utils/react";
 
 export type DataSetColumns = DataSetAttrs & { permissionDescription: string };
-export type TableAction = {
-    ids: Id[];
-    action: "remove" | "sharing" | "orgUnits" | "logs" | "details";
-};
-
-function getSelectedIds(tableAction: Maybe<TableAction>): Id[] {
-    return tableAction?.ids || [];
-}
-
-function getSelectedAction(tableAction: Maybe<TableAction>) {
-    return tableAction?.action;
-}
 
-export const DataSetTable: React.FC = React.memo(() => {
+const DataSetTable_: React.FC = React.memo(() => {
     const [refreshTable, setRefreshTable] = React.useState(0);
     const [tableAction, setTableAction] = React.useState<TableAction>();
-
-    const snackbar = useSnackbar();
-    const action = getSelectedAction(tableAction);
-    const selectedIds = getSelectedIds(tableAction);
     const tableConfig = useTableConfig({ onAction: setTableAction, refreshTable });
     const { goToCreateDataSet } = useDataSetsRoutes();
 
-    const clearTableAction = React.useCallback((refreshTable?: boolean) => {
+    const refreshDataSets = React.useCallback((isCancelAction: boolean) => {
         setTableAction(undefined);
-        if (refreshTable) {
+        if (!isCancelAction) {
             setRefreshTable(prevValue => prevValue + 1);
         }
     }, []);
 
-    const { deleteDataSets } = useDeleteDataSets({
-        ids: selectedIds,
-        onSuccess: () => {
-            clearTableAction();
-            setRefreshTable(prevValue => prevValue + 1);
-            snackbar.success(i18n.t("DataSets removed"));
-        },
-        onError: message => {
-            snackbar.error(message);
-            clearTableAction();
-        },
-    });
-
-    const closeModal = React.useCallback(() => {
-        setTableAction(undefined);
-    }, []);
-
-    const renderActions = () => {
-        switch (action) {
-            case "remove":
-                return <ConfirmationModal visible onCancel={closeModal} onSave={deleteDataSets} />;
-            case "sharing":
-                return (
-                    <EditSharing onCancel={() => clearTableAction(true)} dataSetIds={selectedIds} />
-                );
-            case "orgUnits":
-                return (
-                    <EditOrgUnits
-                        onCancel={() => clearTableAction(true)}
-                        dataSetIds={selectedIds}
-                    />
-                );
-            case "logs":
-                return <DataSetLogs onCancel={clearTableAction} dataSetIds={selectedIds} />;
-            default:
-                return null;
-        }
-    };
-
     return (
         <>
             <HomeTabs activeTab="dataSets" />
@@ -94,15 +35,15 @@ export const DataSetTable: React.FC = React.memo(() => {
                     <DataSetDetails
                         visible={tableAction?.action === "details"}
                         id={tableAction?.ids[0] || ""}
-                        onClose={clearTableAction}
+                        onClose={() => setTableAction(undefined)}
                     />
                 }
             />
-            {renderActions()}
+            <DataSetActions tableAction={tableAction} onChangeAction={refreshDataSets} />
         </>
     );
 });
 
 export type TableConfigProps = { onAction: (action: TableAction) => void; refreshTable: number };
 
-DataSetTable.displayName = "DataSetTable";
+export const DataSetTable = component(DataSetTable_);