[CORE-112] Show folders in main file view in file browser (#5207)

DataBiosphere · Dec 20, 2024 · c89b9d7 · c89b9d7
1 parent ac4c49a
commit c89b9d7
Show file tree

Hide file tree

Showing 11 changed files with 592 additions and 110 deletions.
diff --git a/src/components/file-browser/DirectoryTree.test.ts b/src/components/file-browser/DirectoryTree.test.ts
@@ -91,6 +91,67 @@ describe('Directory', () => {
     expect(renderedSubdirectories).toEqual(['directory1', 'directory2', 'directory3']);
   });
 
+  it('fetches and renders contents for parent directory of selected directory', () => {
+    // Arrange
+    const directoriesIn = (path) => {
+      switch (path) {
+        case 'directory1/':
+          return [
+            {
+              path: 'directory1/test1',
+            },
+            {
+              path: 'directory1/test2',
+            },
+          ];
+        case 'directory1/test1/':
+          return [
+            {
+              path: 'directory1/test1/abc/',
+            },
+            {
+              path: 'directory1/test1/xyz/',
+            },
+          ];
+        default:
+          return [];
+      }
+    };
+
+    asMockedFn(useDirectoriesInDirectory).mockImplementation((_, path) => {
+      return {
+        state: { directories: directoriesIn(path), status: 'Ready' },
+        hasNextPage: undefined,
+        loadNextPage: () => Promise.resolve(),
+        loadAllRemainingItems: () => Promise.resolve(),
+        reload: () => Promise.resolve(),
+      };
+    });
+
+    render(
+      ul({ role: 'tree' }, [
+        h(Directory, {
+          activeDescendant: 'node-0',
+          id: 'node-0',
+          level: 0,
+          path: 'directory1/',
+          provider: mockFileBrowserProvider,
+          reloadRequests: subscribable(),
+          rootLabel: 'Workspace bucket',
+          selectedDirectory: 'directory1/test1/abc/',
+          setActiveDescendant: () => {},
+          onError: () => {},
+          onSelectDirectory: jest.fn(),
+        }),
+      ])
+    );
+
+    // Assert
+    const subdirectoryList = screen.getByLabelText('directory1 subdirectories');
+    const renderedSubdirectories = Array.from(subdirectoryList.children).map((el) => el.children[1].textContent);
+    expect(renderedSubdirectories).toEqual(['test1', 'test2']);
+  });
+
   describe('when directory name is clicked', () => {
     let onSelectDirectory;
 

diff --git a/src/components/file-browser/DirectoryTree.ts b/src/components/file-browser/DirectoryTree.ts
@@ -218,10 +218,17 @@ export const Directory = (props: DirectoryProps) => {
   } = props;
   const isSelected = path === selectedDirectory;
 
-  // Automatically expand root directory.
-  const [isExpanded, setIsExpanded] = useState(path === '');
+  const [isExpanded, setIsExpanded] = useState(false);
   const [hasLoadedContents, setHasLoadedContents] = useState(false);
 
+  useEffect(() => {
+    // Expand the selected directory and its parents
+    const isSelectedOrParent = path === selectedDirectory.substring(0, path.length);
+    if (isSelectedOrParent) {
+      setIsExpanded(true);
+    }
+  }, [path, selectedDirectory]);
+
   return li(
     {
       'aria-expanded': isExpanded,

diff --git a/src/components/file-browser/FileBrowser.test.ts b/src/components/file-browser/FileBrowser.test.ts
@@ -1,13 +1,17 @@
 import { h } from 'react-hyperscript-helpers';
-import { useFilesInDirectory } from 'src/components/file-browser/file-browser-hooks';
+import { useDirectoriesInDirectory, useFilesInDirectory } from 'src/components/file-browser/file-browser-hooks';
 import FileBrowser from 'src/components/file-browser/FileBrowser';
 import FilesTable from 'src/components/file-browser/FilesTable';
-import FileBrowserProvider, { FileBrowserFile } from 'src/libs/ajax/file-browser-providers/FileBrowserProvider';
+import FileBrowserProvider, {
+  FileBrowserDirectory,
+  FileBrowserFile,
+} from 'src/libs/ajax/file-browser-providers/FileBrowserProvider';
 import { asMockedFn, renderWithAppContexts as render } from 'src/testing/test-utils';
 import { RequesterPaysModal } from 'src/workspaces/common/requester-pays/RequesterPaysModal';
 
 jest.mock('src/components/file-browser/file-browser-hooks', () => ({
   ...jest.requireActual('src/components/file-browser/file-browser-hooks'),
+  useDirectoriesInDirectory: jest.fn(),
   useFilesInDirectory: jest.fn(),
 }));
 
@@ -29,13 +33,20 @@ jest.mock('src/workspaces/common/requester-pays/RequesterPaysModal', (): Request
   };
 });
 
+type UseDirectoriesInDirectoryResult = ReturnType<typeof useDirectoriesInDirectory>;
 type UseFilesInDirectoryResult = ReturnType<typeof useFilesInDirectory>;
 
 describe('FileBrowser', () => {
   const mockFileBrowserProvider: FileBrowserProvider = {} as FileBrowserProvider;
 
   it('renders files', () => {
     // Arrange
+    const directories: FileBrowserDirectory[] = [
+      {
+        path: 'path/to/folder/',
+      },
+    ];
+
     const files: FileBrowserFile[] = [
       {
         path: 'file.txt',
@@ -47,6 +58,14 @@ describe('FileBrowser', () => {
       },
     ];
 
+    const useDirectoriesInDirectoryResult: UseDirectoriesInDirectoryResult = {
+      state: { directories, status: 'Ready' },
+      hasNextPage: false,
+      loadNextPage: () => Promise.resolve(),
+      loadAllRemainingItems: () => Promise.resolve(),
+      reload: () => Promise.resolve(),
+    };
+
     const useFilesInDirectoryResult: UseFilesInDirectoryResult = {
       state: { files, status: 'Ready' },
       hasNextPage: false,
@@ -55,6 +74,7 @@ describe('FileBrowser', () => {
       reload: () => Promise.resolve(),
     };
 
+    asMockedFn(useDirectoriesInDirectory).mockReturnValue(useDirectoriesInDirectoryResult);
     asMockedFn(useFilesInDirectory).mockReturnValue(useFilesInDirectoryResult);
 
     // Act
@@ -71,21 +91,7 @@ describe('FileBrowser', () => {
     );
 
     // Assert
-    expect(FilesTable).toHaveBeenCalledWith(
-      expect.objectContaining({
-        files: [
-          {
-            path: 'file.txt',
-            url: 'gs://test-bucket/file.txt',
-            contentType: 'text/plain',
-            size: 1024,
-            createdAt: 1667408400000,
-            updatedAt: 1667408400000,
-          },
-        ],
-      }),
-      expect.anything()
-    );
+    expect(FilesTable).toHaveBeenCalledWith(expect.objectContaining({ directories, files }), expect.anything());
   });
 
   it('prompts to select workspace on requester pays errors', () => {

diff --git a/src/components/file-browser/FileBrowser.ts b/src/components/file-browser/FileBrowser.ts
@@ -161,6 +161,9 @@ const FileBrowser = (props: FileBrowserProps) => {
             rootLabel,
             selectedFiles,
             setSelectedFiles,
+            onClickDirectory: (directory: FileBrowserDirectory) => {
+              setPath(directory.path);
+            },
             onClickFile: setFocusedFile,
             onCreateDirectory: (directory: FileBrowserDirectory) => {
               setPath(directory.path);