Fixed Alert details does not update page title and breadcrumb (#74214) (

#74612) * Fixed Alert details does not update page title and breadcrumb * Added alert name to details breadcrumb as a dynamic title * Update x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> Co-authored-by: Mike Côté <mikecote@users.noreply.github.com> # Conflicts: # x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
elastic · Aug 10, 2020 · 0a5cc09 · 0a5cc09
1 parent 9ac2084
commit 0a5cc09
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 10 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/home.tsx b/x-pack/plugins/triggers_actions_ui/public/application/home.tsx
@@ -22,7 +22,7 @@ import {
 
 import { i18n } from '@kbn/i18n';
 import { Section, routeToConnectors, routeToAlerts } from './constants';
-import { getCurrentBreadcrumb } from './lib/breadcrumb';
+import { getAlertingSectionBreadcrumb } from './lib/breadcrumb';
 import { getCurrentDocTitle } from './lib/doc_title';
 import { useAppDependencies } from './app_context';
 import { hasShowActionsCapability, hasShowAlertsCapability } from './lib/capabilities';
@@ -81,7 +81,7 @@ export const TriggersActionsUIHome: React.FunctionComponent<RouteComponentProps<
 
   // Set breadcrumb and page title
   useEffect(() => {
-    setBreadcrumbs([getCurrentBreadcrumb(section || 'home')]);
+    setBreadcrumbs([getAlertingSectionBreadcrumb(section || 'home')]);
     chrome.docTitle.change(getCurrentDocTitle(section || 'home'));
   }, [section, chrome, setBreadcrumbs]);
 

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.test.ts
@@ -3,29 +3,40 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { getCurrentBreadcrumb } from './breadcrumb';
+import { getAlertingSectionBreadcrumb, getAlertDetailsBreadcrumb } from './breadcrumb';
 import { i18n } from '@kbn/i18n';
 import { routeToConnectors, routeToAlerts, routeToHome } from '../constants';
 
-describe('getCurrentBreadcrumb', () => {
+describe('getAlertingSectionBreadcrumb', () => {
   test('if change calls return proper breadcrumb title ', async () => {
-    expect(getCurrentBreadcrumb('connectors')).toMatchObject({
+    expect(getAlertingSectionBreadcrumb('connectors')).toMatchObject({
       text: i18n.translate('xpack.triggersActionsUI.connectors.breadcrumbTitle', {
         defaultMessage: 'Connectors',
       }),
       href: `${routeToConnectors}`,
     });
-    expect(getCurrentBreadcrumb('alerts')).toMatchObject({
+    expect(getAlertingSectionBreadcrumb('alerts')).toMatchObject({
       text: i18n.translate('xpack.triggersActionsUI.alerts.breadcrumbTitle', {
         defaultMessage: 'Alerts',
       }),
       href: `${routeToAlerts}`,
     });
-    expect(getCurrentBreadcrumb('home')).toMatchObject({
+    expect(getAlertingSectionBreadcrumb('home')).toMatchObject({
       text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', {
         defaultMessage: 'Alerts and Actions',
       }),
       href: `${routeToHome}`,
     });
   });
 });
+
+describe('getAlertDetailsBreadcrumb', () => {
+  test('if select an alert should return proper breadcrumb title with alert name ', async () => {
+    expect(getAlertDetailsBreadcrumb('testId', 'testName')).toMatchObject({
+      text: i18n.translate('xpack.triggersActionsUI.alertDetails.breadcrumbTitle', {
+        defaultMessage: 'testName',
+      }),
+      href: '/alert/testId',
+    });
+  });
+});
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts b/x-pack/plugins/triggers_actions_ui/public/application/lib/breadcrumb.ts
@@ -5,9 +5,9 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { routeToHome, routeToConnectors, routeToAlerts } from '../constants';
+import { routeToHome, routeToConnectors, routeToAlerts, routeToAlertDetails } from '../constants';
 
-export const getCurrentBreadcrumb = (type: string): { text: string; href: string } => {
+export const getAlertingSectionBreadcrumb = (type: string): { text: string; href: string } => {
   // Home and sections
   switch (type) {
     case 'connectors':
@@ -33,3 +33,13 @@ export const getCurrentBreadcrumb = (type: string): { text: string; href: string
       };
   }
 };
+
+export const getAlertDetailsBreadcrumb = (
+  id: string,
+  name: string
+): { text: string; href: string } => {
+  return {
+    text: name,
+    href: `${routeToAlertDetails.replace(':alertId', id)}`,
+  };
+};
diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, Fragment } from 'react';
+import React, { useState, Fragment, useEffect } from 'react';
 import { keyBy } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import {
@@ -29,6 +29,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { useAppDependencies } from '../../../app_context';
 import { hasSaveAlertsCapability } from '../../../lib/capabilities';
+import { getAlertingSectionBreadcrumb, getAlertDetailsBreadcrumb } from '../../../lib/breadcrumb';
+import { getCurrentDocTitle } from '../../../lib/doc_title';
 import { Alert, AlertType, ActionType } from '../../../../types';
 import {
   ComponentOpts as BulkOperationsComponentOpts,
@@ -69,8 +71,20 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
     docLinks,
     charts,
     dataPlugin,
+    setBreadcrumbs,
+    chrome,
   } = useAppDependencies();
 
+  // Set breadcrumb and page title
+  useEffect(() => {
+    setBreadcrumbs([
+      getAlertingSectionBreadcrumb('alerts'),
+      getAlertDetailsBreadcrumb(alert.id, alert.name),
+    ]);
+    chrome.docTitle.change(getCurrentDocTitle('alerts'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const canSave = hasSaveAlertsCapability(capabilities);
   const actionTypesByTypeId = keyBy(actionTypes, 'id');
   const hasEditButton =