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

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,150 @@
+import React from 'react';
+
+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');
+
+import './Drawer.scss';
+
+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;
+    drawerId?: string;
+    storageKey?: string;
+    defaultWidth?: number;
+    direction?: 'left' | 'right';
+    className?: string;
+    detectClickOutside?: boolean;
+}
+
+const ContentWrapper = ({
+    isVisible,
+    onClose,
+    children,
+    drawerId = 'drawer',
+    storageKey = DRAWER_WIDTH_KEY,
+    defaultWidth = DEFAULT_DRAWER_WIDTH,
+    direction = 'right',
+    className,
+    detectClickOutside = false,
+}: ContentWrapperProps) => {
+    const [drawerWidth, setDrawerWidth] = React.useState(() => {
+        const savedWidth = localStorage.getItem(storageKey);
+        return savedWidth ? Number(savedWidth) : defaultWidth;
+    });
+
+    const drawerRef = React.useRef<HTMLDivElement>(null);
+
+    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) => {
+        setDrawerWidth(width);
+        localStorage.setItem(storageKey, width.toString());
+    };
+
+    return (
+        <GravityDrawer
+            onEscape={onClose}
+            onVeilClick={onClose}
+            hideVeil
+            className={b('container', className)}
+        >
+            <DrawerItem
+                id={drawerId}
+                visible={isVisible}
+                resizable
+                width={drawerWidth}
+                onResize={handleResizeDrawer}
+                direction={direction}
+                className={b('item')}
+                ref={detectClickOutside ? drawerRef : undefined}
+            >
+                {children}
+            </DrawerItem>
+        </GravityDrawer>
+    );
+};
+
+export const Drawer = {
+    Container: ({children, className}: ContainerProps) => {
+        return <div className={b('drawer-container', className)}>{children}</div>;
+    },
+
+    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/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>
     );
 }

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/CopyLinkButton.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import {Link} from '@gravity-ui/icons';
+import type {ButtonProps, CopyToClipboardStatus} from '@gravity-ui/uikit';
+import {ActionTooltip, Button, CopyToClipboard, Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+import './QueryDetails.scss';
+
+const b = cn('kv-query-details');
+
+interface LinkButtonComponentProps extends ButtonProps {
+    size?: ButtonProps['size'];
+    hasTooltip?: boolean;
+    status: CopyToClipboardStatus;
+    closeDelay?: number;
+}
+
+const DEFAULT_TIMEOUT = 1200;
+const TOOLTIP_ANIMATION = 200;
+
+const LinkButtonComponent = (props: LinkButtonComponentProps) => {
+    const {size = 'm', hasTooltip = true, status, closeDelay, ...rest} = props;
+
+    return (
+        <ActionTooltip
+            title={
+                status === 'success'
+                    ? i18n('query-details.link-copied')
+                    : i18n('query-details.copy-link')
+            }
+            disabled={!hasTooltip}
+            closeDelay={closeDelay}
+        >
+            <Button view="flat-secondary" size={size} {...rest}>
+                <Button.Icon className={b('icon')}>
+                    <Icon data={Link} size={16} />
+                </Button.Icon>
+            </Button>
+        </ActionTooltip>
+    );
+};
+
+export interface CopyLinkButtonProps extends ButtonProps {
+    text: string;
+}
+
+export function CopyLinkButton(props: CopyLinkButtonProps) {
+    const {text, ...buttonProps} = props;
+
+    const timerIdRef = React.useRef<number>();
+    const [tooltipCloseDelay, setTooltipCloseDelay] = React.useState<number | undefined>(undefined);
+    const [tooltipDisabled, setTooltipDisabled] = React.useState(false);
+    const timeout = DEFAULT_TIMEOUT;
+
+    React.useEffect(() => window.clearTimeout(timerIdRef.current), []);
+
+    const handleCopy = React.useCallback(() => {
+        setTooltipDisabled(false);
+        setTooltipCloseDelay(timeout);
+
+        window.clearTimeout(timerIdRef.current);
+
+        timerIdRef.current = window.setTimeout(() => {
+            setTooltipDisabled(true);
+        }, timeout - TOOLTIP_ANIMATION);
+    }, [timeout]);
+
+    return (
+        <CopyToClipboard text={text} timeout={timeout} onCopy={handleCopy}>
+            {(status) => (
+                <LinkButtonComponent
+                    {...buttonProps}
+                    closeDelay={tooltipCloseDelay}
+                    hasTooltip={!tooltipDisabled}
+                    status={status}
+                />
+            )}
+        </CopyToClipboard>
+    );
+}

src/containers/Tenant/Diagnostics/TopQueries/QueryDetails/QueryDetails.scss

@@ -0,0 +1,69 @@
+@import '../../../../../styles/mixins.scss';
+
+.kv-query-details {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
+    color: var(--g-color-text-primary);
+    background-color: var(--g-color-base-background-dark);
+
+    &__header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: var(--g-spacing-5) var(--g-spacing-6) 0 var(--g-spacing-6);
+    }
+
+    &__title {
+        margin: 0;
+
+        font-size: 16px;
+        font-weight: 500;
+    }
+
+    &__actions {
+        display: flex;
+        gap: var(--g-spacing-2);
+    }
+
+    &__content {
+        overflow: auto;
+        flex: 1;
+
+        padding: var(--g-spacing-5) var(--g-spacing-4) var(--g-spacing-5) var(--g-spacing-6);
+    }
+
+    &__query-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: var(--g-spacing-2) var(--g-spacing-3);
+
+        border-bottom: 1px solid var(--g-color-line-generic);
+    }
+
+    &__query-title {
+        font-size: 14px;
+        font-weight: 500;
+    }
+
+    &__query-content {
+        position: relative;
+
+        overflow: hidden;
+
+        margin-top: var(--g-spacing-5);
+
+        border-radius: 4px;
+        background-color: var(--code-background-color);
+    }
+
+    &__icon {
+        // prevent button icon from firing onMouseEnter/onFocus through parent button's handler
+        pointer-events: none;
+    }
+}