fix: simplier approach

Author: astandrik

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

@@ -19,22 +19,41 @@ interface QueryDetailsProps {
     infoItems: InfoViewerItem[];
     onClose: () => void;
     onOpenInEditor: () => void;
+    onCopyLink?: () => void;
 }
 
 export const QueryDetails = ({
     queryText,
     infoItems,
     onClose,
     onOpenInEditor,
+    onCopyLink,
 }: QueryDetailsProps) => {
+    // Function to copy current URL to clipboard
+    const copyLinkToClipboard = (e: React.MouseEvent) => {
+        e.stopPropagation();
+
+        // If onCopyLink is provided, call it to generate and copy a shareable URL
+        // The actual copy to clipboard is handled in the parent component
+        if (onCopyLink) {
+            onCopyLink();
+        }
+    };
+
     return (
         <div className={b()}>
             <div className={b('header')}>
                 <div className={b('title')}>Query</div>
                 <div className={b('actions')}>
-                    <Button view="flat-secondary" onClick={onClose}>
-                        <Icon data={Link} size={16} />
-                    </Button>
+                    {onCopyLink && (
+                        <Button
+                            view="flat-secondary"
+                            onClick={copyLinkToClipboard}
+                            title={i18n('query-details.copy-link')}
+                        >
+                            <Icon data={Link} size={16} />
+                        </Button>
+                    )}
                     <EnableFullscreenButton />
                     <Button view="flat-secondary" onClick={onClose}>
                         <Icon data={Xmark} size={16} />

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

@@ -26,9 +26,14 @@ const b = cn('kv-top-queries');
 interface QueryDetailsDrawerContentProps {
     row: KeyValueRow | null;
     onClose: () => void;
+    onCopyLink?: () => void;
 }
 
-export const QueryDetailsDrawerContent = ({row, onClose}: QueryDetailsDrawerContentProps) => {
+export const QueryDetailsDrawerContent = ({
+    row,
+    onClose,
+    onCopyLink,
+}: QueryDetailsDrawerContentProps) => {
     const dispatch = useTypedDispatch();
     const location = useLocation();
     const history = useHistory();
@@ -58,6 +63,7 @@ export const QueryDetailsDrawerContent = ({row, onClose}: QueryDetailsDrawerCont
                 infoItems={createQueryInfoItems(row)}
                 onClose={onClose}
                 onOpenInEditor={handleOpenInEditor}
+                onCopyLink={onCopyLink}
             />
         );
     }

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

@@ -24,7 +24,6 @@ import {
     RUNNING_QUERIES_COLUMNS_WIDTH_LS_KEY,
     RUNNING_QUERIES_SELECTED_COLUMNS_LS_KEY,
 } from './columns/constants';
-import {useRunningQueriesRowSelection} from './hooks/useRunningQueriesRowSelection';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useRunningQueriesSort} from './utils';
 
@@ -43,6 +42,9 @@ export const RunningQueriesData = ({
 }: RunningQueriesDataProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
+    // Internal state for selected row
+    // null is reserved for not found state
+    const [selectedRow, setSelectedRow] = React.useState<KeyValueRow | null | undefined>(undefined);
 
     // Get columns for running queries
     const columns: Column<KeyValueRow>[] = React.useMemo(() => {
@@ -71,22 +73,35 @@ export const RunningQueriesData = ({
         );
 
     const rows = data?.resultSets?.[0]?.result;
-    const {handleRowSelect, selectedRow, hasSearchParams} = useRunningQueriesRowSelection(rows);
+
+    const isDrawerVisible = selectedRow !== undefined;
 
     const handleCloseDetails = React.useCallback(() => {
-        handleRowSelect(null);
-    }, [handleRowSelect]);
+        setSelectedRow(null);
+    }, [setSelectedRow]);
 
     const renderDrawerContent = React.useCallback(() => {
-        if (!hasSearchParams) {
+        if (!isDrawerVisible) {
             return null;
         }
         return <QueryDetailsDrawerContent row={selectedRow} onClose={handleCloseDetails} />;
-    }, [hasSearchParams, selectedRow, handleCloseDetails]);
+    }, [isDrawerVisible, selectedRow, handleCloseDetails]);
+
+    const onRowClick = React.useCallback(
+        (
+            row: KeyValueRow | null,
+            _index?: number,
+            event?: React.MouseEvent<HTMLTableRowElement>,
+        ) => {
+            event?.stopPropagation();
+            setSelectedRow(row);
+        },
+        [setSelectedRow],
+    );
 
     return (
         <DrawerWrapper
-            isDrawerVisible={hasSearchParams && !isFetching}
+            isDrawerVisible={isDrawerVisible && !isFetching}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="running-query-details"
@@ -122,7 +137,7 @@ export const RunningQueriesData = ({
                         data={rows || []}
                         loading={isFetching && currentData === undefined}
                         settings={TOP_QUERIES_TABLE_SETTINGS}
-                        onRowClick={handleRowSelect}
+                        onRowClick={onRowClick}
                         rowClassName={(row) => b('row', {active: row === selectedRow})}
                         sortOrder={tableSort}
                         onSort={handleTableSort}

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

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type {Column} from '@gravity-ui/react-data-table';
 import {Select, TableColumnSetup} from '@gravity-ui/uikit';
+import {isEqual} from 'lodash';
 
 import type {DateRangeValues} from '../../../../components/DateRange';
 import {DateRange} from '../../../../components/DateRange';
@@ -28,9 +29,10 @@ import {
     TOP_QUERIES_SELECTED_COLUMNS_LS_KEY,
 } from './columns/constants';
 import {DEFAULT_TIME_FILTER_VALUE, TIME_FRAME_OPTIONS} from './constants';
-import {useTopQueriesRowSelection} from './hooks/useTopQueriesRowSelection';
+import {useSetSelectedTopQueryRowFromParams} from './hooks/useSetSelectedTopQueryRowFromParams';
 import i18n from './i18n';
 import {TOP_QUERIES_TABLE_SETTINGS, useTopQueriesSort} from './utils';
+import {generateShareableUrl} from './utils/generateShareableUrl';
 
 const b = cn('kv-top-queries');
 
@@ -53,6 +55,9 @@ export const TopQueriesData = ({
 }: TopQueriesDataProps) => {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const filters = useTypedSelector((state) => state.executeTopQueries);
+    // Internal state for selected row
+    // null is reserved for not found state
+    const [selectedRow, setSelectedRow] = React.useState<KeyValueRow | null | undefined>(undefined);
 
     // Get columns for top queries
     const columns: Column<KeyValueRow>[] = React.useMemo(() => {
@@ -69,7 +74,7 @@ export const TopQueriesData = ({
     );
 
     const {tableSort, handleTableSort, backendSort} = useTopQueriesSort();
-    const {currentData, data, isFetching, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
+    const {currentData, isFetching, isLoading, error} = topQueriesApi.useGetTopQueriesQuery(
         {
             database: tenantName,
             filters,
@@ -79,23 +84,50 @@ export const TopQueriesData = ({
         {pollingInterval: autoRefreshInterval},
     );
 
-    const rows = data?.resultSets?.[0]?.result;
-    const {handleRowSelect, selectedRow, hasSearchParams} = useTopQueriesRowSelection(rows);
+    const rows = currentData?.resultSets?.[0]?.result;
+    useSetSelectedTopQueryRowFromParams(setSelectedRow, rows);
 
     const handleCloseDetails = React.useCallback(() => {
-        handleRowSelect(null);
-    }, [handleRowSelect]);
+        setSelectedRow(undefined);
+    }, [setSelectedRow]);
+
+    const isDrawerVisible = selectedRow !== undefined;
+
+    const onCopyLink = React.useCallback(() => {
+        if (selectedRow) {
+            const shareableUrl = generateShareableUrl(selectedRow);
+            navigator.clipboard.writeText(shareableUrl);
+        }
+    }, [selectedRow]);
 
     const renderDrawerContent = React.useCallback(() => {
-        if (!hasSearchParams) {
+        if (!isDrawerVisible) {
             return null;
         }
-        return <QueryDetailsDrawerContent row={selectedRow} onClose={handleCloseDetails} />;
-    }, [hasSearchParams, selectedRow, handleCloseDetails]);
+        return (
+            <QueryDetailsDrawerContent
+                row={selectedRow}
+                onClose={handleCloseDetails}
+                onCopyLink={onCopyLink}
+            />
+        );
+    }, [isDrawerVisible, selectedRow, handleCloseDetails, onCopyLink]);
+
+    const onRowClick = React.useCallback(
+        (
+            row: KeyValueRow | null,
+            _index?: number,
+            event?: React.MouseEvent<HTMLTableRowElement>,
+        ) => {
+            event?.stopPropagation();
+            setSelectedRow(row);
+        },
+        [setSelectedRow],
+    );
 
     return (
         <DrawerWrapper
-            isDrawerVisible={Boolean(hasSearchParams && !isFetching)}
+            isDrawerVisible={isDrawerVisible && !isFetching}
             onCloseDrawer={handleCloseDetails}
             renderDrawerContent={renderDrawerContent}
             drawerId="query-details"
@@ -142,8 +174,8 @@ export const TopQueriesData = ({
                         data={rows || []}
                         loading={isFetching && currentData === undefined}
                         settings={TOP_QUERIES_TABLE_SETTINGS}
-                        onRowClick={handleRowSelect}
-                        rowClassName={(row) => b('row', {active: row === selectedRow})}
+                        onRowClick={onRowClick}
+                        rowClassName={(row) => b('row', {active: isEqual(row, selectedRow)})}
                         sortOrder={tableSort}
                         onSort={handleTableSort}
                     />

src/containers/Tenant/Diagnostics/TopQueries/hooks/useRunningQueriesRowSelection.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import {StringParam, useQueryParams} from 'use-query-params';
+
+import type {KeyValueRow} from '../../../../../types/api/query';
+import {getTopQueryRowQueryParams} from '../utils/getTopQueryRowQueryParams';
+
+export interface SearchParamsQueryParams {
+    rank?: string;
+    intervalEnd?: string;
+    endTime?: string;
+    queryHash?: string;
+}
+
+export function useSetSelectedTopQueryRowFromParams(
+    setSelectedRow: (row: KeyValueRow | null) => void,
+    rows?: KeyValueRow[] | null,
+) {
+    const [queryParams, setQueryParams] = useQueryParams({
+        selectedRow: StringParam,
+    });
+
+    // Handle initialization from URL params
+    React.useEffect(() => {
+        if (rows && queryParams.selectedRow) {
+            const searchParamsQuery: SearchParamsQueryParams = JSON.parse(queryParams.selectedRow);
+            const matchedRow = rows.find((row) => {
+                const params = getTopQueryRowQueryParams(row);
+                return (
+                    params.rank === searchParamsQuery.rank &&
+                    params.intervalEnd === searchParamsQuery.intervalEnd &&
+                    params.endTime === searchParamsQuery.endTime &&
+                    searchParamsQuery.queryHash === params.queryHash
+                );
+            });
+
+            if (matchedRow) {
+                setSelectedRow(matchedRow);
+            } else {
+                // If we had a selectedRow in URL but couldn't find a matching row,
+                // explicitly set selectedRow to null to indicate empty state
+                setSelectedRow(null);
+            }
+
+            // Clear URL params after using them
+            setQueryParams({selectedRow: undefined});
+        }
+    }, [queryParams.selectedRow, setQueryParams, rows, setSelectedRow]);
+
+    return null;
+}