refactor(QueriesHistory): move queries manipulations to hook

artemmufazalov · artemmufazalov · commit 9d4d454fbd28 · 2025-11-18T22:14:11.000+03:00
diff --git a/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx b/src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx
@@ -1,16 +1,18 @@
+import React from 'react';
+
 import type {Column} from '@gravity-ui/react-data-table';
 
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {Search} from '../../../../components/Search';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {
-    selectQueriesHistory,
     selectQueriesHistoryFilter,
     setIsDirty,
     setQueryHistoryFilter,
 } from '../../../../store/reducers/query/query';
 import type {QueryInHistory} from '../../../../store/reducers/query/types';
+import {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
 import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
 import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
 import {cn} from '../../../../utils/cn';
@@ -34,9 +36,13 @@ interface QueriesHistoryProps {
 function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
     const dispatch = useTypedDispatch();
 
-    const queriesHistory = useTypedSelector(selectQueriesHistory);
+    const {filteredHistoryQueries} = useQueriesHistory();
+
+    const reversedHistory = React.useMemo(() => {
+        return [...filteredHistoryQueries].reverse();
+    }, [filteredHistoryQueries]);
+
     const filter = useTypedSelector(selectQueriesHistoryFilter);
-    const reversedHistory = [...queriesHistory].reverse();
 
     const applyQueryClick = (query: QueryInHistory) => {
         changeUserInput({input: query.queryText});
diff --git a/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx b/src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx
@@ -11,15 +11,13 @@ import {
 } from '../../../../store/reducers/capabilities/hooks';
 import {
     queryApi,
-    saveQueryToHistory,
-    selectQueriesHistory,
-    selectQueriesHistoryCurrentIndex,
     selectResult,
     selectTenantPath,
     setIsDirty,
     setTenantPath,
 } from '../../../../store/reducers/query/query';
 import type {QueryResult} from '../../../../store/reducers/query/types';
+import {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
 import {setQueryAction} from '../../../../store/reducers/queryActions/queryActions';
 import {selectShowPreview, setShowPreview} from '../../../../store/reducers/schema/schema';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
@@ -77,10 +75,11 @@ export default function QueryEditor(props: QueryEditorProps) {
     const {theme, changeUserInput} = props;
     const savedPath = useTypedSelector(selectTenantPath);
     const result = useTypedSelector(selectResult);
-    const historyQueries = useTypedSelector(selectQueriesHistory);
-    const historyCurrentIndex = useTypedSelector(selectQueriesHistoryCurrentIndex);
     const showPreview = useTypedSelector(selectShowPreview);
 
+    const {historyQueries, historyCurrentIndex, saveQueryToHistory, updateQueryInHistory} =
+        useQueriesHistory();
+
     const isResultLoaded = Boolean(result);
 
     const [querySettings] = useQueryExecutionSettings();
@@ -182,6 +181,12 @@ export default function QueryEditor(props: QueryEditorProps) {
                 base64: encodeTextWithBase64,
             });
 
+            query.then(({data}) => {
+                if (data?.queryId) {
+                    updateQueryInHistory(data.queryId, data?.queryStats);
+                }
+            });
+
             queryManagerInstance.registerQuery(query);
         }
 
@@ -190,7 +195,7 @@ export default function QueryEditor(props: QueryEditorProps) {
         // Don't save partial queries in history
         if (!partial) {
             if (text !== historyQueries[historyCurrentIndex]?.queryText) {
-                dispatch(saveQueryToHistory({queryText: text, queryId}));
+                saveQueryToHistory(text, queryId);
             }
             dispatch(setIsDirty(false));
         }
diff --git a/src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx b/src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx
@@ -6,13 +6,8 @@ import throttle from 'lodash/throttle';
 import type Monaco from 'monaco-editor';
 
 import {MonacoEditor} from '../../../../components/MonacoEditor/MonacoEditor';
-import {
-    goToNextQuery,
-    goToPreviousQuery,
-    selectQueriesHistory,
-    selectUserInput,
-    setIsDirty,
-} from '../../../../store/reducers/query/query';
+import {selectUserInput, setIsDirty} from '../../../../store/reducers/query/query';
+import {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {QueryAction} from '../../../../types/store/query';
 import {
@@ -49,7 +44,7 @@ export function YqlEditor({
     const dispatch = useTypedDispatch();
     const [monacoGhostInstance, setMonacoGhostInstance] =
         React.useState<ReturnType<typeof createMonacoGhostInstance>>();
-    const historyQueries = useTypedSelector(selectQueriesHistory);
+    const {historyQueries, goToPreviousQuery, goToNextQuery} = useQueriesHistory();
     const [isCodeAssistEnabled] = useSetting(SETTING_KEYS.ENABLE_CODE_ASSISTANT);
 
     const editorOptions = useEditorOptions();
@@ -160,7 +155,7 @@ export function YqlEditor({
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
             run: () => {
-                dispatch(goToPreviousQuery());
+                goToPreviousQuery();
             },
         });
         editor.addAction({
@@ -169,7 +164,7 @@ export function YqlEditor({
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
             run: () => {
-                dispatch(goToNextQuery());
+                goToNextQuery();
             },
         });
         editor.addAction({
diff --git a/src/containers/Tenant/Query/QueryEditor/helpers.ts b/src/containers/Tenant/Query/QueryEditor/helpers.ts
@@ -4,10 +4,10 @@ import type {AcceptEvent, DeclineEvent, IgnoreEvent, PromptFile} from '@ydb-plat
 import type Monaco from 'monaco-editor';
 
 import {codeAssistApi} from '../../../../store/reducers/codeAssist/codeAssist';
-import {selectQueriesHistory} from '../../../../store/reducers/query/query';
+import {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {TelemetryOpenTabs} from '../../../../types/api/codeAssist';
-import {useSetting, useTypedSelector} from '../../../../utils/hooks';
+import {useSetting} from '../../../../utils/hooks';
 import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
 import {useSavedQueries} from '../utils/useSavedQueries';
 
@@ -45,7 +45,7 @@ export function useCodeAssistHelpers() {
     const [discardSuggestion] = codeAssistApi.useDiscardSuggestionMutation();
     const [ignoreSuggestion] = codeAssistApi.useIgnoreSuggestionMutation();
     const [sendUserQueriesData] = codeAssistApi.useSendUserQueriesDataMutation();
-    const historyQueries = useTypedSelector(selectQueriesHistory);
+    const {historyQueries} = useQueriesHistory();
     const savedQueries = useSavedQueries();
 
     const getCodeAssistSuggestions = React.useCallback(
diff --git a/src/store/reducers/query/__test__/tabPersistence.test.tsx b/src/store/reducers/query/__test__/tabPersistence.test.tsx
@@ -4,10 +4,6 @@ import type {QueryState} from '../types';
 describe('QueryResultViewer tab persistence integration', () => {
     const initialState: QueryState = {
         input: '',
-        history: {
-            queries: [],
-            currentIndex: -1,
-        },
     };
 
     test('should save and retrieve tab selection for explain queries', () => {
diff --git a/src/store/reducers/query/query.ts b/src/store/reducers/query/query.ts
@@ -1,7 +1,6 @@
 import {createSelector, createSlice} from '@reduxjs/toolkit';
 import type {PayloadAction} from '@reduxjs/toolkit';
 
-import {settingsManager} from '../../../services/settings';
 import {TracingLevelNumber} from '../../../types/api/query';
 import type {QueryAction, QueryRequestParams, QuerySettings} from '../../../types/store/query';
 import type {StreamDataChunk} from '../../../types/store/streaming';
@@ -11,25 +10,15 @@ import {isQueryErrorResponse} from '../../../utils/query';
 import {isNumeric} from '../../../utils/utils';
 import type {RootState} from '../../defaultStore';
 import {api} from '../api';
-import {SETTING_KEYS} from '../settings/constants';
 
 import {prepareQueryData} from './prepareQueryData';
 import {
     addStreamingChunks as addStreamingChunksReducer,
     setStreamQueryResponse as setStreamQueryResponseReducer,
     setStreamSession as setStreamSessionReducer,
 } from './streamingReducers';
-import type {QueryResult, QueryState} from './types';
-import {getActionAndSyntaxFromQueryMode, getQueryInHistory, prepareQueryWithPragmas} from './utils';
-
-const MAXIMUM_QUERIES_IN_HISTORY = 20;
-
-const queriesHistoryInitial = settingsManager.readUserSettingsValue(
-    SETTING_KEYS.QUERIES_HISTORY,
-    [],
-) as string[];
-
-const sliceLimit = queriesHistoryInitial.length - MAXIMUM_QUERIES_IN_HISTORY;
+import type {QueryResult, QueryState, QueryStats} from './types';
+import {getActionAndSyntaxFromQueryMode, prepareQueryWithPragmas} from './utils';
 
 const rawQuery = loadFromSessionStorage(QUERY_EDITOR_CURRENT_QUERY_KEY);
 const input = typeof rawQuery === 'string' ? rawQuery : '';
@@ -39,16 +28,7 @@ const isDirty = Boolean(loadFromSessionStorage(QUERY_EDITOR_DIRTY_KEY));
 const initialState: QueryState = {
     input,
     isDirty,
-    history: {
-        queries: queriesHistoryInitial
-            .slice(sliceLimit < 0 ? 0 : sliceLimit)
-            .map(getQueryInHistory),
-        currentIndex:
-            queriesHistoryInitial.length > MAXIMUM_QUERIES_IN_HISTORY
-                ? MAXIMUM_QUERIES_IN_HISTORY - 1
-                : queriesHistoryInitial.length - 1,
-        filter: '',
-    },
+    historyFilter: '',
 };
 
 const slice = createSlice({
@@ -66,76 +46,11 @@ const slice = createSlice({
         setQueryResult: (state, action: PayloadAction<QueryResult | undefined>) => {
             state.result = action.payload;
         },
-        saveQueryToHistory: (
-            state,
-            action: PayloadAction<{queryText: string; queryId: string}>,
-        ) => {
-            const {queryText, queryId} = action.payload;
-
-            const newQueries = [...state.history.queries, {queryText, queryId}].slice(
-                state.history.queries.length >= MAXIMUM_QUERIES_IN_HISTORY ? 1 : 0,
-            );
-            settingsManager.setUserSettingsValue(SETTING_KEYS.QUERIES_HISTORY, newQueries);
-            const currentIndex = newQueries.length - 1;
-
-            state.history = {
-                queries: newQueries,
-                currentIndex,
-            };
-        },
-        updateQueryInHistory: (
-            state,
-            action: PayloadAction<{queryId: string; stats: QueryStats}>,
-        ) => {
-            const {queryId, stats} = action.payload;
-
-            if (!stats) {
-                return;
-            }
-
-            const index = state.history.queries.findIndex((item) => item.queryId === queryId);
-
-            if (index === -1) {
-                return;
-            }
-
-            const newQueries = [...state.history.queries];
-            const {durationUs, endTime} = stats;
-            newQueries.splice(index, 1, {
-                ...state.history.queries[index],
-                durationUs,
-                endTime,
-            });
-
-            settingsManager.setUserSettingsValue(SETTING_KEYS.QUERIES_HISTORY, newQueries);
-
-            state.history.queries = newQueries;
-        },
-        goToPreviousQuery: (state) => {
-            const currentIndex = state.history.currentIndex;
-            if (currentIndex <= 0) {
-                return;
-            }
-            const newCurrentIndex = currentIndex - 1;
-            const query = state.history.queries[newCurrentIndex];
-            state.input = query.queryText;
-            state.history.currentIndex = newCurrentIndex;
-        },
-        goToNextQuery: (state) => {
-            const currentIndex = state.history.currentIndex;
-            if (currentIndex >= state.history.queries.length - 1) {
-                return;
-            }
-            const newCurrentIndex = currentIndex + 1;
-            const query = state.history.queries[newCurrentIndex];
-            state.input = query.queryText;
-            state.history.currentIndex = newCurrentIndex;
-        },
         setTenantPath: (state, action: PayloadAction<string>) => {
             state.tenantPath = action.payload;
         },
         setQueryHistoryFilter: (state, action: PayloadAction<string>) => {
-            state.history.filter = action.payload;
+            state.historyFilter = action.payload;
         },
         setResultTab: (
             state,
@@ -152,14 +67,13 @@ const slice = createSlice({
         setStreamQueryResponse: setStreamQueryResponseReducer,
     },
     selectors: {
-        selectQueriesHistoryFilter: (state) => state.history.filter || '',
+        selectQueriesHistoryFilter: (state) => state.historyFilter || '',
         selectTenantPath: (state) => state.tenantPath,
         selectResult: (state) => state.result,
         selectStartTime: (state) => state.result?.startTime,
         selectEndTime: (state) => state.result?.endTime,
         selectUserInput: (state) => state.input,
         selectIsDirty: (state) => state.isDirty,
-        selectQueriesHistoryCurrentIndex: (state) => state.history?.currentIndex,
         selectResultTab: (state) => state.selectedResultTab,
     },
 });
@@ -175,27 +89,10 @@ export const selectQueryDuration = createSelector(
     },
 );
 
-export const selectQueriesHistory = createSelector(
-    [
-        (state: RootState) => state.query.history.queries,
-        (state: RootState) => state.query.history.filter,
-    ],
-    (queries, filter) => {
-        const normalizedFilter = filter?.toLowerCase();
-        return normalizedFilter
-            ? queries.filter((item) => item.queryText.toLowerCase().includes(normalizedFilter))
-            : queries;
-    },
-);
-
 export default slice.reducer;
 export const {
     changeUserInput,
     setQueryResult,
-    saveQueryToHistory,
-    updateQueryInHistory,
-    goToPreviousQuery,
-    goToNextQuery,
     setTenantPath,
     setQueryHistoryFilter,
     addStreamingChunks,
@@ -207,7 +104,6 @@ export const {
 
 export const {
     selectQueriesHistoryFilter,
-    selectQueriesHistoryCurrentIndex,
     selectTenantPath,
     selectResult,
     selectUserInput,
@@ -228,11 +124,6 @@ interface SendQueryParams extends QueryRequestParams {
 // Stream query receives queryId from session chunk.
 type StreamQueryParams = Omit<SendQueryParams, 'queryId'>;
 
-interface QueryStats {
-    durationUs?: string | number;
-    endTime?: string | number;
-}
-
 const DEFAULT_STREAM_CHUNK_SIZE = 1000;
 const DEFAULT_CONCURRENT_RESULTS = false;
 
@@ -421,8 +312,9 @@ export const queryApi = api.injectEndpoints({
                     const data = prepareQueryData(response);
                     data.traceId = response?._meta?.traceId;
 
+                    const queryStats: QueryStats = {};
+
                     if (actionType === 'execute') {
-                        const queryStats: QueryStats = {};
                         if (data.stats) {
                             const {DurationUs, Executions: [{FinishTimeMs}] = [{}]} = data.stats;
                             queryStats.durationUs = DurationUs;
@@ -432,8 +324,6 @@ export const queryApi = api.injectEndpoints({
                             queryStats.durationUs = (now - timeStart) * 1000;
                             queryStats.endTime = now;
                         }
-
-                        dispatch(updateQueryInHistory({stats: queryStats, queryId}));
                     }
 
                     dispatch(
@@ -446,7 +336,7 @@ export const queryApi = api.injectEndpoints({
                             endTime: Date.now(),
                         }),
                     );
-                    return {data: null};
+                    return {data: {queryStats, queryId}};
                 } catch (error) {
                     const state = getState() as RootState;
                     if (state.query.result?.startTime !== startTime) {
diff --git a/src/store/reducers/query/types.ts b/src/store/reducers/query/types.ts
diff --git a/src/store/reducers/query/useQueriesHistory.ts b/src/store/reducers/query/useQueriesHistory.ts
