|
|
@@ -15,10 +15,22 @@
|
|
|
// limitations under the License.
|
|
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
-import { Spin } from 'antd';
|
|
|
+import { Spin, Input, Dropdown, Button } from 'antd';
|
|
|
+import type { MenuProps } from 'antd';
|
|
|
|
|
|
import { i18nReact } from '../../../../utils/i18nReact';
|
|
|
import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
|
|
|
+import CopyClipboardIcon from '@cloudera/cuix-core/icons/react/CopyClipboardIcon';
|
|
|
+import DataMovementIcon from '@cloudera/cuix-core/icons/react/DataMovementIcon';
|
|
|
+import DeleteIcon from '@cloudera/cuix-core/icons/react/DeleteIcon';
|
|
|
+import DownloadIcon from '@cloudera/cuix-core/icons/react/DownloadIcon';
|
|
|
+import DropDownIcon from '@cloudera/cuix-core/icons/react/DropdownIcon';
|
|
|
+import FolderIcon from '@cloudera/cuix-core/icons/react/ProjectIcon';
|
|
|
+import ImportIcon from '@cloudera/cuix-core/icons/react/ImportIcon';
|
|
|
+import PlusCircleIcon from '@cloudera/cuix-core/icons/react/PlusCircleIcon';
|
|
|
+//Todo: Use cuix icon (Currently fileIcon does not exist in cuix)
|
|
|
+import { FileOutlined } from '@ant-design/icons';
|
|
|
+
|
|
|
import PathBrowser from '../../../../reactComponents/FileChooser/PathBrowser/PathBrowser';
|
|
|
import { fetchFiles } from '../../../../reactComponents/FileChooser/api';
|
|
|
import { PathAndFileData } from '../../../../reactComponents/FileChooser/types';
|
|
|
@@ -44,6 +56,71 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
|
|
|
const { t } = i18nReact.useTranslation();
|
|
|
|
|
|
+ const newActionsMenuItems: MenuProps['items'] = [
|
|
|
+ {
|
|
|
+ key: 'create',
|
|
|
+ type: 'group',
|
|
|
+ label: t('CREATE'),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ icon: <FileOutlined />,
|
|
|
+ key: 'new_file',
|
|
|
+ label: t('New File')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <FolderIcon />,
|
|
|
+ key: 'new_folder',
|
|
|
+ label: t('New Folder')
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: 'upload',
|
|
|
+ type: 'group',
|
|
|
+ label: t('UPLOAD'),
|
|
|
+ children: [
|
|
|
+ {
|
|
|
+ icon: <ImportIcon />,
|
|
|
+ key: 'upload_file',
|
|
|
+ label: t('File')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <ImportIcon />,
|
|
|
+ key: 'upload_folder',
|
|
|
+ label: t('Folder')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <ImportIcon />,
|
|
|
+ key: 'upload_zip',
|
|
|
+ label: t('Zip Folder')
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
+ const bulkActionsMenuItems: MenuProps['items'] = [
|
|
|
+ {
|
|
|
+ icon: <CopyClipboardIcon />,
|
|
|
+ key: 'copy',
|
|
|
+ label: t('Copy')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <DataMovementIcon />,
|
|
|
+ key: 'move',
|
|
|
+ label: t('Move')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <DownloadIcon />,
|
|
|
+ key: 'download',
|
|
|
+ label: t('Download')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: <DeleteIcon />,
|
|
|
+ key: 'delete',
|
|
|
+ label: t('Delete')
|
|
|
+ }
|
|
|
+ ];
|
|
|
+
|
|
|
useEffect(() => {
|
|
|
setloadingFiles(true);
|
|
|
fetchFiles(filePath)
|
|
|
@@ -79,6 +156,37 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
|
|
|
showIcon={false}
|
|
|
/>
|
|
|
</div>
|
|
|
+ <div className="hue-storage-browser__actions-bar">
|
|
|
+ <Input className="hue-storage-browser__search" placeholder={t('Search')} />
|
|
|
+ <div className="hue-storage-browser__actions-bar-right">
|
|
|
+ <Dropdown
|
|
|
+ overlayClassName="hue-storage-browser__actions-dropdown"
|
|
|
+ menu={{
|
|
|
+ items: bulkActionsMenuItems,
|
|
|
+ className: 'hue-storage-browser__action-menu'
|
|
|
+ }}
|
|
|
+ trigger={['hover', 'click']}
|
|
|
+ >
|
|
|
+ <Button className="hue-storage-browser__bulk-action-btn">
|
|
|
+ {t('Bulk Actions')}
|
|
|
+ <DropDownIcon />
|
|
|
+ </Button>
|
|
|
+ </Dropdown>
|
|
|
+ <Dropdown
|
|
|
+ overlayClassName="hue-storage-browser__actions-dropdown"
|
|
|
+ menu={{
|
|
|
+ items: newActionsMenuItems,
|
|
|
+ className: 'hue-storage-browser__action-menu'
|
|
|
+ }}
|
|
|
+ trigger={['hover', 'click']}
|
|
|
+ >
|
|
|
+ <Button className="hue-storage-browser__new-btn" icon={<PlusCircleIcon />}>
|
|
|
+ {t('New')}
|
|
|
+ <DropDownIcon />
|
|
|
+ </Button>
|
|
|
+ </Dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</Spin>
|
|
|
);
|