[ui-storagebrowser] moves the new storage browser to new endpoint (#3978

)
cloudera · Jan 31, 2025 · 4a863dc · 4a863dc
1 parent 17e4f36
commit 4a863dc
Showing 10 changed files with 105 additions and 101 deletions.
diff --git a/apps/filebrowser/src/filebrowser/urls.py b/apps/filebrowser/src/filebrowser/urls.py
@@ -25,6 +25,7 @@
 
   # Catch-all for viewing a file (display) or a directory (listdir)
   re_path(r'^view=(?P<path>.*)$', filebrowser_views.view, name='filebrowser.views.view'),
+  re_path(r'^new$', filebrowser_views.view_new, name='filebrowser.views.new_view'),
 
   re_path(r'^listdir=(?P<path>.*)$', filebrowser_views.listdir, name='listdir'),
   re_path(r'^display=(?P<path>.*)$', filebrowser_views.display, name='display'),

diff --git a/apps/filebrowser/src/filebrowser/views.py b/apps/filebrowser/src/filebrowser/views.py
@@ -259,12 +259,13 @@ def download(request, path):
   return response
 
 
+def view_new(request):
+  return render('storage_browser.mako', request, None)
+
+
 def view(request, path):
   """Dispatches viewing of a path to either index() or fileview(), depending on type."""
 
-  if ENABLE_NEW_STORAGE_BROWSER.get():
-    return render('storage_browser.mako', request, None)
-
   # index directory have to be default.
   if not path:
     path = '/'

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx
@@ -27,8 +27,13 @@ import { ApiFileSystem, FILESYSTEMS_API_URL } from '../../reactComponents/FileCh
 import './StorageBrowserPage.scss';
 import useLoadData from '../../utils/hooks/useLoadData/useLoadData';
 import LoadingErrorWrapper from '../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
+import { getFileSystemAndPath } from '../../reactComponents/PathBrowser/PathBrowser.util';
 
 const StorageBrowserPage = (): JSX.Element => {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const urlFilePath = decodeURIComponent(urlSearchParams.get('path') ?? '');
+  const { fileSystem: urlFileSystem } = getFileSystemAndPath(urlFilePath);
+
   const { t } = i18nReact.useTranslation();
 
   const { data, loading, error, reloadData } = useLoadData<ApiFileSystem[]>(FILESYSTEMS_API_URL);
@@ -48,7 +53,8 @@ const StorageBrowserPage = (): JSX.Element => {
       <LoadingErrorWrapper loading={loading} errors={errorConfig}>
         <Tabs
           className="hue-storage-browser__tab"
-          defaultActiveKey={data?.[0]?.file_system}
+          destroyInactiveTabPane
+          defaultActiveKey={urlFileSystem ?? data?.[0]?.file_system}
           items={data?.map(fs => ({
             label: fs.file_system.toUpperCase(),
             key: fs.file_system,

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx
@@ -46,7 +46,9 @@ const StorageBrowserTab = ({
   fileSystem,
   testId
 }: StorageBrowserTabProps): JSX.Element => {
-  const [urlPathname, urlFilePath] = decodeURIComponent(window.location.pathname).split('view=');
+  const urlPathname = window.location.pathname;
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const urlFilePath = decodeURIComponent(urlSearchParams.get('path') ?? '');
   const { fileSystem: urlFileSystem } = getFileSystemAndPath(urlFilePath);
   const initialFilePath = urlFileSystem === fileSystem ? urlFilePath : homeDir;
 
@@ -66,15 +68,16 @@ const StorageBrowserTab = ({
   });
 
   useEffect(() => {
-    const encodedPath = `${urlPathname}view=${encodeURIComponent(filePath)}`;
+    const urlQueryParams = { path: filePath };
+    const encodedSearchParams = new URLSearchParams(urlQueryParams).toString();
     if (filePath && urlFilePath && filePath !== urlFilePath) {
-      changeURL(encodedPath);
+      changeURL(urlPathname, urlQueryParams);
     }
     // if url path is correct but not encoded properly
-    else if (encodedPath !== window.location.pathname) {
-      changeURL(encodedPath, {}, true);
+    else if (encodedSearchParams !== window.location.search) {
+      changeURL(urlPathname, urlQueryParams, true);
     }
-  }, [filePath, urlPathname, urlFilePath, window.location.pathname]);
+  }, [filePath, urlPathname, urlFilePath, window.location]);
 
   const errorConfig = [
     {

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/app.js b/desktop/core/src/desktop/js/apps/storageBrowser/app.js
@@ -16,6 +16,10 @@
 import huePubSub from '../../utils/huePubSub';
 
 huePubSub.subscribe('app.dom.loaded', app => {
+  if (app === 'newfilebrowser') {
+    window.createReactComponents('#embeddable_newfilebrowser');
+    return;
+  }
   if (app !== 'filebrowser') {
     return;
   }

diff --git a/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue b/desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue
@@ -54,7 +54,7 @@
     ASSIST_ACTIVE_DB_CHANGED_EVENT,
     ASSIST_SET_DATABASE_EVENT
   } from 'ko/components/assist/events';
-  import { AppType, Connector, HueConfig, Namespace, BrowserInterpreter } from 'config/types';
+  import { AppType, Connector, HueConfig, Namespace } from 'config/types';
   import { hueWindow } from 'types/types';
   import { CONFIG_REFRESHED_TOPIC } from 'config/events';
   import { getLastKnownConfig } from 'config/hueConfig';
@@ -79,7 +79,6 @@
     abfs: `<svg class="hi hi-fw"><use href="#hi-adls"></use></svg>`,
     adls: `<svg class="hi hi-fw"><use href="#hi-adls"></use></svg>`,
     dashboard: `<svg class="hi hi-fw"><use href="#hi-dashboard"></use></svg>`,
-    'data-browser': `<svg class="hi hi-fw"><use href="#hi-data-browser"></use></svg>`,
     default: `<i class="fa fa-fw fa-database"></i>`,
     'dist-cp': `<i class="fa fa-fw fa-files-o"></i>`,
     documents: `<svg class="hi hi-fw"><use href="#hi-documents"></use></svg>`,
@@ -97,6 +96,7 @@
     mapreduce: `<i class="fa fa-fw fa-file-archive-o"></i>`,
     markdown: `<svg class="hi hi-fw"><use href="#hi-markdown"></use></svg>`,
     notebook: `<svg class="hi hi-fw"><use href="#hi-file-notebook"></use></svg>`,
+    newfilebrowser: `<svg class="hi hi-fw"><use href="#hi-data-browser"></use></svg>`,
     oozie: `<svg class="hi hi-fw"><use href="#hi-oozie"></use></svg>`,
     'oozie-bundle': `<svg class="hi hi-fw"><use href="#hi-oozie-bundle"></use></svg>`,
     'oozie-coordinator': `<svg class="hi hi-fw"><use href="#hi-oozie-coordinator"></use></svg>`,
@@ -327,6 +327,9 @@
               adaptedName = 'hdfs';
             }
             break;
+          case 'newfilebrowser':
+            adaptedName = 'newfilebrowser';
+            break;
           case 'jobbrowser':
             adaptedName = 'yarn';
             break;
@@ -483,34 +486,7 @@
             });
           }
           if (appConfig.browser && appConfig.browser.interpreters) {
-            // Replace old file browser entries with the new storage browser if the feature flag is enabled.
-            let browserInterpreters: BrowserInterpreter[] = [];
-            if (clusterConfig.storage_browser.enable_new_storage_browser) {
-              let firstFileBrowserFound = false;
-              appConfig.browser.interpreters.forEach(browser => {
-                const isFileBrowser = /\/filebrowser/.test(browser.page);
-                if (isFileBrowser) {
-                  if (!firstFileBrowserFound) {
-                    browserInterpreters.push({
-                      buttonName: 'Browse',
-                      //TODO: Get i18n here
-                      displayName: 'Storage Browser',
-                      //by default the first filesystem's url in the config is used.
-                      page: browser.page,
-                      tooltip: 'Storage Browser',
-                      type: 'data-browser'
-                    });
-                  }
-                  firstFileBrowserFound = true;
-                } else {
-                  browserInterpreters.push(browser);
-                }
-              });
-            } else {
-              browserInterpreters = appConfig.browser.interpreters;
-            }
-
-            browserInterpreters.forEach(browser => {
+            appConfig.browser.interpreters.forEach(browser => {
               if (browser.type === 'tables') {
                 browserItems.push({
                   type: 'navigation',

diff --git a/desktop/core/src/desktop/js/onePageViewModel.js b/desktop/core/src/desktop/js/onePageViewModel.js
@@ -709,6 +709,7 @@ class OnePageViewModel {
         }
       },
       { url: '/filebrowser/view=*', app: 'filebrowser' },
+      { url: '/filebrowser/new', app: 'newfilebrowser' },
       {
         url: '/filebrowser/*',
         app: function () {

diff --git a/desktop/core/src/desktop/models.py b/desktop/core/src/desktop/models.py
@@ -43,6 +43,7 @@
   COLLECT_USAGE,
   DISABLE_SOURCE_AUTOCOMPLETE,
   ENABLE_CONNECTORS,
+  ENABLE_NEW_STORAGE_BROWSER,
   ENABLE_ORGANIZATIONS,
   ENABLE_PROMETHEUS,
   ENABLE_SHARING,
@@ -2011,74 +2012,83 @@ def _get_browser(self):
 
     remote_home_storage = get_remote_home_storage(self.user)
 
-    for hdfs_connector in hdfs_connectors:
-      force_home = remote_home_storage and not remote_home_storage.startswith('/')
-      home_path = self.user.get_home_directory(force_home=force_home)
+    if ENABLE_NEW_STORAGE_BROWSER.get():
       interpreters.append({
-        'type': 'hdfs',
-        'displayName': hdfs_connector,
-        'buttonName': _('Browse'),
-        'tooltip': hdfs_connector,
-        'page': '/filebrowser/' + (
-          not self.user.is_anonymous and
-          'view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS) or ''
-        )
+        'type': 'newfilebrowser',
+        'displayName': _('New File Browser'),
+        'buttonName': _('New File Browser'),
+        'tooltip': _('New File Browser'),
+        'page': '/filebrowser/new'
       })
+    else:
+      for hdfs_connector in hdfs_connectors:
+        force_home = remote_home_storage and not remote_home_storage.startswith('/')
+        home_path = self.user.get_home_directory(force_home=force_home)
+        interpreters.append({
+          'type': 'hdfs',
+          'displayName': hdfs_connector,
+          'buttonName': _('Browse'),
+          'tooltip': hdfs_connector,
+          'page': '/filebrowser/' + (
+            not self.user.is_anonymous and
+            'view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS) or ''
+          )
+        })
 
-    if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('s3a', self.user):
-      from aws.s3.s3fs import get_s3_home_directory
-      home_path = get_s3_home_directory(self.user)
-      interpreters.append({
-        'type': 's3',
-        'displayName': _('S3'),
-        'buttonName': _('Browse'),
-        'tooltip': _('S3'),
-        'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
-      })
+      if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('s3a', self.user):
+        from aws.s3.s3fs import get_s3_home_directory
+        home_path = get_s3_home_directory(self.user)
+        interpreters.append({
+          'type': 's3',
+          'displayName': _('S3'),
+          'buttonName': _('Browse'),
+          'tooltip': _('S3'),
+          'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
+        })
 
-    if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('gs', self.user):
-      from desktop.lib.fs.gc.gs import get_gs_home_directory
-      home_path = get_gs_home_directory(self.user)
-      interpreters.append({
-        'type': 'gs',
-        'displayName': _('GS'),
-        'buttonName': _('Browse'),
-        'tooltip': _('Google Storage'),
-        'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
-      })
+      if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('gs', self.user):
+        from desktop.lib.fs.gc.gs import get_gs_home_directory
+        home_path = get_gs_home_directory(self.user)
+        interpreters.append({
+          'type': 'gs',
+          'displayName': _('GS'),
+          'buttonName': _('Browse'),
+          'tooltip': _('Google Storage'),
+          'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
+        })
 
-    if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('adl', self.user):
-      # ADLS does not have a dedicated get_home_directory method
-      home_path = remote_home_storage if remote_home_storage else 'adl:/'
-      interpreters.append({
-        'type': 'adls',
-        'displayName': _('ADLS'),
-        'buttonName': _('Browse'),
-        'tooltip': _('ADLS'),
-        'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
-      })
+      if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('adl', self.user):
+        # ADLS does not have a dedicated get_home_directory method
+        home_path = remote_home_storage if remote_home_storage else 'adl:/'
+        interpreters.append({
+          'type': 'adls',
+          'displayName': _('ADLS'),
+          'buttonName': _('Browse'),
+          'tooltip': _('ADLS'),
+          'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
+        })
 
-    if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('abfs', self.user):
-      from azure.abfs.__init__ import get_abfs_home_directory
-      home_path = get_abfs_home_directory(self.user)
-      interpreters.append({
-        'type': 'abfs',
-        'displayName': _('ABFS'),
-        'buttonName': _('Browse'),
-        'tooltip': _('ABFS'),
-        'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
-      })
+      if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('abfs', self.user):
+        from azure.abfs.__init__ import get_abfs_home_directory
+        home_path = get_abfs_home_directory(self.user)
+        interpreters.append({
+          'type': 'abfs',
+          'displayName': _('ABFS'),
+          'buttonName': _('Browse'),
+          'tooltip': _('ABFS'),
+          'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
+        })
 
-    if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('ofs', self.user):
-      from desktop.lib.fs.ozone.ofs import get_ofs_home_directory
-      home_path = get_ofs_home_directory()
-      interpreters.append({
-        'type': 'ofs',
-        'displayName': _('Ozone'),
-        'buttonName': _('Browse'),
-        'tooltip': _('Ozone'),
-        'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
-      })
+      if 'filebrowser' in self.apps and fsmanager.is_enabled_and_has_access('ofs', self.user):
+        from desktop.lib.fs.ozone.ofs import get_ofs_home_directory
+        home_path = get_ofs_home_directory()
+        interpreters.append({
+          'type': 'ofs',
+          'displayName': _('Ozone'),
+          'buttonName': _('Browse'),
+          'tooltip': _('Ozone'),
+          'page': '/filebrowser/view=' + urllib_quote(home_path, safe=SAFE_CHARACTERS_URI_COMPONENTS)
+        })
 
     if 'metastore' in self.apps:
       interpreters.append({

diff --git a/desktop/core/src/desktop/templates/global_js_constants.mako b/desktop/core/src/desktop/templates/global_js_constants.mako
@@ -72,6 +72,7 @@
     oozie_info: { url: '/oozie/list_oozie_info', title: '${_('Oozie')}' },
     jobbrowser: { url: '/jobbrowser/apps', title: '${_('Job Browser')}' },
     filebrowser: { url: '/filebrowser/view=*', title: '${_('File Browser')}' },
+    newfilebrowser: { url: '/filebrowser/new', title: '${_('New File Browser')}' },
     home: { url: '/home*', title: '${_('Home')}' },
     catalog: { url: '/catalog', title: '${_('Catalog')}' },
     indexer: { url: '/indexer/indexer/', title: '${_('Indexer')}' },

diff --git a/desktop/core/src/desktop/templates/hue.mako b/desktop/core/src/desktop/templates/hue.mako
@@ -220,6 +220,7 @@ ${ hueIcons.symbols() }
         <div id="embeddable_oozie_info" class="embeddable"></div>
         <div id="embeddable_jobbrowser" class="embeddable"></div>
         <div id="embeddable_filebrowser" class="embeddable"></div>
+        <div id="embeddable_newfilebrowser" class="embeddable"></div>
         <div id="embeddable_home" class="embeddable"></div>
         <div id="embeddable_catalog" class="embeddable"></div>
         <div id="embeddable_indexer" class="embeddable"></div>