fix: better code

Author: astandrik

src/containers/Drawer/Drawer.scss

@@ -0,0 +1,12 @@
+.ydb-drawer {
+    &__drawer-container {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+    }
+
+    &__item {
+        z-index: 4;
+        height: 100%;
+    }
+}

src/containers/DrawerWrapper/DrawerWrapper.tsx renamed to src/containers/Drawer/Drawer.tsx

@@ -1,16 +1,34 @@
 import React from 'react';
 
-import {Drawer, DrawerItem} from '@gravity-ui/navigation';
+import {DrawerItem, Drawer as GravityDrawer} from '@gravity-ui/navigation';
 
 import {cn} from '../../utils/cn';
 
 const DEFAULT_DRAWER_WIDTH = 600;
 const DRAWER_WIDTH_KEY = 'drawer-width';
-const b = cn('ydb-drawer-wrapper');
+const b = cn('ydb-drawer');
 
-import './DrawerWrapper.scss';
+import './Drawer.scss';
 
-interface DrawerContentWrapperProps {
+interface ContainerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+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;
+}
+
+interface ContentWrapperProps {
     isVisible: boolean;
     onClose: () => void;
     children: React.ReactNode;
@@ -22,7 +40,7 @@ interface DrawerContentWrapperProps {
     detectClickOutside?: boolean;
 }
 
-export const DrawerContentWrapper = ({
+const ContentWrapper = ({
     isVisible,
     onClose,
     children,
@@ -32,7 +50,7 @@ export const DrawerContentWrapper = ({
     direction = 'right',
     className,
     detectClickOutside = false,
-}: DrawerContentWrapperProps) => {
+}: ContentWrapperProps) => {
     const [drawerWidth, setDrawerWidth] = React.useState(() => {
         const savedWidth = localStorage.getItem(storageKey);
         return savedWidth ? Number(savedWidth) : defaultWidth;
@@ -67,7 +85,7 @@ export const DrawerContentWrapper = ({
     };
 
     return (
-        <Drawer
+        <GravityDrawer
             onEscape={onClose}
             onVeilClick={onClose}
             hideVeil
@@ -85,55 +103,48 @@ export const DrawerContentWrapper = ({
             >
                 {children}
             </DrawerItem>
-        </Drawer>
+        </GravityDrawer>
     );
 };
 
-interface DrawerWrapperProps {
-    children: React.ReactNode;
-    renderDrawerContent: () => React.ReactNode;
-    isDrawerVisible: boolean;
-    onCloseDrawer: () => void;
-    drawerId?: string;
-    storageKey?: string;
-    defaultWidth?: number;
-    direction?: 'left' | 'right';
-    className?: string;
-    detectClickOutside?: boolean;
-}
+export const Drawer = {
+    Container: ({children, className}: ContainerProps) => {
+        return <div className={b('drawer-container', className)}>{children}</div>;
+    },
 
-export const DrawerWrapper = ({
-    children,
-    renderDrawerContent,
-    isDrawerVisible,
-    onCloseDrawer,
-    drawerId,
-    storageKey,
-    defaultWidth,
-    direction,
-    className,
-    detectClickOutside,
-}: DrawerWrapperProps) => {
-    React.useEffect(() => {
-        return () => {
-            onCloseDrawer();
-        };
-    }, [onCloseDrawer]);
-    return (
-        <React.Fragment>
-            {children}
-            <DrawerContentWrapper
-                isVisible={isDrawerVisible}
-                onClose={onCloseDrawer}
-                drawerId={drawerId}
-                storageKey={storageKey}
-                defaultWidth={defaultWidth}
-                direction={direction}
-                className={className}
-                detectClickOutside={detectClickOutside}
-            >
-                {renderDrawerContent()}
-            </DrawerContentWrapper>
-        </React.Fragment>
-    );
+    Wrapper: ({
+        children,
+        renderDrawerContent,
+        isDrawerVisible,
+        onCloseDrawer,
+        drawerId,
+        storageKey,
+        defaultWidth,
+        direction,
+        className,
+        detectClickOutside,
+    }: WrapperProps) => {
+        React.useEffect(() => {
+            return () => {
+                onCloseDrawer();
+            };
+        }, [onCloseDrawer]);
+        return (
+            <React.Fragment>
+                {children}
+                <ContentWrapper
+                    isVisible={isDrawerVisible}
+                    onClose={onCloseDrawer}
+                    drawerId={drawerId}
+                    storageKey={storageKey}
+                    defaultWidth={defaultWidth}
+                    direction={direction}
+                    className={className}
+                    detectClickOutside={detectClickOutside}
+                >
+                    {renderDrawerContent()}
+                </ContentWrapper>
+            </React.Fragment>
+        );
+    },
 };

src/containers/DrawerWrapper/DrawerWrapper.scss

@@ -34,14 +34,6 @@
         }
     }
 
-    &__drawer-container {
-        position: relative;
-
-        overflow: hidden;
-
-        height: 100%;
-    }
-
     &__page-wrapper {
         overflow: auto;
         flex-grow: 1;

src/containers/DrawerWrapper/index.ts

@@ -13,6 +13,7 @@ import type {AdditionalNodesProps, AdditionalTenantsProps} from '../../../types/
 import type {EPathType} from '../../../types/api/schema';
 import {cn} from '../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
+import {Drawer} from '../../Drawer/Drawer';
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes/Nodes';
 import {Operations} from '../../Operations';
@@ -194,11 +195,11 @@ function Diagnostics(props: DiagnosticsProps) {
                 </Helmet>
             ) : null}
             {renderTabs()}
-            <div className={b('drawer-container')}>
+            <Drawer.Container>
                 <div className={b('page-wrapper')} ref={containerRef}>
                     {renderTabContent()}
                 </div>
-            </div>
+            </Drawer.Container>
         </div>
     );
 }

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -7,13 +7,13 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {DrawerWrapper} from '../../../../containers/DrawerWrapper';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import type {KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {parseQueryErrorToString} from '../../../../utils/query';
+import {Drawer} from '../../../Drawer/Drawer';
 
 import {QueryDetailsDrawerContent} from './QueryDetailsDrawerContent';
 import {getRunningQueriesColumns} from './columns/columns';
@@ -100,15 +100,14 @@ export const RunningQueriesData = ({
     );
 
     return (
-        <DrawerWrapper
+        <Drawer.Wrapper
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="running-query-details"
             storageKey="running-queries-drawer-width"
             defaultWidth={600}
             detectClickOutside
-            className={b('drawer-container')}
         >
             <TableWithControlsLayout>
                 <TableWithControlsLayout.Controls>
@@ -144,6 +143,6 @@ export const RunningQueriesData = ({
                     />
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
-        </DrawerWrapper>
+        </Drawer.Wrapper>
     );
 };

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -10,14 +10,14 @@ import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
-import {DrawerWrapper} from '../../../../containers/DrawerWrapper';
 import {topQueriesApi} from '../../../../store/reducers/executeTopQueries/executeTopQueries';
 import type {TimeFrame} from '../../../../store/reducers/executeTopQueries/types';
 import type {KeyValueRow} from '../../../../types/api/query';
 import {cn} from '../../../../utils/cn';
 import {useAutoRefreshInterval, useTypedSelector} from '../../../../utils/hooks';
 import {useSelectedColumns} from '../../../../utils/hooks/useSelectedColumns';
 import {parseQueryErrorToString} from '../../../../utils/query';
+import {Drawer} from '../../../Drawer/Drawer';
 
 import {QueryDetailsDrawerContent} from './QueryDetailsDrawerContent';
 import {getTopQueriesColumns} from './columns/columns';
@@ -128,15 +128,14 @@ export const TopQueriesData = ({
     );
 
     return (
-        <DrawerWrapper
+        <Drawer.Wrapper
             isDrawerVisible={isDrawerVisible}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="query-details"
             storageKey="kv-top-queries-drawer-width"
             defaultWidth={600}
             detectClickOutside
-            className={b('drawer-container')}
         >
             <TableWithControlsLayout>
                 <TableWithControlsLayout.Controls>
@@ -183,6 +182,6 @@ export const TopQueriesData = ({
                     />
                 </TableWithControlsLayout.Table>
             </TableWithControlsLayout>
-        </DrawerWrapper>
+        </Drawer.Wrapper>
     );
 };