Merge branch 'feat/Tapis-v3-redesign' into quick/remove-v3-specific-d…

…ocker-vars
DesignSafe-CI · Aug 14, 2024 · 2db608f · 2db608f
2 parents 6d9fb2b + c7461d6
commit 2db608f
Show file tree

Hide file tree

Showing 57 changed files with 1,047 additions and 222 deletions.
diff --git a/client/modules/_hooks/src/datafiles/projects/types.ts b/client/modules/_hooks/src/datafiles/projects/types.ts
@@ -76,6 +76,8 @@ export type TBaseProjectValue = {
 
   title: string;
   description: string;
+  tombstone?: boolean;
+  tombstoneMessage?: string;
   users: TProjectUser[];
   dataTypes?: TDropdownValue[];
   authors: TProjectUser[];
@@ -100,6 +102,8 @@ export type TBaseProjectValue = {
 
 export type TEntityValue = {
   title: string;
+  tombstone?: boolean;
+  tombstoneMessage?: string;
   description?: string;
   dataCollectors?: TProjectUser[];
   projectId?: string;

diff --git a/client/modules/_hooks/src/datafiles/publications/useDataciteEvents.ts b/client/modules/_hooks/src/datafiles/publications/useDataciteEvents.ts
@@ -21,7 +21,7 @@ export async function getDataciteEvents({
 }) {
   const dataciteEvents = `/api/publications/data-cite/events?source-id=datacite-usage&doi=${encodeURIComponent(
     doi
-  )}`;
+  )}&page[size]=1000`;
 
   // Fetch data from both endpoints simultaneously
   const respDataciteEvents = await apiClient.get<DataciteEventsResponse>(
@@ -39,5 +39,6 @@ export function useDataciteEvents(doi: string, enabled: boolean = true) {
       return getDataciteEvents({ doi, signal });
     },
     enabled: enabled && !!doi,
+    retry: false,
   });
 }
diff --git a/client/modules/_hooks/src/datafiles/publications/useDataciteMetrics.ts b/client/modules/_hooks/src/datafiles/publications/useDataciteMetrics.ts
@@ -41,5 +41,6 @@ export function useDataciteMetrics(doi: string, enabled: boolean = true) {
       return getDataciteMetrics({ doi, signal });
     },
     enabled: enabled && !!doi,
+    retry: false,
   });
 }
diff --git a/client/modules/datafiles/src/DatafilesModal/PreviewModal/PreviewModal.tsx b/client/modules/datafiles/src/DatafilesModal/PreviewModal/PreviewModal.tsx
@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query';
 import {
   TFileListing,
+  useAuthenticatedUser,
   useFileListingRouteParams,
   useFilePreview,
 } from '@client/hooks';
@@ -44,6 +45,13 @@ export const PreviewModalBody: React.FC<{
     handleCancel();
   }, [handleCancel, queryClient]);
 
+  const { user } = useAuthenticatedUser();
+  const isReadOnly = [
+    'designsafe.storage.published',
+    'designsafe.storage.community',
+    'nees.public',
+  ].includes(selectedFile.system);
+
   if (!isOpen) return null;
 
   return (
@@ -72,7 +80,7 @@ export const PreviewModalBody: React.FC<{
       >
         {!selectedFile.path.endsWith('.hazmapper') && (
           <>
-            {scheme === 'private' && api === 'tapis' && (
+            {!isReadOnly && api === 'tapis' && (
               <MoveModal
                 api={api}
                 system={selectedFile.system}
@@ -89,19 +97,21 @@ export const PreviewModalBody: React.FC<{
               </MoveModal>
             )}
 
-            <CopyModal
-              api={api}
-              system={selectedFile.system}
-              path={listingPath}
-              selectedFiles={[selectedFile]}
-            >
-              {({ onClick }) => (
-                <Button onClick={onClick}>
-                  <i role="none" className="fa fa-copy" />
-                  <span>&nbsp;Copy</span>
-                </Button>
-              )}
-            </CopyModal>
+            {user && (
+              <CopyModal
+                api={api}
+                system={selectedFile.system}
+                path={listingPath}
+                selectedFiles={[selectedFile]}
+              >
+                {({ onClick }) => (
+                  <Button onClick={onClick}>
+                    <i role="none" className="fa fa-copy" />
+                    <span>&nbsp;Copy</span>
+                  </Button>
+                )}
+              </CopyModal>
+            )}
             <DownloadModal
               api={api}
               system={selectedFile.system}

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/ProjectListing.tsx b/client/modules/datafiles/src/projects/ProjectListing.tsx
@@ -1,5 +1,5 @@
 import { TBaseProject, useProjectListing } from '@client/hooks';
-import { Table, TableColumnsType } from 'antd';
+import { Alert, Table, TableColumnsType } from 'antd';
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 
@@ -19,7 +19,7 @@ const columns: TableColumnsType<TBaseProject> = [
   {
     render: (_, record) => {
       const pi = record.value.users.find((u) => u.role === 'pi');
-      return `${pi?.fname} ${pi?.lname}`;
+      return `${pi?.fname ?? '(N/A)'} ${pi?.lname ?? ''}`;
     },
     title: 'Principal Investigator',
   },
@@ -32,7 +32,7 @@ const columns: TableColumnsType<TBaseProject> = [
 export const ProjectListing: React.FC = () => {
   const limit = 100;
   const [currentPage, setCurrentPage] = useState<number>(1);
-  const { data, isLoading } = useProjectListing(currentPage, limit);
+  const { data, isLoading, error } = useProjectListing(currentPage, limit);
 
   return (
     <Table
@@ -50,6 +50,35 @@ export const ProjectListing: React.FC = () => {
         hideOnSinglePage: true,
         onChange: (page) => setCurrentPage(page),
       }}
+      locale={{
+        emptyText: isLoading ? (
+          <div style={{ padding: '50px' }}>&nbsp;</div>
+        ) : (
+          <>
+            {error && (
+              <Alert
+                showIcon
+                type="error"
+                description={
+                  <span>There was an error retrieving your projects."</span>
+                }
+              />
+            )}
+            {!error && (
+              <Alert
+                showIcon
+                type="info"
+                description={
+                  <span>
+                    No projects found. You can create a project by clicking
+                    "Add" in the left-hand sidebar and selecting "New Project".
+                  </span>
+                }
+              />
+            )}
+          </>
+        ),
+      }}
     ></Table>
   );
 };
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}

diff --git a/client/modules/datafiles/src/projects/PublishedEntityDetails.tsx b/client/modules/datafiles/src/projects/PublishedEntityDetails.tsx
@@ -7,6 +7,7 @@ import {
   LicenseDisplay,
   UsernamePopover,
 } from './BaseProjectDetails';
+import { Alert } from 'antd';
 
 export const PublishedEntityDetails: React.FC<{
   entityValue: TEntityValue;
@@ -15,6 +16,25 @@ export const PublishedEntityDetails: React.FC<{
 }> = ({ entityValue, publicationDate, license }) => {
   return (
     <section style={{ marginBottom: '20px' }}>
+      {entityValue.tombstone && (
+        <Alert
+          showIcon
+          style={{ marginBottom: '12px' }}
+          type="warning"
+          message={
+            <strong>The following Dataset does not exist anymore</strong>
+          }
+          description={
+            <div>
+              The Dataset with DOI:{' '}
+              <a href={`https://doi.org/${entityValue.dois?.[0]}`}>
+                {entityValue.dois?.[0]}
+              </a>{' '}
+              was incomplete and removed. The metadata is still available.
+            </div>
+          }
+        />
+      )}
       <table
         style={{ width: '100%', marginBottom: '20px', borderSpacing: '200px' }}
       >