Merge pull request #11913 from keithjgrant/9041-page-titles

display current page name in document title

awx/ui/src/App.js

@@ -27,7 +27,7 @@ import { isAuthenticated } from 'util/auth';
 import { getLanguageWithoutRegionCode } from 'util/language';
 import Metrics from 'screens/Metrics';
 import SubscriptionEdit from 'screens/Setting/Subscription/SubscriptionEdit';
-import { RootAPI } from 'api';
+import useTitle from 'hooks/useTitle';
 import { dynamicActivate, locales } from './i18nLoader';
 import getRouteConfig from './routeConfig';
 import { SESSION_REDIRECT_URL } from './constants';
@@ -150,16 +150,7 @@ function App() {
     dynamicActivate(language);
   }, [language]);
 
-  useEffect(() => {
-    async function fetchBrandName() {
-      const {
-        data: { BRAND_NAME },
-      } = await RootAPI.readAssetVariables();
-
-      document.title = BRAND_NAME;
-    }
-    fetchBrandName();
-  }, []);
+  useTitle();
 
   const redirectURL = window.sessionStorage.getItem(SESSION_REDIRECT_URL);
   if (redirectURL) {

awx/ui/src/components/ScreenHeader/ScreenHeader.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import useTitle from 'hooks/useTitle';
 
 import { t } from '@lingui/macro';
 import {
@@ -12,7 +13,7 @@ import {
   Tooltip,
 } from '@patternfly/react-core';
 import { HistoryIcon } from '@patternfly/react-icons';
-import { Link, Route, useRouteMatch } from 'react-router-dom';
+import { Link, Route, useRouteMatch, useLocation } from 'react-router-dom';
 
 const ScreenHeader = ({ breadcrumbConfig, streamType }) => {
   const { light } = PageSectionVariants;
@@ -20,6 +21,16 @@ const ScreenHeader = ({ breadcrumbConfig, streamType }) => {
     path: Object.keys(breadcrumbConfig)[0],
     strict: true,
   });
+
+  const location = useLocation();
+  const parts = location.pathname.split('/');
+  if (parts.length > 2) {
+    parts.pop();
+  }
+
+  const pathTitle = breadcrumbConfig[parts.join('/')];
+  useTitle(pathTitle);
+
   const isOnlyOneCrumb = oneCrumbMatch && oneCrumbMatch.isExact;
 
   return (

awx/ui/src/hooks/useTitle.js

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+import useBrandName from './useBrandName';
+
+export default function useTitle(title) {
+  const brandName = useBrandName();
+
+  useEffect(() => {
+    const prevTitle = document.title;
+    if (title) {
+      document.title = `${brandName} | ${title}`;
+    } else {
+      document.title = brandName;
+    }
+
+    return () => {
+      document.title = prevTitle;
+    };
+  }, [title, brandName]);
+}

awx/ui/src/screens/ActivityStream/ActivityStream.js

@@ -20,6 +20,7 @@ import PaginatedTable, {
   getSearchableKeys,
 } from 'components/PaginatedTable';
 import useRequest from 'hooks/useRequest';
+import useTitle from 'hooks/useTitle';
 import { getQSConfig, parseQueryString, updateQueryString } from 'util/qs';
 import { ActivityStreamAPI } from 'api';
 
@@ -31,6 +32,7 @@ function ActivityStream() {
   const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
   const location = useLocation();
   const history = useHistory();
+  useTitle(t`Activity Stream`);
   const urlParams = new URLSearchParams(location.search);
 
   const activityStreamType = urlParams.get('type') || 'all';

awx/ui/src/setupTests.js

@@ -61,6 +61,7 @@ jest.mock('axios', () => ({
     },
   }),
 }));
+jest.mock('hooks/useTitle');
 
 afterEach(() => {
   if (networkRequestUrl) {