From 0494791ef508db0f73a603704bfa1eb440aeea17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Efe=20G=C3=BCrkan=20YALAMAN?= Date: Tue, 11 Feb 2025 18:57:11 +0100 Subject: [PATCH] [Fix][Synonyms UI]Add navigation link to the Detail breadcrumb. (#209574) ## Summary Screenshot 2025-02-04 at 18 18 12 Adds navigation link to move back to synonyms set list. Fixes missing invalidation when a synonym rule is set. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) (cherry picked from commit cce32a9474d6ac41cf18d8f7503ea274e6b5baf6) --- .../search_synonyms/common/constants.ts | 9 ++++++++ .../public/components/overview/overview.tsx | 8 ++++++- .../synonyms_set_detail.tsx | 21 ++++++++++++++++++- .../public/hooks/use_delete_synonym_rule.ts | 6 ++++-- .../public/hooks/use_delete_synonyms_set.ts | 3 ++- .../public/hooks/use_fetch_synonym_rule.ts | 3 ++- .../public/hooks/use_fetch_synonyms_set.ts | 3 ++- .../public/hooks/use_fetch_synonyms_sets.ts | 3 ++- .../public/hooks/use_put_synonyms_set.ts | 5 +++-- 9 files changed, 51 insertions(+), 10 deletions(-) create mode 100644 x-pack/solutions/search/plugins/search_synonyms/common/constants.ts diff --git a/x-pack/solutions/search/plugins/search_synonyms/common/constants.ts b/x-pack/solutions/search/plugins/search_synonyms/common/constants.ts new file mode 100644 index 0000000000000..d7e53c3e7efaf --- /dev/null +++ b/x-pack/solutions/search/plugins/search_synonyms/common/constants.ts @@ -0,0 +1,9 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +export const SYNONYMS_RULE_FETCH_QUERY_KEY = 'synonyms-rule-fetch'; +export const SYNONYMS_SETS_QUERY_KEY = 'synonyms-sets-fetch'; diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx b/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx index fe96423e7bfe2..3dfd1bc9da4e8 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx +++ b/x-pack/solutions/search/plugins/search_synonyms/public/components/overview/overview.tsx @@ -17,6 +17,7 @@ import { EuiText, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { docLinks } from '../../../common/doc_links'; import { useKibana } from '../../hooks/use_kibana'; import { SynonymSets } from '../synonym_sets/synonym_sets'; import { useFetchSynonymsSets } from '../../hooks/use_fetch_synonyms_sets'; @@ -50,7 +51,12 @@ export const SearchSynonymsOverview = () => { rightSideItems={[ - + { synonymsSetId?: string; }>(); const { - services: { console: consolePlugin, history, searchNavigation }, + services: { console: consolePlugin, history, searchNavigation, http, application }, } = useKibana(); const embeddableConsole = useMemo( @@ -40,6 +42,23 @@ export const SynonymsSetDetail = () => { pageTitle={synonymsSetId} restrictWidth color="primary" + breadcrumbs={[ + { + text: ( + <> + {i18n.translate('xpack.searchSynonyms.viewAll', { + defaultMessage: 'View all', + })} + + ), + color: 'primary', + 'aria-current': false, + onClick: (e) => { + e.preventDefault(); + application.navigateToUrl(http.basePath.prepend(PLUGIN_ROUTE_ROOT)); + }, + }, + ]} rightSideItems={[ { diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonym_rule.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonym_rule.ts index 58953af668f1e..4a6d75745b831 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonym_rule.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonym_rule.ts @@ -8,6 +8,7 @@ import { useQueryClient, useMutation } from '@tanstack/react-query'; import { i18n } from '@kbn/i18n'; import { KibanaServerError } from '@kbn/kibana-utils-plugin/common'; +import { SYNONYMS_RULE_FETCH_QUERY_KEY, SYNONYMS_SETS_QUERY_KEY } from '../../common/constants'; import { useKibana } from './use_kibana'; interface MutationArgs { @@ -28,8 +29,9 @@ export const useDeleteSynonymRule = (onSuccess?: () => void, onError?: (error: s ); }, { - onSuccess: (_, { synonymsSetId, ruleId }) => { - queryClient.invalidateQueries(['synonyms-rule-delete', synonymsSetId, ruleId]); + onSuccess: (_, { ruleId }) => { + queryClient.invalidateQueries([SYNONYMS_RULE_FETCH_QUERY_KEY]); + queryClient.invalidateQueries([SYNONYMS_SETS_QUERY_KEY]); notifications?.toasts?.addSuccess({ title: i18n.translate('xpack.searchSynonyms.deleteSynonymRuleSuccess', { defaultMessage: 'Synonym rule {ruleId} deleted', diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonyms_set.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonyms_set.ts index f29da4ea5fb82..87e8af15baa5a 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonyms_set.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_delete_synonyms_set.ts @@ -8,6 +8,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { i18n } from '@kbn/i18n'; import { KibanaServerError } from '@kbn/kibana-utils-plugin/common'; +import { SYNONYMS_SETS_QUERY_KEY } from '../../common/constants'; import { useKibana } from './use_kibana'; interface MutationArgs { @@ -28,7 +29,7 @@ export const useDeleteSynonymsSet = (onSuccess?: () => void, onError?: (error: s }, { onSuccess: (_, { synonymsSetId }) => { - queryClient.invalidateQueries(['synonyms-sets-fetch']); + queryClient.invalidateQueries([SYNONYMS_SETS_QUERY_KEY]); notifications?.toasts?.addSuccess({ title: i18n.translate('xpack.searchSynonyms.deleteSynonymsSetSuccess', { defaultMessage: 'Synonyms set {synonymsSetId} deleted', diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonym_rule.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonym_rule.ts index 551c622e95a5e..0e223113dc819 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonym_rule.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonym_rule.ts @@ -7,6 +7,7 @@ import { SynonymsSynonymRule } from '@elastic/elasticsearch/lib/api/types'; import { useQuery } from '@tanstack/react-query'; +import { SYNONYMS_RULE_FETCH_QUERY_KEY } from '../../common/constants'; import { useKibana } from './use_kibana'; export const useFetchSynonymRule = (synonymsSetId: string, ruleId: string) => { @@ -15,7 +16,7 @@ export const useFetchSynonymRule = (synonymsSetId: string, ruleId: string) => { } = useKibana(); return useQuery({ - queryKey: ['synonyms-rule-fetch', synonymsSetId, ruleId], + queryKey: [SYNONYMS_RULE_FETCH_QUERY_KEY, synonymsSetId, ruleId], queryFn: async () => { return await http.get( `/internal/search_synonyms/synonyms/${synonymsSetId}/${ruleId}` diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_set.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_set.ts index bcf25ff99760f..5dc114fbaf277 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_set.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_set.ts @@ -7,6 +7,7 @@ import { SynonymsSynonymRule } from '@elastic/elasticsearch/lib/api/types'; import { useQuery } from '@tanstack/react-query'; +import { SYNONYMS_SETS_QUERY_KEY } from '../../common/constants'; import { DEFAULT_PAGE_VALUE, Page, Paginate } from '../../common/pagination'; import { useKibana } from './use_kibana'; @@ -15,7 +16,7 @@ export const useFetchSynonymsSet = (synonymsSetId: string, page: Page = DEFAULT_ services: { http }, } = useKibana(); return useQuery({ - queryKey: ['synonyms-sets-fetch', synonymsSetId, page.from, page.size], + queryKey: [SYNONYMS_SETS_QUERY_KEY, synonymsSetId, page.from, page.size], queryFn: async () => { return await http.get & { id: string }>( `/internal/search_synonyms/synonyms/${synonymsSetId}`, diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts index b2bd6dbd71788..79c42d852526a 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_fetch_synonyms_sets.ts @@ -7,6 +7,7 @@ import { useQuery } from '@tanstack/react-query'; import type { SynonymsGetSynonymsSetsSynonymsSetItem } from '@elastic/elasticsearch/lib/api/types'; +import { SYNONYMS_SETS_QUERY_KEY } from '../../common/constants'; import { DEFAULT_PAGE_VALUE, Page, Paginate } from '../../common/pagination'; import { APIRoutes } from '../../common/api_routes'; import { useKibana } from './use_kibana'; @@ -16,7 +17,7 @@ export const useFetchSynonymsSets = (page: Page = DEFAULT_PAGE_VALUE) => { services: { http }, } = useKibana(); return useQuery({ - queryKey: ['synonyms-sets-fetch', page.from, page.size], + queryKey: [SYNONYMS_SETS_QUERY_KEY, page.from, page.size], queryFn: async () => { return await http.get>( APIRoutes.SYNONYM_SETS, diff --git a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_put_synonyms_set.ts b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_put_synonyms_set.ts index b8f8bce85db21..dde3407d47cd0 100644 --- a/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_put_synonyms_set.ts +++ b/x-pack/solutions/search/plugins/search_synonyms/public/hooks/use_put_synonyms_set.ts @@ -9,6 +9,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'; import { SynonymsPutSynonymResponse } from '@elastic/elasticsearch/lib/api/types'; import { i18n } from '@kbn/i18n'; import { KibanaServerError } from '@kbn/kibana-utils-plugin/common'; +import { SYNONYMS_RULE_FETCH_QUERY_KEY, SYNONYMS_SETS_QUERY_KEY } from '../../common/constants'; import { PLUGIN_ROUTE_ROOT } from '../../common/api_routes'; import { useKibana } from './use_kibana'; @@ -30,8 +31,8 @@ export const usePutSynonymsSet = (onSuccess?: () => void, onError?: (error: stri }, { onSuccess: (_, { synonymsSetId }) => { - queryClient.invalidateQueries(['synonyms-sets-fetch']); - queryClient.invalidateQueries(['synonyms-rule-fetch']); + queryClient.invalidateQueries([SYNONYMS_RULE_FETCH_QUERY_KEY]); + queryClient.invalidateQueries([SYNONYMS_SETS_QUERY_KEY]); notifications?.toasts?.addSuccess({ title: i18n.translate('xpack.searchSynonyms.putSynonymsSetSuccess', { defaultMessage: 'Synonyms set added',