Fix template queries loading and update getSampleQuery interface

changelogs/fragments/8848.yml

@@ -0,0 +1,2 @@
+fix:
+- Fix template queries loading and update getSampleQuery interface ([#8848](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8848))

src/plugins/data/public/query/query_string/dataset_service/types.ts

@@ -83,5 +83,5 @@ export interface DatasetTypeConfig {
   /**
    * Returns a list of sample queries for this dataset type
    */
-  getSampleQueries?: (dataset: Dataset, language: string) => any;
+  getSampleQueries?: (dataset?: Dataset, language?: string) => Promise<any> | any;
 }

src/plugins/data/public/ui/filter_bar/filter_options.tsx

@@ -59,7 +59,7 @@ import {
 import { FilterEditor } from './filter_editor';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { SavedQueryManagementComponent } from '../saved_query_management';
-import { SavedQuery, SavedQueryService } from '../../query';
+import { QueryStringManager, SavedQuery, SavedQueryService } from '../../query';
 import { SavedQueryMeta } from '../saved_query_form';
 import { getUseNewSavedQueriesUI } from '../../services';
 
@@ -79,6 +79,7 @@ interface Props {
   useSaveQueryMenu: boolean;
   isQueryEditorControl: boolean;
   saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
+  queryStringManager: QueryStringManager;
 }
 const maxFilterWidth = 600;
 
@@ -310,6 +311,7 @@ const FilterOptionsUI = (props: Props) => {
           key={'savedQueryManagement'}
           useNewSavedQueryUI={getUseNewSavedQueriesUI()}
           saveQuery={props.saveQuery}
+          queryStringManager={props.queryStringManager}
         />,
       ]}
       data-test-subj="save-query-panel"

src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx

@@ -13,6 +13,7 @@
   EuiFlyoutBody,
   EuiFlyoutFooter,
   EuiFlyoutHeader,
+  EuiLoadingSpinner,
   EuiSearchBar,
   EuiSearchBarProps,
   EuiSpacer,
@@ -23,14 +24,16 @@
 } from '@elastic/eui';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { i18n } from '@osd/i18n';
-import { SavedQuery, SavedQueryService } from '../../query';
+import { QueryStringManager, SavedQuery, SavedQueryService } from '../../query';
 import { SavedQueryCard } from './saved_query_card';
+import { Query } from '../../../common';
 
 export interface OpenSavedQueryFlyoutProps {
   savedQueryService: SavedQueryService;
   onClose: () => void;
   onQueryOpen: (query: SavedQuery) => void;
   handleQueryDelete: (query: SavedQuery) => Promise<void>;
+  queryStringManager: QueryStringManager;
 }
 
 interface SavedQuerySearchableItem {
@@ -47,6 +50,7 @@
   onClose,
   onQueryOpen,
   handleQueryDelete,
+  queryStringManager,
 }: OpenSavedQueryFlyoutProps) {
   const [selectedTabId, setSelectedTabId] = useState<string>('mutable-saved-queries');
   const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
@@ -59,18 +63,32 @@
   const [languageFilterOptions, setLanguageFilterOptions] = useState<string[]>([]);
   const [selectedQuery, setSelectedQuery] = useState<SavedQuery | undefined>(undefined);
   const [searchQuery, setSearchQuery] = useState(EuiSearchBar.Query.MATCH_ALL);
+  const [isLoading, setIsLoading] = useState(false);
+  const currentTabIdRef = useRef(selectedTabId);
 
   const fetchAllSavedQueriesForSelectedTab = useCallback(async () => {
-    const allQueries = await savedQueryService.getAllSavedQueries();
-    const templateQueriesPresent = allQueries.some((q) => q.attributes.isTemplate);
-    const queriesForSelectedTab = allQueries.filter(
-      (q) =>
-        (selectedTabId === 'mutable-saved-queries' && !q.attributes.isTemplate) ||
-        (selectedTabId === 'template-saved-queries' && q.attributes.isTemplate)
-    );
-    setSavedQueries(queriesForSelectedTab);
-    setHasTemplateQueries(templateQueriesPresent);
-  }, [savedQueryService, selectedTabId, setSavedQueries]);
+    setIsLoading(true);
+    if (queryStringManager.getQuery()?.dataset?.type === 'SECURITY_LAKE') {
+      setHasTemplateQueries(true);
+    }
+    if (currentTabIdRef.current === 'mutable-saved-queries') {
+      const allQueries = await savedQueryService.getAllSavedQueries();
+      const mutableSavedQueries = allQueries.filter((q) => !q.attributes.isTemplate);
+      if (currentTabIdRef.current === 'mutable-saved-queries') {
+        setSavedQueries(mutableSavedQueries);
+      }
+    } else if (currentTabIdRef.current === 'template-saved-queries') {
+      const query = queryStringManager.getQuery();
+      if (query?.dataset?.type) {
+        const templateQueries = await queryStringManager
+          .getDatasetService()
+          ?.getType(query.dataset.type)
+          ?.getSampleQueries?.();
+        if (Array.isArray(templateQueries)) setSavedQueries(templateQueries);
+      }
+    }
+    setIsLoading(false);
+  }, [savedQueryService, currentTabIdRef, setSavedQueries, queryStringManager]);
 
   const updatePageIndex = useCallback((index: number) => {
     pager.current.goToPageIndex(index);
@@ -179,7 +197,13 @@
         onChange={onChange}
       />
       <EuiSpacer />
-      {queriesOnCurrentPage.length > 0 ? (
+      {isLoading ? (
+        <EuiFlexGroup justifyContent="center" alignItems="center" style={{ height: '200px' }}>
+          <EuiFlexItem grow={false}>
+            <EuiLoadingSpinner size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      ) : queriesOnCurrentPage.length > 0 ? (
         queriesOnCurrentPage.map((query) => (
           <SavedQueryCard
             key={query.id}
@@ -205,7 +229,7 @@
         />
       )}
       <EuiSpacer />
-      {queriesOnCurrentPage.length > 0 && (
+      {!isLoading && queriesOnCurrentPage.length > 0 && (
         <EuiTablePagination
           itemsPerPageOptions={[5, 10, 20]}
           itemsPerPage={itemsPerPage}
@@ -252,6 +276,7 @@
           initialSelectedTab={tabs[0]}
           onTabClick={(tab) => {
             setSelectedTabId(tab.id);
+            currentTabIdRef.current = tab.id;
           }}
         />
       </EuiFlyoutBody>
@@ -268,7 +293,19 @@
               fill
               onClick={() => {
                 if (selectedQuery) {
-                  onQueryOpen(selectedQuery);
+                  if (
+                    // Template queries are not associated with data sources. Apply data source from current query
+                    selectedQuery.attributes.isTemplate
+                  ) {
+                    const updatedQuery: Query = {
+                      ...queryStringManager?.getQuery(),
+                      query: selectedQuery.attributes.query.query,
+                      language: selectedQuery.attributes.query.language,
+                    };
+                    queryStringManager.setQuery(updatedQuery);
+                  } else {
+                    onQueryOpen(selectedQuery);
+                  }
                   onClose();
                 }
               }}

src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx

@@ -45,7 +45,7 @@ import {
 import { i18n } from '@osd/i18n';
 import React, { useCallback, useEffect, useState, Fragment, useRef } from 'react';
 import { sortBy } from 'lodash';
-import { SavedQuery, SavedQueryService } from '../..';
+import { QueryStringManager, SavedQuery, SavedQueryService } from '../..';
 import { SavedQueryListItem } from './saved_query_list_item';
 import {
   toMountPoint,
@@ -70,6 +70,7 @@ interface Props {
   onClearSavedQuery: () => void;
   closeMenuPopover: () => void;
   saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
+  queryStringManager: QueryStringManager;
 }
 
 export function SavedQueryManagementComponent({
@@ -83,6 +84,7 @@ export function SavedQueryManagementComponent({
   closeMenuPopover,
   useNewSavedQueryUI,
   saveQuery,
+  queryStringManager,
 }: Props) {
   const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
   const [count, setTotalCount] = useState(0);
@@ -256,6 +258,7 @@ export function SavedQueryManagementComponent({
                   onClose={() => openSavedQueryFlyout?.close().then()}
                   onQueryOpen={onLoad}
                   handleQueryDelete={handleDelete}
+                  queryStringManager={queryStringManager}
                 />
               )
             );

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

@@ -202,6 +202,7 @@ export function createSearchBar({ core, storage, data }: StatefulSearchBarDeps)
           isRefreshPaused={refreshInterval.pause}
           filters={filters}
           query={query}
+          queryStringManager={data.query.queryString}
           onFiltersUpdated={defaultFiltersUpdated(data.query)}
           onRefreshChange={defaultOnRefreshChange(data.query)}
           savedQuery={savedQuery}

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

@@ -38,7 +38,13 @@ import {
   withOpenSearchDashboards,
 } from '../../../../opensearch_dashboards_react/public';
 import { Filter, IIndexPattern, Query, TimeRange, UI_SETTINGS } from '../../../common';
-import { SavedQuery, SavedQueryAttributes, TimeHistoryContract, QueryStatus } from '../../query';
+import {
+  SavedQuery,
+  SavedQueryAttributes,
+  TimeHistoryContract,
+  QueryStatus,
+  QueryStringManager,
+} from '../../query';
 import { IDataPluginServices } from '../../types';
 import { FilterBar } from '../filter_bar/filter_bar';
 import { QueryEditorTopRow } from '../query_editor';
@@ -95,6 +101,7 @@ export interface SearchBarOwnProps {
   onRefresh?: (payload: { dateRange: TimeRange }) => void;
   indicateNoData?: boolean;
   queryStatus?: QueryStatus;
+  queryStringManager: QueryStringManager;
 }
 
 export type SearchBarProps = SearchBarOwnProps & SearchBarInjectedDeps;
@@ -467,6 +474,7 @@ class SearchBarUI extends Component<SearchBarProps, State> {
             useSaveQueryMenu={useSaveQueryMenu}
             isQueryEditorControl={isQueryEditorControl}
             saveQuery={this.onSave}
+            queryStringManager={this.props.queryStringManager}
           />
         )
       );

src/plugins/discover/public/application/components/no_results/no_results.tsx

@@ -174,6 +174,7 @@
   // }
 
   const [savedQueries, setSavedQueries] = useState<SavedQuery[]>([]);
+  const [sampleQueries, setSampleQueries] = useState<any>([]);
 
   useEffect(() => {
     const fetchSavedQueries = async () => {
@@ -186,6 +187,39 @@
     fetchSavedQueries();
   }, [setSavedQueries, query, savedQuery]);
 
+  useEffect(() => {
+    // Samples for the language
+    const newSampleQueries: any = [];
+    if (query?.language) {
+      const languageSampleQueries = queryString.getLanguageService()?.getLanguage(query.language)
+        ?.sampleQueries;
+      if (Array.isArray(languageSampleQueries)) {
+        newSampleQueries.push(...languageSampleQueries);
+      }
+    }
+
+    // Samples for the dataset type
+    if (query?.dataset?.type) {
+      const datasetType = queryString.getDatasetService()?.getType(query.dataset.type);
+      if (datasetType?.getSampleQueries) {
+        const sampleQueriesResponse = datasetType.getSampleQueries(query.dataset, query.language);
+        if (Array.isArray(sampleQueriesResponse)) {
+          setSampleQueries([...sampleQueriesResponse, ...newSampleQueries]);
+        } else if (sampleQueriesResponse instanceof Promise) {
+          sampleQueriesResponse
+            .then((datasetSampleQueries: any) => {
+              if (Array.isArray(datasetSampleQueries)) {
+                setSampleQueries([...datasetSampleQueries, ...newSampleQueries]);
+              }
+            })
+            .catch((error: any) => {
+              // noop
+            });
+        }
+      }
+    }
+  }, [queryString, query]);
+
   const tabs = useMemo(() => {
     const buildSampleQueryBlock = (sampleTitle: string, sampleQuery: string) => {
       return (
@@ -197,25 +231,6 @@
         </>
       );
     };
-
-    const sampleQueries = [];
-
-    // Samples for the dataset type
-    if (query?.dataset?.type) {
-      const datasetSampleQueries = queryString
-        .getDatasetService()
-        ?.getType(query.dataset.type)
-        ?.getSampleQueries?.(query.dataset, query.language);
-      if (Array.isArray(datasetSampleQueries)) sampleQueries.push(...datasetSampleQueries);
-    }
-
-    // Samples for the language
-    if (query?.language) {
-      const languageSampleQueries = queryString.getLanguageService()?.getLanguage(query.language)
-        ?.sampleQueries;
-      if (Array.isArray(languageSampleQueries)) sampleQueries.push(...languageSampleQueries);
-    }
-
     return [
       ...(sampleQueries.length > 0
         ? [
@@ -229,7 +244,7 @@
                   <EuiSpacer size="s" />
                   {sampleQueries
                     .slice(0, 5)
-                    .map((sampleQuery) =>
+                    .map((sampleQuery: any) =>
                       buildSampleQueryBlock(sampleQuery.title, sampleQuery.query)
                     )}
                 </EuiPanel>
@@ -256,7 +271,7 @@
           ]
         : []),
     ];
-  }, [queryString, query, savedQueries]);
+  }, [savedQueries, sampleQueries]);
 
   return (
     <I18nProvider>