[8.x] [Fix][Synonyms UI]Add navigation link to the Detail breadcrumb. (…

…#209574) (#210670) # Backport This will backport the following commits from `main` to `8.x`: - [[Fix][Synonyms UI]Add navigation link to the Detail breadcrumb. (#209574)](#209574)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Efe Gürkan YALAMAN <[email protected]>
elastic · Feb 11, 2025 · 32a3b22 · 32a3b22
1 parent b28c80e
commit 32a3b22
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 10 deletions.
diff --git a/x-pack/solutions/search/plugins/search_synonyms/common/constants.ts 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
@@ -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={[
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem grow={false}>
-              <EuiLink data-test-subj="searchSynonymsSearchSynonymsOverviewApiDocumentationLink">
+              <EuiLink
+                data-test-subj="searchSynonymsSearchSynonymsOverviewApiDocumentationLink"
+                external
+                target="_blank"
+                href={docLinks.synonymsApi}
+              >
                 <FormattedMessage
                   id="xpack.searchSynonyms.synonymsSetDetail.documentationLink"
                   defaultMessage="API Documentation"

diff --git a/...rch/plugins/search_synonyms/public/components/synonyms_set_detail/synonyms_set_detail.tsx b/...rch/plugins/search_synonyms/public/components/synonyms_set_detail/synonyms_set_detail.tsx
@@ -8,6 +8,8 @@
 import { useParams } from 'react-router-dom';
 import React, { useMemo } from 'react';
 import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { i18n } from '@kbn/i18n';
+import { PLUGIN_ROUTE_ROOT } from '../../../common/api_routes';
 import { useKibana } from '../../hooks/use_kibana';
 import { SynonymsSetRuleTable } from './synonyms_set_rule_table';
 import { ConnectToApiButton } from '../connect_to_api/connect_to_api_button';
@@ -18,7 +20,7 @@ export const SynonymsSetDetail = () => {
     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={[
           <ConnectToApiButton
             onClick={() => {

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
@@ -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
@@ -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
@@ -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<SynonymsSynonymRule>(
         `/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
@@ -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<Paginate<SynonymsSynonymRule> & { 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
@@ -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<Paginate<SynonymsGetSynonymsSetsSynonymsSetItem>>(
         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
@@ -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',