Data Files/Projects styling fixes (#1336)

DesignSafe-CI · Jul 8, 2024 · 0906586 · 0906586
1 parent f8dd741
commit 0906586
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 24 deletions.
diff --git a/client/modules/_common_components/src/datafiles/FileListingTable/FileListingTable.tsx b/client/modules/_common_components/src/datafiles/FileListingTable/FileListingTable.tsx
@@ -25,6 +25,7 @@ export const FileListingTable: React.FC<
     disabled?: boolean;
     className?: string;
     emptyListingDisplay?: React.ReactNode;
+    noSelection?: boolean;
     searchTerm?: string | null;
   } & Omit<TableProps, 'columns' | 'className'>
 > = ({
@@ -38,6 +39,7 @@ export const FileListingTable: React.FC<
   className,
   emptyListingDisplay,
   searchTerm = '',
+  noSelection,
   ...props
 }) => {
   const limit = 100;
@@ -133,17 +135,21 @@ export const FileListingTable: React.FC<
       className={`${styles['listing-table-base']} ${
         (combinedListing?.length ?? 0) > 0 ? 'table--pull-spinner-bottom' : ''
       } ${className ?? ''}`}
-      rowSelection={{
-        type: 'checkbox',
-        onChange: onSelectionChange,
-        selectedRowKeys,
-        renderCell: (checked, _rc, _idx, node) => (
-          <FileListingTableCheckbox
-            checked={checked}
-            onChange={(node as React.ReactElement)?.props.onChange}
-          />
-        ),
-      }}
+      rowSelection={
+        noSelection
+          ? undefined
+          : {
+              type: 'checkbox',
+              onChange: onSelectionChange,
+              selectedRowKeys,
+              renderCell: (checked, _rc, _idx, node) => (
+                <FileListingTableCheckbox
+                  checked={checked}
+                  onChange={(node as React.ReactElement)?.props.onChange}
+                />
+              ),
+            }
+      }
       scroll={{ y: '100%', x: '1000px' }} // set to undefined to disable sticky header
       columns={columns}
       rowKey={(record) => record.path}

diff --git a/client/modules/_hooks/src/datafiles/usePathDisplayName.ts b/client/modules/_hooks/src/datafiles/usePathDisplayName.ts
@@ -12,7 +12,7 @@ export function getSystemRootDisplayName(
   return (
     {
       'designsafe.storage.default': 'My Data',
-      'designsafe.storage.frontera.work': 'My Data (Work)',
+      'designsafe.storage.frontera.work': 'HPC Work',
       'designsafe.storage.community': 'Community Data',
     }[system] ?? label
   );

diff --git a/client/modules/datafiles/src/DatafilesModal/UploadFileModal/UploadFileModal.tsx b/client/modules/datafiles/src/DatafilesModal/UploadFileModal/UploadFileModal.tsx
@@ -16,7 +16,7 @@ export const UploadFileModalBody: React.FC<{
   path: string;
   handleCancel: () => void;
 }> = ({ isOpen, api, system, scheme, path, handleCancel }) => {
-  const { mutate } = useUploadFile();
+  const { mutateAsync } = useUploadFile();
 
   const [fileList, setFileList] = useState<UploadFile[]>([]);
   const [uploading, setUploading] = useState(false);
@@ -36,7 +36,7 @@ export const UploadFileModalBody: React.FC<{
         formData.append('file_name', fileList[i].name);
         formData.append('webkit_relative_path', '');
 
-        await mutate({
+        await mutateAsync({
           api,
           system,
           scheme: 'private', // Optional
@@ -47,6 +47,7 @@ export const UploadFileModalBody: React.FC<{
 
       // All files uploaded successfully, close the modal
       setUploading(false);
+      setFileList([]);
       handleCancel();
     } catch (error) {
       console.error('Error during form submission:', error);

diff --git a/client/modules/datafiles/src/FileListing/FileListing.tsx b/client/modules/datafiles/src/FileListing/FileListing.tsx
@@ -28,6 +28,7 @@ export const FileListing: React.FC<
     scheme?: string;
     baseRoute?: string;
     fileTags?: TFileTag[];
+    emptyListingDisplay?: React.ReactNode;
   } & Omit<TableProps, 'columns'>
 > = ({
   api,
@@ -36,6 +37,7 @@ export const FileListing: React.FC<
   scheme = 'private',
   baseRoute,
   fileTags,
+  emptyListingDisplay,
   ...tableProps
 }) => {
   // Base file listing for use with My Data/Community Data
@@ -122,6 +124,7 @@ export const FileListing: React.FC<
         scheme={scheme}
         path={path}
         columns={columns}
+        emptyListingDisplay={emptyListingDisplay}
         {...tableProps}
       />
       {previewModalState.path && previewModalState.selectedFile && (

diff --git a/client/modules/datafiles/src/projects/EmptyProjectFileListing.tsx b/client/modules/datafiles/src/projects/EmptyProjectFileListing.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+export const EmptyProjectFileListing: React.FC = () => {
+  return (
+    <p style={{ marginTop: '20px', fontSize: '16px' }}>
+      This folder is empty! <br />
+      <i role="none" className="fa fa-folder-open-o">
+        &nbsp;
+      </i>
+      <br />
+      <a
+        href="https://www.youtube.com/watch?v=ITf4hlBamGU&amp;list=PL2GxvrdFrBlkwHBgQ47pZO-77ZLrJKYHV"
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-describedby="msg-open-ext-site-new-window"
+      >
+        <i role="none" className="fa fa-question-circle">
+          &nbsp;
+        </i>
+        Learn how to move files to a project
+      </a>
+    </p>
+  );
+};
diff --git a/.../modules/datafiles/src/projects/ProjectCurationFileListing/ProjectCurationFileListing.tsx b/.../modules/datafiles/src/projects/ProjectCurationFileListing/ProjectCurationFileListing.tsx
@@ -27,6 +27,7 @@ import {
 } from '../constants';
 import { DefaultOptionType } from 'antd/es/select';
 import { FILE_TAG_OPTIONS } from './ProjectFileTagOptions';
+import { EmptyProjectFileListing } from '../EmptyProjectFileListing';
 
 const FileTagInput: React.FC<{
   projectId: string;
@@ -354,6 +355,7 @@ export const ProjectCurationFileListing: React.FC<{
         scheme="private"
         path={path}
         columns={columns}
+        emptyListingDisplay={<EmptyProjectFileListing />}
         scroll={{ y: 500 }}
       />
       {previewModalState.path && previewModalState.selectedFile && (

diff --git a/client/modules/datafiles/src/projects/ProjectPreview/ProjectPreview.tsx b/client/modules/datafiles/src/projects/ProjectPreview/ProjectPreview.tsx
@@ -67,7 +67,6 @@ const EntityFileListingTable: React.FC<{
               &nbsp;&nbsp;
               <Button
                 type="link"
-                disabled={preview}
                 onClick={() =>
                   setPreviewModalState({
                     isOpen: true,
@@ -103,6 +102,7 @@ const EntityFileListingTable: React.FC<{
         columns={columns}
         scroll={{ x: 500, y: 500 }}
         dataSource={treeData.value.fileObjs}
+        noSelection={preview}
         disabled
       />
       {previewModalState.path && previewModalState.selectedFile && (
@@ -313,6 +313,7 @@ export const PublishedEntityDisplay: React.FC<{
                 )}
                 {(sortedChildren ?? []).map((child) => (
                   <RecursiveTree
+                    preview={preview}
                     treeData={child}
                     key={child.id}
                     defaultOpen={defaultOpenChildren}

diff --git a/client/modules/datafiles/src/projects/forms/CreateProjectForm.tsx b/client/modules/datafiles/src/projects/forms/CreateProjectForm.tsx
@@ -39,7 +39,10 @@ export const BaseProjectCreateForm: React.FC<{
     <Form
       form={form}
       layout="vertical"
-      onFinish={(v) => onSubmit(processFormData(v))}
+      onFinish={(v) => {
+        onSubmit(processFormData(v));
+        form.resetFields();
+      }}
       onFinishFailed={(v) => console.log(processFormData(v.values))}
       requiredMark={customRequiredMark}
     >

diff --git a/client/modules/datafiles/src/projects/forms/_fields/DateInput.tsx b/client/modules/datafiles/src/projects/forms/_fields/DateInput.tsx
@@ -6,9 +6,10 @@ import dayjs from 'dayjs';
 export const DateInput: React.FC<
   {
     value?: string;
+    id?: string;
     onChange?: (value?: string) => void;
   } & DatePickerProps
-> = ({ value, onChange, ...props }) => {
+> = ({ value, onChange, id, ...props }) => {
   return (
     <>
       <DatePicker

diff --git a/client/modules/datafiles/src/projects/forms/_fields/DropdownSelect.tsx b/client/modules/datafiles/src/projects/forms/_fields/DropdownSelect.tsx
@@ -7,8 +7,9 @@ export const DropdownSelect: React.FC<{
   options: SelectProps['options'];
   value?: DropdownValue[];
   placeholder?: string;
+  id?: string;
   onChange?: (value: DropdownValue[]) => void;
-}> = ({ value, onChange, options, maxCount, placeholder }) => {
+}> = ({ value, onChange, options, maxCount, placeholder, id }) => {
   const [open, setOpen] = useState(false);
   const handleChange = (newVal: { label?: string; value: string }[]) => {
     const formValue = newVal.map((v) =>
@@ -31,6 +32,7 @@ export const DropdownSelect: React.FC<{
 
   return (
     <Select
+      id={id}
       open={open}
       onDropdownVisibleChange={(visible) => setOpen(visible)}
       virtual={false}
@@ -48,10 +50,11 @@ export const DropdownSelect: React.FC<{
 
 export const DropdownSelectSingleValue: React.FC<{
   options: SelectProps['options'];
+  id?: string;
   value?: DropdownValue;
   placeholder?: string;
   onChange?: (value?: DropdownValue) => void;
-}> = ({ value, onChange, options, placeholder }) => {
+}> = ({ value, onChange, options, id, placeholder }) => {
   const [open, setOpen] = useState(false);
 
   const handleChange = (newVal: { label?: string; value: string }[]) => {
@@ -79,6 +82,7 @@ export const DropdownSelectSingleValue: React.FC<{
 
   return (
     <Select
+      id={id}
       maxCount={1}
       virtual={false}
       placeholder={placeholder}

diff --git a/client/modules/datafiles/src/projects/forms/_fields/UserSelect.tsx b/client/modules/datafiles/src/projects/forms/_fields/UserSelect.tsx
@@ -14,10 +14,11 @@ export type TProjectUser = {
 export const UserSelect: React.FC<{
   value?: TProjectUser[];
   onChange?: (value: TProjectUser[]) => void;
+  id?: string;
   userRole?: string;
   maxCount?: number;
   disabled?: boolean;
-}> = ({ value, onChange, userRole, maxCount, disabled }) => {
+}> = ({ value, onChange, id, userRole, maxCount, disabled }) => {
   const initialOptions: SelectProps['options'] = useMemo(
     () =>
       value?.map((u) => ({
@@ -63,6 +64,7 @@ export const UserSelect: React.FC<{
 
   return (
     <Select
+      id={id}
       notFoundContent={
         <span>
           No users were found matching your query. An exact TACC username match

diff --git a/client/modules/datafiles/src/projects/index.ts b/client/modules/datafiles/src/projects/index.ts
@@ -6,6 +6,7 @@ export { ProjectTitleHeader } from './ProjectTitleHeader/ProjectTitleHeader';
 export { ProjectCurationFileListing } from './ProjectCurationFileListing/ProjectCurationFileListing';
 export { ProjectNavbar } from './ProjectNavbar/ProjectNavbar';
 export { ProjectPipeline } from './ProjectPipeline/ProjectPipeline';
+export { EmptyProjectFileListing } from './EmptyProjectFileListing';
 export {
   ProjectPreview,
   PublicationView,

diff --git a/client/modules/datafiles/src/projects/modals/ManageCategoryModal.tsx b/client/modules/datafiles/src/projects/modals/ManageCategoryModal.tsx
@@ -123,7 +123,7 @@ export const ManageCategoryModal: React.FC<{
           </section>
         )}
         <article style={{ marginTop: '5px' }}>
-          <strong>Category Inventory</strong>
+          {categories.length >= 1 && <strong>Category Inventory</strong>}
           {categories.map((category) =>
             data.entities
               .filter((e) => e.name === category)

diff --git a/client/modules/datafiles/src/projects/modals/ManagePublishableEntityModal.tsx b/client/modules/datafiles/src/projects/modals/ManagePublishableEntityModal.tsx
@@ -124,6 +124,9 @@ export const ManagePublishableEntityModal: React.FC<{
         )}
 
         <article style={{ marginTop: '5px' }}>
+          {data.entities.length >= 1 && (
+            <strong>{DISPLAY_NAMES[entityName]} Inventory</strong>
+          )}
           {data.entities
             .filter((e) => e.name === entityName)
             .map((entity) => (

diff --git a/client/src/datafiles/layouts/projects/ProjectPreviewLayout.tsx b/client/src/datafiles/layouts/projects/ProjectPreviewLayout.tsx
@@ -17,7 +17,7 @@ export const ProjectPreviewLayout: React.FC = () => {
   if (!projectId) return null;
   if (!data) return null;
   return (
-    <div style={{ flex: 1 }}>
+    <div style={{ flex: 1, paddingBottom: '30px' }}>
       <ProjectTitleHeader projectId={projectId} />
       <BaseProjectDetails projectValue={data.baseProject.value} />
       <div

diff --git a/client/src/datafiles/layouts/projects/ProjectWorkdirLayout.tsx b/client/src/datafiles/layouts/projects/ProjectWorkdirLayout.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Link, useParams } from 'react-router-dom';
 import {
   ChangeProjectTypeModal,
+  EmptyProjectFileListing,
   FileListing,
   ProjectNavbar,
 } from '@client/datafiles';
@@ -72,6 +73,7 @@ export const ProjectWorkdirLayout: React.FC = () => {
             system={`project-${data.baseProject.uuid}`}
             path={path ?? ''}
             scroll={{ y: 500 }}
+            emptyListingDisplay={<EmptyProjectFileListing />}
           />
         )}
       </div>

diff --git a/client/src/styles.css b/client/src/styles.css
@@ -118,8 +118,8 @@
 .o-site__body:has(> #apps-root),
 #apps-root,
 #apps-root > div.ant-flex,
-.ant-layout-has-sider,
-.ant-layout-sider {
+#apps-root .ant-layout-has-sider,
+#apps-root .ant-layout-sider {
   height: 100%;
   overflow: hidden;
 }