Jelajahi Sumber

[ui-storagebrowser] fixes css across pages (#4047)

Ram Prasad Agarwal 8 bulan lalu
induk
melakukan
140a5a96b3

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

@@ -15,13 +15,17 @@
 // limitations under the License.
 
 @use 'variables' as vars;
-@use 'mixins';
 
-.hue-storage-browser.antd.cuix {
-  @include mixins.fillAbsolute;
-  @include mixins.flexRowLayout;
+.hue-storage-browser__root-container {
+  height: 100%;
+}
 
+.hue-storage-browser.antd.cuix {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
   height: 100%;
+  min-width: 300px;
 
   .ant-spin-nested-loading {
     height: 100%;
@@ -40,7 +44,6 @@
     .ant-tabs-content-holder {
       display: flex;
       flex: 1;
-      overflow: auto;
 
       .ant-tabs-content,
       .ant-tabs-tabpane-active {

+ 46 - 37
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.scss

@@ -18,54 +18,63 @@
 @use 'mixins';
 
 .antd.cuix {
-  .hue-storage-browser-tab-content {
+  .hue-storage-browser-tab {
     display: flex;
     flex: 1;
     flex-direction: column;
     height: 100%;
-  }
 
-  .hue-storage-browser__title-bar {
-    display: flex;
-    justify-content: space-between;
-  }
+    &__title-bar-container {
+      display: flex;
+      justify-content: space-between;
+    }
 
-  .hue-storage-browser__title {
-    display: flex;
-    gap: vars.$fluidx-spacing-xs;
-    max-width: 60%;
-    margin-right: vars.$fluidx-spacing-xl
-  }
+    &__title-bar {
+      display: flex;
+      gap: vars.$fluidx-spacing-xs;
+      min-width: 100px;
+      width: calc(100% - 265px);
 
-  .hue-storage-browser__home-bar-btns {
-    padding: vars.$fluidx-spacing-xxs;
-  }
+      @media screen and (width <=600px) {
+        width: calc(100% - 130px);
+      }
+    }
 
-  .hue-storage-browser__home-bar-right {
-    display: flex;
-    gap: vars.$fluidx-spacing-s;
-  }
+    &__title-bar-icon {
+      flex: 0 0 auto;
+      height: vars.$fluidx-heading-h3-line-height;
+    }
 
-  .hue-storage-browser__icon {
-    flex: 0 0 auto;
-    height: vars.$fluidx-heading-h3-line-height;
-  }
+    &__title-bar-name {
+      @include mixins.nowrap-ellipsis;
 
-  .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;
-    width: 100%;
-    @include mixins.nowrap-ellipsis;
+      font-size: vars.$fluidx-heading-h3-size;
+      font-weight: vars.$fluidx-heading-h3-weight;
+      margin-bottom: 0;
+    }
 
-    display: inline;
-  }
+    &__title-bar-button-group {
+      display: flex;
+      gap: vars.$fluidx-spacing-xs;
 
-  .hue-storage-browser__path-browser-panel {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    margin-left: vars.$fluidx-spacing-xxs;
+      @media screen and (width <=600px) {
+        gap: 0;
+      }
+    }
+
+    &__title-bar-button {
+      @media screen and (width <=600px) {
+        span span:last-child {
+          display: none !important;
+        }
+      }
+    }
+
+    &__path-browser-container {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      margin-left: vars.$fluidx-spacing-xxs;
+    }
   }
 }

+ 27 - 18
desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx

@@ -15,9 +15,13 @@
 // limitations under the License.
 
 import React, { useEffect, useState } from 'react';
+import { Alert } from 'antd';
+import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
+import RefreshIcon from '@cloudera/cuix-core/icons/react/RefreshIcon';
+import HomeIcon from '@cloudera/cuix-core/icons/react/HomeIcon';
+import DeleteIcon from '@cloudera/cuix-core/icons/react/DeleteIcon';
 
 import { i18nReact } from '../../../utils/i18nReact';
-import BucketIcon from '@cloudera/cuix-core/icons/react/BucketIcon';
 
 import PathBrowser from '../../../reactComponents/PathBrowser/PathBrowser';
 import StorageDirectoryPage from '../StorageDirectoryPage/StorageDirectoryPage';
@@ -25,17 +29,13 @@ import { FILE_STATS_API_URL, TRASH_PATH } from '../api';
 import { BrowserViewType, FileStats, FileSystem, TrashData } from '../types';
 import useLoadData from '../../../utils/hooks/useLoadData/useLoadData';
 import { BorderlessButton } from 'cuix/dist/components/Button';
-
-import './StorageBrowserTab.scss';
 import StorageFilePage from '../StorageFilePage/StorageFilePage';
 import changeURL from '../../../utils/url/changeURL';
 import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
 import { getFileSystemAndPath } from '../../../reactComponents/PathBrowser/PathBrowser.util';
-import RefreshIcon from '@cloudera/cuix-core/icons/react/RefreshIcon';
-import HomeIcon from '@cloudera/cuix-core/icons/react/HomeIcon';
-import DeleteIcon from '@cloudera/cuix-core/icons/react/DeleteIcon';
 import { inTrash } from '../../../utils/storageBrowserUtils';
-import { Alert } from 'antd';
+
+import './StorageBrowserTab.scss';
 
 interface StorageBrowserTabProps {
   fileSystem: FileSystem;
@@ -124,20 +124,29 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
 
   return (
     <LoadingErrorWrapper loading={isLoading} errors={errorConfig}>
-      <div className="hue-storage-browser-tab-content" data-testid={testId}>
-        <div className="hue-storage-browser__title-bar" data-testid={`${testId}-title-bar`}>
-          <div className="hue-storage-browser__title">
-            <BucketIcon className="hue-storage-browser__icon" data-testid={`${testId}-icon`} />
-            <h3 className="hue-storage-browser__folder-name" data-testid={`${testId}-folder-namer`}>
+      <div className="hue-storage-browser-tab" data-testid={testId}>
+        <div
+          className="hue-storage-browser-tab__title-bar-container"
+          data-testid={`${testId}-title-bar`}
+        >
+          <div className="hue-storage-browser-tab__title-bar">
+            <BucketIcon
+              className="hue-storage-browser-tab__title-bar-icon"
+              data-testid={`${testId}-icon`}
+            />
+            <h3
+              className="hue-storage-browser-tab__title-bar-name"
+              data-testid={`${testId}-folder-namer`}
+            >
               {fileName}
             </h3>
           </div>
-          <div className="hue-storage-browser__home-bar-right">
+          <div className="hue-storage-browser-tab__title-bar-button-group">
             <BorderlessButton
               onClick={() => {
                 setFilePath(fileSystem.userHomeDirectory);
               }}
-              className="hue-storage-browser__home-bar-btns"
+              className="hue-storage-browser-tab__title-bar-button"
               data-event=""
               title={t('Home')}
               icon={<HomeIcon />}
@@ -147,7 +156,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
             {fileSystem.config?.isTrashEnabled && (
               <BorderlessButton
                 onClick={onTrashClick}
-                className="hue-path-browser__home-btn"
+                className="hue-storage-browser-tab__title-bar-button"
                 data-event=""
                 title={t('Trash')}
                 icon={<DeleteIcon />}
@@ -157,8 +166,8 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
               </BorderlessButton>
             )}
             <BorderlessButton
-              onClick={() => reloadData()}
-              className="hue-storage-browser__home-bar-btns"
+              onClick={reloadData}
+              className="hue-storage-browser-tab__title-bar-button"
               data-event=""
               title={t('Refresh')}
               icon={<RefreshIcon />}
@@ -176,7 +185,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
           />
         )}
         <div
-          className="hue-storage-browser__path-browser-panel"
+          className="hue-storage-browser-tab__path-browser-container"
           data-testid={`${testId}-path-browser-panel`}
         >
           <PathBrowser

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

@@ -41,7 +41,7 @@ import DragAndDrop from '../../../reactComponents/DragAndDrop/DragAndDrop';
 import UUID from '../../../utils/string/UUID';
 import { RegularFile, FileStatus } from '../../../utils/hooks/useFileUpload/types';
 import FileUploadQueue from '../../../reactComponents/FileUploadQueue/FileUploadQueue';
-import { useWindowSize } from '../../../utils/hooks/useWindowSize/useWindowSize';
+import useResizeObserver from '../../../utils/hooks/useResizeObserver/useResizeObserver';
 import LoadingErrorWrapper from '../../../reactComponents/LoadingErrorWrapper/LoadingErrorWrapper';
 import StorageDirectoryActions from './StorageDirectoryActions/StorageDirectoryActions';
 import PaginatedTable, {
@@ -155,7 +155,7 @@ const StorageDirectoryPage = ({
     setFilesToUpload(prevFiles => [...prevFiles, ...newUploadItems]);
   };
 
-  const [tableRef, rect] = useWindowSize();
+  const [tableRef, rect] = useResizeObserver();
   // 40px for table header, 50px for pagination
   const tableBodyHeight = Math.max(rect.height - 90, 100);
 

+ 5 - 5
desktop/core/src/desktop/js/utils/hooks/useWindowSize/useWindowSize.test.tsx → desktop/core/src/desktop/js/utils/hooks/useResizeObserver/useResizeObserver.test.tsx

@@ -15,9 +15,9 @@
 // limitations under the License.
 
 import { act, renderHook } from '@testing-library/react';
-import { useWindowSize } from './useWindowSize';
+import useResizeObserver from './useResizeObserver';
 
-describe('useWindowSize', () => {
+describe('useResizeObserver', () => {
   const mockCallback = jest.fn();
   const mockObserver = {
     observe: jest.fn(),
@@ -36,7 +36,7 @@ describe('useWindowSize', () => {
   });
 
   it('should initialize with default dimensions', () => {
-    const { result } = renderHook(() => useWindowSize());
+    const { result } = renderHook(() => useResizeObserver());
 
     expect(result.current[1]).toEqual({
       x: 0,
@@ -51,7 +51,7 @@ describe('useWindowSize', () => {
   });
 
   it('should update dimensions when ResizeObserver fires', () => {
-    const { result } = renderHook(() => useWindowSize());
+    const { result } = renderHook(() => useResizeObserver());
     const div = document.createElement('div');
     result.current[0].current = div;
 
@@ -74,7 +74,7 @@ describe('useWindowSize', () => {
   });
 
   it('should disconnect observer on unmount', () => {
-    const { unmount } = renderHook(() => useWindowSize());
+    const { unmount } = renderHook(() => useResizeObserver());
 
     unmount();
     expect(mockObserver.disconnect).toHaveBeenCalled();

+ 3 - 1
desktop/core/src/desktop/js/utils/hooks/useWindowSize/useWindowSize.ts → desktop/core/src/desktop/js/utils/hooks/useResizeObserver/useResizeObserver.ts

@@ -18,7 +18,7 @@ import { useLayoutEffect, useRef, useState } from 'react';
 
 type ObserverRect = Omit<DOMRectReadOnly, 'toJSON'>;
 
-export const useWindowSize = (): [React.RefObject<HTMLDivElement>, ObserverRect] => {
+const useResizeObserver = (): [React.RefObject<HTMLDivElement>, ObserverRect] => {
   const ref = useRef<HTMLDivElement>(null);
   const [rect, setRect] = useState<ObserverRect>({
     x: 0,
@@ -49,3 +49,5 @@ export const useWindowSize = (): [React.RefObject<HTMLDivElement>, ObserverRect]
 
   return [ref, rect];
 };
+
+export default useResizeObserver;

+ 1 - 1
desktop/core/src/desktop/templates/hue.mako

@@ -220,7 +220,7 @@ ${ hueIcons.symbols() }
         <div id="embeddable_oozie_info" class="embeddable"></div>
         <div id="embeddable_jobbrowser" class="embeddable"></div>
         <div id="embeddable_filebrowser" class="embeddable"></div>
-        <div id="embeddable_newfilebrowser" class="embeddable"></div>
+        <div id="embeddable_newfilebrowser" class="embeddable hue-storage-browser__root-container"></div>
         <div id="embeddable_home" class="embeddable"></div>
         <div id="embeddable_catalog" class="embeddable"></div>
         <div id="embeddable_indexer" class="embeddable"></div>