[frontend]Implement UI for actions toolbar (cloudera#3459)

* [frontend]Implement UI for actions toolbar
harshith-212 · Oct 9, 2023 · 3ce4adb · 3ce4adb
1 parent 09db3e7
commit 3ce4adb
Show file tree

Hide file tree

Showing 7 changed files with 1,622 additions and 14,229 deletions.
diff --git a/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss b/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss
@@ -14,6 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'variables' as vars;
+@use 'mixins';
+
+$icon-margin: 5px;
+$action-dropdown-width: 214px;
 
 .hue-storage-browser-tabContent {
   background-color: vars.$fluidx-white;
@@ -42,7 +46,7 @@
 
   .hue-storage-browser__path-browser-panel {
     display: flex;
-    margin-top: vars.$fluidx-spacing-xxs;
+    margin: vars.$fluidx-spacing-xs 0;
     //TODO: Remove nesting of classes.
     .hue-storage-browser__filePath {
       flex: 0 0 auto;
@@ -52,3 +56,54 @@
     }
   }
 }
+
+.hue-storage-browser__actions-bar {
+  display: flex;
+  margin: vars.$fluidx-spacing-s 0;
+  justify-content: space-between;
+  @include mixins.hue-svg-icon__d3-conflict;
+}
+
+.hue-storage-browser__search {
+  flex: 0 0 auto;
+  display: flex;
+}
+
+.hue-storage-browser__actions-bar-right {
+  display: flex;
+  height: 32px;
+}
+
+.hue-storage-browser__bulk-action-btn {
+  flex: 0 0 auto;
+  color: vars.$fluidx-blue-600;
+  margin-right: vars.$fluidx-spacing-xs;
+  border: solid 1px vars.$fluidx-gray-300;
+  box-shadow: none;
+  background-color: transparent;
+
+  .cdp-icon-dropdown {
+    margin-left: $icon-margin;
+  }
+}
+
+.hue-storage-browser__new-btn {
+  flex: 0 0 auto;
+  color: vars.$fluidx-white;
+  background-color: vars.$fluidx-blue-600;
+  border: solid 1px vars.$fluidx-blue-600;
+  box-shadow: none;
+
+  .cdp-icon-dropdown {
+    margin-left: $icon-margin;
+  }
+
+  .cdp-icon-plus-circle {
+    margin-right: $icon-margin;
+  }
+}
+
+.hue-storage-browser__actions-dropdown {
+  width: $action-dropdown-width;
+  @include mixins.hue-svg-icon__d3-conflict;
+}
diff --git a/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx b/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx
@@ -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>
   );

diff --git a/desktop/core/src/desktop/js/components/styles/_mixins.scss b/desktop/core/src/desktop/js/components/styles/_mixins.scss
@@ -261,3 +261,11 @@ $hue-panel-border-radius: 3px;
     flex: 1;
   }
 }
+
+@mixin hue-svg-icon__d3-conflict {
+  svg {
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+  }
+}
diff --git a/...top/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx b/...top/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx
@@ -14,8 +14,6 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Property } from '@typescript-eslint/types/dist/ast-spec';
-import { min } from 'lodash';
 import React from 'react';
 
 import OverflowingItem from '../OverflowingItem';