fix: relative width

Author: astandrik

src/containers/Drawer/Drawer.tsx

@@ -4,40 +4,41 @@ import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
 
 import {cn} from '../../utils/cn';
 
+const DEFAULT_DRAWER_WIDTH_PERCENTS = 60;
 const DEFAULT_DRAWER_WIDTH = 600;
 const DRAWER_WIDTH_KEY = 'drawer-width';
 const b = cn('ydb-drawer');
 
 import './Drawer.scss';
 
-interface ContainerProps {
-    children: React.ReactNode;
-    className?: string;
+// Create a context for sharing container dimensions
+interface DrawerContextType {
+    containerWidth: number;
+    setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
 }
 
-interface WrapperProps {
-    children: React.ReactNode;
-    renderDrawerContent: () => React.ReactNode;
-    isDrawerVisible: boolean;
-    onCloseDrawer: () => void;
-    drawerId?: string;
-    storageKey?: string;
-    defaultWidth?: number;
-    direction?: 'left' | 'right';
-    className?: string;
-    detectClickOutside?: boolean;
-}
+const DrawerContext = React.createContext<DrawerContextType | undefined>(undefined);
+
+// Custom hook to use the drawer context
+const useDrawerContext = () => {
+    const context = React.useContext(DrawerContext);
+    if (context === undefined) {
+        return {containerWidth: 0, setContainerWidth: () => {}};
+    }
+    return context;
+};
 
 interface ContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
     children: React.ReactNode;
     drawerId?: string;
     storageKey?: string;
-    defaultWidth?: number;
     direction?: 'left' | 'right';
     className?: string;
     detectClickOutside?: boolean;
+    defaultWidth?: number;
+    isPercentageWidth?: boolean;
 }
 
 const ContentWrapper = ({
@@ -46,17 +47,28 @@ const ContentWrapper = ({
     children,
     drawerId = 'drawer',
     storageKey = DRAWER_WIDTH_KEY,
-    defaultWidth = DEFAULT_DRAWER_WIDTH,
+    defaultWidth,
     direction = 'right',
     className,
     detectClickOutside = false,
+    isPercentageWidth,
 }: ContentWrapperProps) => {
     const [drawerWidth, setDrawerWidth] = React.useState(() => {
         const savedWidth = localStorage.getItem(storageKey);
         return savedWidth ? Number(savedWidth) : defaultWidth;
     });
 
     const drawerRef = React.useRef<HTMLDivElement>(null);
+    const {containerWidth} = useDrawerContext();
+    // Calculate drawer width based on container width percentage if specified
+    const calculatedWidth = React.useMemo(() => {
+        if (isPercentageWidth && containerWidth > 0) {
+            return Math.round(
+                (containerWidth * (drawerWidth || DEFAULT_DRAWER_WIDTH_PERCENTS)) / 100,
+            );
+        }
+        return drawerWidth || DEFAULT_DRAWER_WIDTH;
+    }, [containerWidth, isPercentageWidth, drawerWidth]);
 
     React.useEffect(() => {
         if (!detectClickOutside) {
@@ -80,8 +92,14 @@ const ContentWrapper = ({
     }, [isVisible, onClose, detectClickOutside]);
 
     const handleResizeDrawer = (width: number) => {
-        setDrawerWidth(width);
-        localStorage.setItem(storageKey, width.toString());
+        if (isPercentageWidth && containerWidth > 0) {
+            const percentageWidth = Math.round((width / containerWidth) * 100);
+            setDrawerWidth(percentageWidth);
+            localStorage.setItem(storageKey, percentageWidth.toString());
+        } else {
+            setDrawerWidth(width);
+            localStorage.setItem(storageKey, width.toString());
+        }
     };
 
     return (
@@ -95,7 +113,8 @@ const ContentWrapper = ({
                 id={drawerId}
                 visible={isVisible}
                 resizable
-                width={drawerWidth}
+                maxResizeWidth={containerWidth}
+                width={isPercentageWidth ? calculatedWidth : drawerWidth}
                 onResize={handleResizeDrawer}
                 direction={direction}
                 className={b('item')}
@@ -107,12 +126,65 @@ const ContentWrapper = ({
     );
 };
 
+interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+interface ItemWrapperProps {
+    children: React.ReactNode;
+    renderDrawerContent: () => React.ReactNode;
+    isDrawerVisible: boolean;
+    onCloseDrawer: () => void;
+    drawerId?: string;
+    storageKey?: string;
+    defaultWidth?: number;
+    direction?: 'left' | 'right';
+    className?: string;
+    detectClickOutside?: boolean;
+    isPercentageWidth?: boolean;
+}
+
 export const Drawer = {
     Container: ({children, className}: ContainerProps) => {
-        return <div className={b('drawer-container', className)}>{children}</div>;
+        const [containerWidth, setContainerWidth] = React.useState(0);
+        const containerRef = React.useRef<HTMLDivElement>(null);
+
+        React.useEffect(() => {
+            if (!containerRef.current) {
+                return undefined;
+            }
+
+            const updateWidth = () => {
+                if (containerRef.current) {
+                    setContainerWidth(containerRef.current.clientWidth);
+                }
+            };
+
+            // Set initial width
+            updateWidth();
+
+            // Update width on resize
+            const resizeObserver = new ResizeObserver(updateWidth);
+            resizeObserver.observe(containerRef.current);
+
+            return () => {
+                if (containerRef.current) {
+                    resizeObserver.disconnect();
+                }
+            };
+        }, []);
+
+        return (
+            <DrawerContext.Provider value={{containerWidth, setContainerWidth}}>
+                <div ref={containerRef} className={b('drawer-container', className)}>
+                    {children}
+                </div>
+            </DrawerContext.Provider>
+        );
     },
 
-    Wrapper: ({
+    ItemWrapper: ({
         children,
         renderDrawerContent,
         isDrawerVisible,
@@ -123,7 +195,8 @@ export const Drawer = {
         direction,
         className,
         detectClickOutside,
-    }: WrapperProps) => {
+        isPercentageWidth,
+    }: ItemWrapperProps) => {
         React.useEffect(() => {
             return () => {
                 onCloseDrawer();
@@ -141,6 +214,7 @@ export const Drawer = {
                     direction={direction}
                     className={className}
                     detectClickOutside={detectClickOutside}
+                    isPercentageWidth={isPercentageWidth}
                 >
                     {renderDrawerContent()}
                 </ContentWrapper>

src/containers/Tenant/Diagnostics/TopQueries/RunningQueriesData.tsx

@@ -100,14 +100,14 @@ export const RunningQueriesData = ({
     );
 
     return (
-        <Drawer.Wrapper
+        <Drawer.ItemWrapper
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="running-query-details"
             storageKey="running-queries-drawer-width"
-            defaultWidth={600}
             detectClickOutside
+            isPercentageWidth
         >
             <TableWithControlsLayout>
                 <TableWithControlsLayout.Controls>
@@ -143,6 +143,6 @@ export const RunningQueriesData = ({
                     />
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
-        </Drawer.Wrapper>
+        </Drawer.ItemWrapper>
     );
 };

src/containers/Tenant/Diagnostics/TopQueries/TopQueriesData.tsx

@@ -128,14 +128,14 @@ export const TopQueriesData = ({
     );
 
     return (
-        <Drawer.Wrapper
+        <Drawer.ItemWrapper
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="query-details"
             storageKey="kv-top-queries-drawer-width"
-            defaultWidth={600}
             detectClickOutside
+            isPercentageWidth
         >
             <TableWithControlsLayout>
                 <TableWithControlsLayout.Controls>
@@ -182,6 +182,6 @@ export const TopQueriesData = ({
                     />
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
-        </Drawer.Wrapper>
+        </Drawer.ItemWrapper>
     );
 };