fix: use query params

Author: astandrik

src/assets/icons/cry-cat.svg

@@ -0,0 +1,6 @@
+.ydb-drawer-wrapper {
+    &__item {
+        z-index: 4;
+        height: 100%;
+    }
+}

src/containers/DrawerWrapper/DrawerWrapper.scss

@@ -0,0 +1,134 @@
+import React from 'react';
+
+import {Drawer, DrawerItem} 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');
+
+import './DrawerWrapper.scss';
+
+interface DrawerContentWrapperProps {
+    isVisible: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    drawerId?: string;
+    storageKey?: string;
+    defaultWidth?: number;
+    direction?: 'left' | 'right';
+    className?: string;
+    detectClickOutside?: boolean;
+}
+
+export const DrawerContentWrapper = ({
+    isVisible,
+    onClose,
+    children,
+    drawerId = 'drawer',
+    storageKey = DRAWER_WIDTH_KEY,
+    defaultWidth = DEFAULT_DRAWER_WIDTH,
+    direction = 'right',
+    className,
+    detectClickOutside = false,
+}: DrawerContentWrapperProps) => {
+    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('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isVisible, onClose, detectClickOutside]);
+
+    const handleResizeDrawer = (width: number) => {
+        setDrawerWidth(width);
+        localStorage.setItem(storageKey, width.toString());
+    };
+
+    return (
+        <Drawer
+            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>
+        </Drawer>
+    );
+};
+
+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 DrawerWrapper = ({
+    children,
+    renderDrawerContent,
+    isDrawerVisible,
+    onCloseDrawer,
+    drawerId,
+    storageKey,
+    defaultWidth,
+    direction,
+    className,
+    detectClickOutside,
+}: DrawerWrapperProps) => {
+    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>
+    );
+};

src/containers/DrawerWrapper/DrawerWrapper.tsx

@@ -0,0 +1 @@
+export {DrawerWrapper, DrawerContentWrapper} from './DrawerWrapper';

src/containers/DrawerWrapper/index.ts

@@ -38,6 +38,8 @@
         position: relative;
 
         overflow: hidden;
+
+        height: 100%;
     }
 
     &__page-wrapper {

src/containers/Tenant/Diagnostics/Diagnostics.scss

@@ -0,0 +1,79 @@
+import React from 'react';
+
+import {Button, Icon, Text} from '@gravity-ui/uikit';
+import {useHistory, useLocation} from 'react-router-dom';
+
+import {parseQuery} from '../../../../routes';
+import {changeUserInput, setIsDirty} from '../../../../store/reducers/query/query';
+import {
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
+import type {KeyValueRow} from '../../../../types/api/query';
+import {cn} from '../../../../utils/cn';
+import {useTypedDispatch} from '../../../../utils/hooks';
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
+
+import {QueryDetails} from './QueryDetails';
+import i18n from './i18n';
+import {createQueryInfoItems} from './utils';
+
+import CryCatIcon from '../../../../assets/icons/cry-cat.svg';
+
+const b = cn('kv-top-queries');
+
+interface QueryDetailsDrawerContentProps {
+    row: KeyValueRow | null;
+    onClose: () => void;
+}
+
+export const QueryDetailsDrawerContent = ({row, onClose}: QueryDetailsDrawerContentProps) => {
+    const dispatch = useTypedDispatch();
+    const location = useLocation();
+    const history = useHistory();
+
+    const handleOpenInEditor = React.useCallback(() => {
+        if (row) {
+            const input = row.QueryText as string;
+            dispatch(changeUserInput({input}));
+            dispatch(setIsDirty(false));
+
+            const queryParams = parseQuery(location);
+
+            const queryPath = getTenantPath({
+                ...queryParams,
+                [TENANT_PAGE]: TENANT_PAGES_IDS.query,
+                [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
+            });
+
+            history.push(queryPath);
+        }
+    }, [dispatch, history, location, row]);
+
+    if (row) {
+        return (
+            <QueryDetails
+                queryText={row.QueryText as string}
+                infoItems={createQueryInfoItems(row)}
+                onClose={onClose}
+                onOpenInEditor={handleOpenInEditor}
+            />
+        );
+    }
+
+    return (
+        <div className={b('not-found-container')}>
+            <Icon data={CryCatIcon} size={100} />
+            <Text variant="subheader-2" className={b('not-found-title')}>
+                {i18n('query-details.not-found.title')}
+            </Text>
+            <Text variant="body-1" color="complementary" className={b('not-found-description')}>
+                {i18n('query-details.not-found.description')}
+            </Text>
+            <Button size="m" view="normal" className={b('not-found-close')} onClick={onClose}>
+                {i18n('query-details.close')}
+            </Button>
+        </div>
+    );
+};