Эх сурвалжийг харах

[ui-storageBrowser] Add cuix and antd classes to Storage Browser (#3741)

* [ui-storageBrowser] Add cuix and antd classes to Storage Browser
Nidhi Bhat G 1 жил өмнө
parent
commit
9e27d5f017
26 өөрчлөгдсөн 279 нэмэгдсэн , 435 устгасан
  1. 8 1
      apps/filebrowser/src/filebrowser/templates/storage_browser.mako
  2. 3 14
      desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.scss
  3. 3 3
      desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx
  4. 6 5
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss
  5. 2 2
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.tsx
  6. 6 4
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserRowActions/StorageBrowserRowActions.scss
  7. 34 63
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss
  8. 11 10
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx
  9. 25 40
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss
  10. 2 2
      desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx
  11. 6 4
      desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.scss
  12. 2 2
      desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.tsx
  13. 12 14
      desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.scss
  14. 2 2
      desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.tsx
  15. 6 6
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.scss
  16. 1 1
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx
  17. 0 22
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.scss
  18. 0 40
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.tsx
  19. 2 2
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowTooltip.tsx
  20. 14 12
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.scss
  21. 9 10
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.tsx
  22. 43 81
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss
  23. 2 2
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.test.tsx
  24. 13 20
      desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx
  25. 34 46
      desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss
  26. 33 27
      desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.tsx

+ 8 - 1
apps/filebrowser/src/filebrowser/templates/storage_browser.mako

@@ -24,5 +24,12 @@
     ${ render_bundle(bundle) | n,unicode }
 % endfor
 
-<StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
+<script type="text/javascript">
+  (function () {
+    window.createReactComponents('#storageBrowser');
+  })();
+</script>
 
+<div id="storageBrowser">
+  <StorageBrowserPage data-reactcomponent='StorageBrowserPage'></StorageBrowserPage>
+</div>

+ 3 - 14
desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.scss

@@ -16,19 +16,8 @@
 @use 'variables' as vars;
 @use 'mixins';
 
-.hue-input-modal {
-  @include mixins.hue-svg-icon__d3-conflict;
-
-  .hue-input-modal__description {
-    color: vars.$fluidx-black;
-    margin-bottom: 14px;
-  }
-
-  .hue-input-modal__input {
-    height: vars.$fluidx-spacing-l;
+.antd.cuix {
+  .hue-input-modal__input-label {
+    color: vars.$fluidx-gray-700;
   }
 }
-
-.hue-input-modal__input-label {
-  color: vars.$fluidx-gray-700;
-}

+ 3 - 3
desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx

@@ -32,14 +32,14 @@ interface InputModalProps {
   title: string;
 }
 
-const InputModal: React.FC<InputModalProps> = ({
+const InputModal = ({
   inputLabel,
   onClose,
   onSubmit,
   showModal,
   title,
   ...i18n
-}): JSX.Element => {
+}: InputModalProps): JSX.Element => {
   const [value, setValue] = useState<string>('');
   const { t } = i18nReact.useTranslation();
   const { cancelText = t('Cancel'), submitText = t('Submit') } = i18n;
@@ -47,7 +47,7 @@ const InputModal: React.FC<InputModalProps> = ({
   return (
     <Modal
       cancelText={cancelText}
-      className="hue-input-modal"
+      className="hue-input-modal cuix antd"
       okText={submitText}
       onCancel={() => {
         setValue('');

+ 6 - 5
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.scss

@@ -17,11 +17,13 @@
 @use 'variables' as vars;
 @import '../../../components/styles/mixins';
 
-.hue-storage-browser {
-  @include fillAbsolute;
-  @include flexRowLayout;
+.antd.cuix {
+  .hue-storage-browser {
+    @include fillAbsolute;
+    @include flexRowLayout;
 
-  display: flex;
+    display: flex;
+  }
 
   .hue-storage-browser__tab {
     background-color: vars.$fluidx-gray-100;
@@ -34,4 +36,3 @@
     }
   }
 }
-

+ 2 - 2
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserPage.tsx

@@ -27,7 +27,7 @@ import { fetchFileSystems } from '../../../reactComponents/FileChooser/api';
 
 import './StorageBrowserPage.scss';
 
-const StorageBrowserPage: React.FC = (): JSX.Element => {
+const StorageBrowserPage = (): JSX.Element => {
   const [fileSystemTabs, setFileSystemTabs] = useState<TabsProps['items'] | undefined>();
   const [loading, setLoading] = useState(true);
 
@@ -58,7 +58,7 @@ const StorageBrowserPage: React.FC = (): JSX.Element => {
   }, []);
 
   return (
-    <div className="hue-storage-browser">
+    <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} />

+ 6 - 4
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserRowActions/StorageBrowserRowActions.scss

@@ -18,10 +18,12 @@
 $action-dropdown-width: 214px;
 
 //TODO: Remove styling for cuix button
-.hue-storage-browser__table-actions-btn {
-  box-shadow: none;
-  background-color: transparent;
-  border: none;
+.antd.cuix {
+  .hue-storage-browser__table-actions-btn {
+    box-shadow: none;
+    background-color: transparent;
+    border: none;
+  }
 }
 
 .hue-storage-browser__table-actions-dropdown {

+ 34 - 63
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss

@@ -19,87 +19,58 @@
 $icon-margin: 5px;
 $action-dropdown-width: 214px;
 
-.hue-storage-browser-tabContent {
-  background-color: vars.$fluidx-white;
-  margin: vars.$fluidx-spacing-s 0;
+.antd.cuix {
+  .hue-storage-browser-tabContent {
+    margin: vars.$fluidx-spacing-s 0;
+  }
 
   .hue-storage-browser__title-bar {
     display: flex;
-    align-items: center;
     margin: 0 vars.$fluidx-spacing-s;
-    padding-top: vars.$fluidx-spacing-s;
+  }
 
-    .hue-storage-browser__icon {
-      margin-right: vars.$fluidx-spacing-xs;
-      flex: 0 0 auto;
-      height: 24px;
-      width: 24px;
-    }
+  .hue-storage-browser__icon {
+    margin-right: vars.$fluidx-spacing-xs;
+    flex: 0 0 auto;
+    height: vars.$fluidx-heading-h3-line-height;
+  }
 
-    .hue-storage-browser__folder-name {
-      flex: 0 0 auto;
-      font-size: vars.$fluidx-heading-h3-size;
-      line-height: vars.$fluidx-heading-h3-line-height;
-      font-weight: vars.$fluidx-heading-h3-weight;
-    }
+  .hue-storage-browser__folder-name {
+    flex: 0 0 auto;
+    font-size: vars.$fluidx-heading-h3-size;
+    line-height: vars.$fluidx-heading-h3-line-height;
+    font-weight: vars.$fluidx-heading-h3-weight;
   }
 
   .hue-storage-browser__path-browser-panel {
     display: flex;
     margin: vars.$fluidx-spacing-xs 0;
-    //TODO: Remove nesting of classes.
-    .hue-storage-browser__filePath {
-      flex: 0 0 auto;
-      color: vars.$text-color;
-      font-weight: 600;
-      margin: 0 vars.$fluidx-spacing-xs 0 vars.$fluidx-spacing-s;
-    }
+    align-items: center;
   }
-}
-
-.hue-storage-browser__actions-bar {
-  display: flex;
-  margin: vars.$fluidx-spacing-s;
-  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__filePath {
+    flex: 0 0 auto;
+    font-weight: 600;
+    margin: 0 vars.$fluidx-spacing-xs 0 vars.$fluidx-spacing-s;
   }
-}
 
-.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;
+  .hue-storage-browser__actions-bar {
+    display: flex;
+    margin: vars.$fluidx-spacing-s;
+    justify-content: space-between;
+  }
 
-  .cdp-icon-dropdown {
-    margin-left: $icon-margin;
+  .hue-storage-browser__search {
+    width: 30%;
   }
 
-  .cdp-icon-plus-circle {
-    margin-right: $icon-margin;
+  .hue-storage-browser__actions-bar-right {
+    display: flex;
+    gap: vars.$fluidx-spacing-xs;
+
+    .cdp-icon-dropdown {
+      margin-left: $icon-margin;
+    }
   }
 }
 

+ 11 - 10
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx

@@ -15,8 +15,10 @@
 // limitations under the License.
 
 import React, { useState, useEffect } from 'react';
-import { Spin, Input, Dropdown, Button } from 'antd';
+import { Spin, Dropdown, Input } from 'antd';
 import type { MenuProps } from 'antd';
+import Button from 'cuix/dist/components/Button';
+import { PrimaryButton } from 'cuix/dist/components/Button';
 
 import { i18nReact } from '../../../../utils/i18nReact';
 import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
@@ -27,7 +29,6 @@ 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';
 
@@ -53,10 +54,10 @@ const defaultProps = {
   testId: 'hue-storage-browser-tabContent'
 };
 
-const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
+const StorageBrowserTabContent = ({
   user_home_dir,
   testId
-}): JSX.Element => {
+}: StorageBrowserTabContentProps): JSX.Element => {
   const [filePath, setFilePath] = useState<string>(user_home_dir);
   const [filesData, setFilesData] = useState<PathAndFileData>();
   const [files, setFiles] = useState<StorageBrowserTableData[]>();
@@ -198,15 +199,15 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
       <div className="hue-storage-browser-tabContent" 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`} />
-          <div className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
+          <h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
             {filesData?.breadcrumbs[filesData?.breadcrumbs?.length - 1].label}
-          </div>
+          </h3>
         </div>
         <div
           className="hue-storage-browser__path-browser-panel"
           data-testid={`${testId}-path-browser-panel`}
         >
-          <div className="hue-storage-browser__filePath">{t('File Path:')}</div>
+          <span className="hue-storage-browser__filePath">{t('File Path:')}</span>
           <PathBrowser
             breadcrumbs={filesData?.breadcrumbs}
             onFilepathChange={setFilePath}
@@ -225,7 +226,7 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
               }}
               trigger={['hover', 'click']}
             >
-              <Button className="hue-storage-browser__bulk-action-btn">
+              <Button data-event={''}>
                 {t('Bulk Actions')}
                 <DropDownIcon />
               </Button>
@@ -238,10 +239,10 @@ const StorageBrowserTabContent: React.FC<StorageBrowserTabContentProps> = ({
               }}
               trigger={['hover', 'click']}
             >
-              <Button className="hue-storage-browser__new-btn" icon={<PlusCircleIcon />}>
+              <PrimaryButton data-event={''}>
                 {t('New')}
                 <DropDownIcon />
-              </Button>
+              </PrimaryButton>
             </Dropdown>
           </div>
         </div>

+ 25 - 40
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss

@@ -19,57 +19,42 @@
 $cell-height: 40px;
 $table-placeholder-height: 100px;
 
-.hue-storage-browser__table {
-  @include mixins.hue-svg-icon__d3-conflict;
-
-  margin: 0 vars.$fluidx-spacing-s;
+.antd.cuix {
+  .hue-storage-browser__table {
+    margin: 0 vars.$fluidx-spacing-s;
+
+    .ant-table-placeholder {
+      height: $table-placeholder-height;
+      text-align: center;
+    }
+
+    th.ant-table-cell {
+      height: $cell-height;
+      background-color: vars.$fluidx-gray-040;
+    }
+  }
 
   .hue-storage-browser__table-cell-icon {
     color: vars.$fluidx-blue-700;
     margin-right: 6px;
   }
 
-  .ant-table-placeholder {
-    height: $table-placeholder-height;
-    text-align: center;
-  }
-
-  thead {
-    //TODO:Check why height isnt applied in safari browser
-    height: $cell-height;
-    background-color: vars.$fluidx-gray-040;
+  .hue-storage-browser__table-row {
+    td.ant-table-cell {
+      height: $cell-height;
+      @include mixins.nowrap-ellipsis;
+    }
   }
 
-  th.ant-table-cell {
-    text-align: left;
+  .hue-storage-browser__table-cell-name {
+    color: vars.$fluidx-blue-700;
   }
 
-  table {
-    width: 100%;
+  .hue-storage-browser__table-column-header {
+    display: flex;
   }
-}
-
-.hue-storage-browser__table-row {
-  height: $cell-height;
-  border-bottom: solid 1px vars.$fluidx-gray-300;
 
-  td.ant-table-cell {
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-    //ellipsis does not work without display as block or specifying max-width. Display as block not possible in table
-    max-width: 400px;
+  .hue-storage-browser__table-column-title {
+    text-transform: capitalize;
   }
 }
-
-.hue-storage-browser__table-cell-name {
-  color: vars.$fluidx-blue-700;
-}
-
-.hue-storage-browser__table-column-header {
-  display: flex;
-}
-
-.hue-storage-browser__table-column-title {
-  text-transform: capitalize;
-}

+ 2 - 2
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.tsx

@@ -57,7 +57,7 @@ const defaultProps = {
   testId: 'hue-storage-browser__table'
 };
 
-const StorageBrowserTable: React.FC<StorageBrowserTableProps> = ({
+const StorageBrowserTable = ({
   className,
   dataSource,
   onFilepathChange,
@@ -72,7 +72,7 @@ const StorageBrowserTable: React.FC<StorageBrowserTableProps> = ({
   rowClassName,
   testId,
   ...restProps
-}): JSX.Element => {
+}: StorageBrowserTableProps): JSX.Element => {
   const [tableHeight, setTableHeight] = useState<number>();
   const [showSummaryModal, setShowSummaryModal] = useState<boolean>(false);
   //TODO: accept multiple files and folder select

+ 6 - 4
desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.scss

@@ -15,10 +15,12 @@
 // limitations under the License.
 @use 'variables' as vars;
 
-.hue-summary-modal__row.ant-row {
-  margin-bottom: vars.$fluidx-spacing-s;
+.antd.cuix {
+  .hue-summary-modal__row {
+    margin-bottom: vars.$fluidx-spacing-s;
 
-  &:last-child {
-    margin-bottom: 0;
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }

+ 2 - 2
desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.tsx

@@ -30,7 +30,7 @@ interface SummaryModalProps {
   onClose: () => void;
 }
 
-const SummaryModal: React.FC<SummaryModalProps> = ({ showModal, onClose, path }): JSX.Element => {
+const SummaryModal = ({ showModal, onClose, path }: SummaryModalProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
   const [loadingSummary, setLoadingSummary] = useState(true);
   const [summary, setSummary] = useState([]);
@@ -90,7 +90,7 @@ const SummaryModal: React.FC<SummaryModalProps> = ({ showModal, onClose, path })
   //TODO:Handle long modal title
   return (
     <Modal
-      className="hue-summary-modal"
+      className="hue-summary-modal cuix antd"
       okText={t('Close')}
       onOk={onClose}
       open={showModal}

+ 12 - 14
desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.scss

@@ -16,27 +16,25 @@
 
 @use 'variables' as vars;
 
-$heading-font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-
-.hue-common-header {
-  background-color: vars.$fluidx-gray-100;
-  height: 32px;
-  padding: 16px 16px 8px 16px;
-  display: flex;
+.antd.cuix {
+  .hue-common-header {
+    background-color: vars.$fluidx-gray-100;
+    padding: vars.$fluidx-spacing-s vars.$fluidx-spacing-s vars.$fluidx-spacing-xs;
+    display: flex;
+  }
 
-  .hue-header-icon {
+  .hue-header-icon > svg {
     margin-right: 10px;
     flex: 0 0 auto;
-    height: 24px;
-    width: 24px;
+    height: vars.$fluidx-heading-h2-line-height;
+    color: vars.$fluidx-gray-700;
   }
 
   .hue-header-title {
     flex: 0 0 auto;
-    font-family: $heading-font-family;
-    font-size: vars.$fluidx-heading-h3-size;
-    line-height: vars.$fluidx-heading-h3-line-height;
-    font-weight: vars.$fluidx-heading-h3-weight;
+    font-size: vars.$fluidx-heading-h2-size;
+    line-height: vars.$fluidx-heading-h2-line-height;
+    font-weight: vars.$fluidx-heading-h2-weight;
     color: vars.$text-color;
   }
 }

+ 2 - 2
desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.tsx

@@ -34,9 +34,9 @@ const CommonHeader: React.FC<CommonHeaderProps> = ({ title, icon, testId }) => {
       <div className="hue-header-icon" data-testid={`${testId}-icon`}>
         {icon}
       </div>
-      <div className="hue-header-title" data-testid={`${testId}-title`}>
+      <h2 className="hue-header-title" data-testid={`${testId}-title`}>
         {title}
-      </div>
+      </h2>
       {/* TODO: Add actions dropdown*/}
     </div>
   );

+ 6 - 6
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.scss

@@ -13,12 +13,12 @@
 // 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.
+.antd.cuix {
+  .hue-path-browser__breadcrumb {
+    display: contents;
 
-.hue-path-browser__breadcrumb {
-  display: contents;
-
-  .hue-path-browser__overflowing-label {
-    min-width: var(--minWidth);
+    .hue-path-browser__overflowing-label {
+      min-width: var(--minWidth);
+    }
   }
 }
-

+ 1 - 1
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/Breadcrumb/Breadcrumb.tsx

@@ -25,7 +25,7 @@ interface BreadcrumbProps {
   onFilepathChange: (path: string) => void;
 }
 
-const Breadcrumb: React.FC<BreadcrumbProps> = ({ label, url, onFilepathChange }) => {
+const Breadcrumb = ({ label, url, onFilepathChange }: BreadcrumbProps): JSX.Element => {
   const handleFilepathChange = () => {
     onFilepathChange(url);
   };

+ 0 - 22
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.scss

@@ -1,22 +0,0 @@
-// Licensed to Cloudera, Inc. under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  Cloudera, Inc. licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// 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.
-
-.hue-path-browser__dropdown-item {
-  .hue-path-browser__overflowing-label {
-    width: 100%;
-    text-align: left;
-  }
-}

+ 0 - 40
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.tsx

@@ -1,40 +0,0 @@
-// Licensed to Cloudera, Inc. under one
-// or more contributor license agreements.  See the NOTICE file
-// distributed with this work for additional information
-// regarding copyright ownership.  Cloudera, Inc. licenses this file
-// to you under the Apache License, Version 2.0 (the
-// "License"); you may not use this file except in compliance
-// with the License.  You may obtain a copy of the License at
-//
-//     http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// 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 from 'react';
-
-import OverflowingItem from '../OverflowingItem';
-import './DropdownMenuItem.scss';
-
-interface DropDownMenuItemProps {
-  label: string;
-  url: string;
-  onFilepathChange: (path: string) => void;
-}
-
-const DropDownMenuItem: React.FC<DropDownMenuItemProps> = ({ label, url, onFilepathChange }) => {
-  const handleFilepathChange = () => {
-    onFilepathChange(url);
-  };
-
-  return (
-    <div className="hue-path-browser__dropdown-item">
-      <OverflowingItem label={label} onClick={handleFilepathChange}></OverflowingItem>
-    </div>
-  );
-};
-
-export default DropDownMenuItem;

+ 2 - 2
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowTooltip.tsx

@@ -29,13 +29,13 @@ const defaultProps = {
   testId: 'hue-overflowing'
 };
 
-const OverflowTooltip: React.FC<OverflowTooltipProps> = ({
+const OverflowTooltip = ({
   title,
   isOverflowing,
   toolTipTriggers,
   children,
   testId
-}) => {
+}: OverflowTooltipProps): JSX.Element => {
   return isOverflowing ? (
     <Tooltip title={title} trigger={toolTipTriggers} data-testid={`${testId}-tooltip`}>
       {children}

+ 14 - 12
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.scss

@@ -14,19 +14,21 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'variables' as vars;
+@use 'mixins';
 
-.hue-path-browser__overflowing-label {
-  background-color: transparent;
-  color: vars.$fluidx-blue-400;
-  white-space: nowrap;
-  padding: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: none;
-  flex: 0 1 auto;
-  box-shadow: none;
+.antd.cuix {
+  .hue-path-browser__overflowing-label {
+    color: vars.$fluidx-blue-400;
+    padding: 0;
+    flex: 0 1 auto;
+    background-color: transparent;
+    border: none;
 
-  > span {
-    display: contents;
+    >span {
+      @include mixins.nowrap-ellipsis;
+
+      max-width: 150ch;
+      display: inline !important;
+    }
   }
 }

+ 9 - 10
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.tsx

@@ -15,7 +15,7 @@
 // limitations under the License.
 
 import React, { useEffect, useRef, useState } from 'react';
-import { Button } from 'antd';
+import { BorderlessButton } from 'cuix/dist/components/Button';
 
 import OverflowTooltip from './OverflowTooltip';
 import './OverflowingItem.scss';
@@ -30,15 +30,13 @@ const defaultProps = {
   testId: 'hue-path-browser__overflowing'
 };
 
-const OverflowingItem: React.FC<OverflowingItemProps> = ({ label, onClick, testId }) => {
-  const textElementRef = useRef<HTMLDivElement>(null);
+const OverflowingItem = ({ label, onClick, testId }: OverflowingItemProps): JSX.Element => {
+  const textElementRef = useRef<HTMLSpanElement>(null);
   const [isOverflown, setIsOverflown] = useState(false);
   const compareSize = () => {
     const element = textElementRef.current;
 
-    const compare = element
-      ? element.offsetWidth < element.scrollWidth || element.offsetHeight < element.scrollHeight
-      : false;
+    const compare = element ? element.offsetWidth < element.scrollWidth : false;
     setIsOverflown(compare);
   };
 
@@ -50,16 +48,17 @@ const OverflowingItem: React.FC<OverflowingItemProps> = ({ label, onClick, testI
     };
   }, []);
 
+  //TODO: Add textElementRef to cuix button
   return (
     <OverflowTooltip isOverflowing={isOverflown} title={label} toolTipTriggers={['hover', 'focus']}>
-      <Button
-        ref={textElementRef}
+      <BorderlessButton
         className="hue-path-browser__overflowing-label"
         onClick={onClick}
         data-testid={`${testId}-label`}
+        data-event={''}
       >
-        {label}
-      </Button>
+        <span ref={textElementRef}>{label}</span>
+      </BorderlessButton>
     </OverflowTooltip>
   );
 };

+ 43 - 81
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss

@@ -15,121 +15,83 @@
 // limitations under the License.
 
 @use 'variables' as vars;
+@use 'mixins';
 
 $icon-width: 24px;
 $icon-height: 24px;
 
-.hue-path-browser {
-  display: flex;
-  width: 100%;
-
-  .hue-path-browser__file-system-icon {
-    object-fit: cover;
-    width: $icon-width;
-    height: $icon-height;
-    margin: 0 vars.$fluidx-spacing-xs;
-  }
-
-  .hue-path-browser__toggle-breadcrumb-input-btn:empty {
-    pointer-events: auto;
-    width: 60px;
-    visibility: visible;
-    border: none;
-    box-shadow: none;
-    padding: 0;
-    background-color: vars.$fluidx-white;
+.antd.cuix {
+  .hue-path-browser {
+    display: flex;
+    width: 100%;
 
-    &:hover {
-      cursor: text;
-      background-color: vars.$fluidx-gray-100;
+    .hue-path-browser__file-system-icon {
+      object-fit: cover;
+      width: $icon-width;
+      height: $icon-height;
+      margin: 0 vars.$fluidx-spacing-xs;
     }
 
-    &:focus {
-      background-color: vars.$fluidx-gray-100;
+    .hue-path-browser__toggle-breadcrumb-input-btn:empty {
+      pointer-events: auto;
+      width: 60px;
+      visibility: visible;
+      background-color: transparent;
+      padding: 0;
+
+      &:hover {
+        cursor: text;
+      }
     }
   }
-}
 
-.hue-path-browser__breadcrumbs {
-  /* stylelint-disable no-invalid-position-at-import-rule */
-  @import './OverflowingItem.scss';
+  .hue-path-browser__breadcrumbs {
+    display: flex;
+    gap: vars.$fluidx-spacing-xs;
+    max-width: 60%;
 
-  display: flex;
-  gap: vars.$fluidx-spacing-xs;
-  max-width: 60%;
+    &:hover {
+      cursor: pointer;
+    }
 
-  &:hover {
-    cursor: pointer;
+    .hue-path-browser__breadcrumb:last-of-type button:last-of-type {
+      color: vars.$fluidx-gray-700;
+    }
   }
 
   .hue-path-browser__dropdown-button {
-    border: none;
-    box-shadow: none;
-    background-color: transparent;
-
     &:hover {
-      background-color: vars.$fluidx-gray-100;
+      background-color: transparent;
     }
 
     &:focus {
-      background-color: vars.$fluidx-gray-100;
+      background-color: transparent;
     }
   }
 
-  .hue-path-browser__breadcrumb:last-of-type button:last-of-type {
-    color: vars.$fluidx-gray-700;
+  .hue-path-browser__breadcrumb-seperator {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 0 0 auto;
   }
-}
 
-.hue-path-browser__breadcrumb-seperator {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 auto;
+  .hue-path-browser__input {
+    width: 300px;
+    flex: 0 0 auto;
+  }
 }
 
 .hue-path-browser__dropdown {
   width: 200px;
-  background-color: vars.$fluidx-gray-200;
 
   .ant-dropdown-menu {
     max-height: 200px;
     overflow-y: scroll;
+    padding: 0;
   }
 
   .ant-dropdown-menu-title-content {
-    display: inline-block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-}
-
-.hue-path-browser-panel {
-  .hue-path-browser__input {
-    width: 300px;
-    flex: 0 0 auto;
-
-    .ant-input-prefix {
-      width: $icon-width;
-      height: $icon-height;
-      object-fit: cover;
-    }
-  }
-
-  .hue-path-browser-panel__button {
-    border: none;
-    box-shadow: none;
-    color: vars.$fluidx-blue-400;
-    padding: 0;
-    width: 100%;
-
-    &:hover {
-      border: vars.$fluidx-gray-300 solid 1px;
-    }
-
-    &:focus {
-      border: vars.$fluidx-gray-300 solid 1px;
-    }
+    @include mixins.nowrap-ellipsis;
   }
 }

+ 2 - 2
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.test.tsx

@@ -135,10 +135,10 @@ describe('Pathbrowser', () => {
         />
       );
       //From the given testconfig: The dropdown menu would consist of menu button with label test2. 'test2' should not be visible until the dropdown button is clicked.
-      expect(screen.queryByRole('button', { name: 'test2' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('menuitem', { name: 'test2' })).not.toBeInTheDocument();
       const dropdownButton = await screen.getByRole('button', { name: '..' });
       await user.click(dropdownButton);
-      expect(screen.getByRole('button', { name: 'test2' })).toBeInTheDocument();
+      expect(screen.getByRole('menuitem', { name: 'test2' })).toBeInTheDocument();
     });
 
     test('calls onFilepathChange on click of breadcrumb', async () => {

+ 13 - 20
desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx

@@ -15,8 +15,9 @@
 // limitations under the License.
 
 import React, { useRef, useEffect, useState, RefObject } from 'react';
-import { Input, Button, Dropdown } from 'antd';
-import type { MenuProps } from 'antd';
+import { Input, Dropdown } from 'antd';
+import { BorderlessButton } from 'cuix/dist/components/Button';
+import { MenuItemType } from 'antd/lib/menu/hooks/useItems';
 
 import HdfsIcon from '../../../components/icons/HdfsIcon';
 import S3Icon from '../../../components/icons/S3Icon';
@@ -24,9 +25,7 @@ import AdlsIcon from '../../../components/icons/AdlsIcon';
 
 import { BreadcrumbData } from '../types';
 import Breadcrumb from './Breadcrumb/Breadcrumb';
-import DropDownMenuItem from './DropdownMenuItem/DropdownMenuItem';
 import './PathBrowser.scss';
-
 interface PathBrowserProps {
   breadcrumbs?: BreadcrumbData[];
   onFilepathChange: (path: string) => void;
@@ -39,13 +38,13 @@ const defaultProps = {
   testId: 'hue-path-browser'
 };
 
-const PathBrowser: React.FC<PathBrowserProps> = ({
+const PathBrowser = ({
   breadcrumbs,
   onFilepathChange,
   seperator,
   showIcon,
   testId
-}) => {
+}: PathBrowserProps): JSX.Element => {
   const [isEditMode, setIsEditMode] = useState(false);
 
   const icons = {
@@ -87,17 +86,11 @@ const PathBrowser: React.FC<PathBrowserProps> = ({
   useOutsideAlerter(wrapperRef);
 
   const extractMenuItems = (breadcrumbMenu: BreadcrumbData[]) => {
-    const menu: MenuProps['items'] = breadcrumbMenu.map(breadcrumb => {
+    const menu: MenuItemType[] = breadcrumbMenu.map(breadcrumb => {
       return {
         key: breadcrumb.url,
-        label: (
-          <DropDownMenuItem
-            key={breadcrumb.url}
-            label={breadcrumb.label}
-            url={breadcrumb.url}
-            onFilepathChange={onFilepathChange}
-          />
-        )
+        label: breadcrumb.label,
+        onClick: () => onFilepathChange(breadcrumb.url)
       };
     });
     return menu;
@@ -153,7 +146,7 @@ const PathBrowser: React.FC<PathBrowserProps> = ({
                     {seperator}
                   </div>
                   <Dropdown
-                    overlayClassName="hue-path-browser__dropdown"
+                    overlayClassName="hue-path-browser__dropdown cuix antd"
                     menu={{
                       items: extractMenuItems(breadcrumbs.slice(1, breadcrumbs.length - 2)),
                       className: 'hue-path-browser__dropdown-menu'
@@ -162,12 +155,12 @@ const PathBrowser: React.FC<PathBrowserProps> = ({
                     autoFocus
                     data-testid={`${testId}-dropdown`}
                   >
-                    <Button
+                    <BorderlessButton
                       className="hue-path-browser__dropdown-button"
                       data-testid={`${testId}-dropdown-btn`}
                     >
                       ..
-                    </Button>
+                    </BorderlessButton>
                   </Dropdown>
                   <div
                     className="hue-path-browser__breadcrumb-seperator"
@@ -196,7 +189,7 @@ const PathBrowser: React.FC<PathBrowserProps> = ({
                 </>
               )}
             </div>
-            <Button
+            <BorderlessButton
               className="hue-path-browser__toggle-breadcrumb-input-btn"
               aria-label="hue-path-browser__toggle-breadcrumb-input-btn"
               title="Edit path"
@@ -204,7 +197,7 @@ const PathBrowser: React.FC<PathBrowserProps> = ({
                 setIsEditMode(true);
               }}
               data-testid={`${testId}-toggle-input-btn`}
-            ></Button>
+            ></BorderlessButton>
           </div>
         ) : (
           <div ref={wrapperRef}>

+ 34 - 46
desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.scss

@@ -16,60 +16,48 @@
 @use 'variables' as vars;
 @use 'mixins';
 
-.hue-pagination {
-  background-color: vars.$fluidx-gray-100;
-  height: 20px;
-  margin: 0;
-  padding: vars.$fluidx-spacing-s;
-  display: flex;
-  gap: vars.$fluidx-spacing-xxl;
-  justify-content: flex-end;
-  color: vars.$fluidx-gray-700;
-}
+.antd.cuix {
+  .hue-pagination {
+    background-color: vars.$fluidx-gray-100;
+    padding: vars.$fluidx-spacing-s;
+    display: flex;
+    gap: vars.$fluidx-spacing-xxl;
+    justify-content: flex-end;
+    color: vars.$fluidx-gray-700;
+    line-height: 32px;
+  }
 
-.hue-pagination__page-size-control {
-  display: flex;
-  flex: 0 0 auto;
-}
+  .hue-pagination__page-size-control {
+    display: flex;
+    flex: 0 0 auto;
+  }
 
-.hue-pagination__page-size-menu-btn {
-  display: flex;
-  border: none;
-  box-shadow: none;
-  background-color: transparent;
-  color: vars.$fluidx-gray-700;
-  @include mixins.hue-svg-icon__d3-conflict;
-}
+  .hue-pagination__page-size-menu-btn {
+    background-color: transparent;
+    color: vars.$fluidx-gray-700;
+  }
 
-.hue-pagination__page-size-menu-item-btn {
-  border: none;
-  box-shadow: none;
-  background-color: transparent;
-}
+  .hue-pagination__rows-stats-display {
+    flex: 0 0 auto;
+  }
 
-.hue-pagination__rows-stats-display {
-  flex: 0 0 auto;
-}
+  .hue-pagination__control-buttons-panel {
+    display: flex;
+    flex: 0 0 auto;
+  }
 
-.hue-pagination__control-buttons-panel {
-  display: flex;
-  width: 128px;
-  //If margin not specified the last button moves out of screen
-  margin-right: 60px;
-  flex: 0 0 auto;
+  .hue-pagination__control-button {
+    background-color: transparent;
+    margin: 0 vars.$fluidx-spacing-s;
+
+    svg {
+      color: vars.$fluidx-gray-700;
+    }
+  }
 }
 
-.hue-pagination__control-button {
+.hue-pagination__page-size-menu-item-btn {
   border: none;
   box-shadow: none;
   background-color: transparent;
-  margin: 0 vars.$fluidx-spacing-s;
-  padding: 0;
-  @include mixins.hue-svg-icon__d3-conflict;
-
-  svg {
-    height: 20px;
-    width: 20px;
-    color: vars.$fluidx-gray-700;
-  }
 }

+ 33 - 27
desktop/core/src/desktop/js/reactComponents/Pagination/Pagination.tsx

@@ -14,10 +14,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import React from 'react';
-import { Button, Dropdown } from 'antd';
+import { Dropdown } from 'antd';
 import type { MenuProps } from 'antd';
 import { i18nReact } from '../../utils/i18nReact';
-
+import { BorderlessButton } from 'cuix/dist/components/Button';
 import PageFirstIcon from '@cloudera/cuix-core/icons/react/PageFirstIcon';
 import PagePreviousIcon from '@cloudera/cuix-core/icons/react/PagePreviousIcon';
 import PageNextIcon from '@cloudera/cuix-core/icons/react/PageNextIcon';
@@ -41,7 +41,7 @@ const defaultProps = {
   pageSizeOptions: [10, 50, 500, 1000]
 };
 
-const Pagination: React.FC<PaginationProps> = ({
+const Pagination = ({
   onNextPageButtonClicked,
   onPageNumberChange,
   onPageSizeChange,
@@ -49,7 +49,7 @@ const Pagination: React.FC<PaginationProps> = ({
   pageSize,
   pageSizeOptions = [],
   pageStats
-}): JSX.Element => {
+}: PaginationProps): JSX.Element => {
   const { t } = i18nReact.useTranslation();
 
   const currentPageSize = pageSize;
@@ -58,15 +58,16 @@ const Pagination: React.FC<PaginationProps> = ({
     return {
       key: option,
       label: (
-        <Button
+        <BorderlessButton
           onClick={() => {
             onPageSizeChange(option);
             onPageNumberChange(1);
           }}
           className="hue-pagination__page-size-menu-item-btn"
+          data-event={''}
         >
           {option}
-        </Button>
+        </BorderlessButton>
       )
     };
   });
@@ -76,39 +77,44 @@ const Pagination: React.FC<PaginationProps> = ({
       <div className="hue-pagination__page-size-control">
         {t('Rows per page: ')}
         <Dropdown menu={{ items: pageSizeOptionsMenu }}>
-          <Button className="hue-pagination__page-size-menu-btn">
-            <div>
-              <span>{currentPageSize}</span>
-              <DropdownIcon />
-            </div>
-          </Button>
+          <BorderlessButton
+            className="hue-pagination__page-size-menu-btn"
+            data-event={''}
+            icon={<DropdownIcon />}
+            iconPosition="right"
+          >
+            {currentPageSize}
+          </BorderlessButton>
         </Dropdown>
       </div>
       <div className="hue-pagination__rows-stats-display">
         {pageStats.start_index} - {pageStats.end_index} of {pageStats.total_count}
       </div>
       <div className="hue-pagination__control-buttons-panel">
-        <Button onClick={() => onPageNumberChange(1)} className="hue-pagination__control-button">
-          <PageFirstIcon />
-        </Button>
-        <Button
+        <BorderlessButton
+          onClick={() => onPageNumberChange(1)}
+          className="hue-pagination__control-button"
+          data-event={''}
+          icon={<PageFirstIcon />}
+        />
+        <BorderlessButton
           onClick={() => onPreviousPageButtonClicked(pageStats.previous_page_number)}
           className="hue-pagination__control-button"
-        >
-          <PagePreviousIcon />
-        </Button>
-        <Button
+          data-event={''}
+          icon={<PagePreviousIcon />}
+        />
+        <BorderlessButton
           onClick={() => onNextPageButtonClicked(pageStats.next_page_number, pageStats.num_pages)}
           className="hue-pagination__control-button"
-        >
-          <PageNextIcon />
-        </Button>
-        <Button
+          data-event={''}
+          icon={<PageNextIcon />}
+        />
+        <BorderlessButton
           onClick={() => onPageNumberChange(pageStats.num_pages)}
           className="hue-pagination__control-button"
-        >
-          <PageLastIcon />
-        </Button>
+          data-event={''}
+          icon={<PageLastIcon />}
+        />
       </div>
     </div>
   );