diff --git a/src/containers/Tenant/Query/QueryEditor/helpers.ts b/src/containers/Tenant/Query/QueryEditor/helpers.ts index 22af5639a9..6cf06680ce 100644 --- a/src/containers/Tenant/Query/QueryEditor/helpers.ts +++ b/src/containers/Tenant/Query/QueryEditor/helpers.ts @@ -6,10 +6,14 @@ import type Monaco from 'monaco-editor'; import {codeAssistApi} from '../../../../store/reducers/codeAssist/codeAssist'; import {selectQueriesHistory} from '../../../../store/reducers/query/query'; import type {TelemetryOpenTabs} from '../../../../types/api/codeAssist'; -import {AUTOCOMPLETE_ON_ENTER, ENABLE_AUTOCOMPLETE} from '../../../../utils/constants'; +import type {SavedQuery} from '../../../../types/store/query'; +import { + AUTOCOMPLETE_ON_ENTER, + ENABLE_AUTOCOMPLETE, + SAVED_QUERIES_KEY, +} from '../../../../utils/constants'; import {useSetting, useTypedSelector} from '../../../../utils/hooks'; import {YQL_LANGUAGE_ID} from '../../../../utils/monaco/constats'; -import {useSavedQueries} from '../utils/useSavedQueries'; export type EditorOptions = Monaco.editor.IEditorOptions & Monaco.editor.IGlobalEditorOptions; @@ -46,7 +50,7 @@ export function useCodeAssistHelpers() { const [ignoreSuggestion] = codeAssistApi.useIgnoreSuggestionMutation(); const [sendUserQueriesData] = codeAssistApi.useSendUserQueriesDataMutation(); const historyQueries = useTypedSelector(selectQueriesHistory); - const savedQueries = useSavedQueries(); + const [savedQueries] = useSetting(SAVED_QUERIES_KEY, []); const getCodeAssistSuggestions = React.useCallback( async (promptFiles: PromptFile[]) => sendCodeAssistPrompt(promptFiles).unwrap(), diff --git a/src/containers/Tenant/Query/utils/useSavedQueries.tsx b/src/containers/Tenant/Query/utils/useSavedQueries.tsx index 17baf5c047..da252ec3d1 100644 --- a/src/containers/Tenant/Query/utils/useSavedQueries.tsx +++ b/src/containers/Tenant/Query/utils/useSavedQueries.tsx @@ -1,3 +1,5 @@ +import React from 'react'; + import {selectSavedQueriesFilter} from '../../../../store/reducers/queryActions/queryActions'; import type {SavedQuery} from '../../../../types/store/query'; import {SAVED_QUERIES_KEY} from '../../../../utils/constants'; @@ -5,9 +7,14 @@ import {useSetting, useTypedSelector} from '../../../../utils/hooks'; export function useSavedQueries() { const [savedQueries] = useSetting(SAVED_QUERIES_KEY, []); - const filter = useTypedSelector(selectSavedQueriesFilter).toLowerCase(); + const filter = useTypedSelector(selectSavedQueriesFilter).trim().toLowerCase(); + + const filteredSavedQueries = React.useMemo(() => { + if (filter.length === 0) { + return savedQueries; + } + return savedQueries.filter((item) => item.body.toLowerCase().includes(filter)); + }, [savedQueries, filter]); - return filter - ? savedQueries.filter((item) => item.body.toLowerCase().includes(filter)) - : savedQueries; + return filteredSavedQueries; }