fix: monaco-ghost infinite loop (#3021)

Author: astandrik

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<SavedQuery[]>(SAVED_QUERIES_KEY, []);
 
     const getCodeAssistSuggestions = React.useCallback(
         async (promptFiles: PromptFile[]) => sendCodeAssistPrompt(promptFiles).unwrap(),

src/containers/Tenant/Query/utils/useSavedQueries.tsx

@@ -1,13 +1,20 @@
+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';
 import {useSetting, useTypedSelector} from '../../../../utils/hooks';
 
 export function useSavedQueries() {
     const [savedQueries] = useSetting<SavedQuery[]>(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;
 }