Fix overflow tooltip issue and add styles to dropdown and modals

cloudera · May 22, 2024 · 773fb8a · 773fb8a
1 parent 485dbe7
commit 773fb8a
Show file tree

Hide file tree

Showing 15 changed files with 31 additions and 150 deletions.
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.scss b/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;
-}
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx
@@ -47,7 +47,7 @@ const InputModal = ({
   return (
     <Modal
       cancelText={cancelText}
-      className="hue-input-modal"
+      className="hue-input-modal cuix antd"
       okText={submitText}
       onCancel={() => {
         setValue('');

diff --git a/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss b/...storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.scss
@@ -18,7 +18,6 @@
 
 $icon-margin: 5px;
 $action-dropdown-width: 214px;
-$icon-height: 24px;
 
 .antd.cuix {
   .hue-storage-browser-tabContent {
@@ -33,7 +32,7 @@ $icon-height: 24px;
   .hue-storage-browser__icon {
     margin-right: vars.$fluidx-spacing-xs;
     flex: 0 0 auto;
-    height: $icon-height;
+    height: vars.$fluidx-heading-h3-line-height;
   }
 
   .hue-storage-browser__folder-name {

diff --git a/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx b/.../storageBrowser/StorageBrowserPage/StorageBrowserTabContents/StorageBrowserTabContent.tsx
@@ -194,29 +194,6 @@ const StorageBrowserTabContent = ({
       });
   }, [filePath, pageSize, pageNumber, sortByColumn, sortOrder, refreshKey]);
 
-  const tempBreadcrumbs = [
-    {
-      url: 'ofs://',
-      label: 'ofs://'
-    },
-    {
-      url: 'ofs://demo',
-      label: 'demo'
-    },
-    {
-      url: 'ofs://demo/tesbjhbjhs cksbdjkbcksdbckjbdcbks',
-      label: 'tesbjhbjhscksbdjkbcksdbckjbdcbks'
-    },
-    {
-      url: 'ofs://demo/tesbjhbjhs cksbdjkbcksdbckjbdcbksrturur',
-      label: 'tesbjhbjhscksbdjkbcksdbckjbdcbkshrrturt'
-    },
-    {
-      url: 'ofs://demo/tesbjhbjhscksbdjkbcksdbckjbdcbks/djbcjusbvjdbsvsjndscnjudsyvcysvdcuydvcuyw',
-      label: 'djbcjusbvjdbsvsjndscnjudsyvcysvdcuydvcuyw'
-    }
-  ];
-
   return (
     <Spin spinning={loadingFiles}>
       <div className="hue-storage-browser-tabContent" data-testid={testId}>
@@ -232,7 +209,7 @@ const StorageBrowserTabContent = ({
         >
           <span className="hue-storage-browser__filePath">{t('File Path:')}</span>
           <PathBrowser
-            breadcrumbs={tempBreadcrumbs}
+            breadcrumbs={filesData?.breadcrumbs}
             onFilepathChange={setFilePath}
             seperator={'/'}
             showIcon={false}

diff --git a/...op/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss b/...op/js/apps/storageBrowser/StorageBrowserPage/StorageBrowserTable/StorageBrowserTable.scss
@@ -42,9 +42,7 @@ $table-placeholder-height: 100px;
   .hue-storage-browser__table-row {
     td.ant-table-cell {
       height: $cell-height;
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
+      @include mixins.nowrap-ellipsis;
     }
   }
 

diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.scss b/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;
+    }
   }
 }
diff --git a/desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.tsx b/desktop/core/src/desktop/js/apps/storageBrowser/SummaryModal/SummaryModal.tsx
@@ -90,7 +90,7 @@ const SummaryModal = ({ showModal, onClose, path }: SummaryModalProps): JSX.Elem
   //TODO:Handle long modal title
   return (
     <Modal
-      className="hue-summary-modal"
+      className="hue-summary-modal cuix antd"
       okText={t('Close')}
       onOk={onClose}
       open={showModal}

diff --git a/desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.scss b/desktop/core/src/desktop/js/reactComponents/CommonHeader/CommonHeader.scss
@@ -16,9 +16,6 @@
 
 @use 'variables' as vars;
 
-$heading-font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$icon-size: 32px;
-
 .antd.cuix {
   .hue-common-header {
     background-color: vars.$fluidx-gray-100;
@@ -29,13 +26,12 @@ $icon-size: 32px;
   .hue-header-icon > svg {
     margin-right: 10px;
     flex: 0 0 auto;
-    height: $icon-size;
+    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-h2-size;
     line-height: vars.$fluidx-heading-h2-line-height;
     font-weight: vars.$fluidx-heading-h2-weight;

diff --git a/...desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.scss b/...desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.scss
diff --git a/.../desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.tsx b/.../desktop/js/reactComponents/FileChooser/PathBrowser/DropdownMenuItem/DropdownMenuItem.tsx
diff --git a/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.scss b/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.scss
@@ -14,6 +14,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 @use 'variables' as vars;
+@use 'mixins';
 
 .antd.cuix {
   .hue-path-browser__overflowing-label {
@@ -24,9 +25,8 @@
     border: none;
 
     >span {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+      @include mixins.nowrap-ellipsis;
+
       max-width: 150ch;
       display: inline !important;
     }

diff --git a/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.tsx b/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/OverflowingItem.tsx
@@ -31,14 +31,12 @@ const defaultProps = {
 };
 
 const OverflowingItem = ({ label, onClick, testId }: OverflowingItemProps): JSX.Element => {
-  const textElementRef = useRef<HTMLDivElement>(null);
+  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);
   };
 
@@ -57,8 +55,9 @@ const OverflowingItem = ({ label, onClick, testId }: OverflowingItemProps): JSX.
         className="hue-path-browser__overflowing-label"
         onClick={onClick}
         data-testid={`${testId}-label`}
+        data-event={''}
       >
-        {label}
+        <span ref={textElementRef}>{label}</span>
       </BorderlessButton>
     </OverflowTooltip>
   );

diff --git a/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss b/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.scss
@@ -15,6 +15,7 @@
 // limitations under the License.
 
 @use 'variables' as vars;
+@use 'mixins';
 
 $icon-width: 24px;
 $icon-height: 24px;
@@ -83,8 +84,6 @@ $icon-height: 24px;
 
 .hue-path-browser__dropdown {
   width: 200px;
-  background-color: vars.$fluidx-gray-200;
-  padding: 0;
 
   .ant-dropdown-menu {
     max-height: 200px;
@@ -93,9 +92,6 @@ $icon-height: 24px;
   }
 
   .ant-dropdown-menu-title-content {
-    display: inline-block;
-    overflow-x: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @include mixins.nowrap-ellipsis;
   }
 }
diff --git a/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.test.tsx b/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 () => {

diff --git a/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx b/desktop/core/src/desktop/js/reactComponents/FileChooser/PathBrowser/PathBrowser.tsx
@@ -17,17 +17,15 @@
 import React, { useRef, useEffect, useState, RefObject } from 'react';
 import { Input, Dropdown } from 'antd';
 import { BorderlessButton } from 'cuix/dist/components/Button';
-import type { MenuProps } from 'antd';
+import { MenuItemType } from 'antd/lib/menu/hooks/useItems';
 
 import HdfsIcon from '../../../components/icons/HdfsIcon';
 import S3Icon from '../../../components/icons/S3Icon';
 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;
@@ -88,17 +86,11 @@ const PathBrowser = ({
   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;
@@ -154,7 +146,7 @@ const PathBrowser = ({
                     {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'