diff --git a/changelogs/fragments/8469.yml b/changelogs/fragments/8469.yml
new file mode 100644
index 00000000000..3c7cfdb44e1
--- /dev/null
+++ b/changelogs/fragments/8469.yml
@@ -0,0 +1,2 @@
+feat:
+- Enhances the saved query UX ([#8469](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8469))
\ No newline at end of file
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
index 69a57caac33..5fde9f1dd6e 100644
--- a/config/opensearch_dashboards.yml
+++ b/config/opensearch_dashboards.yml
@@ -375,3 +375,6 @@
# If the user config is set to wildcard ["*"], anyone will be dashboard admin.
# opensearchDashboards.dashboardAdmin.groups: ["dashboard_admin"]
# opensearchDashboards.dashboardAdmin.users: ["dashboard_admin"]
+
+# Set the value to true to enable the new UI for savedQueries in Discover
+# data.savedQueriesNewUI.enabled: true
\ No newline at end of file
diff --git a/src/plugins/data/config.ts b/src/plugins/data/config.ts
index 186691f3c91..50cf5aef413 100644
--- a/src/plugins/data/config.ts
+++ b/src/plugins/data/config.ts
@@ -57,6 +57,9 @@ export const configSchema = schema.object({
enabled: schema.boolean({ defaultValue: false }),
}),
}),
+ savedQueriesNewUI: schema.object({
+ enabled: schema.boolean({ defaultValue: false }),
+ }),
});
export type ConfigSchema = TypeOf;
diff --git a/src/plugins/data/public/plugin.ts b/src/plugins/data/public/plugin.ts
index 70977deb5d1..0354c33796f 100644
--- a/src/plugins/data/public/plugin.ts
+++ b/src/plugins/data/public/plugin.ts
@@ -54,6 +54,7 @@ import {
} from './index_patterns';
import {
setApplication,
+ setUseNewSavedQueriesUI,
setFieldFormats,
setIndexPatterns,
setNotifications,
@@ -93,7 +94,7 @@ import { DEFAULT_DATA_SOURCE_TYPE } from './data_sources/constants';
import { getSuggestions as getSQLSuggestions } from './antlr/opensearch_sql/code_completion';
import { getSuggestions as getDQLSuggestions } from './antlr/dql/code_completion';
import { getSuggestions as getPPLSuggestions } from './antlr/opensearch_ppl/code_completion';
-import { createStorage, DataStorage } from '../common';
+import { createStorage, DataStorage, UI_SETTINGS } from '../common';
declare module '../../ui_actions/public' {
export interface ActionContextMapping {
@@ -118,6 +119,7 @@ export class DataPublicPlugin
private readonly queryService: QueryService;
private readonly storage: DataStorage;
private readonly sessionStorage: DataStorage;
+ private readonly config: ConfigSchema;
constructor(initializerContext: PluginInitializerContext) {
this.searchService = new SearchService(initializerContext);
@@ -130,6 +132,7 @@ export class DataPublicPlugin
engine: window.sessionStorage,
prefix: 'opensearchDashboards.',
});
+ this.config = initializerContext.config.get();
}
public setup(
@@ -178,6 +181,11 @@ export class DataPublicPlugin
autoComplete.addQuerySuggestionProvider('kuery', getDQLSuggestions);
autoComplete.addQuerySuggestionProvider('PPL', getPPLSuggestions);
+ const useNewSavedQueriesUI =
+ core.uiSettings.get(UI_SETTINGS.QUERY_ENHANCEMENTS_ENABLED) &&
+ this.config.savedQueriesNewUI.enabled;
+ setUseNewSavedQueriesUI(useNewSavedQueriesUI);
+
return {
// TODO: MQL
autocomplete: this.autocomplete.setup(core),
diff --git a/src/plugins/data/public/query/query_service.ts b/src/plugins/data/public/query/query_service.ts
index b009d4eeef0..9211ef4fc89 100644
--- a/src/plugins/data/public/query/query_service.ts
+++ b/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,
diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.test.ts b/src/plugins/data/public/query/saved_query/saved_query_service.test.ts
index 9fc8cdf6101..b50c47f8040 100644
--- a/src/plugins/data/public/query/saved_query/saved_query_service.test.ts
+++ b/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', () => {
diff --git a/src/plugins/data/public/query/saved_query/saved_query_service.ts b/src/plugins/data/public/query/saved_query/saved_query_service.ts
index 8fba257fad2..92af9b7c024 100644
--- a/src/plugins/data/public/query/saved_query/saved_query_service.ts
+++ b/src/plugins/data/public/query/saved_query/saved_query_service.ts
@@ -33,27 +33,24 @@ import { SavedObjectsClientContract, SavedObjectAttributes, CoreStart } from 'sr
import { first } from 'rxjs/operators';
import { SavedQueryAttributes, SavedQuery, SavedQueryService } from './types';
import { QueryStringContract } from '../query_string';
+import { getUseNewSavedQueriesUI } from '../../services';
-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 } = coreStartServices;
+
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
@@ -61,7 +58,11 @@ export const createSavedQueryService = (
language: attributes.query.language,
};
- const queryObject: SerializedSavedQueryAttributes = {
+ if (getUseNewSavedQueriesUI() && 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 +76,10 @@ export const createSavedQueryService = (
queryObject.timefilter = attributes.timefilter;
}
+ if (getUseNewSavedQueriesUI() && attributes.isTemplate) {
+ queryObject.isTemplate = true;
+ }
+
let rawQueryResponse;
if (!overwrite) {
rawQueryResponse = await savedObjectsClient.create('query', queryObject, {
@@ -126,8 +131,7 @@ export const createSavedQueryService = (
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 +163,8 @@ export const createSavedQueryService = (
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 +173,7 @@ export const createSavedQueryService = (
parsedQuery = queryString;
}
- const savedQueryItems: SavedQueryAttributes = {
+ const savedQueryItem: SavedQueryAttributes = {
title: savedQuery.attributes.title || '',
description: savedQuery.attributes.description || '',
query: {
@@ -181,15 +182,20 @@ export const createSavedQueryService = (
},
};
+ if (getUseNewSavedQueriesUI()) {
+ 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,
};
};
diff --git a/src/plugins/data/public/query/saved_query/types.ts b/src/plugins/data/public/query/saved_query/types.ts
index 8635547e009..8b3b2cc1e5a 100644
--- a/src/plugins/data/public/query/saved_query/types.ts
+++ b/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;
diff --git a/src/plugins/data/public/services.ts b/src/plugins/data/public/services.ts
index c042c2b6d9b..ef827a63405 100644
--- a/src/plugins/data/public/services.ts
+++ b/src/plugins/data/public/services.ts
@@ -63,3 +63,13 @@ export const [getSearchService, setSearchService] = createGetterSetter<
export const [getUiService, setUiService] = createGetterSetter('Ui');
export const [getApplication, setApplication] = createGetterSetter('Application');
+
+let useNewSavedQueriesUI = false;
+
+export function getUseNewSavedQueriesUI() {
+ return useNewSavedQueriesUI;
+}
+
+export const setUseNewSavedQueriesUI = (value: boolean) => {
+ useNewSavedQueriesUI = value;
+};
diff --git a/src/plugins/data/public/ui/_index.scss b/src/plugins/data/public/ui/_index.scss
index 9ab4ca672b3..daace2e6528 100644
--- a/src/plugins/data/public/ui/_index.scss
+++ b/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";
diff --git a/src/plugins/data/public/ui/filter_bar/filter_options.tsx b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
index 6de37d562ce..3cda39731fa 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_options.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_options.tsx
@@ -55,12 +55,13 @@ import {
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';
+import { getUseNewSavedQueriesUI } from '../../services';
interface Props {
intl: InjectedIntl;
@@ -69,14 +70,15 @@ interface Props {
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;
}
const maxFilterWidth = 600;
@@ -285,8 +287,8 @@ const FilterOptionsUI = (props: Props) => {
];
const handleSave = () => {
- if (props.onSave) {
- props.onSave();
+ if (props.onInitiateSave) {
+ props.onInitiateSave();
}
setIsPopoverOpen(false);
};
@@ -297,8 +299,8 @@ const FilterOptionsUI = (props: Props) => {
{
setIsPopoverOpen(false);
}}
key={'savedQueryManagement'}
+ useNewSavedQueryUI={getUseNewSavedQueriesUI()}
+ saveQuery={props.saveQuery}
/>,
]}
data-test-subj="save-query-panel"
@@ -364,6 +368,10 @@ const FilterOptionsUI = (props: Props) => {
defaultMessage: 'See saved queries',
});
+ const iconForQueryEditorControlPopoverBtn = getUseNewSavedQueriesUI()
+ ? 'boxesHorizontal'
+ : 'folderOpen';
+
const savedQueryPopoverButton = (
{
title={label}
>
diff --git a/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx b/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx
new file mode 100644
index 00000000000..c7f13f27db0
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_flyouts/open_saved_query_flyout.tsx
@@ -0,0 +1,283 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ EuiButton,
+ EuiButtonEmpty,
+ EuiEmptyPrompt,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiFlyout,
+ EuiFlyoutBody,
+ EuiFlyoutFooter,
+ EuiFlyoutHeader,
+ EuiSearchBar,
+ EuiSearchBarProps,
+ EuiSpacer,
+ EuiTabbedContent,
+ EuiTablePagination,
+ EuiTitle,
+ Pager,
+} from '@elastic/eui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { i18n } from '@osd/i18n';
+import { SavedQuery, SavedQueryService } from '../../query';
+import { SavedQueryCard } from './saved_query_card';
+
+export interface OpenSavedQueryFlyoutProps {
+ savedQueryService: SavedQueryService;
+ onClose: () => void;
+ onQueryOpen: (query: SavedQuery) => void;
+ handleQueryDelete: (query: SavedQuery) => Promise;
+}
+
+interface SavedQuerySearchableItem {
+ id: string;
+ title: string;
+ description: string;
+ language: string;
+ datasetType?: string;
+ savedQuery: SavedQuery;
+}
+
+export function OpenSavedQueryFlyout({
+ savedQueryService,
+ onClose,
+ onQueryOpen,
+ handleQueryDelete,
+}: OpenSavedQueryFlyoutProps) {
+ const [selectedTabId, setSelectedTabId] = useState('mutable-saved-queries');
+ const [savedQueries, setSavedQueries] = useState([]);
+ const [hasTemplateQueries, setHasTemplateQueries] = useState(false);
+ const [itemsPerPage, setItemsPerPage] = useState(10);
+ const pager = useRef(new Pager(savedQueries.length, itemsPerPage));
+ const [activePage, setActivePage] = useState(pager.current.getCurrentPageIndex());
+ const [queriesOnCurrentPage, setQueriesOnCurrentPage] = useState([]);
+ const [datasetTypeFilterOptions, setDatasetTypeFilterOptions] = useState([]);
+ const [languageFilterOptions, setLanguageFilterOptions] = useState([]);
+ const [selectedQuery, setSelectedQuery] = useState(undefined);
+ const [searchQuery, setSearchQuery] = useState(EuiSearchBar.Query.MATCH_ALL);
+
+ 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]);
+
+ const updatePageIndex = useCallback((index: number) => {
+ pager.current.goToPageIndex(index);
+ setActivePage(index);
+ }, []);
+
+ useEffect(() => {
+ fetchAllSavedQueriesForSelectedTab();
+ setSearchQuery(EuiSearchBar.Query.MATCH_ALL);
+ updatePageIndex(0);
+ }, [selectedTabId, fetchAllSavedQueriesForSelectedTab, updatePageIndex]);
+
+ useEffect(() => {
+ const queryLanguages = new Set();
+ const queryDatasetTypes = new Set();
+
+ savedQueries.forEach((q) => {
+ queryLanguages.add(q.attributes.query.language);
+ if (q.attributes.query.dataset?.type) {
+ queryDatasetTypes.add(q.attributes.query.dataset.type);
+ }
+ });
+ setLanguageFilterOptions(Array.from(queryLanguages));
+ setDatasetTypeFilterOptions(Array.from(queryDatasetTypes));
+ }, [savedQueries]);
+
+ useEffect(() => {
+ const searchableItems = savedQueries.map((q) => ({
+ id: q.id,
+ title: q.attributes.title,
+ description: q.attributes.description,
+ language: q.attributes.query.language,
+ datasetType: q.attributes.query.dataset?.type,
+ savedQuery: q,
+ }));
+
+ const filteredSavedQueries = EuiSearchBar.Query.execute(searchQuery, searchableItems, {
+ defaultFields: ['language', 'title', 'description', 'datasetType'],
+ });
+ pager.current.setTotalItems(filteredSavedQueries.length);
+ setQueriesOnCurrentPage(
+ filteredSavedQueries.slice(
+ pager.current.getFirstItemIndex(),
+ pager.current.getLastItemIndex() + 1
+ )
+ );
+ }, [savedQueries, searchQuery, activePage, itemsPerPage]);
+
+ const onChange: EuiSearchBarProps['onChange'] = ({ query, error }) => {
+ if (!error) {
+ setSearchQuery(query);
+ updatePageIndex(0);
+ }
+ };
+
+ const schema = {
+ strict: true,
+ fields: {
+ title: {
+ type: 'string',
+ },
+ description: {
+ type: 'string',
+ },
+ language: {
+ type: 'string',
+ },
+ },
+ };
+
+ const flyoutBodyContent = (
+ <>
+
+ ({
+ value: datasetType,
+ view: datasetType.toUpperCase(),
+ })),
+ },
+ {
+ type: 'field_value_selection',
+ field: 'language',
+ name: 'Query language',
+ multiSelect: 'or',
+ options: languageFilterOptions.map((language) => ({
+ value: language,
+ view: language.toUpperCase(),
+ })),
+ },
+ ]}
+ onChange={onChange}
+ />
+
+ {queriesOnCurrentPage.length > 0 ? (
+ queriesOnCurrentPage.map((query) => (
+ {
+ handleQueryDelete(queryToDelete).then(() => {
+ fetchAllSavedQueriesForSelectedTab();
+ });
+ }}
+ />
+ ))
+ ) : (
+
+ {i18n.translate('data.openSavedQueryFlyout.queryTable.noQueryFoundText', {
+ defaultMessage: 'No saved query found.',
+ })}
+
+ }
+ />
+ )}
+
+ {queriesOnCurrentPage.length > 0 && (
+ {
+ pager.current.setItemsPerPage(pageSize);
+ setItemsPerPage(pageSize);
+ }}
+ onChangePage={(pageIndex) => {
+ updatePageIndex(pageIndex);
+ }}
+ />
+ )}
+ >
+ );
+
+ const tabs = [
+ {
+ id: 'mutable-saved-queries',
+ name: 'Saved queries',
+ content: flyoutBodyContent,
+ },
+ ];
+
+ if (hasTemplateQueries) {
+ tabs.push({
+ id: 'template-saved-queries',
+ name: 'Templates',
+ content: flyoutBodyContent,
+ });
+ }
+
+ return (
+
+
+
+ Saved queries
+
+
+
+ {
+ setSelectedTabId(tab.id);
+ }}
+ />
+
+
+
+
+
+ Cancel
+
+
+
+ {
+ if (selectedQuery) {
+ onQueryOpen(selectedQuery);
+ onClose();
+ }
+ }}
+ >
+ Open query
+
+
+
+
+
+ );
+}
diff --git a/src/plugins/data/public/ui/saved_query_flyouts/save_query_flyout.tsx b/src/plugins/data/public/ui/saved_query_flyouts/save_query_flyout.tsx
new file mode 100644
index 00000000000..c0356b86448
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_flyouts/save_query_flyout.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React, { useState } from 'react';
+import { SavedQueryAttributes, SavedQueryService } from '../../query';
+import { SaveQueryForm, SavedQueryMeta } from '../saved_query_form';
+
+interface SaveQueryFlyoutProps {
+ savedQuery?: SavedQueryAttributes;
+ savedQueryService: SavedQueryService;
+ onSave: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise;
+ onClose: () => void;
+ showFilterOption: boolean | undefined;
+ showTimeFilterOption: boolean | undefined;
+}
+
+export function SaveQueryFlyout({
+ savedQuery,
+ savedQueryService,
+ onSave,
+ onClose,
+ showFilterOption,
+ showTimeFilterOption,
+}: SaveQueryFlyoutProps) {
+ const [saveAsNew, setSaveAsNew] = useState(!savedQuery || savedQuery.isTemplate);
+
+ return (
+ {
+ try {
+ await onSave(savedQueryMeta, saveAsNew);
+ onClose();
+ } catch (error) {
+ // error toast is already shown inside the onSave above,
+ // catching error to avoid UI crash
+ // adding comment to prevent no-empty lint error
+ }
+ }}
+ savedQueryService={savedQueryService}
+ showFilterOption={showFilterOption}
+ showTimeFilterOption={showTimeFilterOption}
+ showDataSourceOption={true}
+ setSaveAsNew={(shouldSaveAsNew) => setSaveAsNew(shouldSaveAsNew)}
+ savedQuery={saveAsNew ? undefined : savedQuery}
+ saveAsNew={saveAsNew}
+ cannotBeOverwritten={!!savedQuery?.isTemplate}
+ />
+ );
+}
diff --git a/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx
new file mode 100644
index 00000000000..7107a890600
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_card.tsx
@@ -0,0 +1,196 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {
+ EuiBadge,
+ EuiButtonIcon,
+ EuiCheckableCard,
+ EuiCopy,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiLink,
+ EuiSpacer,
+ EuiText,
+ EuiTitle,
+} from '@elastic/eui';
+import React, { useRef, useState, useEffect } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import { monaco } from '@osd/monaco';
+import { i18n } from '@osd/i18n';
+import { SavedQuery } from '../../query';
+import { DeleteSavedQueryConfirmationModal } from '../saved_query_management/delete_saved_query_confirmation_modal';
+
+export interface SavedQueryCardProps {
+ savedQuery: SavedQuery;
+ selectedQuery?: SavedQuery;
+ onSelect: (query: SavedQuery) => void;
+ handleQueryDelete: (query: SavedQuery) => void;
+}
+
+export function SavedQueryCard({
+ savedQuery,
+ selectedQuery,
+ onSelect,
+ handleQueryDelete,
+}: SavedQueryCardProps) {
+ const [shouldTruncate, setShouldTruncate] = useState(false);
+ const [isTruncated, setIsTruncated] = useState(true);
+ const [editorHeight, setEditorHeight] = useState(60);
+ const customHTMLRef = useRef(null);
+ const [showDeletionConfirmationModal, setShowDeletionConfirmationModal] = useState(false);
+ const [lineCount, setLineCount] = useState(0);
+ const toggleView = () => {
+ setIsTruncated(!isTruncated);
+ };
+
+ useEffect(() => {
+ if (!shouldTruncate) {
+ return;
+ }
+
+ if (isTruncated) {
+ setEditorHeight(80);
+ return;
+ }
+
+ const editor = customHTMLRef.current;
+ if (!editor) {
+ return;
+ }
+
+ const editorElement = editor.getDomNode();
+
+ if (!editorElement) {
+ return;
+ }
+
+ const height = editor.getScrollHeight();
+ setEditorHeight(height);
+ }, [isTruncated, shouldTruncate]);
+
+ function handleHTMLEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor) {
+ const scrollHeight = editor.getScrollHeight();
+ setEditorHeight(scrollHeight);
+
+ if (scrollHeight > 80) {
+ setShouldTruncate(true);
+ }
+
+ setLineCount(editor.getModel()?.getLineCount() || 0);
+ customHTMLRef.current = editor;
+ }
+
+ return (
+ <>
+ {
+ onSelect(savedQuery);
+ }}
+ label={
+ <>
+
+
+
+
+
+ {savedQuery.attributes.title}
+
+
+
+ {savedQuery.attributes.query.language}
+
+
+
+ {!savedQuery.attributes.isTemplate && (
+
+ {
+ setShowDeletionConfirmationModal(true);
+ }}
+ />
+
+ )}
+
+ {savedQuery.attributes.description && (
+
+ {savedQuery.attributes.description}
+
+ )}
+ {savedQuery.attributes.query.dataset?.title && (
+
+ {savedQuery.attributes.query.dataset.title}
+
+ )}
+ >
+ }
+ >
+
+
+
+
+ {shouldTruncate && (
+
+
+ {i18n.translate('data.saved_query.view_more_label', {
+ defaultMessage: '{viewMoreLabel}',
+ values: {
+ viewMoreLabel: `${
+ isTruncated ? `View full query (${lineCount} lines)` : 'View Less'
+ }`,
+ },
+ })}
+
+
+ )}
+
+
+
+
+ {(copy) => (
+
+ )}
+
+
+
+
+
+ {showDeletionConfirmationModal && (
+ {
+ handleQueryDelete(savedQuery);
+ setShowDeletionConfirmationModal(false);
+ }}
+ onCancel={() => {
+ setShowDeletionConfirmationModal(false);
+ }}
+ />
+ )}
+ >
+ );
+}
diff --git a/src/plugins/data/public/ui/saved_query_flyouts/saved_query_flyouts.scss b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_flyouts.scss
new file mode 100644
index 00000000000..1ab1074b27a
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_flyouts/saved_query_flyouts.scss
@@ -0,0 +1,23 @@
+.editor-container {
+ position: relative;
+ overflow-y: clip;
+}
+
+.read-more-wrap {
+ /* stylelint-disable @osd/stylelint/no_restricted_values */
+ background: linear-gradient(rgba($euiColorEmptyShade, 5%) 10%, $euiColorEmptyShade 60%, $euiColorEmptyShade 100%);
+ height: 90px;
+ position: absolute;
+ z-index: 1;
+ left: 0;
+ bottom: 0;
+ text-align: center;
+ width: 100%;
+}
+
+.read-more-btn {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ transform: translateX(-50%);
+}
diff --git a/src/plugins/data/public/ui/saved_query_form/helpers.tsx b/src/plugins/data/public/ui/saved_query_form/helpers.tsx
new file mode 100644
index 00000000000..467eac2de47
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_form/helpers.tsx
@@ -0,0 +1,334 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { useEffect, useState, useCallback } from 'react';
+import {
+ EuiSmallButtonEmpty,
+ EuiSmallButton,
+ EuiForm,
+ EuiCompressedFormRow,
+ EuiCompressedFieldText,
+ EuiCompressedSwitch,
+ EuiText,
+ EuiFlexGroup,
+ EuiFlexItem,
+ EuiButtonEmpty,
+ EuiButton,
+ EuiCompressedCheckbox,
+} from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { sortBy, isEqual } from 'lodash';
+import { SavedQuery, SavedQueryService } from '../..';
+import { SavedQueryAttributes } from '../../query';
+import { SavedQueryMeta } from './save_query_form';
+
+interface Props {
+ savedQuery?: SavedQueryAttributes;
+ savedQueryService: SavedQueryService;
+ onSave: (savedQueryMeta: SavedQueryMeta) => void;
+ onClose: () => void;
+ formUiType: 'Modal' | 'Flyout';
+ showFilterOption?: boolean;
+ showTimeFilterOption?: boolean;
+ showDataSourceOption?: boolean;
+ saveAsNew?: boolean;
+ setSaveAsNew?: (shouldSaveAsNew: boolean) => void;
+ cannotBeOverwritten?: boolean;
+}
+
+export function useSaveQueryFormContent({
+ savedQuery,
+ savedQueryService,
+ onSave,
+ onClose,
+ showFilterOption = true,
+ showTimeFilterOption = true,
+ showDataSourceOption = false,
+ formUiType,
+ saveAsNew,
+ setSaveAsNew,
+ cannotBeOverwritten,
+}: Props) {
+ const [title, setTitle] = useState('');
+ const [enabledSaveButton, setEnabledSaveButton] = useState(false);
+ const [description, setDescription] = useState('');
+ const [savedQueries, setSavedQueries] = useState([]);
+ const [shouldIncludeFilters, setShouldIncludeFilters] = useState(true);
+ const [shouldIncludeDataSource, setShouldIncludeDataSource] = useState(true);
+ // Defaults to false because saved queries are meant to be as portable as possible and loading
+ // a saved query with a time filter will override whatever the current value of the global timepicker
+ // is. We expect this option to be used rarely and only when the user knows they want this behavior.
+ const [shouldIncludeTimeFilter, setIncludeTimefilter] = useState(false);
+ const [formErrors, setFormErrors] = useState([]);
+
+ // Need this effect so that in case when user select "Save as new" in the flyout,
+ // the initial state resets since savedQuery will be undefined
+ useEffect(() => {
+ setTitle(savedQuery?.title || '');
+ setEnabledSaveButton(Boolean(savedQuery));
+ setDescription(savedQuery?.description || '');
+ setShouldIncludeFilters(savedQuery ? !!savedQuery.filters : true);
+ setIncludeTimefilter(!!savedQuery?.timefilter);
+ setShouldIncludeDataSource(savedQuery ? !!savedQuery.query.dataset : true);
+ setFormErrors([]);
+ }, [savedQuery]);
+
+ const titleConflictErrorText = i18n.translate(
+ 'data.search.searchBar.savedQueryForm.titleConflictText',
+ {
+ defaultMessage: 'Name conflicts with an existing saved query',
+ }
+ );
+
+ const savedQueryDescriptionText = i18n.translate(
+ 'data.search.searchBar.savedQueryDescriptionText',
+ {
+ defaultMessage: 'Save query text and filters that you want to use again.',
+ }
+ );
+
+ useEffect(() => {
+ const fetchQueries = async () => {
+ const allSavedQueries = await savedQueryService.getAllSavedQueries();
+ const sortedAllSavedQueries = sortBy(allSavedQueries, 'attributes.title') as SavedQuery[];
+ setSavedQueries(sortedAllSavedQueries);
+ };
+ fetchQueries();
+ }, [savedQueryService]);
+
+ const validate = useCallback(() => {
+ const errors = [];
+ if (
+ !savedQuery &&
+ savedQueries.some((existingSavedQuery) => existingSavedQuery.attributes.title === title)
+ ) {
+ errors.push(titleConflictErrorText);
+ }
+
+ if (!isEqual(errors, formErrors)) {
+ setFormErrors(errors);
+ return false;
+ }
+
+ return !formErrors.length;
+ }, [savedQueries, savedQuery, title, titleConflictErrorText, formErrors]);
+
+ const onClickSave = useCallback(() => {
+ if (validate()) {
+ onSave({
+ title,
+ description,
+ shouldIncludeFilters,
+ shouldIncludeTimeFilter,
+ shouldIncludeDataSource,
+ });
+ }
+ }, [
+ validate,
+ onSave,
+ title,
+ description,
+ shouldIncludeFilters,
+ shouldIncludeTimeFilter,
+ shouldIncludeDataSource,
+ ]);
+
+ const onInputChange = useCallback((event) => {
+ setEnabledSaveButton(Boolean(event.target.value));
+ setFormErrors([]);
+ setTitle(event.target.value);
+ }, []);
+
+ const autoTrim = useCallback(() => {
+ const trimmedTitle = title.trim();
+ if (title.length > trimmedTitle.length) {
+ setTitle(trimmedTitle);
+ }
+ }, [title]);
+
+ const hasErrors = formErrors.length > 0;
+
+ const saveQueryFormBody = (
+
+
+
+ {savedQueryDescriptionText}
+
+
+ {formUiType === 'Flyout' && (
+
+ setSaveAsNew?.(event.target.checked)}
+ checked={saveAsNew}
+ label={i18n.translate('data.search.searchBar.SaveAsNewLabelText', {
+ defaultMessage: 'Save as new query',
+ })}
+ disabled={cannotBeOverwritten}
+ />
+
+ )}
+
+
+
+
+
+ {
+ setDescription(event.target.value);
+ }}
+ data-test-subj="saveQueryFormDescription"
+ />
+
+ {showDataSourceOption && (
+
+ {
+ setShouldIncludeDataSource(!shouldIncludeDataSource);
+ }}
+ data-test-subj="saveQueryFormIncludeDataSourceOption"
+ />
+
+ )}
+ {showFilterOption && (
+
+ {
+ setShouldIncludeFilters(!shouldIncludeFilters);
+ }}
+ data-test-subj="saveQueryFormIncludeFiltersOption"
+ />
+
+ )}
+
+ {showTimeFilterOption && (
+
+ {
+ setIncludeTimefilter(!shouldIncludeTimeFilter);
+ }}
+ data-test-subj="saveQueryFormIncludeTimeFilterOption"
+ />
+
+ )}
+
+ );
+
+ const footer =
+ formUiType === 'Modal' ? (
+ <>
+
+ {i18n.translate('data.search.searchBar.savedQueryFormCancelButtonText', {
+ defaultMessage: 'Cancel',
+ })}
+
+
+
+ {i18n.translate('data.search.searchBar.savedQueryFormSaveButtonText', {
+ defaultMessage: 'Save',
+ })}
+
+ >
+ ) : (
+
+
+
+ {i18n.translate('data.search.searchBar.savedQueryFormCancelButtonText', {
+ defaultMessage: 'Cancel',
+ })}
+
+
+
+
+ {i18n.translate('data.search.searchBar.savedQueryFlyoutFormSaveButtonText', {
+ defaultMessage: '{saveText}',
+ values: { saveText: savedQuery ? 'Save changes' : 'Save' },
+ })}
+
+
+
+ );
+
+ return {
+ header: (
+
+
+ {i18n.translate('data.search.searchBar.savedQueryFormTitle', {
+ defaultMessage: 'Save query',
+ })}
+
+
+ ),
+ body: saveQueryFormBody,
+ footer,
+ };
+}
diff --git a/src/plugins/data/public/ui/saved_query_form/index.ts b/src/plugins/data/public/ui/saved_query_form/index.ts
index e9c62cf646d..6160e53b54e 100644
--- a/src/plugins/data/public/ui/saved_query_form/index.ts
+++ b/src/plugins/data/public/ui/saved_query_form/index.ts
@@ -29,4 +29,4 @@
*/
// @internal
-export { SavedQueryMeta, SaveQueryForm } from '../saved_query_form/save_query_form';
+export { SavedQueryMeta, SaveQueryForm } from './save_query_form';
diff --git a/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx b/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
index 9d1b5c29342..e25f3229d88 100644
--- a/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
+++ b/src/plugins/data/public/ui/saved_query_form/save_query_form.tsx
@@ -28,242 +28,86 @@
* under the License.
*/
-import React, { useEffect, useState, useCallback } from 'react';
+import React from 'react';
import {
- EuiSmallButtonEmpty,
EuiModal,
- EuiSmallButton,
EuiModalHeader,
EuiModalHeaderTitle,
EuiModalBody,
EuiModalFooter,
- EuiForm,
- EuiCompressedFormRow,
- EuiCompressedFieldText,
- EuiCompressedSwitch,
- EuiText,
+ EuiFlyoutHeader,
+ EuiFlyout,
+ EuiFlyoutBody,
+ EuiFlyoutFooter,
} from '@elastic/eui';
-import { i18n } from '@osd/i18n';
-import { sortBy, isEqual } from 'lodash';
-import { SavedQuery, SavedQueryService } from '../..';
+import { SavedQueryService } from '../..';
import { SavedQueryAttributes } from '../../query';
+import { useSaveQueryFormContent } from './helpers';
interface Props {
+ formUiType: 'Modal' | 'Flyout';
savedQuery?: SavedQueryAttributes;
savedQueryService: SavedQueryService;
onSave: (savedQueryMeta: SavedQueryMeta) => void;
onClose: () => void;
- showFilterOption: boolean | undefined;
- showTimeFilterOption: boolean | undefined;
+ setSaveAsNew?: (shouldSaveAsNew: boolean) => void;
+ showFilterOption?: boolean;
+ showTimeFilterOption?: boolean;
+ showDataSourceOption?: boolean;
+ saveAsNew?: boolean;
+ cannotBeOverwritten?: boolean;
}
export interface SavedQueryMeta {
title: string;
description: string;
shouldIncludeFilters: boolean;
- shouldIncludeTimefilter: boolean;
+ shouldIncludeTimeFilter: boolean;
+ shouldIncludeDataSource: boolean;
}
export function SaveQueryForm({
+ formUiType,
savedQuery,
savedQueryService,
onSave,
onClose,
showFilterOption = true,
showTimeFilterOption = true,
+ showDataSourceOption = false,
+ saveAsNew,
+ setSaveAsNew,
+ cannotBeOverwritten,
}: Props) {
- const [title, setTitle] = useState(savedQuery ? savedQuery.title : '');
- const [enabledSaveButton, setEnabledSaveButton] = useState(Boolean(savedQuery));
- const [description, setDescription] = useState(savedQuery ? savedQuery.description : '');
- const [savedQueries, setSavedQueries] = useState([]);
- const [shouldIncludeFilters, setShouldIncludeFilters] = useState(
- savedQuery ? !!savedQuery.filters : true
- );
- // Defaults to false because saved queries are meant to be as portable as possible and loading
- // a saved query with a time filter will override whatever the current value of the global timepicker
- // is. We expect this option to be used rarely and only when the user knows they want this behavior.
- const [shouldIncludeTimefilter, setIncludeTimefilter] = useState(
- savedQuery ? !!savedQuery.timefilter : false
- );
- const [formErrors, setFormErrors] = useState([]);
-
- const titleConflictErrorText = i18n.translate(
- 'data.search.searchBar.savedQueryForm.titleConflictText',
- {
- defaultMessage: 'Name conflicts with an existing saved query',
- }
- );
-
- const savedQueryDescriptionText = i18n.translate(
- 'data.search.searchBar.savedQueryDescriptionText',
- {
- defaultMessage: 'Save query text and filters that you want to use again.',
- }
- );
-
- useEffect(() => {
- const fetchQueries = async () => {
- const allSavedQueries = await savedQueryService.getAllSavedQueries();
- const sortedAllSavedQueries = sortBy(allSavedQueries, 'attributes.title') as SavedQuery[];
- setSavedQueries(sortedAllSavedQueries);
- };
- fetchQueries();
- }, [savedQueryService]);
-
- const validate = useCallback(() => {
- const errors = [];
- if (
- !!savedQueries.find(
- (existingSavedQuery) => !savedQuery && existingSavedQuery.attributes.title === title
- )
- ) {
- errors.push(titleConflictErrorText);
- }
-
- if (!isEqual(errors, formErrors)) {
- setFormErrors(errors);
- return false;
- }
-
- return !formErrors.length;
- }, [savedQueries, savedQuery, title, titleConflictErrorText, formErrors]);
-
- const onClickSave = useCallback(() => {
- if (validate()) {
- onSave({
- title,
- description,
- shouldIncludeFilters,
- shouldIncludeTimefilter,
- });
- }
- }, [validate, onSave, title, description, shouldIncludeFilters, shouldIncludeTimefilter]);
-
- const onInputChange = useCallback((event) => {
- setEnabledSaveButton(Boolean(event.target.value));
- setFormErrors([]);
- setTitle(event.target.value);
- }, []);
-
- const autoTrim = useCallback(() => {
- const trimmedTitle = title.trim();
- if (title.length > trimmedTitle.length) {
- setTitle(trimmedTitle);
- }
- }, [title]);
-
- const hasErrors = formErrors.length > 0;
-
- const saveQueryForm = (
-
-
-
- {savedQueryDescriptionText}
-
-
-
-
-
-
-
- {
- setDescription(event.target.value);
- }}
- data-test-subj="saveQueryFormDescription"
- />
-
- {showFilterOption && (
-
- {
- setShouldIncludeFilters(!shouldIncludeFilters);
- }}
- data-test-subj="saveQueryFormIncludeFiltersOption"
- />
-
- )}
-
- {showTimeFilterOption && (
-
- {
- setIncludeTimefilter(!shouldIncludeTimefilter);
- }}
- data-test-subj="saveQueryFormIncludeTimeFilterOption"
- />
-
- )}
-
- );
-
- return (
+ const { header, body, footer } = useSaveQueryFormContent({
+ formUiType,
+ savedQuery,
+ savedQueryService,
+ onSave,
+ onClose,
+ showFilterOption,
+ showTimeFilterOption,
+ showDataSourceOption,
+ saveAsNew,
+ setSaveAsNew,
+ cannotBeOverwritten,
+ });
+
+ return formUiType === 'Modal' ? (
-
-
-
- {i18n.translate('data.search.searchBar.savedQueryFormTitle', {
- defaultMessage: 'Save query',
- })}
-
-
-
+ {header}
- {saveQueryForm}
-
-
-
- {i18n.translate('data.search.searchBar.savedQueryFormCancelButtonText', {
- defaultMessage: 'Cancel',
- })}
-
+ {body}
-
- {i18n.translate('data.search.searchBar.savedQueryFormSaveButtonText', {
- defaultMessage: 'Save',
- })}
-
-
+ {footer}
+ ) : (
+
+ {header}
+ {body}
+ {footer}
+
);
}
diff --git a/src/plugins/data/public/ui/saved_query_management/delete_saved_query_confirmation_modal.tsx b/src/plugins/data/public/ui/saved_query_management/delete_saved_query_confirmation_modal.tsx
new file mode 100644
index 00000000000..035fc22ae3d
--- /dev/null
+++ b/src/plugins/data/public/ui/saved_query_management/delete_saved_query_confirmation_modal.tsx
@@ -0,0 +1,72 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ *
+ * Any modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { EuiConfirmModal } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+import { SavedQuery } from '../..';
+
+export interface DeleteSavedQueryConfirmationModalProps {
+ savedQuery: SavedQuery;
+ onConfirm: () => void;
+ onCancel: () => void;
+}
+
+export const DeleteSavedQueryConfirmationModal = ({
+ savedQuery,
+ onConfirm,
+ onCancel,
+}: DeleteSavedQueryConfirmationModalProps) => {
+ return (
+
+ );
+};
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
index 77711d6382a..8e015adf1eb 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_list_item.tsx
@@ -34,6 +34,7 @@ import React, { Fragment, useState } from 'react';
import classNames from 'classnames';
import { i18n } from '@osd/i18n';
import { SavedQuery } from '../..';
+import { DeleteSavedQueryConfirmationModal } from './delete_saved_query_confirmation_modal';
interface Props {
savedQuery: SavedQuery;
@@ -137,30 +138,12 @@ export const SavedQueryListItem = ({
/>
{showDeletionConfirmationModal && (
- {
onDelete(savedQuery);
setShowDeletionConfirmationModal(false);
}}
- buttonColor="danger"
onCancel={() => {
setShowDeletionConfirmationModal(false);
}}
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
index 8b92609d419..acafe2a444a 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.test.tsx
@@ -18,8 +18,8 @@ const mockProps = () => ({
deleteSavedQuery: jest.fn(),
getSavedQueryCount: jest.fn(),
},
- onSave: jest.fn(),
- onSaveAsNew: jest.fn(),
+ onInitiateSave: jest.fn(),
+ onInitiateSaveAsNew: jest.fn(),
onLoad: jest.fn(),
onClearSavedQuery: jest.fn(),
closeMenuPopover: jest.fn(),
@@ -33,6 +33,7 @@ const mockProps = () => ({
query: { query: '', language: 'kuery' } as Query,
} as SavedQueryAttributes,
},
+ saveQuery: jest.fn(),
});
describe('Saved query management component', () => {
@@ -42,25 +43,25 @@ describe('Saved query management component', () => {
expect(wrapper.exists()).toBe(true);
});
- it('should call onSave when save button is clicked', () => {
+ it('should call onInitiateSave when save button is clicked', () => {
const props = mockProps();
const wrapper = shallowWithIntl();
const saveButton = wrapper
.find('[data-test-subj="saved-query-management-save-changes-button"]')
.at(0);
saveButton.simulate('click');
- expect(props.onSave).toHaveBeenCalled();
+ expect(props.onInitiateSave).toHaveBeenCalled();
expect(props.closeMenuPopover).toHaveBeenCalled();
});
- it('should call onSaveAsNew when save as new button is clicked', () => {
+ it('should call onInitiateSaveAsNew when save as new button is clicked', () => {
const props = mockProps();
const wrapper = shallowWithIntl();
const saveAsNewButton = wrapper
.find('[data-test-subj="saved-query-management-save-as-new-button"]')
.at(0);
saveAsNewButton.simulate('click');
- expect(props.onSaveAsNew).toHaveBeenCalled();
+ expect(props.onInitiateSaveAsNew).toHaveBeenCalled();
});
it('should call onClearSavedQuery when clear saved query button is clicked', () => {
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 3048554fe2f..01f9b97e978 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -39,6 +39,7 @@ import {
EuiPagination,
EuiText,
EuiSpacer,
+ EuiListGroupItem,
} from '@elastic/eui';
import { i18n } from '@osd/i18n';
@@ -46,33 +47,50 @@ import React, { useCallback, useEffect, useState, Fragment, useRef } from 'react
import { sortBy } from 'lodash';
import { SavedQuery, SavedQueryService } from '../..';
import { SavedQueryListItem } from './saved_query_list_item';
+import {
+ toMountPoint,
+ useOpenSearchDashboards,
+} from '../../../../opensearch_dashboards_react/public';
+import { SaveQueryFlyout } from '../saved_query_flyouts/save_query_flyout';
+import {
+ OpenSavedQueryFlyout,
+ OpenSavedQueryFlyoutProps,
+} from '../saved_query_flyouts/open_saved_query_flyout';
+import { SavedQueryMeta } from '../saved_query_form';
const perPage = 50;
interface Props {
showSaveQuery?: boolean;
loadedSavedQuery?: SavedQuery;
savedQueryService: SavedQueryService;
- onSave: () => void;
- onSaveAsNew: () => void;
- onLoad: (savedQuery: SavedQuery) => void;
+ useNewSavedQueryUI?: boolean;
+ onInitiateSave: () => void;
+ onInitiateSaveAsNew: () => void;
+ onLoad: OpenSavedQueryFlyoutProps['onQueryOpen'];
onClearSavedQuery: () => void;
closeMenuPopover: () => void;
+ saveQuery: (savedQueryMeta: SavedQueryMeta, saveAsNew?: boolean) => Promise;
}
export function SavedQueryManagementComponent({
showSaveQuery,
loadedSavedQuery,
- onSave,
- onSaveAsNew,
+ onInitiateSave,
+ onInitiateSaveAsNew,
onLoad,
onClearSavedQuery,
savedQueryService,
closeMenuPopover,
+ useNewSavedQueryUI,
+ saveQuery,
}: Props) {
const [savedQueries, setSavedQueries] = useState([] as SavedQuery[]);
const [count, setTotalCount] = useState(0);
const [activePage, setActivePage] = useState(0);
const cancelPendingListingRequest = useRef<() => void>(() => {});
+ const {
+ services: { overlays },
+ } = useOpenSearchDashboards();
useEffect(() => {
const fetchCountAndSavedQueries = async () => {
@@ -102,13 +120,13 @@ export function SavedQueryManagementComponent({
const handleSave = useCallback(() => {
handleClosePopover();
- onSave();
- }, [handleClosePopover, onSave]);
+ onInitiateSave();
+ }, [handleClosePopover, onInitiateSave]);
const handleSaveAsNew = useCallback(() => {
handleClosePopover();
- onSaveAsNew();
- }, [handleClosePopover, onSaveAsNew]);
+ onInitiateSaveAsNew();
+ }, [handleClosePopover, onInitiateSaveAsNew]);
const handleSelect = useCallback(
(savedQueryToSelect) => {
@@ -134,10 +152,21 @@ export function SavedQueryManagementComponent({
setActivePage(0);
};
- onDeleteSavedQuery(savedQueryToDelete);
- handleClosePopover();
+ const deletePromise = onDeleteSavedQuery(savedQueryToDelete);
+ if (!useNewSavedQueryUI) {
+ handleClosePopover();
+ }
+
+ return deletePromise;
},
- [handleClosePopover, loadedSavedQuery, onClearSavedQuery, savedQueries, savedQueryService]
+ [
+ handleClosePopover,
+ loadedSavedQuery,
+ onClearSavedQuery,
+ savedQueries,
+ savedQueryService,
+ useNewSavedQueryUI,
+ ]
);
const savedQueryDescriptionText = i18n.translate(
@@ -186,7 +215,55 @@ export function SavedQueryManagementComponent({
));
};
- return (
+ return useNewSavedQueryUI ? (
+
+
+ {
+ closeMenuPopover();
+ const saveQueryFlyout = overlays?.openFlyout(
+ toMountPoint(
+ saveQueryFlyout?.close().then()}
+ onSave={saveQuery}
+ showFilterOption={true}
+ showTimeFilterOption={true}
+ savedQuery={loadedSavedQuery?.attributes}
+ />
+ )
+ );
+ }}
+ />
+ {
+ closeMenuPopover();
+ const openSavedQueryFlyout = overlays?.openFlyout(
+ toMountPoint(
+ openSavedQueryFlyout?.close().then()}
+ onQueryOpen={onLoad}
+ handleQueryDelete={handleDelete}
+ />
+ )
+ );
+ }}
+ />
+
+
+ ) : (
;
@@ -285,10 +286,15 @@ class SearchBarUI extends Component {
public onSave = async (savedQueryMeta: SavedQueryMeta, saveAsNew = false) => {
if (!this.state.query) return;
+ const query = cloneDeep(this.state.query);
+ if (getUseNewSavedQueriesUI() && !savedQueryMeta.shouldIncludeDataSource) {
+ delete query.dataset;
+ }
+
const savedQueryAttributes: SavedQueryAttributes = {
title: savedQueryMeta.title,
description: savedQueryMeta.description,
- query: this.state.query,
+ query,
};
if (savedQueryMeta.shouldIncludeFilters) {
@@ -296,7 +302,7 @@ class SearchBarUI extends Component {
}
if (
- savedQueryMeta.shouldIncludeTimefilter &&
+ savedQueryMeta.shouldIncludeTimeFilter &&
this.state.dateRangeTo !== undefined &&
this.state.dateRangeFrom !== undefined &&
this.props.refreshInterval !== undefined &&
@@ -334,9 +340,15 @@ class SearchBarUI extends Component {
if (this.props.onSaved) {
this.props.onSaved(response);
}
- } catch (error) {
+ } catch (error: any) {
this.services.notifications.toasts.addDanger(
- `An error occured while saving your query: ${error.message}`
+ this.props.intl.formatMessage(
+ {
+ id: 'data.search_bar.save_query.failedToSaveQuery',
+ defaultMessage: 'An error occured while saving your query{errorMessage}',
+ },
+ { errorMessage: error.message ? `: ${error.message}` : '' }
+ )
);
throw error;
}
@@ -447,13 +459,14 @@ class SearchBarUI extends Component {
indexPatterns={this.props.indexPatterns!}
showSaveQuery={this.props.showSaveQuery}
loadedSavedQuery={this.props.savedQuery}
- onSave={this.onInitiateSave}
- onSaveAsNew={this.onInitiateSaveNew}
+ onInitiateSave={this.onInitiateSave}
+ onInitiateSaveAsNew={this.onInitiateSaveNew}
onLoad={this.onLoadSavedQuery}
savedQueryService={this.savedQueryService}
onClearSavedQuery={this.props.onClearSavedQuery}
useSaveQueryMenu={useSaveQueryMenu}
isQueryEditorControl={isQueryEditorControl}
+ saveQuery={this.onSave}
/>
)
);
@@ -569,6 +582,7 @@ class SearchBarUI extends Component {
{this.state.showSaveQueryModal ? (
{
) : null}
{this.state.showSaveNewQueryModal ? (
this.onSave(savedQueryMeta, true)}
onClose={() => this.setState({ showSaveNewQueryModal: false })}
diff --git a/src/plugins/data/server/index.ts b/src/plugins/data/server/index.ts
index 289e390070e..b64c9337258 100644
--- a/src/plugins/data/server/index.ts
+++ b/src/plugins/data/server/index.ts
@@ -306,6 +306,7 @@ export const config: PluginConfigDescriptor = {
enhancements: true,
autocomplete: true,
search: true,
+ savedQueriesNewUI: true,
},
schema: configSchema,
};
diff --git a/src/plugins/data/server/saved_objects/query.ts b/src/plugins/data/server/saved_objects/query.ts
index 1b7b027a612..67b45111a83 100644
--- a/src/plugins/data/server/saved_objects/query.ts
+++ b/src/plugins/data/server/saved_objects/query.ts
@@ -52,8 +52,37 @@ export const querySavedObjectType: SavedObjectsType = {
properties: {
title: { type: 'text' },
description: { type: 'text' },
+ isTemplate: { type: 'boolean' },
query: {
- properties: { language: { type: 'keyword' }, query: { type: 'keyword', index: false } },
+ properties: {
+ language: { type: 'keyword' },
+ query: { type: 'keyword', index: false },
+ dataset: {
+ type: 'object',
+ properties: {
+ id: { type: 'text' },
+ title: { type: 'text' },
+ type: { type: 'text' },
+ timeFieldName: { type: 'text' },
+ language: { type: 'text' },
+ dataSource: {
+ type: 'object',
+ properties: {
+ id: { type: 'text' },
+ title: { type: 'text' },
+ type: { type: 'text' },
+ meta: {
+ type: 'object',
+ properties: {
+ name: { type: 'text' },
+ sessionId: { type: 'text' },
+ },
+ },
+ },
+ },
+ },
+ },
+ },
},
filters: { type: 'object', enabled: false },
timefilter: { type: 'object', enabled: false },