[ui-storagebrowser] fixes css across pages

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserPage.scss

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

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 {
+      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 {
+        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;
-  }
+        &__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;
-  }
+        &__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;
-  }
+      &__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;
+        }
+
+        &__button {
+          @media screen and (width <=600px) {
+            span span:last-child {
+              display: none !important;
+            }
+          }
+        }
+      }
+    }
+
+    &__path-browser-panel {
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      margin-left: vars.$fluidx-spacing-xxs;
+    }
   }
 }

desktop/core/src/desktop/js/apps/storageBrowser/StorageBrowserTab/StorageBrowserTab.tsx

@@ -124,20 +124,26 @@ 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" data-testid={`${testId}-title-bar`}>
+          <div className="hue-storage-browser-tab__title-bar__title">
+            <BucketIcon
+              className="hue-storage-browser-tab__title-bar__title__icon"
+              data-testid={`${testId}-icon`}
+            />
+            <h3
+              className="hue-storage-browser-tab__title-bar__title__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-group__button"
               data-event=""
               title={t('Home')}
               icon={<HomeIcon />}
@@ -147,7 +153,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-group__button"
                 data-event=""
                 title={t('Trash')}
                 icon={<DeleteIcon />}
@@ -157,8 +163,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-group__button"
               data-event=""
               title={t('Refresh')}
               icon={<RefreshIcon />}
@@ -176,7 +182,7 @@ const StorageBrowserTab = ({ fileSystem, testId }: StorageBrowserTabProps): JSX.
           />
         )}
         <div
-          className="hue-storage-browser__path-browser-panel"
+          className="hue-storage-browser-tab__path-browser-panel"
           data-testid={`${testId}-path-browser-panel`}
         >
           <PathBrowser

desktop/core/src/desktop/js/apps/storageBrowser/StorageDirectoryPage/StorageDirectoryPage.tsx

@@ -52,7 +52,7 @@ import DragAndDrop from '../../../reactComponents/DragAndDrop/DragAndDrop';
 import UUID from '../../../utils/string/UUID';
 import { UploadItem } from '../../../utils/hooks/useFileUpload/util';
 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';
 
@@ -237,7 +237,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);
 

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();

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;

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" style="height: 100%"></div>
         <div id="embeddable_home" class="embeddable"></div>
         <div id="embeddable_catalog" class="embeddable"></div>
         <div id="embeddable_indexer" class="embeddable"></div>