feat: side panel aka refrigerator for query text in top queries

src/components/Search/Search.tsx

@@ -15,6 +15,7 @@ interface SearchProps {
     className?: string;
     debounce?: number;
     placeholder?: string;
+    inputRef?: React.RefObject<HTMLInputElement>;
 }
 
 export const Search = ({
@@ -24,6 +25,7 @@ export const Search = ({
     className,
     debounce = 200,
     placeholder,
+    inputRef,
 }: SearchProps) => {
     const [searchValue, setSearchValue] = React.useState<string>(value);
 
@@ -52,6 +54,7 @@ export const Search = ({
         <TextInput
             hasClear
             autoFocus
+            controlRef={inputRef}
             style={{width}}
             className={b(null, className)}
             placeholder={placeholder}

src/components/SyntaxHighlighter/YDBSyntaxHighlighter.tsx

@@ -88,6 +88,20 @@ export function YDBSyntaxHighlighter({
         return null;
     };
 
+    let paddingStyles = {};
+
+    if (
+        withClipboardButton &&
+        typeof withClipboardButton === 'object' &&
+        withClipboardButton.alwaysVisible
+    ) {
+        if (withClipboardButton.withLabel) {
+            paddingStyles = {paddingRight: 80};
+        } else {
+            paddingStyles = {paddingRight: 40};
+        }
+    }
+
     return (
         <div className={b(null, className)}>
             {renderCopyButton()}
@@ -96,7 +110,7 @@ export function YDBSyntaxHighlighter({
                 key={highlighterKey}
                 language={language}
                 style={style}
-                customStyle={{height: '100%'}}
+                customStyle={{height: '100%', ...paddingStyles}}
             >
                 {text}
             </ReactSyntaxHighlighter>

src/containers/Drawer/Drawer.scss

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

src/containers/Drawer/Drawer.tsx

@@ -0,0 +1,224 @@
+import React from 'react';
+
+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';
+
+// Create a context for sharing container dimensions
+interface DrawerContextType {
+    containerWidth: number;
+    setContainerWidth: React.Dispatch<React.SetStateAction<number>>;
+}
+
+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;
+    direction?: 'left' | 'right';
+    className?: string;
+    detectClickOutside?: boolean;
+    defaultWidth?: number;
+    isPercentageWidth?: boolean;
+}
+
+const ContentWrapper = ({
+    isVisible,
+    onClose,
+    children,
+    drawerId = 'drawer',
+    storageKey = DRAWER_WIDTH_KEY,
+    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) {
+            return undefined;
+        }
+
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                isVisible &&
+                drawerRef.current &&
+                !drawerRef.current.contains(event.target as Node)
+            ) {
+                onClose();
+            }
+        };
+
+        document.addEventListener('click', handleClickOutside);
+        return () => {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, [isVisible, onClose, detectClickOutside]);
+
+    const handleResizeDrawer = (width: number) => {
+        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 (
+        <GravityDrawer
+            onEscape={onClose}
+            onVeilClick={onClose}
+            hideVeil
+            className={b('container', className)}
+        >
+            <DrawerItem
+                id={drawerId}
+                visible={isVisible}
+                resizable
+                maxResizeWidth={containerWidth}
+                width={isPercentageWidth ? calculatedWidth : drawerWidth}
+                onResize={handleResizeDrawer}
+                direction={direction}
+                className={b('item')}
+                ref={detectClickOutside ? drawerRef : undefined}
+            >
+                {children}
+            </DrawerItem>
+        </GravityDrawer>
+    );
+};
+
+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) => {
+        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>
+        );
+    },
+
+    ItemWrapper: ({
+        children,
+        renderDrawerContent,
+        isDrawerVisible,
+        onCloseDrawer,
+        drawerId,
+        storageKey,
+        defaultWidth,
+        direction,
+        className,
+        detectClickOutside,
+        isPercentageWidth,
+    }: ItemWrapperProps) => {
+        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}
+                    isPercentageWidth={isPercentageWidth}
+                >
+                    {renderDrawerContent()}
+                </ContentWrapper>
+            </React.Fragment>
+        );
+    },
+};

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -8,7 +8,7 @@
     height: 100%;
 
     &__header-wrapper {
-        padding: 0 20px 16px;
+        padding: 0 var(--g-spacing-5);
 
         background-color: var(--g-color-base-background);
     }
@@ -39,7 +39,8 @@
         flex-grow: 1;
 
         width: 100%;
-        padding: 0 20px;
+        height: 100%;
+        margin: var(--g-spacing-4) var(--g-spacing-5) 0 var(--g-spacing-5);
 
         .ydb-table-with-controls-layout {
             &__controls {

src/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -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,9 +195,11 @@ function Diagnostics(props: DiagnosticsProps) {
                 </Helmet>
             ) : null}
             {renderTabs()}
-            <div className={b('page-wrapper')} ref={containerRef}>
-                {renderTabContent()}
-            </div>
+            <Drawer.Container>
+                <div className={b('page-wrapper')} ref={containerRef}>
+                    {renderTabContent()}
+                </div>
+            </Drawer.Container>
         </div>
     );
 }