Bugfix clear saved query crashes kibana on Discover in some cases (#63554) (#63628)

* actual hotfix
* add functional test

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/discover.js

@@ -828,13 +828,9 @@ function discoverController(
     if (newSavedQueryId) {
       setAppState({ savedQuery: newSavedQueryId });
     } else {
-      //reset filters and query string, remove savedQuery from state
+      // remove savedQueryId from state
       const state = {
         ...appStateContainer.getState(),
-        query: getDefaultQuery(
-          localStorage.get('kibana.userQueryLanguage') || config.get('search:queryLanguage')
-        ),
-        filters: [],
       };
       delete state.savedQuery;
       appStateContainer.set(state);

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -61,6 +61,7 @@ export function QueryLanguageSwitcher(props: Props) {
       size="xs"
       onClick={() => setIsPopoverOpen(!isPopoverOpen)}
       className="euiFormControlLayout__append"
+      data-test-subj={'switchQueryLanguageButton'}
     >
       {props.language === 'lucene' ? luceneLabel : kqlLabel}
     </EuiButtonEmpty>

src/plugins/data/public/ui/search_bar/create_search_bar.tsx

@@ -124,7 +124,8 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
     const onQuerySubmitRef = useRef(props.onQuerySubmit);
     const defaultQuery = {
       query: '',
-      language: core.uiSettings.get('search:queryLanguage'),
+      language:
+        storage.get('kibana.userQueryLanguage') || core.uiSettings.get('search:queryLanguage'),
     };
     const [query, setQuery] = useState<Query>(props.query || defaultQuery);
 
@@ -161,7 +162,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
       setQuery,
       savedQueryId: props.savedQueryId,
       notifications: core.notifications,
-      uiSettings: core.uiSettings,
+      defaultLanguage: defaultQuery.language,
     });
 
     // Fire onQuerySubmit on query or timerange change

src/plugins/data/public/ui/search_bar/lib/use_saved_query.ts

@@ -29,8 +29,8 @@ interface UseSavedQueriesProps {
   queryService: DataPublicPluginStart['query'];
   setQuery: Function;
   notifications: CoreStart['notifications'];
-  uiSettings: CoreStart['uiSettings'];
   savedQueryId?: string;
+  defaultLanguage: string;
 }
 
 interface UseSavedQueriesReturn {
@@ -41,7 +41,7 @@ interface UseSavedQueriesReturn {
 
 export const useSavedQuery = (props: UseSavedQueriesProps): UseSavedQueriesReturn => {
   // Handle saved queries
-  const defaultLanguage = props.uiSettings.get('search:queryLanguage');
+  const defaultLanguage = props.defaultLanguage;
   const [savedQuery, setSavedQuery] = useState<SavedQuery | undefined>();
 
   // Effect is used to convert a saved query id into an object

test/functional/apps/discover/_saved_queries.js

@@ -147,6 +147,25 @@ export default function({ getService, getPageObjects }) {
         await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
         expect(await queryBar.getQueryString()).to.eql('');
       });
+
+      // https://github.com/elastic/kibana/issues/63505
+      it('allows clearing if non default language was remembered in localstorage', async () => {
+        await queryBar.switchQueryLanguage('lucene');
+        await PageObjects.common.navigateToApp('discover'); // makes sure discovered is reloaded without any state in url
+        await queryBar.expectQueryLanguageOrFail('lucene'); // make sure lucene is remembered after refresh (comes from localstorage)
+        await savedQueryManagementComponent.loadSavedQuery('OkResponse');
+        await queryBar.expectQueryLanguageOrFail('kql');
+        await savedQueryManagementComponent.clearCurrentlyLoadedQuery();
+        await queryBar.expectQueryLanguageOrFail('lucene');
+      });
+
+      // fails: bug in discover https://github.com/elastic/kibana/issues/63561
+      // unskip this test when bug is fixed
+      it.skip('changing language removes saved query', async () => {
+        await savedQueryManagementComponent.loadSavedQuery('OkResponse');
+        await queryBar.switchQueryLanguage('lucene');
+        expect(await queryBar.getQueryString()).to.eql('');
+      });
     });
   });
 }

test/functional/services/query_bar.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import expect from '@kbn/expect';
 import { FtrProviderContext } from '../ftr_provider_context';
 
 export function QueryBarProvider({ getService, getPageObjects }: FtrProviderContext) {
@@ -25,6 +26,7 @@ export function QueryBarProvider({ getService, getPageObjects }: FtrProviderCont
   const log = getService('log');
   const PageObjects = getPageObjects(['header', 'common']);
   const find = getService('find');
+  const browser = getService('browser');
 
   class QueryBar {
     async getQueryString(): Promise<string> {
@@ -62,6 +64,24 @@ export function QueryBarProvider({ getService, getPageObjects }: FtrProviderCont
     public async clickQuerySubmitButton(): Promise<void> {
       await testSubjects.click('querySubmitButton');
     }
+
+    public async switchQueryLanguage(lang: 'kql' | 'lucene'): Promise<void> {
+      await testSubjects.click('switchQueryLanguageButton');
+      const kqlToggle = await testSubjects.find('languageToggle');
+      const currentLang =
+        (await kqlToggle.getAttribute('aria-checked')) === 'true' ? 'kql' : 'lucene';
+      if (lang !== currentLang) {
+        await kqlToggle.click();
+      }
+
+      await browser.pressKeys(browser.keys.ESCAPE); // close popover
+      await this.expectQueryLanguageOrFail(lang); // make sure lang is switched
+    }
+
+    public async expectQueryLanguageOrFail(lang: 'kql' | 'lucene'): Promise<void> {
+      const queryLanguageButton = await testSubjects.find('switchQueryLanguageButton');
+      expect((await queryLanguageButton.getVisibleText()).toLowerCase()).to.eql(lang);
+    }
   }
 
   return new QueryBar();