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.ts

@@ -33,34 +33,43 @@
 import { first } from 'rxjs/operators';
 import { SavedQueryAttributes, SavedQuery, SavedQueryService } from './types';
 import { QueryStringContract } from '../query_string';
+import { Dataset, UI_SETTINGS } from '../../../common';
 
 type SerializedSavedQueryAttributes = SavedObjectAttributes &
   SavedQueryAttributes & {
     query: {
       query: string;
       language: string;
+      dataset?: Dataset;
     };
   };
 
 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: any = {
       query:
         typeof attributes.query.query === 'string'
           ? attributes.query.query
           : JSON.stringify(attributes.query.query),
       language: attributes.query.language,
     };
 
+    if (queryEnhancementEnabled && attributes.query.dataset) {
+      query.dataset = attributes.query.dataset;
+    }
+
     const queryObject: SerializedSavedQueryAttributes = {
       title: attributes.title.trim(), // trim whitespace before save as an extra precaution against circumventing the front end
       description: attributes.description,
@@ -75,6 +84,10 @@
       queryObject.timefilter = attributes.timefilter;
     }
 
+    if (queryEnhancementEnabled && attributes.isTemplate) {
+      queryObject.isTemplate = attributes.isTemplate;
+    }
+
     let rawQueryResponse;
     if (!overwrite) {
       rawQueryResponse = await savedObjectsClient.create('query', queryObject, {
@@ -172,7 +185,7 @@
       parsedQuery = queryString;
     }
 
-    const savedQueryItems: SavedQueryAttributes = {
+    const savedQueryItem: SavedQueryAttributes = {
       title: savedQuery.attributes.title || '',
       description: savedQuery.attributes.description || '',
       query: {
@@ -181,15 +194,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

@@ -6,3 +6,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 [indexPattern] = props.indexPatterns;
   const index = indexPattern && indexPattern.id;
   const newFilter = buildEmptyFilter(isPinned, index);
@@ -286,8 +288,8 @@
   ];
 
   const handleSave = () => {
-    if (props.onSave) {
-      props.onSave();
+    if (props.onInitiateSave) {
+      props.onInitiateSave();
     }
     setIsPopoverOpen(false);
   };
@@ -298,15 +300,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"
@@ -365,6 +369,8 @@
     defaultMessage: 'See saved queries',
   });
 
+  const iconForQueryEditorControlPopoverBtn = useNewSavedQueryUI ? 'boxesVertical' : 'folderOpen';
+
   const savedQueryPopoverButton = (
     <EuiSmallButtonEmpty
       onClick={togglePopover}
@@ -374,7 +380,7 @@
       title={label}
     >
       <EuiIcon
-        type={props.isQueryEditorControl ? 'folderOpen' : 'save'}
+        type={props.isQueryEditorControl ? iconForQueryEditorControlPopoverBtn : 'save'}
         className="euiQuickSelectPopover__buttonText"
       />
     </EuiSmallButtonEmpty>