Browse Source

[ui-storagebrowser] fixes routing between multiple fileSystem (#3937)

* [ui-storagebrowser] fixes routing between multiple fileSystem

* fixes linting
Ram Prasad Agarwal 11 months ago
parent
commit
522abe68ea

+ 6 - 1
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx

@@ -42,7 +42,12 @@ const StorageBrowserPage = (): JSX.Element => {
           items={fileSystems?.map(system => ({
           items={fileSystems?.map(system => ({
             label: system.file_system.toUpperCase(),
             label: system.file_system.toUpperCase(),
             key: system.file_system + '_tab',
             key: system.file_system + '_tab',
-            children: <StorageBrowserTab homeDir={system.user_home_directory} />
+            children: (
+              <StorageBrowserTab
+                homeDir={system.user_home_directory}
+                fileSystem={system.file_system}
+              />
+            )
           }))}
           }))}
         />
         />
       </Spin>
       </Spin>

+ 12 - 5
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx

@@ -29,9 +29,11 @@ import useLoadData from '../../../utils/hooks/useLoadData';
 import './StorageBrowserTab.scss';
 import './StorageBrowserTab.scss';
 import StorageFilePage from '../StorageFilePage/StorageFilePage';
 import StorageFilePage from '../StorageFilePage/StorageFilePage';
 import changeURL from '../../../utils/url/changeURL';
 import changeURL from '../../../utils/url/changeURL';
+import { getFileSystemAndPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 
 
 interface StorageBrowserTabProps {
 interface StorageBrowserTabProps {
   homeDir: string;
   homeDir: string;
+  fileSystem: string;
   testId?: string;
   testId?: string;
 }
 }
 
 
@@ -39,9 +41,16 @@ const defaultProps = {
   testId: 'hue-storage-browser-tab-content'
   testId: 'hue-storage-browser-tab-content'
 };
 };
 
 
-const StorageBrowserTab = ({ homeDir, testId }: StorageBrowserTabProps): JSX.Element => {
+const StorageBrowserTab = ({
+  homeDir,
+  fileSystem,
+  testId
+}: StorageBrowserTabProps): JSX.Element => {
   const [urlPathname, urlFilePath] = decodeURIComponent(window.location.pathname).split('view=');
   const [urlPathname, urlFilePath] = decodeURIComponent(window.location.pathname).split('view=');
-  const [filePath, setFilePath] = useState<string>(urlFilePath || homeDir);
+  const { fileSystem: urlFileSystem } = getFileSystemAndPath(urlFilePath);
+  const initialFilePath = urlFileSystem === fileSystem ? urlFilePath : homeDir;
+
+  const [filePath, setFilePath] = useState<string>(initialFilePath);
   const fileName = filePath.split('/').pop() ?? '';
   const fileName = filePath.split('/').pop() ?? '';
 
 
   const { t } = i18nReact.useTranslation();
   const { t } = i18nReact.useTranslation();
@@ -51,9 +60,7 @@ const StorageBrowserTab = ({ homeDir, testId }: StorageBrowserTabProps): JSX.Ele
     loading,
     loading,
     reloadData
     reloadData
   } = useLoadData<FileStats>(FILE_STATS_API_URL, {
   } = useLoadData<FileStats>(FILE_STATS_API_URL, {
-    params: {
-      path: filePath
-    },
+    params: { path: filePath },
     skip: !filePath
     skip: !filePath
   });
   });
 
 

+ 1 - 1
desktop/core/src/desktop/js/reactComponents/PathBrowser/PathBrowser.util.test.ts

@@ -53,7 +53,7 @@ describe('PathBrowser utils', () => {
       const result = getFileSystemAndPath(path);
       const result = getFileSystemAndPath(path);
 
 
       expect(result).toEqual({
       expect(result).toEqual({
-        fileSystem: 'hdfs',
+        fileSystem: '',
         path: ''
         path: ''
       });
       });
     });
     });

+ 6 - 0
desktop/core/src/desktop/js/reactComponents/PathBrowser/PathBrowser.util.ts

@@ -25,6 +25,12 @@ export const getFileSystemAndPath = (
   fileSystem: string;
   fileSystem: string;
   path: string;
   path: string;
 } => {
 } => {
+  if (filePath === '') {
+    return {
+      fileSystem: '',
+      path: ''
+    };
+  }
   if (filePath.includes('://')) {
   if (filePath.includes('://')) {
     const [fileSystem, path] = filePath.split('://');
     const [fileSystem, path] = filePath.split('://');
     return {
     return {