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

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,71 @@
+@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;
+
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+
+        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;
+    }
+}

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

@@ -0,0 +1,72 @@
+import React from 'react';
+
+import {Code, Xmark} 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 {CopyLinkButton} from './CopyLinkButton';
+
+import './QueryDetails.scss';
+
+const b = cn('kv-query-details');
+
+interface QueryDetailsProps {
+    queryText: string;
+    infoItems: InfoViewerItem[];
+    onClose: () => void;
+    onOpenInEditor: () => void;
+    getTopQueryUrl?: () => string;
+}
+
+export const QueryDetails = ({
+    queryText,
+    infoItems,
+    onClose,
+    onOpenInEditor,
+    getTopQueryUrl,
+}: QueryDetailsProps) => {
+    const topQueryUrl = React.useMemo(() => getTopQueryUrl?.(), [getTopQueryUrl]);
+
+    return (
+        <div className={b()}>
+            <div className={b('header')}>
+                <div className={b('title')}>Query</div>
+                <div className={b('actions')}>
+                    {topQueryUrl && <CopyLinkButton text={topQueryUrl} />}
+                    <Button view="flat-secondary" onClick={onClose}>
+                        <Icon data={Xmark} size={16} />
+                    </Button>
+                </div>
+            </div>
+
+            <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>
+        </div>
+    );
+};

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

@@ -0,0 +1,85 @@
+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 i18n from '../i18n';
+import {createQueryInfoItems} from '../utils';
+
+import {QueryDetails} from './QueryDetails';
+
+import CryCatIcon from '../../../../../assets/icons/cry-cat.svg';
+
+const b = cn('kv-top-queries');
+
+interface QueryDetailsDrawerContentProps {
+    row: KeyValueRow | null;
+    onClose: () => void;
+    getTopQueryUrl?: () => string;
+}
+
+export const QueryDetailsDrawerContent = ({
+    row,
+    onClose,
+    getTopQueryUrl,
+}: 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}
+                getTopQueryUrl={getTopQueryUrl}
+            />
+        );
+    }
+
+    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>
+    );
+};