[ui-storagebrowser] change label of HDFS root from / to hdfs (#4069)

Author: ramprasadagarwal

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

@@ -146,12 +146,7 @@ const FileChooserModal = ({
     >
       <div className="hue-filechooser-modal__body">
         <div className="hue-filechooser-modal__path-browser-panel">
-          <PathBrowser
-            filePath={destPath}
-            onFilepathChange={setDestPath}
-            seperator={'/'}
-            showIcon={false}
-          />
+          <PathBrowser filePath={destPath} onFilepathChange={setDestPath} showIcon={false} />
         </div>
         <Input
           className="hue-filechooser-modal__search"

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

@@ -32,7 +32,10 @@ import { BorderlessButton } from 'cuix/dist/components/Button';
 import StorageFilePage from '../StorageFilePage/StorageFilePage';
 import changeURL from '../../../utils/url/changeURL';
 import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
-import { getFileSystemAndPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
+import {
+  getLastDirOrFileNameFromPath,
+  getFileSystemAndPath
+} from '../../../reactComponents/PathBrowser/PathBrowser.util';
 import { inTrash } from '../../../utils/storageBrowserUtils';
 
 import './StorageBrowserTab.scss';
@@ -55,8 +58,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
     urlFileSystem === fileSystem.name ? urlFilePath : fileSystem.userHomeDirectory;
 
   const [filePath, setFilePath] = useState<string>(initialFilePath);
-  const fileName =
-    filePath.split('/').pop() !== '' ? (filePath.split('/').pop() ?? '') : filePath.split('://')[0];
+  const fileName = getLastDirOrFileNameFromPath(filePath);
 
   const { t } = i18nReact.useTranslation();
 
@@ -188,12 +190,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
           className="hue-storage-browser-tab__path-browser-container"
           data-testid={`${testId}-path-browser-panel`}
         >
-          <PathBrowser
-            filePath={filePath}
-            onFilepathChange={setFilePath}
-            seperator={'/'}
-            showIcon={false}
-          />
+          <PathBrowser filePath={filePath} onFilepathChange={setFilePath} />
         </div>
         {fileStats?.type === BrowserViewType.dir && !isLoading && (
           <StorageDirectoryPage
@@ -204,7 +201,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
           />
         )}
         {fileStats?.type === BrowserViewType.file && !isLoading && (
-          <StorageFilePage fileName={fileName} fileStats={fileStats} onReload={reloadData} />
+          <StorageFilePage fileStats={fileStats} onReload={reloadData} />
         )}
       </div>
     </LoadingErrorWrapper>

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryActions/FileAndFolder/ChangeOwnerAndGroupModal/ChangeOwnerAndGroupModal.tsx

@@ -19,15 +19,15 @@ import Modal from 'cuix/dist/components/Modal';
 import { i18nReact } from '../../../../../../utils/i18nReact';
 import useSaveData from '../../../../../../utils/hooks/useSaveData/useSaveData';
 import { Checkbox, Input, Select } from 'antd';
-import { ListDirectory, StorageDirectoryTableData } from '../../../../types';
+import { HDFSFileSystemConfig, StorageDirectoryTableData } from '../../../../types';
 import { BULK_CHANGE_OWNER_API_URL } from '../../../../api';
 import './ChangeOwnerAndGroupModal.scss';
 
 interface ChangeOwnerAndGroupModalProps {
-  superUser?: ListDirectory['superuser'];
-  superGroup?: ListDirectory['supergroup'];
-  users?: ListDirectory['users'];
-  groups?: ListDirectory['groups'];
+  superUser?: HDFSFileSystemConfig['superuser'];
+  superGroup?: HDFSFileSystemConfig['supergroup'];
+  users?: HDFSFileSystemConfig['users'];
+  groups?: HDFSFileSystemConfig['groups'];
   isOpen?: boolean;
   files: StorageDirectoryTableData[];
   setLoading: (value: boolean) => void;
@@ -37,7 +37,9 @@ interface ChangeOwnerAndGroupModalProps {
 }
 
 const OTHERS_KEY = 'others';
-const getDropdownOptions = (entity: ListDirectory['users'] | ListDirectory['groups']) => {
+const getDropdownOptions = (
+  entity: HDFSFileSystemConfig['users'] | HDFSFileSystemConfig['groups']
+) => {
   return [...entity, OTHERS_KEY].map(user => ({
     value: user,
     label: user

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

@@ -48,6 +48,7 @@ import PaginatedTable, {
   SortOrder,
   ColumnProps
 } from '../../../reactComponents/PaginatedTable/PaginatedTable';
+import { getLastDirOrFileNameFromPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 
 interface StorageDirectoryPageProps {
   fileStats: FileStats;
@@ -110,7 +111,7 @@ const StorageDirectoryPage = ({
     }
 
     return filesData?.files?.map(file => ({
-      name: file.path.split('/').pop() ?? '',
+      name: getLastDirOrFileNameFromPath(file.path),
       size: file.type === BrowserViewType.file ? formatBytes(file.size) : '',
       user: file.user,
       group: file.group,

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

@@ -33,15 +33,16 @@ import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
 import { getLastKnownConfig } from '../../../config/hueConfig';
 import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
 import { inTrash } from '../../../utils/storageBrowserUtils';
+import { getLastDirOrFileNameFromPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
 
 interface StorageFilePageProps {
   onReload: () => void;
-  fileName: string;
   fileStats: FileStats;
 }
 
-const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps): JSX.Element => {
+const StorageFilePage = ({ fileStats, onReload }: StorageFilePageProps): JSX.Element => {
   const config = getLastKnownConfig();
+  const fileName = getLastDirOrFileNameFromPath(fileStats.path);
   const fileType = getFileType(fileName);
 
   const { t } = i18nReact.useTranslation();
@@ -54,11 +55,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
 
   const { loading: isSaving, save } = useSaveData(SAVE_FILE_API_URL);
 
-  const {
-    data: fileData,
-    loading: loadingPreview,
-    error: errorPreview
-  } = useLoadData<FilePreview>(FILE_PREVIEW_API_URL, {
+  const { data, loading, error } = useLoadData<FilePreview>(FILE_PREVIEW_API_URL, {
     params: {
       path: fileStats.path,
       offset: pageOffset,
@@ -80,7 +77,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
 
   const handleCancel = () => {
     setIsEditing(false);
-    setFileContent(fileData?.contents);
+    setFileContent(data?.contents);
   };
 
   const handleSave = () => {
@@ -126,7 +123,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
 
   const errorConfig = [
     {
-      enabled: !!errorPreview,
+      enabled: !!error,
       message: t('An error occurred while fetching file content for path "{{path}}".', {
         path: fileStats.path
       }),
@@ -151,7 +148,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
           ))}
         </div>
 
-        <LoadingErrorWrapper loading={loadingPreview || isSaving} errors={errorConfig}>
+        <LoadingErrorWrapper loading={loading || isSaving} errors={errorConfig} hideChildren>
           <div className="preview">
             <div className="preview__title-bar">
               {t('Content')}
@@ -171,7 +168,7 @@ const StorageFilePage = ({ fileName, fileStats, onReload }: StorageFilePageProps
                       data-testid="preview--save--button"
                       data-event=""
                       onClick={handleSave}
-                      disabled={fileContent === fileData?.contents}
+                      disabled={fileContent === data?.contents}
                     >
                       {t('Save')}
                     </PrimaryButton>

desktop/core/src/desktop/js/reactComponents/FileChooser/FileChooserModal/FileChooserModal.tsx

@@ -104,7 +104,7 @@ const FileChooserModal: React.FC<FileProps> = ({ show, onCancel, title, okText }
                   <PathBrowser
                     filePath={filePath}
                     onFilepathChange={setFilePath}
-                    seperator={'>'}
+                    separator={'>'}
                     showIcon={true}
                   />
                 )}

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

@@ -22,3 +22,10 @@
   align-items: center;
   gap: 16px;
 }
+
+.antd.cuix {
+  .loading-error-wrapper__spinner {
+    // this overrides the max-height: 400px in antd library
+    max-height: 100% !important;
+  }
+}

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

@@ -15,7 +15,7 @@ describe('LoadingErrorWrapper', () => {
       <LoadingErrorWrapper {...defaultProps} loading={true} />
     );
 
-    expect(getAllByTestId('loading-error-wrapper__sppiner')).toHaveLength(2);
+    expect(getAllByTestId('loading-error-wrapper__spinner')).toHaveLength(2);
     expect(queryByText('Children Content')).toBeInTheDocument();
   });
 

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

@@ -30,21 +30,23 @@ interface LoadingErrorWrapperProps {
   loading: boolean;
   errors: WrapperError[];
   children: React.ReactNode;
+  hideChildren?: boolean;
 }
 
 const LoadingErrorWrapper = ({
   loading,
   errors,
-  children
+  children,
+  hideChildren = false
 }: LoadingErrorWrapperProps): JSX.Element => {
   if (loading) {
-    // TODO: discuss in UI meeting, if we need to render children while loading
-    // Initial thoughts:
-    // -- On first render -> hide children
-    // -- On re-render -> render children
     return (
-      <Spin spinning={loading} data-testid="loading-error-wrapper__sppiner">
-        {children}
+      <Spin
+        spinning={loading}
+        data-testid="loading-error-wrapper__spinner"
+        className="loading-error-wrapper__spinner"
+      >
+        {hideChildren === false && children}
       </Spin>
     );
   }

desktop/core/src/desktop/js/reactComponents/PathBrowser/Breadcrumb/Breadcrumb.tsx

@@ -16,7 +16,7 @@
 
 import React from 'react';
 
-import OverflowingItem from '../OverflowingItem';
+import OverflowingItem from '../OverflowingItem/OverflowingItem';
 import './Breadcrumb.scss';
 
 interface BreadcrumbProps {

desktop/core/src/desktop/js/reactComponents/PathBrowser/OverflowTooltip.tsx renamed to desktop/core/src/desktop/js/reactComponents/PathBrowser/OverflowingItem/OverflowTooltip.tsx

@@ -25,10 +25,14 @@ $icon-height: 24px;
     display: contents;
 
     .hue-path-browser__file-system-icon {
-      object-fit: cover;
-      width: $icon-width;
-      height: $icon-height;
-      margin: 0 vars.$fluidx-spacing-xs;
+      margin-right: vars.$fluidx-spacing-xs;
+
+      svg {
+        vertical-align: middle;
+        width: $icon-width;
+        height: $icon-height;
+
+      }
     }
   }
 
@@ -55,7 +59,7 @@ $icon-height: 24px;
     }
   }
 
-  .hue-path-browser__breadcrumb-seperator {
+  .hue-path-browser__breadcrumb-separator {
     display: flex;
     justify-content: center;
     align-items: center;

desktop/core/src/desktop/js/reactComponents/PathBrowser/OverflowingItem.scss renamed to desktop/core/src/desktop/js/reactComponents/PathBrowser/OverflowingItem/OverflowingItem.scss

@@ -30,31 +30,31 @@ describe('Pathbrowser', () => {
   const mockFilePath = 'abfs://test/folder';
   const mockLongFilePath = 'abfs://path/to/nested1/nested2/nested3/folder';
   describe('Pathbrowser breadcrumbs', () => {
-    it('should render the specified seperator to seperate the breadcrumbs', () => {
+    it('should render the specified separator to separate the breadcrumbs', () => {
       render(
         <PathBrowser
           filePath={mockFilePath}
           onFilepathChange={onFilepathChangeMock}
-          seperator={'%'}
+          separator={'%'}
           showIcon
         />
       );
-      const seperator = screen.getAllByText('%');
-      expect(seperator).not.toBeNull();
+      const separator = screen.getAllByText('%');
+      expect(separator).not.toBeNull();
     });
 
-    it('should not render a different seperator than specified to seperate the breadcrumbs', () => {
+    it('should not render a different separator than specified to separate the breadcrumbs', () => {
       render(
         <PathBrowser
           testId="pathbroswer"
           filePath={mockFilePath}
           onFilepathChange={onFilepathChangeMock}
-          seperator={'%'}
+          separator={'%'}
           showIcon
         />
       );
       screen
-        .getAllByTestId('pathbroswer-breadcrumb-seperator')
+        .getAllByTestId('pathbroswer-breadcrumb-separator')
         .slice(1)
         .forEach(element => {
           expect(element).toBeVisible();
@@ -67,7 +67,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           filePath={mockFilePath}
           onFilepathChange={onFilepathChangeMock}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );
@@ -79,7 +79,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockLongFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );
@@ -92,7 +92,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockLongFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );
@@ -109,7 +109,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon={false}
         />
       );
@@ -124,7 +124,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );
@@ -137,7 +137,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon={false}
         />
       );
@@ -152,7 +152,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );
@@ -165,7 +165,7 @@ describe('Pathbrowser', () => {
         <PathBrowser
           onFilepathChange={onFilepathChangeMock}
           filePath={mockFilePath}
-          seperator={'/'}
+          separator={'/'}
           showIcon
         />
       );