[Infra Monitoring UI] Change infrastructure pages titles to use breadcrumbs #135874

x-pack/plugins/infra/public/apps/metrics_app.tsx

@@ -45,6 +45,7 @@ export const renderApp = (
   );
 
   return () => {
+    core.chrome.docTitle.reset();
     ReactDOM.unmountComponentAtNode(element);
     plugins.data.search.session.clear();
   };

x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts

@@ -22,7 +22,7 @@ export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: Chrome
   const appLinkProps = useLinkProps({ app });
 
   useEffect(() => {
-    chrome?.setBreadcrumbs?.([
+    const breadcrumbs = [
       {
         ...observabilityLinkProps,
         text: observabilityTitle,
@@ -32,6 +32,11 @@ export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: Chrome
         text: appTitle,
       },
       ...extraCrumbs,
-    ]);
+    ];
+
+    const docTitle = [...breadcrumbs].reverse().map((breadcrumb) => breadcrumb.text as string);
+
+    chrome.docTitle.change(docTitle);
+    chrome.setBreadcrumbs(breadcrumbs);
   }, [appLinkProps, appTitle, chrome, extraCrumbs, observabilityLinkProps]);
 };

x-pack/plugins/infra/public/hooks/use_document_title.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+import { ChromeBreadcrumb } from '@kbn/core/public';
+import { useEffect } from 'react';
+import { observabilityTitle } from '../translations';
+import { useKibanaContextForPlugin } from './use_kibana';
+
+export const useDocumentTitle = (extraTitles: ChromeBreadcrumb[]) => {
+  const {
+    services: { chrome },
+  } = useKibanaContextForPlugin();
+
+  useEffect(() => {
+    const docTitle = [{ text: observabilityTitle }, ...extraTitles]
+      .reverse()
+      .map((breadcrumb) => breadcrumb.text as string);
+
+    chrome.docTitle.change(docTitle);
+  }, [chrome, extraTitles]);
+};

x-pack/plugins/infra/public/pages/logs/page_content.tsx

@@ -12,7 +12,6 @@ import { Route, Switch } from 'react-router-dom';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal, useLinkProps } from '@kbn/observability-plugin/public';
 import { AlertDropdown } from '../../alerting/log_threshold';
-import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
@@ -62,8 +61,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
   return (
     <>
-      <DocumentTitle title={pageTitle} />
-
       <HelpCenterContent feedbackLink={feedbackLinkUrl} appName={pageTitle} />
 
       {setHeaderActionMenu && theme$ && (

x-pack/plugins/infra/public/pages/logs/stream/page.tsx

@@ -10,7 +10,6 @@ import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { StreamPageContent } from './page_content';
-import { StreamPageHeader } from './page_header';
 import { LogsPageProviders } from './page_providers';
 import { streamTitle } from '../../../translations';
 
@@ -26,7 +25,6 @@ export const StreamPage = () => {
   return (
     <EuiErrorBoundary>
       <LogsPageProviders>
-        <StreamPageHeader />
         <StreamPageContent />
       </LogsPageProviders>
     </EuiErrorBoundary>

x-pack/plugins/infra/public/pages/metrics/hosts/index.tsx

@@ -6,13 +6,10 @@
  */
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 
-import { DocumentTitle } from '../../../components/document_title';
-
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
@@ -42,16 +39,6 @@ export const HostsPage = () => {
   ]);
   return (
     <EuiErrorBoundary>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.infrastructureHostsPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Hosts',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {isLoading && !source ? (
         <SourceLoadingPage />
       ) : metricIndicesExist && source ? (

x-pack/plugins/infra/public/pages/metrics/index.tsx

@@ -15,7 +15,6 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { HeaderMenuPortal } from '@kbn/observability-plugin/public';
 import { useLinkProps } from '@kbn/observability-plugin/public';
 import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources';
-import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import {
@@ -73,12 +72,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
             <WaffleTimeProvider>
               <WaffleFiltersProvider>
                 <InfraMLCapabilitiesProvider>
-                  <DocumentTitle
-                    title={i18n.translate('xpack.infra.homePage.documentTitle', {
-                      defaultMessage: 'Metrics',
-                    })}
-                  />
-
                   <HelpCenterContent
                     feedbackLink="https://discuss.elastic.co/c/metrics"
                     appName={i18n.translate('xpack.infra.header.infrastructureHelpAppName', {

x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx

@@ -6,14 +6,10 @@
  */
 
 import { EuiErrorBoundary } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '@kbn/observability-plugin/public';
 import { APP_WRAPPER_CLASS } from '@kbn/core/public';
 import { FilterBar } from './components/filter_bar';
-
-import { DocumentTitle } from '../../../components/document_title';
-
 import { SourceErrorPage } from '../../../components/source_error_page';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useSourceContext } from '../../../containers/metrics_source';
@@ -49,16 +45,6 @@ export const SnapshotPage = () => {
 
   return (
     <EuiErrorBoundary>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.infrastructureSnapshotPage.documentTitle', {
-            defaultMessage: '{previousTitle} | Inventory',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {isLoading && !source ? (
         <SourceLoadingPage />
       ) : metricIndicesExist ? (

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/page_error.test.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { PageError } from './page_error';
+import { errorTitle } from '../../../../translations';
+import { InfraHttpError } from '../../../../types';
+import { useDocumentTitle } from '../../../../hooks/use_document_title';
+import { I18nProvider } from '@kbn/i18n-react';
+
+jest.mock('../../../../hooks/use_document_title', () => ({
+  useDocumentTitle: jest.fn(),
+}));
+
+const renderErrorPage = () =>
+  render(
+    <I18nProvider>
+      <PageError
+        name={'test'}
+        error={
+          {
+            body: {
+              statusCode: 500,
+              message: 'Error Message',
+            },
+            message: 'Error Message',
+          } as InfraHttpError
+        }
+      />
+    </I18nProvider>
+  );
+
+describe('PageError component', () => {
+  it('renders correctly and set title', () => {
+    const { getByText } = renderErrorPage();
+    expect(useDocumentTitle).toHaveBeenCalledWith([{ text: `${errorTitle}` }]);
+
+    expect(getByText('Error Message')).toBeInTheDocument();
+    expect(getByText('Please click the back button and try again.')).toBeInTheDocument();
+  });
+});

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/page_error.tsx

@@ -6,30 +6,22 @@
  */
 
 import React from 'react';
-import { i18n } from '@kbn/i18n';
+import { useDocumentTitle } from '../../../../hooks/use_document_title';
 import { InvalidNodeError } from './invalid_node';
-import { DocumentTitle } from '../../../../components/document_title';
 import { ErrorPageBody } from '../../../error';
 import { InfraHttpError } from '../../../../types';
+import { errorTitle } from '../../../../translations';
 
 interface Props {
   name: string;
   error: InfraHttpError;
 }
 
 export const PageError = ({ error, name }: Props) => {
+  useDocumentTitle([{ text: errorTitle }]);
+
   return (
     <>
-      <DocumentTitle
-        title={(previousTitle: string) =>
-          i18n.translate('xpack.infra.metricDetailPage.documentTitleError', {
-            defaultMessage: '{previousTitle} | Uh oh',
-            values: {
-              previousTitle,
-            },
-          })
-        }
-      />
       {error.body?.statusCode === 404 ? (
         <InvalidNodeError nodeName={name} />
       ) : (

x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx

@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import React, { useState } from 'react';
 import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common';
 import { useLinkProps } from '@kbn/observability-plugin/public';
-import { DocumentTitle } from '../../../components/document_title';
 import { withMetricPageProviders } from './page_providers';
 import { useMetadata } from './hooks/use_metadata';
 import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
@@ -100,14 +99,6 @@ export const MetricDetail = withMetricPageProviders(
 
     return (
       <>
-        <DocumentTitle
-          title={i18n.translate('xpack.infra.metricDetailPage.documentTitle', {
-            defaultMessage: 'Infrastructure | Metrics | {name}',
-            values: {
-              name,
-            },
-          })}
-        />
         {metadata ? (
           <NodeDetailsPage
             name={name}