[ui-storagebrowser] ports APIs to public and refactors code (#3906)

[ui-storagebrowser] ports APIs to public

Author: ramprasadagarwal

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

@@ -13,6 +13,7 @@
 // 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, { useCallback, useEffect, useMemo, useState } from 'react';
 import Modal from 'cuix/dist/components/Modal';
 import { Input, Spin, Tooltip } from 'antd';
@@ -26,7 +27,7 @@ import { i18nReact } from '../../../utils/i18nReact';
 import useDebounce from '../../../utils/useDebounce';
 import useLoadData from '../../../utils/hooks/useLoadData';
 
-import { PathAndFileData } from '../../../reactComponents/FileChooser/types';
+import { ListDirectory } from '../../../reactComponents/FileChooser/types';
 import { VIEWFILES_API_URl } from '../../../reactComponents/FileChooser/api';
 import PathBrowser from '../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
 
@@ -65,7 +66,7 @@ const FileChooserModal = ({
     setDestPath(sourcePath);
   }, [sourcePath]);
 
-  const { data: filesData, loading } = useLoadData<PathAndFileData>(
+  const { data: filesData, loading } = useLoadData<ListDirectory>(
     `${VIEWFILES_API_URl}${destPath}`,
     {
       params: {
@@ -82,7 +83,7 @@ const FileChooserModal = ({
     }
 
     return filesData?.files?.map(file => ({
-      name: file.name,
+      name: file.path.split('/').pop() ?? '',
       path: file.path,
       type: file.type
     }));

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

@@ -56,9 +56,7 @@ const InputModal = ({
       cancelText={cancelText}
       className="hue-input-modal cuix antd"
       okText={submitText}
-      onCancel={() => {
-        onClose();
-      }}
+      onCancel={onClose}
       onOk={() => {
         onSubmit(value);
         onClose();

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

@@ -14,9 +14,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Tabs, Spin } from 'antd';
-import type { TabsProps } from 'antd';
 
 import DataBrowserIcon from '@cloudera/cuix-core/icons/react/DataBrowserIcon';
 
@@ -33,23 +32,19 @@ const StorageBrowserPage = (): JSX.Element => {
 
   const { data: fileSystems, loading } = useLoadData<ApiFileSystem[]>(FILESYSTEMS_API_URL);
 
-  const fileSystemTabs: TabsProps['items'] | undefined = useMemo(
-    () =>
-      fileSystems?.map(system => {
-        return {
-          label: system.file_system.toUpperCase(),
-          key: system.file_system + '_tab',
-          children: <StorageBrowserTabContent user_home_dir={system.user_home_directory} />
-        };
-      }),
-    [fileSystems]
-  );
-
   return (
     <div className="hue-storage-browser cuix antd">
       <CommonHeader title={t('Storage Browser')} icon={<DataBrowserIcon />} />
       <Spin spinning={loading}>
-        <Tabs className="hue-storage-browser__tab" defaultActiveKey="0" items={fileSystemTabs} />
+        <Tabs
+          className="hue-storage-browser__tab"
+          defaultActiveKey="0"
+          items={fileSystems?.map(system => ({
+            label: system.file_system.toUpperCase(),
+            key: system.file_system + '_tab',
+            children: <StorageBrowserTabContent homeDir={system.user_home_directory} />
+          }))}
+        />
       </Spin>
     </div>
   );

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

@@ -22,20 +22,15 @@ import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
 
 import PathBrowser from '../../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
 import StorageBrowserTable from '../StorageBrowserTable/StorageBrowserTable';
-import { VIEWFILES_API_URl } from '../../../../reactComponents/FileChooser/api';
-import {
-  BrowserViewType,
-  PathAndFileData,
-  SortOrder
-} from '../../../../reactComponents/FileChooser/types';
-import { DEFAULT_PAGE_SIZE } from '../../../../utils/constants/storageBrowser';
+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';
 
 interface StorageBrowserTabContentProps {
-  user_home_dir: string;
+  homeDir: string;
   testId?: string;
 }
 
@@ -44,31 +39,19 @@ const defaultProps = {
 };
 
 const StorageBrowserTabContent = ({
-  user_home_dir,
+  homeDir,
   testId
 }: StorageBrowserTabContentProps): JSX.Element => {
-  const [filePath, setFilePath] = useState<string>(user_home_dir);
-  const [pageSize, setPageSize] = useState<number>(DEFAULT_PAGE_SIZE);
-  const [pageNumber, setPageNumber] = useState<number>(1);
-  const [sortByColumn, setSortByColumn] = useState<string>('');
-  const [sortOrder, setSortOrder] = useState<SortOrder>(SortOrder.NONE);
-  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [filePath, setFilePath] = useState<string>(homeDir);
+  const fileName = filePath?.split('/')?.pop() ?? '';
 
   const { t } = i18nReact.useTranslation();
 
-  const {
-    data: filesData,
-    loading,
-    reloadData
-  } = useLoadData<PathAndFileData>(`${VIEWFILES_API_URl}${filePath}`, {
+  const { data: fileStats, loading } = useLoadData<FileStats>(FILE_STATS_API_URL, {
     params: {
-      pagesize: pageSize.toString(),
-      pagenum: pageNumber.toString(),
-      filter: searchTerm,
-      sortby: sortByColumn,
-      descending: sortOrder === SortOrder.DSC ? 'true' : 'false'
+      path: filePath
     },
-    skip: filePath === '' || filePath === undefined
+    skip: !filePath
   });
 
   return (
@@ -77,7 +60,7 @@ const StorageBrowserTabContent = ({
         <div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
           <BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
           <h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
-            {filesData?.path?.split('/').pop()}
+            {fileName}
           </h3>
         </div>
         <div
@@ -92,23 +75,11 @@ const StorageBrowserTabContent = ({
             showIcon={false}
           />
         </div>
-        {filesData?.type === BrowserViewType.file ? (
-          <StorageFilePage fileData={filesData} />
-        ) : (
-          <StorageBrowserTable
-            filesData={filesData}
-            pageSize={pageSize}
-            onFilepathChange={setFilePath}
-            onPageSizeChange={setPageSize}
-            onPageNumberChange={setPageNumber}
-            onSortByColumnChange={setSortByColumn}
-            onSortOrderChange={setSortOrder}
-            onSearch={setSearchTerm}
-            sortByColumn={sortByColumn}
-            sortOrder={sortOrder}
-            refetchData={reloadData}
-            filePath={filePath}
-          />
+        {fileStats?.type === BrowserViewType.dir && (
+          <StorageBrowserTable fileStats={fileStats} onFilePathChange={setFilePath} />
+        )}
+        {fileStats?.type === BrowserViewType.file && (
+          <StorageFilePage fileName={fileName} fileStats={fileStats} />
         )}
       </div>
     </Spin>