curation fixes for entity ordering/file trashing (#1395)

DesignSafe-CI · Aug 14, 2024 · e60c42d · e60c42d
1 parent a427c7f
commit e60c42d
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 28 deletions.
diff --git a/client/modules/datafiles/src/DatafilesToolbar/TrashButton.tsx b/client/modules/datafiles/src/DatafilesToolbar/TrashButton.tsx
@@ -1,6 +1,12 @@
 import React, { useCallback } from 'react';
-import { useAuthenticatedUser, useTrash } from '@client/hooks';
+import {
+  useAuthenticatedUser,
+  useCheckFilesForAssociation,
+  useNotifyContext,
+  useTrash,
+} from '@client/hooks';
 import { Button, ButtonProps, ConfigProvider } from 'antd';
+import { useParams } from 'react-router-dom';
 
 interface TrashButtonProps<T> extends ButtonProps {
   api: string;
@@ -25,8 +31,35 @@ const TrashButton: React.FC<TrashButtonProps<{ path: string }>> = React.memo(
       [selectedFiles, mutate, api, system]
     );
 
+    let { projectId } = useParams();
+    if (!projectId) projectId = '';
+
+    const hasAssociations = useCheckFilesForAssociation(
+      projectId,
+      selectedFiles.map((f) => f.path)
+    );
+
+    const { notifyApi } = useNotifyContext();
+
     const handleTrashClick = () => {
       // const trashPath = path === 'myData' ? '${user.username}/.Trash' : '.Trash';
+
+      if (hasAssociations) {
+        notifyApi?.open({
+          type: 'error',
+          message: 'Cannot Trash File(s)',
+          duration: 10,
+          description: (
+            <div>
+              The selected file(s) are associated to one or more categories.
+              Please remove category associations before proceeding.
+            </div>
+          ),
+          placement: 'bottomLeft',
+        });
+        return;
+      }
+
       const userUsername: string | undefined = user?.username;
       let trashPath: string;
       if (typeof userUsername === 'string' && !system.startsWith('project-')) {

diff --git a/.../modules/datafiles/src/projects/ProjectCurationFileListing/ProjectCurationFileListing.tsx b/.../modules/datafiles/src/projects/ProjectCurationFileListing/ProjectCurationFileListing.tsx
@@ -206,7 +206,7 @@ const FileCurationSelector: React.FC<{
         </li>
       ))}
       <li style={{ display: 'flex', gap: '4rem' }}>
-        {showEntitySelector && (
+        {showEntitySelector ? (
           <section style={{ display: 'flex', flex: 1 }}>
             <Select<string>
               virtual={false}
@@ -244,6 +244,8 @@ const FileCurationSelector: React.FC<{
               </Button>
             )}
           </section>
+        ) : (
+          <div style={{ height: '30px', margin: '1px' }} />
         )}
         <div style={{ flex: 1 }} />
       </li>

diff --git a/client/modules/datafiles/src/projects/ProjectPreview/ProjectPreview.tsx b/client/modules/datafiles/src/projects/ProjectPreview/ProjectPreview.tsx
@@ -166,27 +166,29 @@ function RecursiveTree({
         <EntityFileListingTable treeData={treeData} preview={preview} />
       </ProjectCollapse>
       <ul className={styles['tree-ul']}>
-        {(treeData.children ?? []).map((child) => (
-          <div key={child.id} style={{ display: 'inline-flex', flex: 1 }}>
-            <span
-              style={{
-                fontSize: '20px',
-                marginLeft: '5px',
-                marginRight: '7px',
-                marginTop: '3px',
-                color: PROJECT_COLORS[treeData.name]['outline'],
-              }}
-            >
-              <i role="none" className="fa fa-level-up fa-rotate-90"></i>
-            </span>
-            <RecursiveTree
-              treeData={child}
-              defaultOpen={defaultOpen}
-              preview={preview}
-              showEditCategories={showEditCategories}
-            />
-          </div>
-        ))}
+        {(treeData.children ?? [])
+          .sort((a, b) => a.order - b.order)
+          .map((child) => (
+            <div key={child.id} style={{ display: 'inline-flex', flex: 1 }}>
+              <span
+                style={{
+                  fontSize: '20px',
+                  marginLeft: '5px',
+                  marginRight: '7px',
+                  marginTop: '3px',
+                  color: PROJECT_COLORS[treeData.name]['outline'],
+                }}
+              >
+                <i role="none" className="fa fa-level-up fa-rotate-90"></i>
+              </span>
+              <RecursiveTree
+                treeData={child}
+                defaultOpen={defaultOpen}
+                preview={preview}
+                showEditCategories={showEditCategories}
+              />
+            </div>
+          ))}
       </ul>
     </li>
   );

diff --git a/client/modules/datafiles/src/projects/ProjectTree/ProjectTree.module.css b/client/modules/datafiles/src/projects/ProjectTree/ProjectTree.module.css
@@ -18,7 +18,6 @@
   position: relative;
   padding: 5px;
   font-size: 14px;
-  z-index: 100;
 }
 .tree-select-item {
   position: relative;
@@ -37,7 +36,7 @@
 .tree-list-item::after,
 .tree-select-item::after {
   position: absolute;
-  height: calc(var(--tree-spacing-y) + 50%);
+  height: calc(var(--tree-spacing-y) + 50% + 10px);
   left: calc(-1 * var(--tree-spacing-x));
   bottom: 50%;
   content: '';
@@ -61,8 +60,8 @@
   position: absolute;
   content: '';
   left: 0;
-  top: -5px;
-  height: calc(100% + var(--tree-spacing-y));
+  top: -10px;
+  height: calc(100% + var(--tree-spacing-y) + 10px);
   border-left: 1px solid black;
 }
 

diff --git a/client/modules/datafiles/src/projects/ProjectTree/ProjectTree.tsx b/client/modules/datafiles/src/projects/ProjectTree/ProjectTree.tsx
@@ -86,7 +86,7 @@ const ProjectTreeDisplay: React.FC<{
   if (!entity) return null;
   return (
     <>
-      <span> &nbsp;{entity.value.title}&nbsp;</span>
+      <span style={{ marginLeft: '5px' }}>{entity.value.title}</span>
       <Button
         type="text"
         disabled={order === 0}