[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)](https://github.com/elastic/kibana/pull/209574)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Efe Gürkan YALAMAN <efeguerkan.yalaman@elastic.co>
2025-04-24 09:48:58 -04:00 · 2025-02-12 06:46:26 +11:00 · 2025-02-12 06:46:26 +11:00 · 32a3b225e7
commit 32a3b225e7
parent b28c80e5f6
9 changed files with 51 additions and 10 deletions
--- 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';
--- 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"
--- a/x-pack/solutions/search/plugins/search_synonyms/public/components/synonyms_set_detail/synonyms_set_detail.tsx
+++ b/x-pack/solutions/search/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={() => {
--- 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',
--- 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',
--- 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}`
--- 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}`,
--- 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,
--- 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',