fix(FR-1324): Preserve query parameters when navigating via breadcrumb in FileExplorer (#4071)

resolves #4059 ([FR-1324](https://lablup.atlassian.net/browse/FR-1324))

Implement path persistence in file explorer using URL query parameters. This allows users to:

- Navigate through folders and maintain the current path in the URL

Todo in next step:
- Return to the same folder location when reopening the file explorer
- Share links that open directly to specific folder locations

Additional implementations:
- Delete LegacyFolderExplorer component > Replace with FolderExplorer component
- Delete unused explorer-related components

The implementation uses the `use-query-params` library to synchronize the file explorer's current path with the URL query parameters. When navigating through folders, the path is updated in the URL, and when reopening the explorer, it restores the last viewed path.

**Checklist:** (if applicable)

- [x] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

[FR-1324]: https://lablup.atlassian.net/browse/FR-1324?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: ironAiken2

packages/backend.ai-ui/package.json

@@ -55,6 +55,8 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@tanstack/react-query": "^5.69.0",
+    "ahooks": "^3.8.4",
     "antd": "^5.24.5",
     "antd-style": "^3.7.1",
     "graphql": "^16.10.0",
@@ -77,10 +79,11 @@
     "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
     "lucide-react": "^0.484.0",
+    "relay-runtime": "^20.1.0",
     "react-resizable": "^3.0.5",
     "react-copy-to-clipboard": "^5.1.0",
-    "tus-js-client": "^4.1.0",
-    "@tanstack/react-query": "^5.69.0"
+    "@tanstack/react-query": "^5.69.0",
+    "use-query-params": "^2.2.1"
   },
   "devDependencies": {
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -116,7 +119,6 @@
     "jest-environment-jsdom": "^29.7.0",
     "storybook": "^9.1.1",
     "ts-jest": "^29.2.5",
-    "tus-js-client": "^4.1.0",
     "typescript": "^5.7.2",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",

packages/backend.ai-ui/src/components/baiClient/FileExplorer/BAIFileExplorer.tsx

@@ -105,7 +105,6 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
     const items: Array<ItemType> = [
       {
         title: <HomeOutlined />,
-        href: '',
         onClick: () => {
           navigateToPath('.');
           setSelectedItems([]);
@@ -143,7 +142,6 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
 
       items.push({
         title: part,
-        href: '',
         onClick: () => {
           navigateToPath(navigatePath);
           setSelectedItems([]);
@@ -248,7 +246,14 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
     <FolderInfoContext.Provider value={{ targetVFolderId, currentPath }}>
       <BAIFlex direction="column" align="stretch" gap="md">
         <BAIFlex align="center" justify="between">
-          <Breadcrumb items={breadCrumbItems} />
+          <Breadcrumb
+            items={breadCrumbItems}
+            itemRender={(item) => (
+              <Typography.Link onClick={item.onClick}>
+                {item.title}
+              </Typography.Link>
+            )}
+          />
           <ExplorerActionControls
             selectedFiles={selectedItems}
             onUpload={(files, currentPath) => onUpload(files, currentPath)}
@@ -303,7 +308,7 @@ const BAIFileExplorer: React.FC<BAIFileExplorerProps> = ({
               );
               if (isSelected) {
                 setSelectedItems(
-                  selectedItems.filter((item) => item.name !== record.name),
+                  selectedItems?.filter((item) => item.name !== record.name),
                 );
               } else {
                 setSelectedItems([...selectedItems, record]);

packages/backend.ai-ui/src/components/baiClient/FileExplorer/hooks.ts

@@ -2,10 +2,15 @@ import useConnectedBAIClient from '../../provider/BAIClientProvider/hooks/useCon
 import { VFolderFile } from '../../provider/BAIClientProvider/types';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
+import { StringParam, useQueryParam, withDefault } from 'use-query-params';
 
 export const useSearchVFolderFiles = (vfolder: string) => {
   const baiClient = useConnectedBAIClient();
   const [currentPath, setCurrentPath] = useState<string>('.');
+  const [, setCurrentPathParam] = useQueryParam(
+    'path',
+    withDefault(StringParam, '.'),
+  );
   const [directoryTree, setDirectoryTree] = useState<
     Record<string, Array<VFolderFile>>
   >({});
@@ -14,18 +19,26 @@ export const useSearchVFolderFiles = (vfolder: string) => {
     const newPath =
       currentPath === '.' ? folderName : `${currentPath}/${folderName}`;
     setCurrentPath(newPath);
+    setCurrentPathParam(newPath);
   };
 
   const navigateUp = () => {
     const pathParts = currentPath.split('/');
     if (pathParts.length > 1) {
+      const newPath = pathParts.join('/');
       pathParts.pop();
-      setCurrentPath(pathParts.join('/') || '.');
+      setCurrentPath(newPath || '.');
+      newPath === '.'
+        ? setCurrentPathParam(null, 'replaceIn')
+        : setCurrentPathParam(newPath);
     }
   };
 
   const navigateToPath = (path: string) => {
     setCurrentPath(path);
+    path === '.'
+      ? setCurrentPathParam(null, 'replaceIn')
+      : setCurrentPathParam(path);
   };
 
   const {

pnpm-lock.yaml

@@ -72,7 +72,8 @@
     "typescript": "^5.7.2",
     "use-query-params": "^2.2.1",
     "uuid": "^9.0.1",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^3.5.2",
+    "tus-js-client": "^4.1.0"
   },
   "scripts": {
     "start": "craco start",