[ui-sb] Port sb from mako based to pure frontend (#4129)

Author: ramprasadagarwal

apps/filebrowser/src/filebrowser/templates/storage_browser.mako

@@ -25,7 +25,6 @@
 
   # 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'),

apps/filebrowser/src/filebrowser/urls.py

@@ -259,10 +259,6 @@ 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."""
 

apps/filebrowser/src/filebrowser/views.py

@@ -27,4 +27,3 @@
     overflow: auto;
   }
 }
-

desktop/core/src/desktop/js/apps/newimporter/ImporterPage.scss

@@ -15,41 +15,34 @@
 // limitations under the License.
 
 @use 'variables' as vars;
-
-.hue-storage-browser__root-container {
-  height: 100%;
-}
+@use 'mixins';
 
 .hue-storage-browser.antd.cuix {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  min-width: 300px;
+  @include mixins.fillAbsolute;
+  @include mixins.flexRowLayout;
 
-  .ant-spin-nested-loading {
-    height: 100%;
-
-    .ant-spin-container {
-      height: 100%;
-    }
-  }
+  min-width: 300px;
 
-  .hue-storage-browser__tab {
-    display: flex;
+  .hue-storage-browser__container {
     height: 100%;
-    background-color: vars.$fluidx-gray-100;
+    overflow: auto;
     padding: 0 16px;
+    background-color: vars.$fluidx-gray-100;
 
-    .ant-tabs-content-holder {
+    .hue-storage-browser__tab {
       display: flex;
-      flex: 1;
+      height: 100%;
 
-      .ant-tabs-content,
-      .ant-tabs-tabpane-active {
+      .ant-tabs-content-holder {
         display: flex;
-        flex-direction: column;
         flex: 1;
+
+        .ant-tabs-content,
+        .ant-tabs-tabpane-active {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+        }
       }
     }
   }

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss

@@ -51,18 +51,20 @@ const StorageBrowserPage = (): JSX.Element => {
   return (
     <div className="hue-storage-browser cuix antd">
       <CommonHeader title={t('Storage Browser')} icon={<DataBrowserIcon />} />
-      <LoadingErrorWrapper loading={loading} errors={errorConfig}>
-        <Tabs
-          className="hue-storage-browser__tab"
-          destroyInactiveTabPane
-          defaultActiveKey={urlFileSystem ?? data?.[0]?.name}
-          items={data?.map(fileSystem => ({
-            label: fileSystem.name.toUpperCase(),
-            key: fileSystem.name,
-            children: <StorageBrowserTab fileSystem={fileSystem} />
-          }))}
-        />
-      </LoadingErrorWrapper>
+      <div className="hue-storage-browser__container">
+        <LoadingErrorWrapper loading={loading} errors={errorConfig}>
+          <Tabs
+            className="hue-storage-browser__tab"
+            destroyInactiveTabPane
+            defaultActiveKey={urlFileSystem ?? data?.[0]?.name}
+            items={data?.map(fileSystem => ({
+              label: fileSystem.name.toUpperCase(),
+              key: fileSystem.name,
+              children: <StorageBrowserTab fileSystem={fileSystem} />
+            }))}
+          />
+        </LoadingErrorWrapper>
+      </div>
     </div>
   );
 };

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.tsx

@@ -96,7 +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>`,
+    storagebrowser: `<svg class="hi hi-fw"><use href="#hi-data-browser"></use></svg>`,
     newimporter: `<svg class="hi hi-fw"><use href="#hi-data-in"></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>`,
@@ -330,9 +330,6 @@
               adaptedName = 'hdfs';
             }
             break;
-          case 'newfilebrowser':
-            adaptedName = 'newfilebrowser';
-            break;
           case 'jobbrowser':
             adaptedName = 'yarn';
             break;
@@ -364,6 +361,7 @@
           case 'hbase':
           case 'importer':
           case 'newimporter':
+          case 'storagebrowser':
           case 'indexes':
           case 'kafka':
             break;

desktop/core/src/desktop/js/apps/storageBrowser/app.js

@@ -31,6 +31,7 @@ import getSearchParameter from 'utils/url/getSearchParameter';
 import { ASSIST_GET_DATABASE_EVENT, ASSIST_GET_SOURCE_EVENT } from 'ko/components/assist/events';
 import { GLOBAL_ERROR_TOPIC } from 'reactComponents/GlobalAlert/events';
 import ImporterPage from '../js/apps/newimporter/ImporterPage';
+import StorageBrowserPage from '../js/apps/storageBrowser/StorageBrowserPage';
 
 class OnePageViewModel {
   constructor() {
@@ -764,7 +765,6 @@ class OnePageViewModel {
         }
       },
       { url: '/filebrowser/view=*', app: 'filebrowser' },
-      { url: '/filebrowser/new', app: 'newfilebrowser' },
       {
         url: '/filebrowser/*',
         app: function () {
@@ -797,6 +797,16 @@ class OnePageViewModel {
           });
         }
       },
+      {
+        url: '/storagebrowser/',
+        app: function () {
+          showReactAppPage({
+            appName: 'storagebrowser',
+            component: StorageBrowserPage,
+            title: 'Storage Browser'
+          });
+        }
+      },
       {
         url: '/indexer/importer/prefill/*',
         app: function (ctx) {

desktop/core/src/desktop/js/components/sidebar/HueSidebar.vue

@@ -17,7 +17,13 @@
 .antd.cuix {
   .loading-error-wrapper__spinner {
     // this overrides the max-height: 400px in antd library
-    max-height: 100% !important;
+    height: 100%;
+
+    .ant-spin,
+    .ant-spin-nested-loading {
+      height: 100%;
+      max-height: 100%;
+    }
   }
 
   .loading-error-wrapper__errors {

desktop/core/src/desktop/js/onePageViewModel.js

@@ -47,14 +47,15 @@ const LoadingErrorWrapper = ({
 }: LoadingErrorWrapperProps): JSX.Element => {
   if (loading) {
     return (
-      <Spin
-        spinning={loading}
-        indicator={<SpinnerIcon size="default" />}
-        data-testid="loading-error-wrapper__spinner"
-        className="loading-error-wrapper__spinner"
-      >
-        {hideOnLoading === false && children}
-      </Spin>
+      <div className="loading-error-wrapper__spinner">
+        <Spin
+          spinning={loading}
+          indicator={<SpinnerIcon size="default" />}
+          data-testid="loading-error-wrapper__spinner"
+        >
+          {hideOnLoading === false && children}
+        </Spin>
+      </div>
     );
   }
 

desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.scss

@@ -37,6 +37,10 @@
   .hue-pagination__page-size-menu-btn {
     background-color: transparent;
     color: vars.$fluidx-gray-700;
+
+    .icon {
+      vertical-align: middle;
+    }
   }
 
   .hue-pagination__rows-stats-display {

desktop/core/src/desktop/js/reactComponents/LoadingErrorWrapper/LoadingErrorWrapper.tsx

@@ -2015,11 +2015,11 @@ def _get_browser(self):
 
     if ENABLE_NEW_STORAGE_BROWSER.get():
       interpreters.append({
-        'type': 'newfilebrowser',
+        'type': 'storagebrowser',
         'displayName': _('Storage Browser'),
         'buttonName': _('Storage Browser'),
         'tooltip': _('Storage Browser'),
-        'page': '/filebrowser/new'
+        'page': '/storagebrowser'
       })
     else:
       for hdfs_connector in hdfs_connectors:

desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss

@@ -72,7 +72,6 @@
     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: '${_('Storage Browser')}' },
     home: { url: '/home*', title: '${_('Home')}' },
     catalog: { url: '/catalog', title: '${_('Catalog')}' },
     indexer: { url: '/indexer/indexer/', title: '${_('Indexer')}' },

desktop/core/src/desktop/models.py

@@ -220,13 +220,11 @@ ${ 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 hue-storage-browser__root-container"></div>
         <div id="embeddable_home" class="embeddable"></div>
         <div id="embeddable_catalog" class="embeddable"></div>
         <div id="embeddable_indexer" class="embeddable"></div>
         <div id="embeddable_kafka" class="embeddable"></div>
         <div id="embeddable_importer" class="embeddable"></div>
-        <div id="embeddable_newimporter" class="embeddable"></div>
         <div id="embeddable_collections" class="embeddable"></div>
         <div id="embeddable_indexes" class="embeddable"></div>
         <div id="embeddable_useradmin_users" class="embeddable"></div>

desktop/core/src/desktop/templates/global_js_constants.mako

@@ -33,10 +33,6 @@ const config = {
       import: './desktop/core/src/desktop/js/apps/tableBrowser/app.js',
       dependOn: 'hue'
     },
-    storageBrowser: {
-      import: './desktop/core/src/desktop/js/apps/storageBrowser/app.js',
-      dependOn: 'hue'
-    },
     jobBrowser: { import: './desktop/core/src/desktop/js/apps/jobBrowser/app.js', dependOn: 'hue' }
   },
   mode: 'development',