[frontend]Storage Browser Tabs and content component (#3428)

* [frontend]Storage Browser Tabs and content component

* [frontend]Fix and improvements

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

@@ -24,8 +24,5 @@
     ${ render_bundle(bundle) | n,unicode }
 % endfor
 
-<div>
-  <StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
-</div>
-
+<StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
 

apps/filebrowser/src/filebrowser/views.py

@@ -521,9 +521,6 @@ def listdir_paged(request, path):
     filter=?          - Specify a substring filter to search for in
                         the filename field.
   """
-  if ENABLE_NEW_STORAGE_BROWSER.get():
-    return render('storage_browser.mako', request, {})
-
   path = _normalize_path(path)
 
   if not request.fs.isdir(path):
@@ -630,6 +627,9 @@ def listdir_paged(request, path):
       'is_embeddable': request.GET.get('is_embeddable', False),
       's3_listing_not_allowed': s3_listing_not_allowed
   }
+
+  if ENABLE_NEW_STORAGE_BROWSER.get():
+    return render('storage_browser.mako', request, data)
   return render('listdir.mako', request, data)
 
 

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

@@ -0,0 +1,33 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+@use 'variables' as vars;
+@import '../../../components/styles/mixins';
+
+.hue-storage-browser {
+  @include fillAbsolute;
+  @include flexRowLayout;
+
+  display: flex;
+
+  .hue-storage-browser__tab {
+    background-color: vars.$fluidx-gray-100;
+    padding: 0 16px;
+    //TODO: Find fix so the flex is applied
+    flex: 0 0 100%;
+  }
+}
+

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

@@ -14,19 +14,54 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import { Tabs, Spin } from 'antd';
+import type { TabsProps } from 'antd';
 
-import { i18nReact } from '../../../utils/i18nReact';
+import DataBrowserIcon from '@cloudera/cuix-core/icons/react/DataBrowserIcon';
 
+import { i18nReact } from '../../../utils/i18nReact';
 import CommonHeader from '../../../reactComponents/CommonHeader/CommonHeader';
-import DataBrowserIcon from '@cloudera/cuix-core/icons/react/DataBrowserIcon';
+import StorageBrowserTabContent from './StorageBrowserTabContents/StorageBrowserTabContent';
+import { fetchFileSystems } from '../../../reactComponents/FileChooser/api';
+
+import './StorageBrowserPage.scss';
 
 const StorageBrowserPage: React.FC = (): JSX.Element => {
+  const [fileSystemTabs, setFileSystemTabs] = useState<TabsProps['items'] | undefined>();
+  const [loading, setLoading] = useState(true);
+
   const { t } = i18nReact.useTranslation();
 
+  useEffect(() => {
+    if (!fileSystemTabs) {
+      setLoading(true);
+      fetchFileSystems()
+        .then(fileSystems => {
+          const fileSystemsObj = fileSystems.map(system => {
+            return {
+              label: system.file_system.toUpperCase(),
+              key: system.file_system + '_tab',
+              children: <StorageBrowserTabContent user_home_dir={system.user_home_directory} />
+            };
+          });
+          setFileSystemTabs(fileSystemsObj);
+        })
+        .catch(error => {
+          //TODO: Properly handle errors.
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, []);
+
   return (
     <div className="hue-storage-browser">
       <CommonHeader title={t('Storage Browser')} icon={<DataBrowserIcon />} />
+      <Spin spinning={loading}>
+        <Tabs className="hue-storage-browser__tab" defaultActiveKey="0" items={fileSystemTabs} />
+      </Spin>
     </div>
   );
 };

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

@@ -0,0 +1,42 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+@use 'variables' as vars;
+
+.hue-storage-browser-tabContent {
+  background-color: vars.$fluidx-white;
+  margin: 16px 0;
+  padding: 16px;
+  //TODO: Set height to content
+
+  .hue-storage-browser__title-bar {
+    display: flex;
+    align-items: center;
+
+    .hue-storage-browser__icon {
+      margin-right: 10px;
+      flex: 0 0 auto;
+      height: 24px;
+      width: 24px;
+    }
+
+    .hue-storage-browser__folder-name {
+      flex: 0 0 auto;
+      font-size: vars.$fluidx-heading-h3-size;
+      line-height: vars.$fluidx-heading-h3-line-height;
+      font-weight: vars.$fluidx-heading-h3-weight;
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, { useState, useEffect } from 'react';
+import { Spin } from 'antd';
+
+import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
+import { fetchFiles } from '../../../../reactComponents/FileChooser/api';
+import { PathAndFileData } from '../../../../reactComponents/FileChooser/types';
+
+import './StorageBrowserTabContent.scss';
+
+interface StorageBrowserTabContentProps {
+  user_home_dir: string;
+  testId?: string;
+}
+
+const defaultProps = {
+  testId: 'hue-storage-browser-tabContent'
+};
+
+const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
+  user_home_dir,
+  testId
+}): JSX.Element => {
+  const [filePath, setFilePath] = useState<string>(user_home_dir);
+  const [filesData, setFilesData] = useState<PathAndFileData | undefined>();
+  const [loadingFiles, setloadingFiles] = useState(true);
+
+  useEffect(() => {
+    setloadingFiles(true);
+    fetchFiles(filePath)
+      .then(responseFilesData => {
+        setFilesData(responseFilesData);
+      })
+      .catch(error => {
+        //TODO: handle errors
+      })
+      .finally(() => {
+        setloadingFiles(false);
+      });
+  }, [filePath]);
+
+  return (
+    <Spin spinning={loadingFiles}>
+      <div className="hue-storage-browser-tabContent" data-testid={testId}>
+        <div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
+          <BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
+          <div className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
+            {filesData?.breadcrumbs[filesData?.breadcrumbs.length - 1].label}
+          </div>
+        </div>
+      </div>
+    </Spin>
+  );
+};
+
+StorageBrowserTabContent.defaultProps = defaultProps;
+
+export default StorageBrowserTabContent;

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

@@ -21,17 +21,18 @@ $heading-font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
 .hue-common-header {
   background-color: vars.$fluidx-gray-100;
   height: 32px;
-  padding: 16px;
+  padding: 16px 16px 8px 16px;
   display: flex;
 
   .hue-header-icon {
     margin-right: 10px;
-    flex-shrink: 0;
+    flex: 0 0 auto;
     height: 24px;
     width: 24px;
   }
 
   .hue-header-title {
+    flex: 0 0 auto;
     font-family: $heading-font-family;
     font-size: vars.$fluidx-heading-h3-size;
     line-height: vars.$fluidx-heading-h3-line-height;

desktop/core/src/desktop/static/desktop/less/root-wrapped-antd.less

@@ -37,3 +37,4 @@ body.ant-scrolling-effect {
 @import 'antd/es/dropdown/style/index.less';
 @import 'antd/es/tooltip/style/index.less';
 @import 'antd/es/spin/style/index.less';
+@import 'antd/es/tabs/style/index.less';