fix(QueriesHistory): move queries manipulations to hook

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 type {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';
@@ -29,14 +31,17 @@ const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
 
 interface QueriesHistoryProps {
     changeUserInput: (value: {input: string}) => void;
+    queriesHistory: ReturnType<typeof useQueriesHistory>;
 }
 
-function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
+function QueriesHistory({changeUserInput, queriesHistory}: QueriesHistoryProps) {
     const dispatch = useTypedDispatch();
 
-    const queriesHistory = useTypedSelector(selectQueriesHistory);
+    const reversedHistory = React.useMemo(() => {
+        return queriesHistory.filteredHistoryQueries.toReversed();
+    }, [queriesHistory.filteredHistoryQueries]);
+
     const filter = useTypedSelector(selectQueriesHistoryFilter);
-    const reversedHistory = [...queriesHistory].reverse();
 
     const applyQueryClick = (query: QueryInHistory) => {
         changeUserInput({input: query.queryText});

src/containers/Tenant/Query/Query.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import {Helmet} from 'react-helmet-async';
 
 import {changeUserInput} from '../../../store/reducers/query/query';
+import {useQueriesHistory} from '../../../store/reducers/query/useQueriesHistory';
 import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 import {cn} from '../../../utils/cn';
 import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
@@ -25,6 +26,8 @@ export const Query = (props: QueryProps) => {
 
     const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
 
+    const queriesHistory = useQueriesHistory();
+
     const handleUserInputChange = (value: {input: string}) => {
         dispatch(changeUserInput(value));
     };
@@ -37,10 +40,21 @@ export const Query = (props: QueryProps) => {
     const renderContent = () => {
         switch (queryTab) {
             case TENANT_QUERY_TABS_ID.newQuery: {
-                return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
+                return (
+                    <QueryEditor
+                        changeUserInput={handleUserInputChange}
+                        queriesHistory={queriesHistory}
+                        {...props}
+                    />
+                );
             }
             case TENANT_QUERY_TABS_ID.history: {
-                return <QueriesHistory changeUserInput={handleUserInputChange} />;
+                return (
+                    <QueriesHistory
+                        changeUserInput={handleUserInputChange}
+                        queriesHistory={queriesHistory}
+                    />
+                );
             }
             case TENANT_QUERY_TABS_ID.saved: {
                 return <SavedQueries changeUserInput={handleUserInputChange} />;

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 type {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';
@@ -69,18 +67,25 @@ const initialTenantCommonInfoState = {
 interface QueryEditorProps {
     changeUserInput: (arg: {input: string}) => void;
     theme: string;
+    queriesHistory: ReturnType<typeof useQueriesHistory>;
 }
 
-export default function QueryEditor(props: QueryEditorProps) {
+export default function QueryEditor({theme, changeUserInput, queriesHistory}: QueryEditorProps) {
     const dispatch = useTypedDispatch();
     const {database, path, type, subType, databaseFullPath} = useCurrentSchema();
-    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,
+        historyCurrentQueryId,
+        saveQueryToHistory,
+        updateQueryInHistory,
+        goToPreviousQuery,
+        goToNextQuery,
+    } = queriesHistory;
+
     const isResultLoaded = Boolean(result);
 
     const [querySettings] = useQueryExecutionSettings();
@@ -182,15 +187,29 @@ export default function QueryEditor(props: QueryEditorProps) {
                 base64: encodeTextWithBase64,
             });
 
+            query
+                .then(({data}) => {
+                    if (data?.queryId) {
+                        updateQueryInHistory(data.queryId, data?.queryStats);
+                    }
+                })
+                .catch((error) => {
+                    // Do not add query stats for failed query
+                    console.error('Failed to update query history:', error);
+                });
+
             queryManagerInstance.registerQuery(query);
         }
 
         dispatch(setShowPreview(false));
 
         // Don't save partial queries in history
         if (!partial) {
-            if (text !== historyQueries[historyCurrentIndex]?.queryText) {
-                dispatch(saveQueryToHistory({queryText: text, queryId}));
+            const currentQuery = historyCurrentQueryId
+                ? historyQueries.find((q) => q.queryId === historyCurrentQueryId)
+                : null;
+            if (text !== currentQuery?.queryText) {
+                saveQueryToHistory(text, queryId);
             }
             dispatch(setIsDirty(false));
         }
@@ -279,6 +298,9 @@ export default function QueryEditor(props: QueryEditorProps) {
                                 theme={theme}
                                 handleSendExecuteClick={handleSendExecuteClick}
                                 handleGetExplainQueryClick={handleGetExplainQueryClick}
+                                historyQueries={historyQueries}
+                                goToPreviousQuery={goToPreviousQuery}
+                                goToNextQuery={goToNextQuery}
                             />
                         </div>
                     </div>

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 type {QueryInHistory} from '../../../../store/reducers/query/types';
 import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
 import type {QueryAction} from '../../../../types/store/query';
 import {
@@ -37,19 +32,24 @@ interface YqlEditorProps {
     theme: string;
     handleGetExplainQueryClick: (text: string) => void;
     handleSendExecuteClick: (text: string, partial?: boolean) => void;
+    historyQueries: QueryInHistory[];
+    goToPreviousQuery: () => void;
+    goToNextQuery: () => void;
 }
 
 export function YqlEditor({
     changeUserInput,
     theme,
     handleSendExecuteClick,
     handleGetExplainQueryClick,
+    historyQueries,
+    goToPreviousQuery,
+    goToNextQuery,
 }: YqlEditorProps) {
     const input = useTypedSelector(selectUserInput);
     const dispatch = useTypedDispatch();
     const [monacoGhostInstance, setMonacoGhostInstance] =
         React.useState<ReturnType<typeof createMonacoGhostInstance>>();
-    const historyQueries = useTypedSelector(selectQueriesHistory);
     const [isCodeAssistEnabled] = useSetting(SETTING_KEYS.ENABLE_CODE_ASSISTANT);
 
     const editorOptions = useEditorOptions();
@@ -76,7 +76,7 @@ export function YqlEditor({
         window.ydbEditor = undefined;
     };
 
-    const {monacoGhostConfig, prepareUserQueriesCache} = useCodeAssistHelpers();
+    const {monacoGhostConfig, prepareUserQueriesCache} = useCodeAssistHelpers(historyQueries);
 
     React.useEffect(() => {
         if (monacoGhostInstance && isCodeAssistEnabled) {
@@ -160,7 +160,7 @@ export function YqlEditor({
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 2,
             run: () => {
-                dispatch(goToPreviousQuery());
+                goToPreviousQuery();
             },
         });
         editor.addAction({
@@ -169,7 +169,7 @@ export function YqlEditor({
             contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
             contextMenuOrder: 3,
             run: () => {
-                dispatch(goToNextQuery());
+                goToNextQuery();
             },
         });
         editor.addAction({

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 type {QueryInHistory} from '../../../../store/reducers/query/types';
 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';
 
@@ -39,13 +39,12 @@ export function useEditorOptions() {
     return options;
 }
 
-export function useCodeAssistHelpers() {
+export function useCodeAssistHelpers(historyQueries: QueryInHistory[]) {
     const [sendCodeAssistPrompt] = codeAssistApi.useLazyGetCodeAssistSuggestionsQuery();
     const [acceptSuggestion] = codeAssistApi.useAcceptSuggestionMutation();
     const [discardSuggestion] = codeAssistApi.useDiscardSuggestionMutation();
     const [ignoreSuggestion] = codeAssistApi.useIgnoreSuggestionMutation();
     const [sendUserQueriesData] = codeAssistApi.useSendUserQueriesDataMutation();
-    const historyQueries = useTypedSelector(selectQueriesHistory);
     const {savedQueries} = useSavedQueries();
 
     const getCodeAssistSuggestions = React.useCallback(

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', () => {