[ui-storagebrowser] view file content as text (#3823)

Co-authored-by: Harsh Gupta <[email protected]>
cloudera · Sep 18, 2024 · 53e8d58 · 53e8d58
1 parent ad12816
commit 53e8d58
Show file tree

Hide file tree

Showing 11 changed files with 524 additions and 110 deletions.
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss b/desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss
@@ -32,8 +32,22 @@
   }
 
   .hue-storage-browser__tab {
+    display: flex;
+    height: 100%;
     background-color: vars.$fluidx-gray-100;
     padding: 0 16px;
-    height: 100%;
+
+    .ant-tabs-content-holder {
+      display: flex;
+      flex: 1;
+      overflow: auto;
+
+      .ant-tabs-content,
+      .ant-tabs-tabpane-active {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+    }
   }
-}
+}
diff --git a/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss b/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss
@@ -17,17 +17,19 @@
 @use 'mixins';
 
 .antd.cuix {
-  .hue-storage-browser-tabContent {
-    margin: vars.$fluidx-spacing-s 0;
+  .hue-storage-browser-tab-content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    height: 100%;
   }
 
   .hue-storage-browser__title-bar {
     display: flex;
-    margin: 0 vars.$fluidx-spacing-s;
+    gap: vars.$fluidx-spacing-xs;
   }
 
   .hue-storage-browser__icon {
-    margin-right: vars.$fluidx-spacing-xs;
     flex: 0 0 auto;
     height: vars.$fluidx-heading-h3-line-height;
   }
@@ -41,13 +43,12 @@
 
   .hue-storage-browser__path-browser-panel {
     display: flex;
-    margin: vars.$fluidx-spacing-xs 0;
     align-items: center;
+    gap: vars.$fluidx-spacing-xs;
   }
 
   .hue-storage-browser__filePath {
     flex: 0 0 auto;
     font-weight: 600;
-    margin: 0 vars.$fluidx-spacing-xs 0 vars.$fluidx-spacing-s;
   }
-}
+}
diff --git a/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx b/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx
@@ -23,19 +23,24 @@ 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 { PathAndFileData, SortOrder } from '../../../../reactComponents/FileChooser/types';
+import {
+  BrowserViewType,
+  PathAndFileData,
+  SortOrder
+} from '../../../../reactComponents/FileChooser/types';
 import { DEFAULT_PAGE_SIZE } from '../../../../utils/constants/storageBrowser';
 import useLoadData from '../../../../utils/hooks/useLoadData';
 
 import './StorageBrowserTabContent.scss';
+import StorageFilePage from '../../StorageFilePage/StorageFilePage';
 
 interface StorageBrowserTabContentProps {
   user_home_dir: string;
   testId?: string;
 }
 
 const defaultProps = {
-  testId: 'hue-storage-browser-tabContent'
+  testId: 'hue-storage-browser-tab-content'
 };
 
 const StorageBrowserTabContent = ({
@@ -69,11 +74,11 @@ const StorageBrowserTabContent = ({
 
   return (
     <Spin spinning={loading}>
-      <div className="hue-storage-browser-tabContent" data-testid={testId}>
+      <div className="hue-storage-browser-tab-content" 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`} />
           <h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
-            {filesData?.breadcrumbs[filesData?.breadcrumbs?.length - 1].label}
+            {filesData?.path?.split('/').pop()}
           </h3>
         </div>
         <div
@@ -88,20 +93,24 @@ const StorageBrowserTabContent = ({
             showIcon={false}
           />
         </div>
-        <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}
-        />
+        {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}
+          />
+        )}
       </div>
     </Spin>
   );

diff --git a/...op/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss b/...op/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss
@@ -24,7 +24,7 @@ $icon-margin: 5px;
 .antd.cuix {
   .hue-storage-browser__actions-bar {
     display: flex;
-    margin: vars.$fluidx-spacing-s;
+    margin: vars.$fluidx-spacing-s 0;
     justify-content: space-between;
   }
 
@@ -46,8 +46,6 @@ $icon-margin: 5px;
   }
 
   .hue-storage-browser__table {
-    margin: 0 vars.$fluidx-spacing-s;
-
     .ant-table-placeholder {
       height: $table-placeholder-height;
       text-align: center;
@@ -65,6 +63,10 @@ $icon-margin: 5px;
   }
 
   .hue-storage-browser__table-row {
+    :hover {
+      cursor: pointer;
+    }
+
     td.ant-table-cell {
       height: $cell-height;
       @include mixins.nowrap-ellipsis;
@@ -87,4 +89,4 @@ $icon-margin: 5px;
 .hue-storage-browser__actions-dropdown {
   width: $action-dropdown-width;
   @include mixins.hue-svg-icon__d3-conflict;
-}
+}
diff --git a/...top/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx b/...top/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx
@@ -14,11 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import { ColumnProps } from 'antd/lib/table';
-import { Dropdown, Input, Spin } from 'antd';
+import { Dropdown, Input, Spin, Tooltip } from 'antd';
 import { MenuItemGroupType } from 'antd/lib/menu/hooks/useItems';
-import Tooltip from 'antd/es/tooltip';
 
 import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
 import SortAscending from '@cloudera/cuix-core/icons/react/SortAscendingIcon';
@@ -39,14 +38,15 @@ import { mkdir, touch } from '../../../../reactComponents/FileChooser/api';
 import {
   StorageBrowserTableData,
   SortOrder,
-  PathAndFileData,
-  BrowserViewType
+  PathAndFileData
 } from '../../../../reactComponents/FileChooser/types';
 import Pagination from '../../../../reactComponents/Pagination/Pagination';
 import StorageBrowserActions from '../StorageBrowserActions/StorageBrowserActions';
 import InputModal from '../../InputModal/InputModal';
+import formatBytes from '../../../../utils/formatBytes';
 
 import './StorageBrowserTable.scss';
+import { formatTimestamp } from '../../../../utils/dateTimeUtils';
 
 interface StorageBrowserTableProps {
   className?: string;
@@ -91,29 +91,28 @@ const StorageBrowserTable = ({
   ...restProps
 }: StorageBrowserTableProps): JSX.Element => {
   const [loadingFiles, setLoadingFiles] = useState<boolean>(false);
-  const [tableHeight, setTableHeight] = useState<number>();
+  const [tableHeight, setTableHeight] = useState<number>(100);
   const [selectedFiles, setSelectedFiles] = useState<StorageBrowserTableData[]>([]);
   const [showNewFolderModal, setShowNewFolderModal] = useState<boolean>(false);
   const [showNewFileModal, setShowNewFileModal] = useState<boolean>(false);
-  const [viewType, setViewType] = useState<BrowserViewType>(BrowserViewType.dir);
 
   const { t } = i18nReact.useTranslation();
 
   const tableData: StorageBrowserTableData[] = useMemo(() => {
-    return (
-      filesData?.files
-        ?.filter(file => !['.', '..'].includes(file.name)) // removes ..(previous folder) and .(current folder)
-        .map(file => ({
-          name: file.name,
-          size: file.humansize,
-          user: file.stats.user,
-          group: file.stats.group,
-          permission: file.rwx,
-          mtime: file.mtime,
-          type: file.type,
-          path: file.path
-        })) ?? []
-    );
+    if (!filesData?.files) {
+      return [];
+    }
+
+    return filesData?.files?.map(file => ({
+      name: file.name,
+      size: formatBytes(file.stats?.size),
+      user: file.stats.user,
+      group: file.stats.group,
+      permission: file.rwx,
+      mtime: file.stats?.mtime ? formatTimestamp(new Date(Number(file.stats.mtime) * 1000)) : '-',
+      type: file.type,
+      path: file.path
+    }));
   }, [filesData]);
 
   const newActionsMenuItems: MenuItemGroupType[] = [
@@ -171,7 +170,7 @@ const StorageBrowserTable = ({
 
   const getColumns = (file: StorageBrowserTableData) => {
     const columns: ColumnProps<StorageBrowserTableData>[] = [];
-    for (const [key] of Object.entries(file)) {
+    for (const key of Object.keys(file)) {
       const column: ColumnProps<StorageBrowserTableData> = {
         dataIndex: key,
         title: (
@@ -195,9 +194,8 @@ const StorageBrowserTable = ({
       };
       if (key === 'name') {
         column.width = '40%';
-        //TODO: Apply tooltip only for truncated values
         column.render = (_, record: StorageBrowserTableData) => (
-          <Tooltip title={record.name}>
+          <Tooltip title={record.name} mouseEnterDelay={1.5}>
             <span className="hue-storage-browser__table-cell-icon">
               {record.type === 'dir' ? <FolderIcon /> : <FileOutlined />}
             </span>
@@ -302,14 +300,6 @@ const StorageBrowserTable = ({
     };
   }, []);
 
-  useEffect(() => {
-    if (filesData?.type === 'file') {
-      setViewType(BrowserViewType.file);
-    } else {
-      setViewType(BrowserViewType.dir);
-    }
-  }, [filesData]);
-
   const locale = {
     emptyText: t('Folder is empty')
   };
@@ -326,56 +316,45 @@ const StorageBrowserTable = ({
           }}
         />
         <div className="hue-storage-browser__actions-bar-right">
-          {viewType === BrowserViewType.dir && (
-            <>
-              <StorageBrowserActions
-                selectedFiles={selectedFiles}
-                setLoadingFiles={setLoadingFiles}
-                onSuccessfulAction={refetchData}
-              />
-              <Dropdown
-                overlayClassName="hue-storage-browser__actions-dropdown"
-                menu={{
-                  items: newActionsMenuItems,
-                  className: 'hue-storage-browser__action-menu'
-                }}
-                trigger={['hover', 'click']}
-              >
-                <PrimaryButton data-event={''}>
-                  {t('New')}
-                  <DropDownIcon />
-                </PrimaryButton>
-              </Dropdown>
-            </>
-          )}
+          <StorageBrowserActions
+            selectedFiles={selectedFiles}
+            setLoadingFiles={setLoadingFiles}
+            onSuccessfulAction={refetchData}
+          />
+          <Dropdown
+            overlayClassName="hue-storage-browser__actions-dropdown"
+            menu={{
+              items: newActionsMenuItems,
+              className: 'hue-storage-browser__action-menu'
+            }}
+            trigger={['hover', 'click']}
+          >
+            <PrimaryButton data-event="">
+              {t('New')}
+              <DropDownIcon />
+            </PrimaryButton>
+          </Dropdown>
         </div>
       </div>
 
       <Spin spinning={loadingFiles}>
-        {viewType === BrowserViewType.dir && (
-          <Table
-            className={className}
-            columns={getColumns(tableData[0] ?? [])}
-            dataSource={tableData}
-            onRow={onRowClicked}
-            pagination={false}
-            rowClassName={rowClassName}
-            rowKey={(record, index) => record.path + '' + index}
-            rowSelection={{
-              type: 'checkbox',
-              ...rowSelection
-            }}
-            scroll={{ y: tableHeight }}
-            data-testid={`${testId}`}
-            locale={locale}
-            {...restProps}
-          />
-        )}
-
-        {viewType === BrowserViewType.file && (
-          // TODO: code for file view
-          <div> File view</div>
-        )}
+        <Table
+          className={className}
+          columns={getColumns(tableData[0] ?? {})}
+          dataSource={tableData?.slice(2)}
+          onRow={onRowClicked}
+          pagination={false}
+          rowClassName={rowClassName}
+          rowKey={(record, index) => record.path + '' + index}
+          rowSelection={{
+            type: 'checkbox',
+            ...rowSelection
+          }}
+          scroll={{ y: tableHeight }}
+          data-testid={`${testId}`}
+          locale={locale}
+          {...restProps}
+        />
 
         {filesData?.page && (
           <Pagination