Skip to content

Commit ba3e2a8

Browse files
artemmufazalovartemmufazalov
authored
fix(QueriesHistory): move queries manipulations to hook (#3103)
1 parent 885891d commit ba3e2a8

File tree

10 files changed

+251
-160
lines changed

10 files changed

+251
-160
lines changed

‎src/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import React from 'react';
2+
13
import type {Column} from '@gravity-ui/react-data-table';
24

35
import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
46
import {Search} from '../../../../components/Search';
57
import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
68
import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
79
import {
8-
selectQueriesHistory,
910
selectQueriesHistoryFilter,
1011
setIsDirty,
1112
setQueryHistoryFilter,
1213
} from '../../../../store/reducers/query/query';
1314
import type {QueryInHistory} from '../../../../store/reducers/query/types';
15+
import type {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
1416
import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
1517
import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
1618
import {cn} from '../../../../utils/cn';
@@ -29,14 +31,17 @@ const QUERIES_HISTORY_COLUMNS_WIDTH_LS_KEY = 'queriesHistoryTableColumnsWidth';
2931

3032
interface QueriesHistoryProps {
3133
changeUserInput: (value: {input: string}) => void;
34+
queriesHistory: ReturnType<typeof useQueriesHistory>;
3235
}
3336

34-
function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
37+
function QueriesHistory({changeUserInput, queriesHistory}: QueriesHistoryProps) {
3538
const dispatch = useTypedDispatch();
3639

37-
const queriesHistory = useTypedSelector(selectQueriesHistory);
40+
const reversedHistory = React.useMemo(() => {
41+
return queriesHistory.filteredHistoryQueries.toReversed();
42+
}, [queriesHistory.filteredHistoryQueries]);
43+
3844
const filter = useTypedSelector(selectQueriesHistoryFilter);
39-
const reversedHistory = [...queriesHistory].reverse();
4045

4146
const applyQueryClick = (query: QueryInHistory) => {
4247
changeUserInput({input: query.queryText});

‎src/containers/Tenant/Query/Query.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import {Helmet} from 'react-helmet-async';
44

55
import {changeUserInput} from '../../../store/reducers/query/query';
6+
import {useQueriesHistory} from '../../../store/reducers/query/useQueriesHistory';
67
import {TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
78
import {cn} from '../../../utils/cn';
89
import {useTypedDispatch, useTypedSelector} from '../../../utils/hooks';
@@ -25,6 +26,8 @@ export const Query = (props: QueryProps) => {
2526

2627
const {queryTab = TENANT_QUERY_TABS_ID.newQuery} = useTypedSelector((state) => state.tenant);
2728

29+
const queriesHistory = useQueriesHistory();
30+
2831
const handleUserInputChange = (value: {input: string}) => {
2932
dispatch(changeUserInput(value));
3033
};
@@ -37,10 +40,21 @@ export const Query = (props: QueryProps) => {
3740
const renderContent = () => {
3841
switch (queryTab) {
3942
case TENANT_QUERY_TABS_ID.newQuery: {
40-
return <QueryEditor changeUserInput={handleUserInputChange} {...props} />;
43+
return (
44+
<QueryEditor
45+
changeUserInput={handleUserInputChange}
46+
queriesHistory={queriesHistory}
47+
{...props}
48+
/>
49+
);
4150
}
4251
case TENANT_QUERY_TABS_ID.history: {
43-
return <QueriesHistory changeUserInput={handleUserInputChange} />;
52+
return (
53+
<QueriesHistory
54+
changeUserInput={handleUserInputChange}
55+
queriesHistory={queriesHistory}
56+
/>
57+
);
4458
}
4559
case TENANT_QUERY_TABS_ID.saved: {
4660
return <SavedQueries changeUserInput={handleUserInputChange} />;

‎src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,13 @@ import {
1111
} from '../../../../store/reducers/capabilities/hooks';
1212
import {
1313
queryApi,
14-
saveQueryToHistory,
15-
selectQueriesHistory,
16-
selectQueriesHistoryCurrentIndex,
1714
selectResult,
1815
selectTenantPath,
1916
setIsDirty,
2017
setTenantPath,
2118
} from '../../../../store/reducers/query/query';
2219
import type {QueryResult} from '../../../../store/reducers/query/types';
20+
import type {useQueriesHistory} from '../../../../store/reducers/query/useQueriesHistory';
2321
import {setQueryAction} from '../../../../store/reducers/queryActions/queryActions';
2422
import {selectShowPreview, setShowPreview} from '../../../../store/reducers/schema/schema';
2523
import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
@@ -69,18 +67,25 @@ const initialTenantCommonInfoState = {
6967
interface QueryEditorProps {
7068
changeUserInput: (arg: {input: string}) => void;
7169
theme: string;
70+
queriesHistory: ReturnType<typeof useQueriesHistory>;
7271
}
7372

74-
export default function QueryEditor(props: QueryEditorProps) {
73+
export default function QueryEditor({theme, changeUserInput, queriesHistory}: QueryEditorProps) {
7574
const dispatch = useTypedDispatch();
7675
const {database, path, type, subType, databaseFullPath} = useCurrentSchema();
77-
const {theme, changeUserInput} = props;
7876
const savedPath = useTypedSelector(selectTenantPath);
7977
const result = useTypedSelector(selectResult);
80-
const historyQueries = useTypedSelector(selectQueriesHistory);
81-
const historyCurrentIndex = useTypedSelector(selectQueriesHistoryCurrentIndex);
8278
const showPreview = useTypedSelector(selectShowPreview);
8379

80+
const {
81+
historyQueries,
82+
historyCurrentQueryId,
83+
saveQueryToHistory,
84+
updateQueryInHistory,
85+
goToPreviousQuery,
86+
goToNextQuery,
87+
} = queriesHistory;
88+
8489
const isResultLoaded = Boolean(result);
8590

8691
const [querySettings] = useQueryExecutionSettings();
@@ -182,15 +187,29 @@ export default function QueryEditor(props: QueryEditorProps) {
182187
base64: encodeTextWithBase64,
183188
});
184189

190+
query
191+
.then(({data}) => {
192+
if (data?.queryId) {
193+
updateQueryInHistory(data.queryId, data?.queryStats);
194+
}
195+
})
196+
.catch((error) => {
197+
// Do not add query stats for failed query
198+
console.error('Failed to update query history:', error);
199+
});
200+
185201
queryManagerInstance.registerQuery(query);
186202
}
187203

188204
dispatch(setShowPreview(false));
189205

190206
// Don't save partial queries in history
191207
if (!partial) {
192-
if (text !== historyQueries[historyCurrentIndex]?.queryText) {
193-
dispatch(saveQueryToHistory({queryText: text, queryId}));
208+
const currentQuery = historyCurrentQueryId
209+
? historyQueries.find((q) => q.queryId === historyCurrentQueryId)
210+
: null;
211+
if (text !== currentQuery?.queryText) {
212+
saveQueryToHistory(text, queryId);
194213
}
195214
dispatch(setIsDirty(false));
196215
}
@@ -279,6 +298,9 @@ export default function QueryEditor(props: QueryEditorProps) {
279298
theme={theme}
280299
handleSendExecuteClick={handleSendExecuteClick}
281300
handleGetExplainQueryClick={handleGetExplainQueryClick}
301+
historyQueries={historyQueries}
302+
goToPreviousQuery={goToPreviousQuery}
303+
goToNextQuery={goToNextQuery}
282304
/>
283305
</div>
284306
</div>

‎src/containers/Tenant/Query/QueryEditor/YqlEditor.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,8 @@ import throttle from 'lodash/throttle';
66
import type Monaco from 'monaco-editor';
77

88
import {MonacoEditor} from '../../../../components/MonacoEditor/MonacoEditor';
9-
import {
10-
goToNextQuery,
11-
goToPreviousQuery,
12-
selectQueriesHistory,
13-
selectUserInput,
14-
setIsDirty,
15-
} from '../../../../store/reducers/query/query';
9+
import {selectUserInput, setIsDirty} from '../../../../store/reducers/query/query';
10+
import type {QueryInHistory} from '../../../../store/reducers/query/types';
1611
import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
1712
import type {QueryAction} from '../../../../types/store/query';
1813
import {
@@ -37,19 +32,24 @@ interface YqlEditorProps {
3732
theme: string;
3833
handleGetExplainQueryClick: (text: string) => void;
3934
handleSendExecuteClick: (text: string, partial?: boolean) => void;
35+
historyQueries: QueryInHistory[];
36+
goToPreviousQuery: () => void;
37+
goToNextQuery: () => void;
4038
}
4139

4240
export function YqlEditor({
4341
changeUserInput,
4442
theme,
4543
handleSendExecuteClick,
4644
handleGetExplainQueryClick,
45+
historyQueries,
46+
goToPreviousQuery,
47+
goToNextQuery,
4748
}: YqlEditorProps) {
4849
const input = useTypedSelector(selectUserInput);
4950
const dispatch = useTypedDispatch();
5051
const [monacoGhostInstance, setMonacoGhostInstance] =
5152
React.useState<ReturnType<typeof createMonacoGhostInstance>>();
52-
const historyQueries = useTypedSelector(selectQueriesHistory);
5353
const [isCodeAssistEnabled] = useSetting(SETTING_KEYS.ENABLE_CODE_ASSISTANT);
5454

5555
const editorOptions = useEditorOptions();
@@ -76,7 +76,7 @@ export function YqlEditor({
7676
window.ydbEditor = undefined;
7777
};
7878

79-
const {monacoGhostConfig, prepareUserQueriesCache} = useCodeAssistHelpers();
79+
const {monacoGhostConfig, prepareUserQueriesCache} = useCodeAssistHelpers(historyQueries);
8080

8181
React.useEffect(() => {
8282
if (monacoGhostInstance && isCodeAssistEnabled) {
@@ -160,7 +160,7 @@ export function YqlEditor({
160160
contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
161161
contextMenuOrder: 2,
162162
run: () => {
163-
dispatch(goToPreviousQuery());
163+
goToPreviousQuery();
164164
},
165165
});
166166
editor.addAction({
@@ -169,7 +169,7 @@ export function YqlEditor({
169169
contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
170170
contextMenuOrder: 3,
171171
run: () => {
172-
dispatch(goToNextQuery());
172+
goToNextQuery();
173173
},
174174
});
175175
editor.addAction({

‎src/containers/Tenant/Query/QueryEditor/helpers.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import type {AcceptEvent, DeclineEvent, IgnoreEvent, PromptFile} from '@ydb-plat
44
import type Monaco from 'monaco-editor';
55

66
import {codeAssistApi} from '../../../../store/reducers/codeAssist/codeAssist';
7-
import {selectQueriesHistory} from '../../../../store/reducers/query/query';
7+
import type {QueryInHistory} from '../../../../store/reducers/query/types';
88
import {SETTING_KEYS} from '../../../../store/reducers/settings/constants';
99
import type {TelemetryOpenTabs} from '../../../../types/api/codeAssist';
10-
import {useSetting, useTypedSelector} from '../../../../utils/hooks';
10+
import {useSetting} from '../../../../utils/hooks';
1111
import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats';
1212
import {useSavedQueries} from '../utils/useSavedQueries';
1313

@@ -39,13 +39,12 @@ export function useEditorOptions() {
3939
return options;
4040
}
4141

42-
export function useCodeAssistHelpers() {
42+
export function useCodeAssistHelpers(historyQueries: QueryInHistory[]) {
4343
const [sendCodeAssistPrompt] = codeAssistApi.useLazyGetCodeAssistSuggestionsQuery();
4444
const [acceptSuggestion] = codeAssistApi.useAcceptSuggestionMutation();
4545
const [discardSuggestion] = codeAssistApi.useDiscardSuggestionMutation();
4646
const [ignoreSuggestion] = codeAssistApi.useIgnoreSuggestionMutation();
4747
const [sendUserQueriesData] = codeAssistApi.useSendUserQueriesDataMutation();
48-
const historyQueries = useTypedSelector(selectQueriesHistory);
4948
const {savedQueries} = useSavedQueries();
5049

5150
const getCodeAssistSuggestions = React.useCallback(

‎src/store/reducers/query/__test__/tabPersistence.test.tsx‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@ import type {QueryState} from '../types';
44
describe('QueryResultViewer tab persistence integration', () => {
55
const initialState: QueryState = {
66
input: '',
7-
history: {
8-
queries: [],
9-
currentIndex: -1,
10-
},
117
};
128

139
test('should save and retrieve tab selection for explain queries', () => {

0 commit comments

Comments
 (0)