Saved queries new UI

changelogs/fragments/8469.yml

@@ -0,0 +1,2 @@
+feat:
+- Enhances the saved query UX ([#8469](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8469))

src/plugins/data/public/query/query_service.ts

@@ -111,8 +111,8 @@ export class QueryService {
       queryString: this.queryStringManager,
       savedQueries: createSavedQueryService(
         savedObjectsClient,
-        this.queryStringManager,
-        application
+        { application, uiSettings },
+        this.queryStringManager
       ),
       state$: this.state$,
       timefilter: this.timefilter,

src/plugins/data/public/query/saved_query/saved_query_service.test.ts

@@ -31,6 +31,7 @@
 import { createSavedQueryService } from './saved_query_service';
 import { FilterStateStore } from '../../../common';
 import { SavedQueryAttributes } from './types';
+import { applicationServiceMock, uiSettingsServiceMock } from '../../../../../core/public/mocks';
 
 const savedQueryAttributes: SavedQueryAttributes = {
   title: 'foo',
@@ -89,7 +90,11 @@ const {
   getSavedQueryCount,
 } = createSavedQueryService(
   // @ts-ignore
-  mockSavedObjectsClient
+  mockSavedObjectsClient,
+  {
+    application: applicationServiceMock.create(),
+    uiSettings: uiSettingsServiceMock.createStartContract(),
+  }
 );
 
 describe('saved query service', () => {

src/plugins/data/public/query/saved_query/saved_query_service.ts

@@ -33,35 +33,37 @@
 import { first } from 'rxjs/operators';
 import { SavedQueryAttributes, SavedQuery, SavedQueryService } from './types';
 import { QueryStringContract } from '../query_string';
+import { UI_SETTINGS } from '../../../common';
 
-type SerializedSavedQueryAttributes = SavedObjectAttributes &
-  SavedQueryAttributes & {
-    query: {
-      query: string;
-      language: string;
-    };
-  };
+type SerializedSavedQueryAttributes = SavedObjectAttributes & SavedQueryAttributes;
 
 export const createSavedQueryService = (
   savedObjectsClient: SavedObjectsClientContract,
-  queryStringManager?: QueryStringContract,
-  application?: CoreStart['application']
+  coreStartServices: { application: CoreStart['application']; uiSettings: CoreStart['uiSettings'] },
+  queryStringManager?: QueryStringContract
 ): SavedQueryService => {
+  const { application, uiSettings } = coreStartServices;
+  const queryEnhancementEnabled = uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED);
+
   const saveQuery = async (attributes: SavedQueryAttributes, { overwrite = false } = {}) => {
     if (!attributes.title.length) {
       // title is required extra check against circumventing the front end
       throw new Error('Cannot create saved query without a title');
     }
 
-    const query = {
+    const query: SerializedSavedQueryAttributes['query'] = {
       query:
         typeof attributes.query.query === 'string'
           ? attributes.query.query
           : JSON.stringify(attributes.query.query),
       language: attributes.query.language,
     };
 
-    const queryObject: SerializedSavedQueryAttributes = {
+    if (queryEnhancementEnabled && attributes.query.dataset) {
+      query.dataset = attributes.query.dataset;
+    }
+
+    const queryObject: SavedQueryAttributes = {
       title: attributes.title.trim(), // trim whitespace before save as an extra precaution against circumventing the front end
       description: attributes.description,
       query,
@@ -75,6 +77,10 @@
       queryObject.timefilter = attributes.timefilter;
     }
 
+    if (queryEnhancementEnabled && attributes.isTemplate) {
+      queryObject.isTemplate = true;
+    }
+
     let rawQueryResponse;
     if (!overwrite) {
       rawQueryResponse = await savedObjectsClient.create('query', queryObject, {
@@ -126,8 +132,7 @@
         parseSavedQueryObject(savedObject)
     );
 
-    const currentAppId =
-      (await application?.currentAppId$?.pipe(first()).toPromise()) ?? Promise.resolve(undefined);
+    const currentAppId = (await application?.currentAppId$?.pipe(first()).toPromise()) ?? undefined;
     const languageService = queryStringManager?.getLanguageService();
 
     // Filtering saved queries based on language supported by cirrent application
@@ -159,11 +164,8 @@
     return await savedObjectsClient.delete('query', id);
   };
 
-  const parseSavedQueryObject = (savedQuery: {
-    id: string;
-    attributes: SerializedSavedQueryAttributes;
-  }) => {
-    const queryString = savedQuery.attributes.query.query;
+  const parseSavedQueryObject = (savedQuery: SavedQuery) => {
+    const queryString = savedQuery.attributes.query.query as string;
     let parsedQuery;
     try {
       parsedQuery = JSON.parse(queryString);
@@ -172,7 +174,7 @@
       parsedQuery = queryString;
     }
 
-    const savedQueryItems: SavedQueryAttributes = {
+    const savedQueryItem: SavedQueryAttributes = {
       title: savedQuery.attributes.title || '',
       description: savedQuery.attributes.description || '',
       query: {
@@ -181,15 +183,20 @@
       },
     };
 
+    if (queryEnhancementEnabled) {
+      savedQueryItem.query.dataset = savedQuery.attributes.query.dataset;
+      savedQueryItem.isTemplate = !!savedQuery.attributes.isTemplate;
+    }
+
     if (savedQuery.attributes.filters) {
-      savedQueryItems.filters = savedQuery.attributes.filters;
+      savedQueryItem.filters = savedQuery.attributes.filters;
     }
     if (savedQuery.attributes.timefilter) {
-      savedQueryItems.timefilter = savedQuery.attributes.timefilter;
+      savedQueryItem.timefilter = savedQuery.attributes.timefilter;
     }
     return {
       id: savedQuery.id,
-      attributes: savedQueryItems,
+      attributes: savedQueryItem,
     };
   };
 

src/plugins/data/public/query/saved_query/types.ts

@@ -42,6 +42,9 @@ export interface SavedQuery {
 export interface SavedQueryAttributes {
   title: string;
   description: string;
+  // If isTemplate is true, then saved query cannot be updated/deleted from the UI and
+  // will show up under Templates tab for saved queries
+  isTemplate?: boolean;
   query: Query;
   filters?: Filter[];
   timefilter?: SavedQueryTimeFilter;

src/plugins/data/public/ui/_index.scss

@@ -5,3 +5,4 @@
 @import "./dataset_selector/index";
 @import "./query_editor/index";
 @import "./shard_failure_modal/shard_failure_modal";
+@import "./saved_query_flyouts/saved_query_flyouts";

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

@@ -55,12 +55,12 @@
   unpinFilter,
   UI_SETTINGS,
   IIndexPattern,
-  isQueryStringFilter,
 } from '../../../common';
 import { FilterEditor } from './filter_editor';
 import { useOpenSearchDashboards } from '../../../../opensearch_dashboards_react/public';
 import { SavedQueryManagementComponent } from '../saved_query_management';
 import { SavedQuery, SavedQueryService } from '../../query';
+import { SavedQueryMeta } from '../saved_query_form';
 
 interface Props {
   intl: InjectedIntl;
@@ -69,14 +69,15 @@
   savedQueryService: SavedQueryService;
   // Show when user has privileges to save
   showSaveQuery?: boolean;
-  onSave: () => void;
-  onSaveAsNew: () => void;
+  onInitiateSave: () => void;
+  onInitiateSaveAsNew: () => void;
   onLoad: (savedQuery: SavedQuery) => void;
   onClearSavedQuery: () => void;
   onFiltersUpdated?: (filters: Filter[]) => void;
   loadedSavedQuery?: SavedQuery;
   useSaveQueryMenu: boolean;
   isQueryEditorControl: boolean;
+  saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise<void>;
 }
 const maxFilterWidth = 600;
 
@@ -88,6 +89,7 @@
   const uiSettings = opensearchDashboards.services.uiSettings;
   const isPinned = uiSettings!.get(UI_SETTINGS.FILTERS_PINNED_BY_DEFAULT);
   const useNewHeader = Boolean(uiSettings!.get(UI_SETTINGS.NEW_HOME_PAGE));
+  const useNewSavedQueryUI = Boolean(uiSettings!.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED));
   const index = Array.isArray(props.indexPatterns) ? props.indexPatterns[0]?.id : undefined;
   const newFilter = buildEmptyFilter(isPinned, index);
 
@@ -285,8 +287,8 @@
   ];
 
   const handleSave = () => {
-    if (props.onSave) {
-      props.onSave();
+    if (props.onInitiateSave) {
+      props.onInitiateSave();
     }
     setIsPopoverOpen(false);
   };
@@ -297,15 +299,17 @@
         <SavedQueryManagementComponent
           showSaveQuery={props.showSaveQuery}
           loadedSavedQuery={props.loadedSavedQuery}
-          onSave={handleSave}
-          onSaveAsNew={props.onSaveAsNew!}
+          onInitiateSave={handleSave}
+          onInitiateSaveAsNew={props.onInitiateSaveAsNew!}
           onLoad={props.onLoad!}
           savedQueryService={props.savedQueryService!}
           onClearSavedQuery={props.onClearSavedQuery!}
           closeMenuPopover={() => {
             setIsPopoverOpen(false);
           }}
           key={'savedQueryManagement'}
+          useNewSavedQueryUI={useNewSavedQueryUI}
+          saveQuery={props.saveQuery}
         />,
       ]}
       data-test-subj="save-query-panel"
@@ -364,6 +368,8 @@
     defaultMessage: 'See saved queries',
   });
 
+  const iconForQueryEditorControlPopoverBtn = useNewSavedQueryUI ? 'boxesHorizontal' : 'folderOpen';
+
   const savedQueryPopoverButton = (
     <EuiSmallButtonEmpty
       onClick={togglePopover}
@@ -373,7 +379,7 @@
       title={label}
     >
       <EuiIcon
-        type={props.isQueryEditorControl ? 'folderOpen' : 'save'}
+        type={props.isQueryEditorControl ? iconForQueryEditorControlPopoverBtn : 'save'}
         className="euiQuickSelectPopover__buttonText"
       />
     </EuiSmallButtonEmpty>