From a10750901857f838b1d92adfd27e4c46e6c7134b Mon Sep 17 00:00:00 2001 From: Amardeepsingh Siglani Date: Tue, 19 Nov 2024 20:50:57 -0800 Subject: [PATCH] Only support copy for query templates (#8899) * only support copy for query templates Signed-off-by: Amardeepsingh Siglani * Changeset file for PR #8899 created/updated * clear selected query on tab change; keep button disabled when query is not selected Signed-off-by: Amardeepsingh Siglani --------- Signed-off-by: Amardeepsingh Siglani Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> --- changelogs/fragments/8899.yml | 2 + .../open_saved_query_flyout.tsx | 78 +++++++++++++------ .../saved_query_management_component.tsx | 3 +- 3 files changed, 58 insertions(+), 25 deletions(-) create mode 100644 changelogs/fragments/8899.yml diff --git a/changelogs/fragments/8899.yml b/changelogs/fragments/8899.yml new file mode 100644 index 000000000000..11030aecb552 --- /dev/null +++ b/changelogs/fragments/8899.yml @@ -0,0 +1,2 @@ +fix: +- Only support copy action for query templates ([#8899](/~https://github.com/opensearch-project/OpenSearch-Dashboards/pull/8899)) \ No newline at end of file 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 index 099f3e1f0420..d9c2941adc8d 100644 --- 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 @@ -21,15 +21,18 @@ import { EuiTablePagination, EuiTitle, Pager, + copyToClipboard, } from '@elastic/eui'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import { i18n } from '@osd/i18n'; +import { NotificationsStart } from 'opensearch-dashboards/public'; import { SavedQuery, SavedQueryService } from '../../query'; import { SavedQueryCard } from './saved_query_card'; import { getQueryService } from '../../services'; export interface OpenSavedQueryFlyoutProps { savedQueryService: SavedQueryService; + notifications?: NotificationsStart; onClose: () => void; onQueryOpen: (query: SavedQuery) => void; handleQueryDelete: (query: SavedQuery) => Promise; @@ -44,13 +47,21 @@ interface SavedQuerySearchableItem { savedQuery: SavedQuery; } +enum OPEN_QUERY_TAB_ID { + SAVED_QUERIES = 'saved-queries', + QUERY_TEMPLATES = 'query-templates', +} + export function OpenSavedQueryFlyout({ savedQueryService, + notifications, onClose, onQueryOpen, handleQueryDelete, }: OpenSavedQueryFlyoutProps) { - const [selectedTabId, setSelectedTabId] = useState('mutable-saved-queries'); + const [selectedTabId, setSelectedTabId] = useState( + OPEN_QUERY_TAB_ID.SAVED_QUERIES + ); const [savedQueries, setSavedQueries] = useState([]); const [hasTemplateQueries, setHasTemplateQueries] = useState(false); const [itemsPerPage, setItemsPerPage] = useState(10); @@ -85,13 +96,13 @@ export function OpenSavedQueryFlyout({ } // Set queries based on the current tab - if (currentTabIdRef.current === 'mutable-saved-queries') { + if (currentTabIdRef.current === OPEN_QUERY_TAB_ID.SAVED_QUERIES) { const allQueries = await savedQueryService.getAllSavedQueries(); const mutableSavedQueries = allQueries.filter((q) => !q.attributes.isTemplate); - if (currentTabIdRef.current === 'mutable-saved-queries') { + if (currentTabIdRef.current === OPEN_QUERY_TAB_ID.SAVED_QUERIES) { setSavedQueries(mutableSavedQueries); } - } else if (currentTabIdRef.current === 'template-saved-queries') { + } else if (currentTabIdRef.current === OPEN_QUERY_TAB_ID.QUERY_TEMPLATES) { setSavedQueries(templateQueries); } } catch (e) { @@ -111,6 +122,7 @@ export function OpenSavedQueryFlyout({ fetchAllSavedQueriesForSelectedTab(); setSearchQuery(EuiSearchBar.Query.MATCH_ALL); updatePageIndex(0); + setSelectedQuery(undefined); }, [selectedTabId, fetchAllSavedQueriesForSelectedTab, updatePageIndex]); useEffect(() => { @@ -261,7 +273,7 @@ export function OpenSavedQueryFlyout({ const tabs = [ { - id: 'mutable-saved-queries', + id: OPEN_QUERY_TAB_ID.SAVED_QUERIES, name: 'Saved queries', content: flyoutBodyContent, }, @@ -269,12 +281,43 @@ export function OpenSavedQueryFlyout({ if (hasTemplateQueries) { tabs.push({ - id: 'template-saved-queries', + id: OPEN_QUERY_TAB_ID.QUERY_TEMPLATES, name: 'Templates', content: flyoutBodyContent, }); } + const onQueryAction = useCallback(() => { + if (!selectedQuery) { + return; + } + + if (selectedQuery?.attributes.isTemplate) { + copyToClipboard(selectedQuery.attributes.query.query as string); + notifications?.toasts.addSuccess({ + title: i18n.translate('data.openSavedQueryFlyout.queryCopied.title', { + defaultMessage: 'Query copied', + }), + text: i18n.translate('data.openSavedQueryFlyout.queryCopied.text', { + defaultMessage: 'Paste the query in the editor to modify and run.', + }), + }); + } else { + onQueryOpen({ + ...selectedQuery, + attributes: { + ...selectedQuery.attributes, + query: { + ...selectedQuery.attributes.query, + dataset: queryStringManager.getQuery().dataset, + }, + }, + }); + } + + onClose(); + }, [onClose, onQueryOpen, notifications, selectedQuery, queryStringManager]); + return ( @@ -287,8 +330,8 @@ export function OpenSavedQueryFlyout({ tabs={tabs} initialSelectedTab={tabs[0]} onTabClick={(tab) => { - setSelectedTabId(tab.id); - currentTabIdRef.current = tab.id; + setSelectedTabId(tab.id as OPEN_QUERY_TAB_ID); + currentTabIdRef.current = tab.id as OPEN_QUERY_TAB_ID; }} /> @@ -303,23 +346,10 @@ export function OpenSavedQueryFlyout({ { - if (selectedQuery) { - onQueryOpen({ - ...selectedQuery, - attributes: { - ...selectedQuery.attributes, - query: { - ...selectedQuery.attributes.query, - dataset: queryStringManager.getQuery().dataset, - }, - }, - }); - onClose(); - } - }} + onClick={onQueryAction} + data-testid="open-query-action-button" > - Open query + {selectedTabId === OPEN_QUERY_TAB_ID.SAVED_QUERIES ? 'Open' : 'Copy'} query 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 01f9b97e978f..94898bfe57a2 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 @@ -89,7 +89,7 @@ export function SavedQueryManagementComponent({ const [activePage, setActivePage] = useState(0); const cancelPendingListingRequest = useRef<() => void>(() => {}); const { - services: { overlays }, + services: { overlays, notifications }, } = useOpenSearchDashboards(); useEffect(() => { @@ -253,6 +253,7 @@ export function SavedQueryManagementComponent({ toMountPoint( openSavedQueryFlyout?.close().then()} onQueryOpen={onLoad} handleQueryDelete={handleDelete}