[ui-storagebrowser] refactor storage browser and folder structure (#3914)

[ui-storagebrowser] refactor storage browser and folder structure

Author: ramprasadagarwal

apps/filebrowser/src/filebrowser/api.py

@@ -656,7 +656,7 @@ def content_summary(request):
     replication_factor = request.fs.stats(path)['replication']
 
     content_summary.summary.update({'replication': replication_factor})
-    response['summary'] = content_summary.summary
+    response = content_summary.summary
   except Exception:
     return HttpResponse(f'Failed to fetch content summary for path: {path}', status=500)
 

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

@@ -28,8 +28,8 @@ import useDebounce from '../../../utils/useDebounce';
 import useLoadData from '../../../utils/hooks/useLoadData';
 
 import { ListDirectory } from '../../../reactComponents/FileChooser/types';
-import { VIEWFILES_API_URl } from '../../../reactComponents/FileChooser/api';
-import PathBrowser from '../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
+import { LIST_DIRECTORY_API_URL } from '../../../reactComponents/FileChooser/api';
+import PathBrowser from '../../../reactComponents/PathBrowser/PathBrowser';
 
 import './FileChooserModal.scss';
 
@@ -66,16 +66,14 @@ const FileChooserModal = ({
     setDestPath(sourcePath);
   }, [sourcePath]);
 
-  const { data: filesData, loading } = useLoadData<ListDirectory>(
-    `${VIEWFILES_API_URl}${destPath}`,
-    {
-      params: {
-        pagesize: '1000',
-        filter: searchTerm
-      },
-      skip: destPath === '' || destPath === undefined
-    }
-  );
+  const { data: filesData, loading } = useLoadData<ListDirectory>(LIST_DIRECTORY_API_URL, {
+    params: {
+      path: destPath,
+      pagesize: '1000',
+      filter: searchTerm
+    },
+    skip: destPath === '' || destPath === undefined || !showModal
+  });
 
   const tableData: FileChooserTableData[] = useMemo(() => {
     if (!filesData?.files) {
@@ -139,9 +137,7 @@ const FileChooserModal = ({
       okText={submitText}
       title={title}
       open={showModal}
-      onCancel={() => {
-        onClose();
-      }}
+      onCancel={onClose}
       onOk={() => {
         onSubmit(destPath);
         onClose();
@@ -169,7 +165,7 @@ const FileChooserModal = ({
         <Spin spinning={loading}>
           <Table
             className="hue-filechooser-modal__table"
-            dataSource={tableData?.slice(2)}
+            dataSource={tableData}
             pagination={false}
             columns={getColumns(tableData[0] ?? {})}
             rowKey={(record, index) => record.path + index}

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

@@ -15,11 +15,11 @@
 // limitations under the License.
 
 @use 'variables' as vars;
-@import '../../../components/styles/mixins';
+@use 'mixins';
 
 .hue-storage-browser.antd.cuix {
-  @include fillAbsolute;
-  @include flexRowLayout;
+  @include mixins.fillAbsolute;
+  @include mixins.flexRowLayout;
 
   height: 100%;
 
@@ -50,4 +50,4 @@
       }
     }
   }
-}
+}

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

@@ -19,13 +19,13 @@ import { Tabs, Spin } from 'antd';
 
 import DataBrowserIcon from '@cloudera/cuix-core/icons/react/DataBrowserIcon';
 
-import { i18nReact } from '../../../utils/i18nReact';
-import CommonHeader from '../../../reactComponents/CommonHeader/CommonHeader';
-import StorageBrowserTabContent from './StorageBrowserTabContents/StorageBrowserTabContent';
-import { ApiFileSystem, FILESYSTEMS_API_URL } from '../../../reactComponents/FileChooser/api';
+import { i18nReact } from '../../utils/i18nReact';
+import CommonHeader from '../../reactComponents/CommonHeader/CommonHeader';
+import StorageBrowserTab from './StorageBrowserTab/StorageBrowserTab';
+import { ApiFileSystem, FILESYSTEMS_API_URL } from '../../reactComponents/FileChooser/api';
 
 import './StorageBrowserPage.scss';
-import useLoadData from '../../../utils/hooks/useLoadData';
+import useLoadData from '../../utils/hooks/useLoadData';
 
 const StorageBrowserPage = (): JSX.Element => {
   const { t } = i18nReact.useTranslation();
@@ -42,7 +42,7 @@ const StorageBrowserPage = (): JSX.Element => {
           items={fileSystems?.map(system => ({
             label: system.file_system.toUpperCase(),
             key: system.file_system + '_tab',
-            children: <StorageBrowserTabContent homeDir={system.user_home_directory} />
+            children: <StorageBrowserTab homeDir={system.user_home_directory} />
           }))}
         />
       </Spin>

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

@@ -14,7 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'variables' as vars;
-@use 'mixins';
 
 .antd.cuix {
   .hue-storage-browser-tab-content {
@@ -51,4 +50,4 @@
     flex: 0 0 auto;
     font-weight: 600;
   }
-}
+}

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

@@ -17,19 +17,19 @@
 import React, { useState } from 'react';
 import { Spin } from 'antd';
 
-import { i18nReact } from '../../../../utils/i18nReact';
+import { i18nReact } from '../../../utils/i18nReact';
 import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
 
-import PathBrowser from '../../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
-import StorageBrowserTable from '../StorageBrowserTable/StorageBrowserTable';
-import { FILE_STATS_API_URL } from '../../../../reactComponents/FileChooser/api';
-import { BrowserViewType, FileStats } from '../../../../reactComponents/FileChooser/types';
-import useLoadData from '../../../../utils/hooks/useLoadData';
+import PathBrowser from '../../../reactComponents/PathBrowser/PathBrowser';
+import StorageDirectoryPage from '../StorageDirectoryPage/StorageDirectoryPage';
+import { FILE_STATS_API_URL } from '../../../reactComponents/FileChooser/api';
+import { BrowserViewType, FileStats } from '../../../reactComponents/FileChooser/types';
+import useLoadData from '../../../utils/hooks/useLoadData';
 
-import './StorageBrowserTabContent.scss';
-import StorageFilePage from '../../StorageFilePage/StorageFilePage';
+import './StorageBrowserTab.scss';
+import StorageFilePage from '../StorageFilePage/StorageFilePage';
 
-interface StorageBrowserTabContentProps {
+interface StorageBrowserTabProps {
   homeDir: string;
   testId?: string;
 }
@@ -38,10 +38,7 @@ const defaultProps = {
   testId: 'hue-storage-browser-tab-content'
 };
 
-const StorageBrowserTabContent = ({
-  homeDir,
-  testId
-}: StorageBrowserTabContentProps): JSX.Element => {
+const StorageBrowserTab = ({ homeDir, testId }: StorageBrowserTabProps): JSX.Element => {
   const [filePath, setFilePath] = useState<string>(homeDir);
   const fileName = filePath?.split('/')?.pop() ?? '';
 
@@ -76,7 +73,7 @@ const StorageBrowserTabContent = ({
           />
         </div>
         {fileStats?.type === BrowserViewType.dir && (
-          <StorageBrowserTable fileStats={fileStats} onFilePathChange={setFilePath} />
+          <StorageDirectoryPage fileStats={fileStats} onFilePathChange={setFilePath} />
         )}
         {fileStats?.type === BrowserViewType.file && (
           <StorageFilePage fileName={fileName} fileStats={fileStats} />
@@ -86,6 +83,6 @@ const StorageBrowserTabContent = ({
   );
 };
 
-StorageBrowserTabContent.defaultProps = defaultProps;
+StorageBrowserTab.defaultProps = defaultProps;
 
-export default StorageBrowserTabContent;
+export default StorageBrowserTab;

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserActions/StorageBrowserActions.scss renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.scss

@@ -14,7 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'mixins';
-@use 'variables' as vars;
+
 $action-dropdown-width: 214px;
 
 .hue-storage-browser__table-actions-dropdown {

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserActions/StorageBrowserActions.test.tsx renamed to desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageBrowserActions/StorageBrowserActions.test.tsx

@@ -25,7 +25,6 @@ import DuplicateIcon from '@cloudera/cuix-core/icons/react/DuplicateIcon';
 import CopyClipboardIcon from '@cloudera/cuix-core/icons/react/CopyClipboardIcon';
 
 import { i18nReact } from '../../../../utils/i18nReact';
-import { StorageBrowserTableData } from '../../../../reactComponents/FileChooser/types';
 import {
   isHDFS,
   isOFS,
@@ -49,15 +48,16 @@ import {
 import huePubSub from '../../../../utils/huePubSub';
 import useSaveData from '../../../../utils/hooks/useSaveData';
 
-import SummaryModal from '../../SummaryModal/SummaryModal';
+import SummaryModal from '../SummaryModal/SummaryModal';
 import InputModal from '../../InputModal/InputModal';
 import FileChooserModal from '../../FileChooserModal/FileChooserModal';
 
 import './StorageBrowserActions.scss';
+import { StorageDirectoryTableData } from '../../../../reactComponents/FileChooser/types';
 
 interface StorageBrowserRowActionsProps {
   currentPath: string;
-  selectedFiles: StorageBrowserTableData[];
+  selectedFiles: StorageDirectoryTableData[];
   onSuccessfulAction: () => void;
   setLoadingFiles: (value: boolean) => void;
 }