Fixed Alert details does not update page title and breadcrumb

elastic · Aug 4, 2020 · a1bcd1e · a1bcd1e
1 parent 3cce216
commit a1bcd1e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
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,7 +5,7 @@
  */
 
 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 } => {
   // Home and sections
@@ -24,6 +24,13 @@ export const getCurrentBreadcrumb = (type: string): { text: string; href: string
         }),
         href: `${routeToAlerts}`,
       };
+    case 'alertDetails':
+      return {
+        text: i18n.translate('xpack.triggersActionsUI.alertDetails.breadcrumbTitle', {
+          defaultMessage: 'Alert Details',
+        }),
+        href: `${routeToAlertDetails}`,
+      };
     default:
       return {
         text: i18n.translate('xpack.triggersActionsUI.home.breadcrumbTitle', {

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 { hasAllPrivilege, hasExecuteActionsCapability } from '../../../lib/capabilities';
+import { getCurrentBreadcrumb } from '../../../lib/breadcrumb';
+import { getCurrentDocTitle } from '../../../lib/doc_title';
 import { Alert, AlertType, ActionType } from '../../../../types';
 import {
   ComponentOpts as BulkOperationsComponentOpts,
@@ -69,8 +71,17 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
     docLinks,
     charts,
     dataPlugin,
+    setBreadcrumbs,
+    chrome,
   } = useAppDependencies();
 
+  // Set breadcrumb and page title
+  useEffect(() => {
+    setBreadcrumbs([getCurrentBreadcrumb('alertDetails')]);
+    chrome.docTitle.change(getCurrentDocTitle('alertDetails'));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const canExecuteActions = hasExecuteActionsCapability(capabilities);
   const canSaveAlert =
     hasAllPrivilege(alert, alertType) &&