Bug DES-2876: Select Modal bug fixes (#1284)

* Select Modal fixes * Update usePathDisplayName.ts * Fix from merge issue - getPathName * Breadcrumb use system label
DesignSafe-CI · Jun 4, 2024 · 281dc93 · 281dc93
1 parent 1703490
commit 281dc93
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 37 deletions.
diff --git a/client/modules/_common_components/src/datafiles/DatafilesBreadcrumb/DatafilesBreadcrumb.tsx b/client/modules/_common_components/src/datafiles/DatafilesBreadcrumb/DatafilesBreadcrumb.tsx
@@ -64,17 +64,20 @@ export const BaseFileListingBreadcrumb: React.FC<
     path: string;
     systemRootAlias?: string;
     initialBreadcrumbs?: { title: string; path: string }[];
+    systemLabel?: string;
   } & BreadcrumbProps
 > = ({
   api,
   system,
   path,
   systemRootAlias,
   initialBreadcrumbs = [],
+  systemLabel,
   ...props
 }) => {
   const { user } = useAuthenticatedUser();
-  const rootAlias = systemRootAlias || getSystemRootDisplayName(api, system);
+  const rootAlias =
+    systemRootAlias || getSystemRootDisplayName(api, system, systemLabel);
   const systemRoot = isUserHomeSystem(system) ? '/' + user?.username : '';
   return (
     <DatafilesBreadcrumb

diff --git a/client/modules/_hooks/src/datafiles/usePathDisplayName.ts b/client/modules/_hooks/src/datafiles/usePathDisplayName.ts
@@ -1,7 +1,11 @@
 import { useCallback } from 'react';
 import { useAuthenticatedUser } from '../useAuthenticatedUser';
 
-export function getSystemRootDisplayName(api: string, system: string): string {
+export function getSystemRootDisplayName(
+  api: string,
+  system: string,
+  label: string = 'Data Files'
+): string {
   if (api === 'googledrive') return 'Google Drive';
   if (api === 'box') return 'Box';
   if (api === 'dropbox') return 'Dropbox';
@@ -10,19 +14,20 @@ export function getSystemRootDisplayName(api: string, system: string): string {
       'designsafe.storage.default': 'My Data',
       'designsafe.storage.frontera.work': 'My Data (Work)',
       'designsafe.storage.community': 'Community Data',
-    }[system] ?? 'Data Files'
+    }[system] ?? label
   );
 }
 
 function _getPathDisplayName(
   api: string,
   system: string,
   path: string,
+  label: string,
   username?: string
 ) {
   const usernamePath = encodeURIComponent('/' + username);
 
-  if (!path) return getSystemRootDisplayName(api, system);
+  if (!path) return getSystemRootDisplayName(api, system, label);
   if (api === 'googledrive' && !path) return 'Google Drive';
   if (api === 'dropbox' && !path) return 'Dropbox';
   if (api === 'box' && !path) return 'Box';
@@ -34,15 +39,15 @@ function _getPathDisplayName(
     return 'HPC Work';
   }
 
-  return decodeURIComponent(path).split('/').slice(-1)[0] || 'Data Files';
+  return decodeURIComponent(path).split('/').slice(-1)[0] || label;
 }
 
 export function usePathDisplayName() {
   const { user } = useAuthenticatedUser();
 
   const getPathDisplayName = useCallback(
-    (api: string, system: string, path: string) =>
-      _getPathDisplayName(api, system, path, user?.username),
+    (api: string, system: string, path: string, label: string = 'Data Files') =>
+      _getPathDisplayName(api, system, path, label, user?.username),
     [user]
   );
 

diff --git a/client/modules/workspace/src/SelectModal/SelectModal.tsx b/client/modules/workspace/src/SelectModal/SelectModal.tsx
@@ -21,6 +21,7 @@ import {
 import {
   BaseFileListingBreadcrumb,
   FileListingTable,
+  SecondaryButton,
   TFileListingColumns,
 } from '@client/common-components';
 import styles from './SelectModal.module.css';
@@ -32,14 +33,15 @@ const HeaderTitle: React.FC<{
   api: string;
   system: string;
   path: string;
-}> = ({ api, system, path }) => {
+  label: string;
+}> = ({ api, system, path, label }) => {
   const getPathName = usePathDisplayName();
   return (
     <span style={{ fontWeight: 'normal' }}>
       <i role="none" className="fa fa-folder-o">
         &nbsp;&nbsp;
       </i>
-      {getPathName(api, system, path)}
+      {getPathName(api, system, path, label)}
     </span>
   );
 };
@@ -120,44 +122,72 @@ function getFilesColumns(
   api: string,
   system: string,
   path: string,
+  systemLabel: string,
   selectionCallback: (path: string) => void,
   navCallback: (path: string) => void
 ): TFileListingColumns {
   return [
     {
-      title: <HeaderTitle api={api} system={system} path={path} />,
+      title: (
+        <HeaderTitle
+          api={api}
+          system={system}
+          path={path}
+          label={systemLabel}
+        />
+      ),
       dataIndex: 'name',
       ellipsis: true,
 
-      render: (data, record) => (
-        <Button
-          style={{ marginLeft: '3rem', textAlign: 'center' }}
-          onClick={() => navCallback(encodeURIComponent(record.path))}
-          type="link"
-        >
-          <i
-            role="none"
-            style={{ color: '#333333' }}
-            className="fa fa-folder-o"
-          />
-          &nbsp;&nbsp;
-          {data}
-        </Button>
-      ),
+      render: (data, record) =>
+        record.format === 'folder' ? (
+          <Button
+            style={{
+              marginLeft: '3rem',
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+            onClick={() => navCallback(encodeURIComponent(record.path))}
+            type="link"
+          >
+            <i
+              role="none"
+              className="fa fa-folder-o"
+              style={{ color: '#333333', marginRight: '8px' }}
+            ></i>
+            {data}
+          </Button>
+        ) : (
+          <span
+            style={{
+              marginLeft: '3rem',
+              textAlign: 'center',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <i
+              role="none"
+              className="fa fa-file-o"
+              style={{ color: '#333333', marginRight: '8px' }}
+            ></i>
+            {data}
+          </span>
+        ),
     },
     {
       dataIndex: 'path',
       align: 'end',
       title: '',
       render: (_, record) => (
-        <Button
-          type="primary"
+        <SecondaryButton
           onClick={() =>
             selectionCallback(`${api}://${record.system}${record.path}`)
           }
         >
           Select
-        </Button>
+        </SecondaryButton>
       ),
     },
   ];
@@ -170,7 +200,6 @@ export const SelectModal: React.FC<{
   onSelect: (value: string) => void;
 }> = ({ inputLabel, isOpen, onClose, onSelect }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
-  const [searchPlaceHolder, setSearchPlaceHolder] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string | null>(null);
   const [form] = Form.useForm();
 
@@ -216,7 +245,7 @@ export const SelectModal: React.FC<{
       selectedPath: getPath(defaultStorageSystem, user),
       scheme: getScheme(defaultStorageSystem),
     }),
-    [user]
+    [defaultStorageSystem, user]
   );
 
   const [selection, setSelection] = useState<{
@@ -226,7 +255,9 @@ export const SelectModal: React.FC<{
     scheme?: string;
     projectId?: string;
   }>(defaultParams);
-
+  const [systemLabel, setSystemLabel] = useState<string>(
+    defaultStorageSystem.notes.label ?? defaultStorageSystem.id
+  );
   const [showProjects, setShowProjects] = useState<boolean>(false);
   const { selectedApi, selectedSystem, selectedPath, scheme } = selection;
   useEffect(() => setSelection(defaultParams), [isModalOpen, defaultParams]);
@@ -237,7 +268,7 @@ export const SelectModal: React.FC<{
     setDropdownValue(newValue);
     if (newValue === 'myprojects') {
       setShowProjects(true);
-      setSearchPlaceHolder('My Projects');
+      setSystemLabel('My Projects');
       return;
     }
 
@@ -251,7 +282,7 @@ export const SelectModal: React.FC<{
       selectedPath: getPath(system, user),
       scheme: getScheme(system),
     });
-    setSearchPlaceHolder(system.notes.label ?? system.id);
+    setSystemLabel(system.notes.label ?? system.id);
   };
 
   const onProjectSelect = (uuid: string, projectId: string) => {
@@ -263,7 +294,7 @@ export const SelectModal: React.FC<{
       projectId: projectId,
     });
     // Intended to indicate searching the root path of a project.
-    setSearchPlaceHolder('root');
+    setSystemLabel('root');
   };
 
   const navCallback = useCallback(
@@ -283,7 +314,7 @@ export const SelectModal: React.FC<{
       onSelect(path);
       handleClose();
     },
-    [selectedApi, selectedSystem, handleClose, onSelect]
+    [handleClose, onSelect]
   );
 
   const FileColumns = useMemo(
@@ -292,10 +323,18 @@ export const SelectModal: React.FC<{
         selectedApi,
         selectedSystem,
         selectedPath,
+        systemLabel,
         (selection: string) => selectCallback(selection),
         navCallback
       ),
-    [navCallback, selectedApi, selectedSystem, selectedPath, selectCallback]
+    [
+      navCallback,
+      selectedApi,
+      selectedSystem,
+      selectedPath,
+      systemLabel,
+      selectCallback,
+    ]
   );
 
   return (
@@ -338,6 +377,7 @@ export const SelectModal: React.FC<{
                     ? [{ title: 'My Projects', path: 'PROJECT_LISTING' }]
                     : []
                 }
+                systemLabel={systemLabel}
                 itemRender={(item) => {
                   return (
                     <Button
@@ -368,7 +408,7 @@ export const SelectModal: React.FC<{
             </Button>
             <Form.Item name="query" style={{ marginBottom: 0, width: '100%' }}>
               <Input
-                placeholder={`Search ${searchPlaceHolder}`}
+                placeholder={`Search ${systemLabel}`}
                 style={{ width: '100%' }}
               />
             </Form.Item>