feat: side panel aka refrigerator for query text in top queries (#2134)

Author: astandrik

src/components/Drawer/Drawer.tsx

@@ -10,13 +10,13 @@ import {CopyLinkButton} from '../CopyLinkButton/CopyLinkButton';
 
 import {useDrawerContext} from './DrawerContext';
 
+import './Drawer.scss';
+
 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';
-
 type DrawerEvent = MouseEvent & {
     _capturedInsideDrawer?: boolean;
 };
@@ -129,7 +129,7 @@ const DrawerPaneContentWrapper = ({
     );
 };
 
-type DrawerControl =
+export type DrawerControl =
     | {type: 'close'}
     | {type: 'copyLink'; link: string}
     | {type: 'custom'; node: React.ReactNode; key: string};
@@ -223,10 +223,12 @@ export const DrawerWrapper = ({
                 detectClickOutside={detectClickOutside}
                 isPercentageWidth={isPercentageWidth}
             >
-                <div className={b('content-wrapper')}>
-                    {renderDrawerHeader()}
-                    {renderDrawerContent()}
-                </div>
+                {isDrawerVisible ? (
+                    <div className={b('content-wrapper')}>
+                        {renderDrawerHeader()}
+                        {renderDrawerContent()}
+                    </div>
+                ) : null}
             </DrawerPaneContentWrapper>
         </React.Fragment>
     );

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

@@ -0,0 +1,34 @@
+import {Button, Flex, Icon, Text} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+import CryCatIcon from '../../../../../assets/icons/cry-cat.svg';
+
+const b = cn('kv-top-queries');
+
+interface NotFoundContainerProps {
+    onClose: () => void;
+}
+
+export const NotFoundContainer = ({onClose}: NotFoundContainerProps) => {
+    return (
+        <Flex
+            justifyContent="center"
+            alignItems="center"
+            direction="column"
+            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>
+        </Flex>
+    );
+};

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

@@ -0,0 +1,43 @@
+@import '../../../../../styles/mixins.scss';
+
+.ydb-query-details {
+    flex: 1;
+
+    color: var(--g-color-text-primary);
+    background-color: var(--g-color-base-background-dark);
+
+    &__content {
+        overflow: auto;
+        flex: 1;
+
+        padding: var(--g-spacing-5) var(--g-spacing-4) var(--g-spacing-5) var(--g-spacing-4);
+    }
+
+    &__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;
+
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        margin-top: var(--g-spacing-5);
+
+        border-radius: 4px;
+        background-color: var(--code-background-color);
+    }
+}

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

@@ -0,0 +1,48 @@
+import {Code} from '@gravity-ui/icons';
+import {Button, Flex, Icon} from '@gravity-ui/uikit';
+
+import type {InfoViewerItem} from '../../../../../components/InfoViewer';
+import {InfoViewer} from '../../../../../components/InfoViewer';
+import {YDBSyntaxHighlighter} from '../../../../../components/SyntaxHighlighter/YDBSyntaxHighlighter';
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+import './QueryDetails.scss';
+
+const b = cn('ydb-query-details');
+
+interface QueryDetailsProps {
+    queryText: string;
+    infoItems: InfoViewerItem[];
+    onOpenInEditor: () => void;
+}
+
+export const QueryDetails = ({queryText, infoItems, onOpenInEditor}: QueryDetailsProps) => {
+    return (
+        <Flex direction="column" className={b()}>
+            <Flex direction="column" className={b('content')}>
+                <InfoViewer info={infoItems} />
+
+                <div className={b('query-content')}>
+                    <div className={b('query-header')}>
+                        <div className={b('query-title')}>{i18n('query-details.query.title')}</div>
+                        <Button
+                            view="flat-secondary"
+                            size="m"
+                            onClick={onOpenInEditor}
+                            className={b('editor-button')}
+                        >
+                            <Icon data={Code} size={16} />
+                            {i18n('query-details.open-in-editor')}
+                        </Button>
+                    </div>
+                    <YDBSyntaxHighlighter
+                        language="yql"
+                        text={queryText}
+                        withClipboardButton={{alwaysVisible: true, withLabel: false}}
+                    />
+                </div>
+            </Flex>
+        </Flex>
+    );
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+
+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 {useTypedDispatch} from '../../../../../utils/hooks';
+import {TenantTabsGroups, getTenantPath} from '../../../TenantPages';
+import {createQueryInfoItems} from '../utils';
+
+import {NotFoundContainer} from './NotFoundContainer';
+import {QueryDetails} from './QueryDetails';
+
+interface QueryDetailsDrawerContentProps {
+    // Three cases:
+    // 1. row is KeyValueRow and we can show it.
+    // 2. row is null and we can show not found container.
+    // 3. row is undefined and we can show nothing.
+    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)}
+                onOpenInEditor={handleOpenInEditor}
+            />
+        );
+    }
+
+    return <NotFoundContainer onClose={onClose} />;
+};