Merge pull request #9083 from jlmitch5/actStream

Update Breadcrumbs/Add Activity Stream UI

Reviewed-by: John Hill <johill@redhat.com>
             https://github.com/unlikelyzero

awx/ui_next/src/api/index.js

@@ -1,3 +1,4 @@
+import ActivityStream from './models/ActivityStream';
 import AdHocCommands from './models/AdHocCommands';
 import Applications from './models/Applications';
 import Auth from './models/Auth';
@@ -39,6 +40,7 @@ import WorkflowJobTemplateNodes from './models/WorkflowJobTemplateNodes';
 import WorkflowJobTemplates from './models/WorkflowJobTemplates';
 import WorkflowJobs from './models/WorkflowJobs';
 
+const ActivityStreamAPI = new ActivityStream();
 const AdHocCommandsAPI = new AdHocCommands();
 const ApplicationsAPI = new Applications();
 const AuthAPI = new Auth();
@@ -81,6 +83,7 @@ const WorkflowJobTemplatesAPI = new WorkflowJobTemplates();
 const WorkflowJobsAPI = new WorkflowJobs();
 
 export {
+  ActivityStreamAPI,
   AdHocCommandsAPI,
   ApplicationsAPI,
   AuthAPI,

awx/ui_next/src/api/models/ActivityStream.js

@@ -0,0 +1,10 @@
+import Base from '../Base';
+
+class ActivityStream extends Base {
+  constructor(http) {
+    super(http);
+    this.baseUrl = '/api/v2/activity_stream/';
+  }
+}
+
+export default ActivityStream;

awx/ui_next/src/components/Breadcrumbs/Breadcrumbs.jsx

@@ -1,73 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import {
-  PageSection as PFPageSection,
-  PageSectionVariants,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbHeading,
-} from '@patternfly/react-core';
-import { Link, Route, useRouteMatch } from 'react-router-dom';
-
-import styled from 'styled-components';
-
-const PageSection = styled(PFPageSection)`
-  padding-top: 10px;
-  padding-bottom: 10px;
-`;
-
-const Breadcrumbs = ({ breadcrumbConfig }) => {
-  const { light } = PageSectionVariants;
-
-  return (
-    <PageSection variant={light}>
-      <Breadcrumb>
-        <Route path="/:path">
-          <Crumb breadcrumbConfig={breadcrumbConfig} />
-        </Route>
-      </Breadcrumb>
-    </PageSection>
-  );
-};
-
-const Crumb = ({ breadcrumbConfig, showDivider }) => {
-  const match = useRouteMatch();
-  const crumb = breadcrumbConfig[match.url];
-
-  let crumbElement = (
-    <BreadcrumbItem key={match.url} showDivider={showDivider}>
-      <Link to={match.url}>{crumb}</Link>
-    </BreadcrumbItem>
-  );
-
-  if (match.isExact) {
-    crumbElement = (
-      <BreadcrumbHeading key="breadcrumb-heading" showDivider={showDivider}>
-        {crumb}
-      </BreadcrumbHeading>
-    );
-  }
-
-  if (!crumb) {
-    crumbElement = null;
-  }
-
-  return (
-    <Fragment>
-      {crumbElement}
-      <Route path={`${match.url}/:path`}>
-        <Crumb breadcrumbConfig={breadcrumbConfig} showDivider />
-      </Route>
-    </Fragment>
-  );
-};
-
-Breadcrumbs.propTypes = {
-  breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
-};
-
-Crumb.propTypes = {
-  breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
-};
-
-export default Breadcrumbs;

awx/ui_next/src/components/Breadcrumbs/index.js

@@ -1 +0,0 @@
-export { default } from './Breadcrumbs';

awx/ui_next/src/components/ListHeader/ListHeader.jsx

@@ -85,7 +85,12 @@ class ListHeader extends React.Component {
   pushHistoryState(params) {
     const { history, qsConfig } = this.props;
     const { pathname } = history.location;
-    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    const nonNamespacedParams = parseQueryString({}, history.location.search);
+    const encodedParams = encodeNonDefaultQueryString(
+      qsConfig,
+      params,
+      nonNamespacedParams
+    );
     history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
   }
 

awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx

@@ -61,7 +61,12 @@ function PaginatedDataList({
   };
 
   const pushHistoryState = params => {
-    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    const nonNamespacedParams = parseQueryString({}, history.location.search);
+    const encodedParams = encodeNonDefaultQueryString(
+      qsConfig,
+      params,
+      nonNamespacedParams
+    );
     history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
   };
 

awx/ui_next/src/components/PaginatedTable/HeaderRow.jsx

@@ -23,7 +23,12 @@ export default function HeaderRow({ qsConfig, children }) {
       order_by: order === 'asc' ? key : `-${key}`,
       page: null,
     });
-    const encodedParams = encodeNonDefaultQueryString(qsConfig, newParams);
+    const nonNamespacedParams = parseQueryString({}, history.location.search);
+    const encodedParams = encodeNonDefaultQueryString(
+      qsConfig,
+      newParams,
+      nonNamespacedParams
+    );
     history.push(
       encodedParams
         ? `${location.pathname}?${encodedParams}`

awx/ui_next/src/components/PaginatedTable/PaginatedTable.jsx

@@ -40,8 +40,13 @@ function PaginatedTable({
   const history = useHistory();
 
   const pushHistoryState = params => {
-    const { pathname } = history.location;
+    const { pathname, search } = history.location;
-    const encodedParams = encodeNonDefaultQueryString(qsConfig, params);
+    const nonNamespacedParams = parseQueryString({}, search);
+    const encodedParams = encodeNonDefaultQueryString(
+      qsConfig,
+      params,
+      nonNamespacedParams
+    );
     history.push(encodedParams ? `${pathname}?${encodedParams}` : pathname);
   };
 

awx/ui_next/src/components/ScreenHeader/ScreenHeader.jsx

@@ -0,0 +1,135 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Button,
+  PageSection,
+  PageSectionVariants,
+  Breadcrumb,
+  BreadcrumbItem,
+  Title,
+  Tooltip,
+} from '@patternfly/react-core';
+import { HistoryIcon } from '@patternfly/react-icons';
+import { Link, Route, useRouteMatch } from 'react-router-dom';
+
+const ScreenHeader = ({ breadcrumbConfig, i18n, streamType }) => {
+  const { light } = PageSectionVariants;
+  const oneCrumbMatch = useRouteMatch({
+    path: Object.keys(breadcrumbConfig)[0],
+    strict: true,
+  });
+  const isOnlyOneCrumb = oneCrumbMatch && oneCrumbMatch.isExact;
+
+  return (
+    <PageSection variant={light}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}
+      >
+        <div>
+          {!isOnlyOneCrumb && (
+            <Breadcrumb>
+              <Route path="/:path">
+                <Crumb breadcrumbConfig={breadcrumbConfig} />
+              </Route>
+            </Breadcrumb>
+          )}
+          <div
+            style={{
+              minHeight: '31px',
+            }}
+          >
+            <Route path="/:path">
+              <ActualTitle breadcrumbConfig={breadcrumbConfig} />
+            </Route>
+          </div>
+        </div>
+        {streamType !== 'none' && (
+          <div>
+            <Tooltip content={i18n._(t`View activity stream`)} position="top">
+              <Button
+                aria-label={i18n._(t`View activity stream`)}
+                variant="plain"
+                component={Link}
+                to={`/activity_stream${
+                  streamType ? `?type=${streamType}` : ''
+                }`}
+              >
+                <HistoryIcon />
+              </Button>
+            </Tooltip>
+          </div>
+        )}
+      </div>
+    </PageSection>
+  );
+};
+
+const ActualTitle = ({ breadcrumbConfig }) => {
+  const match = useRouteMatch();
+  const title = breadcrumbConfig[match.url];
+  let titleElement;
+
+  if (match.isExact) {
+    titleElement = (
+      <Title size="2xl" headingLevel="h2">
+        {title}
+      </Title>
+    );
+  }
+
+  if (!title) {
+    titleElement = null;
+  }
+
+  return (
+    <Fragment>
+      {titleElement}
+      <Route path={`${match.url}/:path`}>
+        <ActualTitle breadcrumbConfig={breadcrumbConfig} />
+      </Route>
+    </Fragment>
+  );
+};
+
+const Crumb = ({ breadcrumbConfig, showDivider }) => {
+  const match = useRouteMatch();
+  const crumb = breadcrumbConfig[match.url];
+
+  let crumbElement = (
+    <BreadcrumbItem key={match.url} showDivider={showDivider}>
+      <Link to={match.url}>{crumb}</Link>
+    </BreadcrumbItem>
+  );
+
+  if (match.isExact) {
+    crumbElement = null;
+  }
+
+  if (!crumb) {
+    crumbElement = null;
+  }
+  return (
+    <Fragment>
+      {crumbElement}
+      <Route path={`${match.url}/:path`}>
+        <Crumb breadcrumbConfig={breadcrumbConfig} showDivider />
+      </Route>
+    </Fragment>
+  );
+};
+
+ScreenHeader.propTypes = {
+  breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+Crumb.propTypes = {
+  breadcrumbConfig: PropTypes.objectOf(PropTypes.string).isRequired,
+};
+
+export default withI18n()(ScreenHeader);

awx/ui_next/src/components/ScreenHeader/ScreenHeader.test.jsx

@@ -1,9 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { MemoryRouter } from 'react-router-dom';
-import Breadcrumbs from './Breadcrumbs';
 
-describe('<Breadcrumb />', () => {
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+
+import ScreenHeader from './ScreenHeader';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
+describe('<ScreenHeader />', () => {
   let breadcrumbWrapper;
   let breadcrumb;
   let breadcrumbItem;
@@ -17,15 +23,15 @@ describe('<Breadcrumb />', () => {
   };
 
   const findChildren = () => {
-    breadcrumb = breadcrumbWrapper.find('Breadcrumb');
+    breadcrumb = breadcrumbWrapper.find('ScreenHeader');
     breadcrumbItem = breadcrumbWrapper.find('BreadcrumbItem');
-    breadcrumbHeading = breadcrumbWrapper.find('BreadcrumbHeading');
+    breadcrumbHeading = breadcrumbWrapper.find('Title');
   };
 
   test('initially renders succesfully', () => {
-    breadcrumbWrapper = mount(
+    breadcrumbWrapper = mountWithContexts(
       <MemoryRouter initialEntries={['/foo/1/bar']} initialIndex={0}>
-        <Breadcrumbs breadcrumbConfig={config} />
+        <ScreenHeader streamType="all_activity" breadcrumbConfig={config} />
       </MemoryRouter>
     );
 
@@ -51,9 +57,9 @@ describe('<Breadcrumb />', () => {
     ];
 
     routes.forEach(([location, crumbLength]) => {
-      breadcrumbWrapper = mount(
+      breadcrumbWrapper = mountWithContexts(
         <MemoryRouter initialEntries={[location]}>
-          <Breadcrumbs breadcrumbConfig={config} />
+          <ScreenHeader streamType="all_activity" breadcrumbConfig={config} />
         </MemoryRouter>
       );
 

awx/ui_next/src/components/ScreenHeader/index.js

@@ -0,0 +1 @@
+export { default } from './ScreenHeader';

awx/ui_next/src/routeConfig.js

@@ -1,5 +1,6 @@
 import { t } from '@lingui/macro';
 
+import ActivityStream from './screens/ActivityStream';
 import Applications from './screens/Application';
 import Credentials from './screens/Credential';
 import CredentialTypes from './screens/CredentialType';
@@ -44,6 +45,11 @@ function getRouteConfig(i18n) {
           path: '/schedules',
           screen: Schedules,
         },
+        {
+          title: i18n._(t`Activity Stream`),
+          path: '/activity_stream',
+          screen: ActivityStream,
+        },
         {
           title: i18n._(t`Workflow Approvals`),
           path: '/workflow_approvals',

awx/ui_next/src/screens/ActivityStream/ActivityStream.jsx

@@ -0,0 +1,269 @@
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { useLocation, useHistory } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import {
+  Card,
+  PageSection,
+  PageSectionVariants,
+  SelectGroup,
+  Select,
+  SelectVariant,
+  SelectOption,
+  Title,
+} from '@patternfly/react-core';
+
+import DatalistToolbar from '../../components/DataListToolbar';
+import PaginatedTable, {
+  HeaderRow,
+  HeaderCell,
+} from '../../components/PaginatedTable';
+import useRequest from '../../util/useRequest';
+import {
+  getQSConfig,
+  parseQueryString,
+  replaceParams,
+  encodeNonDefaultQueryString,
+} from '../../util/qs';
+import { ActivityStreamAPI } from '../../api';
+
+import ActivityStreamListItem from './ActivityStreamListItem';
+
+function ActivityStream({ i18n }) {
+  const { light } = PageSectionVariants;
+
+  const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
+  const location = useLocation();
+  const history = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+
+  const activityStreamType = urlParams.get('type') || 'all';
+
+  let typeParams = {};
+
+  if (activityStreamType !== 'all') {
+    typeParams = {
+      or__object1__in: activityStreamType,
+      or__object2__in: activityStreamType,
+    };
+  }
+
+  const QS_CONFIG = getQSConfig(
+    'activity_stream',
+    {
+      page: 1,
+      page_size: 20,
+      order_by: '-timestamp',
+    },
+    ['id', 'page', 'page_size']
+  );
+
+  const {
+    result: { results, count, relatedSearchableKeys, searchableKeys },
+    error: contentError,
+    isLoading,
+    request: fetchActivityStream,
+  } = useRequest(
+    useCallback(
+      async () => {
+        const params = parseQueryString(QS_CONFIG, location.search);
+        const [response, actionsResponse] = await Promise.all([
+          ActivityStreamAPI.read({ ...params, ...typeParams }),
+          ActivityStreamAPI.readOptions(),
+        ]);
+        return {
+          results: response.data.results,
+          count: response.data.count,
+          relatedSearchableKeys: (
+            actionsResponse?.data?.related_search_fields || []
+          ).map(val => val.slice(0, -8)),
+          searchableKeys: Object.keys(
+            actionsResponse.data.actions?.GET || {}
+          ).filter(key => actionsResponse.data.actions?.GET[key].filterable),
+        };
+      },
+      [location] // eslint-disable-line react-hooks/exhaustive-deps
+    ),
+    {
+      results: [],
+      count: 0,
+      relatedSearchableKeys: [],
+      searchableKeys: [],
+    }
+  );
+  useEffect(() => {
+    fetchActivityStream();
+  }, [fetchActivityStream]);
+
+  const pushHistoryState = urlParamsToAdd => {
+    let searchParams = parseQueryString(QS_CONFIG, location.search);
+    searchParams = replaceParams(searchParams, { page: 1 });
+    const encodedParams = encodeNonDefaultQueryString(QS_CONFIG, searchParams, {
+      type: urlParamsToAdd.get('type'),
+    });
+    history.push(
+      encodedParams
+        ? `${location.pathname}?${encodedParams}`
+        : location.pathname
+    );
+  };
+
+  return (
+    <Fragment>
+      <PageSection
+        variant={light}
+        className="pf-m-condensed"
+        style={{ display: 'flex', justifyContent: 'space-between' }}
+      >
+        <Title size="2xl" headingLevel="h2">
+          {i18n._(t`Activity Stream`)}
+        </Title>
+        <span id="grouped-type-select-id" hidden>
+          {i18n._(t`Activity Stream type selector`)}
+        </span>
+        <Select
+          width="250px"
+          maxHeight="480px"
+          variant={SelectVariant.single}
+          aria-labelledby="grouped-type-select-id"
+          className="activityTypeSelect"
+          onToggle={setIsTypeDropdownOpen}
+          onSelect={(event, selection) => {
+            if (selection) {
+              urlParams.set('type', selection);
+            }
+            setIsTypeDropdownOpen(false);
+            pushHistoryState(urlParams);
+          }}
+          selections={activityStreamType}
+          isOpen={isTypeDropdownOpen}
+          isGrouped
+        >
+          <SelectGroup label={i18n._(t`Views`)} key="views">
+            <SelectOption key="all_activity" value="all">
+              {i18n._(t`Dashboard (all activity)`)}
+            </SelectOption>
+            <SelectOption key="jobs" value="job">
+              {i18n._(t`Jobs`)}
+            </SelectOption>
+            <SelectOption key="schedules" value="schedule">
+              {i18n._(t`Schedules`)}
+            </SelectOption>
+            <SelectOption key="workflow_approvals" value="workflow_approval">
+              {i18n._(t`Workflow Approvals`)}
+            </SelectOption>
+          </SelectGroup>
+          <SelectGroup label={i18n._(t`Resources`)} key="resources">
+            <SelectOption
+              key="templates"
+              value="job_template,workflow_job_template,workflow_job_template_node"
+            >
+              {i18n._(t`Templates`)}
+            </SelectOption>
+            <SelectOption key="credentials" value="credential">
+              {i18n._(t`Credentials`)}
+            </SelectOption>
+            <SelectOption key="projects" value="project">
+              {i18n._(t`Projects`)}
+            </SelectOption>
+            <SelectOption key="inventories" value="inventory">
+              {i18n._(t`Inventories`)}
+            </SelectOption>
+            <SelectOption key="hosts" value="host">
+              {i18n._(t`Hosts`)}
+            </SelectOption>
+          </SelectGroup>
+          <SelectGroup label={i18n._(t`Access`)} key="access">
+            <SelectOption key="organizations" value="organization">
+              {i18n._(t`Organizations`)}
+            </SelectOption>
+            <SelectOption key="users" value="user">
+              {i18n._(t`Users`)}
+            </SelectOption>
+            <SelectOption key="teams" value="team">
+              {i18n._(t`Teams`)}
+            </SelectOption>
+          </SelectGroup>
+          <SelectGroup label={i18n._(t`Adminisration`)} key="administration">
+            <SelectOption key="credential_types" value="credential_type">
+              {i18n._(t`Credential Types`)}
+            </SelectOption>
+            <SelectOption
+              key="notification_templates"
+              value="notification_template"
+            >
+              {i18n._(t`Notification Templates`)}
+            </SelectOption>
+            <SelectOption key="instance_groups" value="instance_group">
+              {i18n._(t`Instance Groups`)}
+            </SelectOption>
+            <SelectOption
+              key="applications"
+              value="o_auth2_application,o_auth2_access_token"
+            >
+              {i18n._(t`Applications & Tokens`)}
+            </SelectOption>
+          </SelectGroup>
+          <SelectGroup label={i18n._(t`Settings`)} key="settings">
+            <SelectOption key="settings" value="setting">
+              {i18n._(t`Settings`)}
+            </SelectOption>
+          </SelectGroup>
+        </Select>
+      </PageSection>
+      <PageSection>
+        <Card>
+          <PaginatedTable
+            contentError={contentError}
+            hasContentLoading={isLoading}
+            items={results}
+            itemCount={count}
+            pluralizedItemName={i18n._(t`Events`)}
+            qsConfig={QS_CONFIG}
+            toolbarSearchColumns={[
+              {
+                name: i18n._(t`Keyword`),
+                key: 'search',
+                isDefault: true,
+              },
+              {
+                name: i18n._(t`Initiated by (username)`),
+                key: 'actor__username__icontains',
+              },
+            ]}
+            toolbarSortColumns={[
+              {
+                name: i18n._(t`Time`),
+                key: 'timestamp',
+              },
+              {
+                name: i18n._(t`Initiated by`),
+                key: 'actor__username',
+              },
+            ]}
+            toolbarSearchableKeys={searchableKeys}
+            toolbarRelatedSearchableKeys={relatedSearchableKeys}
+            headerRow={
+              <HeaderRow qsConfig={QS_CONFIG}>
+                <HeaderCell sortKey="timestamp">{i18n._(t`Time`)}</HeaderCell>
+                <HeaderCell sortKey="actor__username">
+                  {i18n._(t`Initiated by`)}
+                </HeaderCell>
+                <HeaderCell>{i18n._(t`Event`)}</HeaderCell>
+                <HeaderCell>{i18n._(t`Actions`)}</HeaderCell>
+              </HeaderRow>
+            }
+            renderToolbar={props => (
+              <DatalistToolbar {...props} qsConfig={QS_CONFIG} />
+            )}
+            renderRow={streamItem => (
+              <ActivityStreamListItem streamItem={streamItem} />
+            )}
+          />
+        </Card>
+      </PageSection>
+    </Fragment>
+  );
+}
+
+export default withI18n()(ActivityStream);

awx/ui_next/src/screens/ActivityStream/ActivityStream.test.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+
+import ActivityStream from './ActivityStream';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
+describe('<ActivityStream />', () => {
+  let pageWrapper;
+
+  beforeEach(() => {
+    pageWrapper = mountWithContexts(<ActivityStream />);
+  });
+
+  afterEach(() => {
+    pageWrapper.unmount();
+  });
+
+  test('initially renders without crashing', () => {
+    expect(pageWrapper.length).toBe(1);
+  });
+});

awx/ui_next/src/screens/ActivityStream/ActivityStreamDescription.jsx

@@ -0,0 +1,584 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { t } from '@lingui/macro';
+import { withI18n } from '@lingui/react';
+
+const buildAnchor = (obj, resource, activity) => {
+  let url;
+  let name;
+  // try/except pattern asserts that:
+  // if we encounter a case where a UI url can't or
+  // shouldn't be generated, just supply the name of the resource
+  try {
+    // catch-all case to avoid generating urls if a resource has been deleted
+    // if a resource still exists, it'll be serialized in the activity's summary_fields
+    if (!activity.summary_fields[resource]) {
+      throw new Error('The referenced resource no longer exists');
+    }
+    switch (resource) {
+      case 'custom_inventory_script':
+        url = `/inventory_scripts/${obj.id}/`;
+        break;
+      case 'group':
+        if (
+          activity.operation === 'create' ||
+          activity.operation === 'delete'
+        ) {
+          // the API formats the changes.inventory field as str 'myInventoryName-PrimaryKey'
+          const [inventory_id] = activity.changes.inventory
+            .split('-')
+            .slice(-1);
+          url = `/inventories/inventory/${inventory_id}/groups/${activity.changes.id}/details/`;
+        } else {
+          url = `/inventories/inventory/${
+            activity.summary_fields.inventory[0].id
+          }/groups/${activity.changes.id ||
+            activity.changes.object1_pk}/details/`;
+        }
+        break;
+      case 'host':
+        url = `/hosts/${obj.id}/`;
+        break;
+      case 'job':
+        url = `/jobs/${obj.id}/`;
+        break;
+      case 'inventory':
+        url =
+          obj?.kind === 'smart'
+            ? `/inventories/smart_inventory/${obj.id}/`
+            : `/inventories/inventory/${obj.id}/`;
+        break;
+      case 'schedule':
+        // schedule urls depend on the resource they're associated with
+        if (activity.summary_fields.job_template) {
+          const jt_id = activity.summary_fields.job_template[0].id;
+          url = `/templates/job_template/${jt_id}/schedules/${obj.id}/`;
+        } else if (activity.summary_fields.workflow_job_template) {
+          const wfjt_id = activity.summary_fields.workflow_job_template[0].id;
+          url = `/templates/workflow_job_template/${wfjt_id}/schedules/${obj.id}/`;
+        } else if (activity.summary_fields.project) {
+          url = `/projects/${activity.summary_fields.project[0].id}/schedules/${obj.id}/`;
+        } else if (activity.summary_fields.system_job_template) {
+          url = null;
+        } else {
+          // urls for inventory sync schedules currently depend on having
+          // an inventory id and group id
+          throw new Error(
+            'activity.summary_fields to build this url not implemented yet'
+          );
+        }
+        break;
+      case 'setting':
+        url = `/settings/`;
+        break;
+      case 'notification_template':
+        url = `/notification_templates/${obj.id}/`;
+        break;
+      case 'role':
+        throw new Error(
+          'role object management is not consolidated to a single UI view'
+        );
+      case 'job_template':
+        url = `/templates/job_template/${obj.id}/`;
+        break;
+      case 'workflow_job_template':
+        url = `/templates/workflow_job_template/${obj.id}/`;
+        break;
+      case 'workflow_job_template_node': {
+        const {
+          id: wfjt_id,
+          name: wfjt_name,
+        } = activity.summary_fields.workflow_job_template[0];
+        url = `/templates/workflow_job_template/${wfjt_id}/`;
+        name = wfjt_name;
+        break;
+      }
+      case 'workflow_job':
+        url = `/workflows/${obj.id}/`;
+        break;
+      case 'label':
+        url = null;
+        break;
+      case 'inventory_source': {
+        const inventoryId = (obj.inventory || '').split('-').reverse()[0];
+        url = `/inventories/inventory/${inventoryId}/sources/${obj.id}/details/`;
+        break;
+      }
+      case 'o_auth2_application':
+        url = `/applications/${obj.id}/`;
+        break;
+      case 'workflow_approval':
+        url = `/jobs/workflow/${activity.summary_fields.workflow_job[0].id}/output/`;
+        name = `${activity.summary_fields.workflow_job[0].name} | ${activity.summary_fields.workflow_approval[0].name}`;
+        break;
+      case 'workflow_approval_template':
+        url = `/templates/workflow_job_template/${activity.summary_fields.workflow_job_template[0].id}/visualizer/`;
+        name = `${activity.summary_fields.workflow_job_template[0].name} | ${activity.summary_fields.workflow_approval_template[0].name}`;
+        break;
+      default:
+        url = `/${resource}s/${obj.id}/`;
+    }
+
+    name = name || obj.name || obj.username;
+
+    if (url) {
+      return <Link to={url}>{name}</Link>;
+    }
+
+    return <span>{name}</span>;
+  } catch (err) {
+    return <span>{obj.name || obj.username || ''}</span>;
+  }
+};
+
+const getPastTense = item => {
+  return /e$/.test(item) ? `${item}d` : `${item}ed`;
+};
+
+const isGroupRelationship = item => {
+  return (
+    item.object1 === 'group' &&
+    item.object2 === 'group' &&
+    item.summary_fields.group.length > 1
+  );
+};
+
+const buildLabeledLink = (label, link) => {
+  return (
+    <span>
+      {label} {link}
+    </span>
+  );
+};
+
+function ActivityStreamDescription({ i18n, activity }) {
+  const labeledLinks = [];
+  // Activity stream objects will outlive the resources they reference
+  // in that case, summary_fields will not be available - show generic error text instead
+  try {
+    switch (activity.object_association) {
+      // explicit role dis+associations
+      case 'role': {
+        let { object1, object2 } = activity;
+
+        // if object1 winds up being the role's resource, we need to swap the objects
+        // in order to make the sentence make sense.
+        if (activity.object_type === object1) {
+          object1 = activity.object2;
+          object2 = activity.object1;
+        }
+
+        // object1 field is resource targeted by the dis+association
+        // object2 field is the resource the role is inherited from
+        // summary_field.role[0] contains ref info about the role
+        switch (activity.operation) {
+          // expected outcome: "disassociated <object2> role_name from <object1>"
+          case 'disassociate':
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} from`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields[object2][0],
+                    object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} from`,
+                  buildAnchor(
+                    activity.summary_fields[object1][0],
+                    object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          // expected outcome: "associated <object2> role_name to <object1>"
+          case 'associate':
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} to`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields[object2][0],
+                    object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} to`,
+                  buildAnchor(
+                    activity.summary_fields[object1][0],
+                    object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          default:
+            break;
+        }
+        break;
+        // inherited role dis+associations (logic identical to case 'role')
+      }
+      case 'parents':
+        // object1 field is resource targeted by the dis+association
+        // object2 field is the resource the role is inherited from
+        // summary_field.role[0] contains ref info about the role
+        switch (activity.operation) {
+          // expected outcome: "disassociated <object2> role_name from <object1>"
+          case 'disassociate':
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `from ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields[activity.object2][0],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} from`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          // expected outcome: "associated <object2> role_name to <object1>"
+          case 'associate':
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `to ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  getPastTense(activity.operation),
+                  buildAnchor(
+                    activity.summary_fields[activity.object2][0],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${activity.summary_fields.role[0].role_field} to`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          default:
+            break;
+        }
+        break;
+      // CRUD operations / resource on resource dis+associations
+      default:
+        switch (activity.operation) {
+          // expected outcome: "disassociated <object2> from <object1>"
+          case 'disassociate':
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `from ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            } else if (
+              activity.object1 === 'workflow_job_template_node' &&
+              activity.object2 === 'workflow_job_template_node'
+            ) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} two nodes on workflow`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1[0]],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object2][0],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `from ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          // expected outcome "associated <object2> to <object1>"
+          case 'associate':
+            // groups are the only resource that can be associated/disassociated into each other
+            if (isGroupRelationship(activity)) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields.group[0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `to ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields.group[1],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+            } else if (
+              activity.object1 === 'workflow_job_template_node' &&
+              activity.object2 === 'workflow_job_template_node'
+            ) {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} two nodes on workflow`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1[0]],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+              labeledLinks.push(
+                buildLabeledLink(
+                  `to ${activity.object2}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object2][0],
+                    activity.object2,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          case 'delete':
+            labeledLinks.push(
+              buildLabeledLink(
+                `${getPastTense(activity.operation)} ${activity.object1}`,
+                buildAnchor(activity.changes, activity.object1, activity)
+              )
+            );
+            break;
+          // expected outcome: "operation <object1>"
+          case 'update':
+            if (
+              activity.object1 === 'workflow_approval' &&
+              activity?.changes?.status?.length === 2
+            ) {
+              let operationText = '';
+              if (activity.changes.status[1] === 'successful') {
+                operationText = i18n._(t`approved`);
+              } else if (activity.changes.status[1] === 'failed') {
+                if (
+                  activity.changes.timed_out &&
+                  activity.changes.timed_out[1] === true
+                ) {
+                  operationText = i18n._(t`timed out`);
+                } else {
+                  operationText = i18n._(t`denied`);
+                }
+              } else {
+                operationText = i18n._(t`updated`);
+              }
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${operationText} ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            } else {
+              labeledLinks.push(
+                buildLabeledLink(
+                  `${getPastTense(activity.operation)} ${activity.object1}`,
+                  buildAnchor(
+                    activity.summary_fields[activity.object1][0],
+                    activity.object1,
+                    activity
+                  )
+                )
+              );
+            }
+            break;
+          case 'create':
+            labeledLinks.push(
+              buildLabeledLink(
+                `${getPastTense(activity.operation)} ${activity.object1}`,
+                buildAnchor(activity.changes, activity.object1, activity)
+              )
+            );
+            break;
+          default:
+            break;
+        }
+        break;
+    }
+  } catch (err) {
+    return <span>{i18n._(t`Event summary not available`)}</span>;
+  }
+
+  return (
+    <span>
+      {labeledLinks.reduce(
+        (acc, x) =>
+          acc === null ? (
+            x
+          ) : (
+            <>
+              {acc} {x}
+            </>
+          ),
+        null
+      )}
+    </span>
+  );
+}
+
+export default withI18n()(ActivityStreamDescription);

awx/ui_next/src/screens/ActivityStream/ActivityStreamDescription.test.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import ActivityStreamDescription from './ActivityStreamDescription';
+
+describe('ActivityStreamDescription', () => {
+  test('initially renders succesfully', () => {
+    const description = mountWithContexts(
+      <ActivityStreamDescription activity={{}} />
+    );
+    expect(description.find('span').length).toBe(1);
+  });
+});

awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Button, Modal } from '@patternfly/react-core';
+import { SearchPlusIcon } from '@patternfly/react-icons';
+
+import { formatDateString } from '../../util/dates';
+
+import { DetailList, Detail } from '../../components/DetailList';
+import { VariablesDetail } from '../../components/CodeMirrorInput';
+
+function ActivityStreamDetailButton({ i18n, streamItem, user, description }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const setting = streamItem?.summary_fields?.setting;
+  const changeRows = Math.max(
+    Object.keys(streamItem?.changes || []).length + 2,
+    6
+  );
+
+  return (
+    <>
+      <Button
+        aria-label={i18n._(t`View event details`)}
+        variant="plain"
+        component="button"
+        onClick={() => setIsOpen(true)}
+      >
+        <SearchPlusIcon />
+      </Button>
+      <Modal
+        variant="large"
+        isOpen={isOpen}
+        title={i18n._(t`Event detail`)}
+        aria-label={i18n._(t`Event detail modal`)}
+        onClose={() => setIsOpen(false)}
+      >
+        <DetailList gutter="sm">
+          <Detail
+            label={i18n._(t`Time`)}
+            value={formatDateString(streamItem.timestamp)}
+          />
+          <Detail label={i18n._(t`Initiated by`)} value={user} />
+          <Detail
+            label={i18n._(t`Setting category`)}
+            value={setting && setting[0]?.category}
+          />
+          <Detail
+            label={i18n._(t`Setting name`)}
+            value={setting && setting[0]?.name}
+          />
+          <Detail fullWidth label={i18n._(t`Action`)} value={description} />
+          {streamItem?.changes && (
+            <VariablesDetail
+              label={i18n._(t`Changes`)}
+              rows={changeRows}
+              value={streamItem?.changes}
+            />
+          )}
+        </DetailList>
+      </Modal>
+    </>
+  );
+}
+
+export default withI18n()(ActivityStreamDetailButton);

awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.test.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import ActivityStreamDetailButton from './ActivityStreamDetailButton';
+
+jest.mock('../../api/models/ActivityStream');
+
+describe('<ActivityStreamDetailButton />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <ActivityStreamDetailButton
+        streamItem={{
+          timestamp: '12:00:00',
+        }}
+        user={<Link to="/users/1/details">Bob</Link>}
+        description={<span>foo</span>}
+      />
+    );
+  });
+});

awx/ui_next/src/screens/ActivityStream/ActivityStreamListItem.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { shape } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { Tr, Td } from '@patternfly/react-table';
+import { t } from '@lingui/macro';
+import { Link } from 'react-router-dom';
+
+import { formatDateString } from '../../util/dates';
+import { ActionsTd, ActionItem } from '../../components/PaginatedTable';
+
+import ActivityStreamDetailButton from './ActivityStreamDetailButton';
+import ActivityStreamDescription from './ActivityStreamDescription';
+
+function ActivityStreamListItem({ streamItem, i18n }) {
+  ActivityStreamListItem.propTypes = {
+    streamItem: shape({}).isRequired,
+  };
+
+  const buildUser = item => {
+    let link;
+    if (item?.summary_fields?.actor?.id) {
+      link = (
+        <Link to={`/users/${item.summary_fields.actor.id}/details`}>
+          {item.summary_fields.actor.username}
+        </Link>
+      );
+    } else if (item?.summary_fields?.actor) {
+      link = i18n._(t`${item.summary_fields.actor.username} (deleted)`);
+    } else {
+      link = i18n._(t`system`);
+    }
+    return link;
+  };
+
+  const labelId = `check-action-${streamItem.id}`;
+  const user = buildUser(streamItem);
+  const description = <ActivityStreamDescription activity={streamItem} />;
+
+  return (
+    <Tr id={streamItem.id} aria-labelledby={labelId}>
+      <Td />
+      <Td dataLabel={i18n._(t`Time`)}>
+        {streamItem.timestamp ? formatDateString(streamItem.timestamp) : ''}
+      </Td>
+      <Td dataLabel={i18n._(t`Initiated By`)}>{user}</Td>
+      <Td id={labelId} dataLabel={i18n._(t`Event`)}>
+        {description}
+      </Td>
+      <ActionsTd dataLabel={i18n._(t`Actions`)}>
+        <ActionItem visible tooltip={i18n._(t`View event details`)}>
+          <ActivityStreamDetailButton
+            streamItem={streamItem}
+            user={user}
+            description={description}
+          />
+        </ActionItem>
+      </ActionsTd>
+    </Tr>
+  );
+}
+export default withI18n()(ActivityStreamListItem);

awx/ui_next/src/screens/ActivityStream/ActivityStreamListItem.test.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import ActivityStreamListItem from './ActivityStreamListItem';
+
+jest.mock('../../api/models/ActivityStream');
+
+describe('<ActivityStreamListItem />', () => {
+  test('initially renders succesfully', () => {
+    mountWithContexts(
+      <table>
+        <tbody>
+          <ActivityStreamListItem
+            streamItem={{
+              timestamp: '12:00:00',
+            }}
+            onSelect={() => {}}
+          />
+        </tbody>
+      </table>
+    );
+  });
+});

awx/ui_next/src/screens/ActivityStream/index.js

@@ -0,0 +1 @@
+export { default } from './ActivityStream';

awx/ui_next/src/screens/Application/Applications.jsx

@@ -12,7 +12,7 @@ import {
 import ApplicationsList from './ApplicationsList';
 import ApplicationAdd from './ApplicationAdd';
 import Application from './Application';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import { Detail, DetailList } from '../../components/DetailList';
 
 const ApplicationAlert = styled(Alert)`
@@ -45,7 +45,10 @@ function Applications({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="o_auth2_application,o_auth2_access_token"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/applications/add">
           <ApplicationAdd

awx/ui_next/src/screens/Application/Applications.test.jsx

@@ -5,6 +5,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Applications from './Applications';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Applications />', () => {
   let wrapper;
 

awx/ui_next/src/screens/Credential/Credentials.jsx

@@ -3,7 +3,7 @@ import { Route, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Config } from '../../contexts/Config';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import Credential from './Credential';
 import CredentialAdd from './CredentialAdd';
 import { CredentialList } from './CredentialList';
@@ -34,7 +34,10 @@ function Credentials({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="credential"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/credentials/add">
           <Config>{({ me }) => <CredentialAdd me={me || {}} />}</Config>

awx/ui_next/src/screens/Credential/Credentials.test.jsx

@@ -3,6 +3,10 @@ import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import Credentials from './Credentials';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Credentials />', () => {
   let wrapper;
 
@@ -30,8 +34,8 @@ describe('<Credentials />', () => {
       },
     });
 
-    expect(wrapper.find('Crumb').length).toBe(1);
+    expect(wrapper.find('Crumb').length).toBe(0);
-    expect(wrapper.find('BreadcrumbHeading').text()).toBe('Credentials');
+    expect(wrapper.find('Title').text()).toBe('Credentials');
   });
 
   test('should display create new credential breadcrumb heading', () => {
@@ -51,8 +55,6 @@ describe('<Credentials />', () => {
     });
 
     expect(wrapper.find('Crumb').length).toBe(2);
-    expect(wrapper.find('BreadcrumbHeading').text()).toBe(
+    expect(wrapper.find('Title').text()).toBe('Create New Credential');
-      'Create New Credential'
-    );
   });
 });

awx/ui_next/src/screens/CredentialType/CredentialTypes.jsx

@@ -6,7 +6,7 @@ import { Route, Switch } from 'react-router-dom';
 import CredentialTypeAdd from './CredentialTypeAdd';
 import CredentialTypeList from './CredentialTypeList';
 import CredentialType from './CredentialType';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 
 function CredentialTypes({ i18n }) {
   const [breadcrumbConfig, setBreadcrumbConfig] = useState({
@@ -33,7 +33,10 @@ function CredentialTypes({ i18n }) {
   );
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="credential_type"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/credential_types/add">
           <CredentialTypeAdd />

awx/ui_next/src/screens/CredentialType/CredentialTypes.test.jsx

@@ -4,6 +4,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import CredentialTypes from './CredentialTypes';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<CredentialTypes/>', () => {
   let pageWrapper;
   let pageSections;

awx/ui_next/src/screens/Dashboard/Dashboard.jsx

@@ -18,7 +18,7 @@ import {
 
 import useRequest from '../../util/useRequest';
 import { DashboardAPI } from '../../api';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import JobList from '../../components/JobList';
 import ContentLoading from '../../components/ContentLoading';
 import LineChart from './shared/LineChart';
@@ -117,7 +117,10 @@ function Dashboard({ i18n }) {
   }
   return (
     <Fragment>
-      <Breadcrumbs breadcrumbConfig={{ '/home': i18n._(t`Dashboard`) }} />
+      <ScreenHeader
+        streamType="all"
+        breadcrumbConfig={{ '/home': i18n._(t`Dashboard`) }}
+      />
       <PageSection>
         <Counts>
           <Count

awx/ui_next/src/screens/Dashboard/Dashboard.test.jsx

@@ -7,6 +7,9 @@ import { DashboardAPI } from '../../api';
 import Dashboard from './Dashboard';
 
 jest.mock('../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
 
 describe('<Dashboard />', () => {
   let pageWrapper;

awx/ui_next/src/screens/Host/Hosts.jsx

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Config } from '../../contexts/Config';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 
 import HostList from './HostList';
 import HostAdd from './HostAdd';
@@ -37,7 +37,7 @@ function Hosts({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="host" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path="/hosts/add">
           <HostAdd />

awx/ui_next/src/screens/Host/Hosts.test.jsx

@@ -5,6 +5,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Hosts from './Hosts';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Hosts />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(<Hosts />);
@@ -27,7 +31,7 @@ describe('<Hosts />', () => {
         },
       },
     });
-    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+    expect(wrapper.find('Title').length).toBe(1);
     wrapper.unmount();
   });
 

awx/ui_next/src/screens/InstanceGroup/InstanceGroups.jsx

@@ -9,7 +9,7 @@ import InstanceGroup from './InstanceGroup';
 
 import ContainerGroupAdd from './ContainerGroupAdd';
 import ContainerGroup from './ContainerGroup';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 
 function InstanceGroups({ i18n }) {
   const [breadcrumbConfig, setBreadcrumbConfig] = useState({
@@ -54,7 +54,10 @@ function InstanceGroups({ i18n }) {
   );
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="instance_group"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/instance_groups/container_group/add">
           <ContainerGroupAdd />

awx/ui_next/src/screens/InstanceGroup/InstanceGroups.test.jsx

@@ -4,6 +4,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import InstanceGroups from './InstanceGroups';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<InstanceGroups/>', () => {
   let pageWrapper;
   let pageSections;

awx/ui_next/src/screens/Inventory/Inventories.jsx

@@ -1,10 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useRef } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Route, Switch } from 'react-router-dom';
 
 import { Config } from '../../contexts/Config';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 import { InventoryList } from './InventoryList';
 import Inventory from './Inventory';
 import SmartInventory from './SmartInventory';
@@ -12,14 +12,34 @@ import InventoryAdd from './InventoryAdd';
 import SmartInventoryAdd from './SmartInventoryAdd';
 
 function Inventories({ i18n }) {
-  const [breadcrumbConfig, setBreadcrumbConfig] = useState({
+  const initScreenHeader = useRef({
     '/inventories': i18n._(t`Inventories`),
     '/inventories/inventory/add': i18n._(t`Create new inventory`),
     '/inventories/smart_inventory/add': i18n._(t`Create new smart inventory`),
   });
 
-  const buildBreadcrumbConfig = useCallback(
+  const [breadcrumbConfig, setScreenHeader] = useState(
-    (inventory, nested, schedule) => {
+    initScreenHeader.current
+  );
+
+  const [inventory, setInventory] = useState();
+  const [nestedObject, setNestedGroup] = useState();
+  const [schedule, setSchedule] = useState();
+
+  const setBreadcrumbConfig = useCallback(
+    (passedInventory, passedNestedObject, passedSchedule) => {
+      if (passedInventory && passedInventory.name !== inventory?.name) {
+        setInventory(passedInventory);
+      }
+      if (
+        passedNestedObject &&
+        passedNestedObject.name !== nestedObject?.name
+      ) {
+        setNestedGroup(passedNestedObject);
+      }
+      if (passedSchedule && passedSchedule.name !== schedule?.name) {
+        setSchedule(passedSchedule);
+      }
       if (!inventory) {
         return;
       }
@@ -32,13 +52,8 @@ function Inventories({ i18n }) {
       const inventoryGroupsPath = `${inventoryPath}/groups`;
       const inventorySourcesPath = `${inventoryPath}/sources`;
 
-      setBreadcrumbConfig({
+      setScreenHeader({
-        '/inventories': i18n._(t`Inventories`),
+        ...initScreenHeader.current,
-        '/inventories/inventory/add': i18n._(t`Create new inventory`),
-        '/inventories/smart_inventory/add': i18n._(
-          t`Create new smart inventory`
-        ),
-
         [inventoryPath]: `${inventory.name}`,
         [`${inventoryPath}/access`]: i18n._(t`Access`),
         [`${inventoryPath}/completed_jobs`]: i18n._(t`Completed jobs`),
@@ -47,55 +62,74 @@ function Inventories({ i18n }) {
 
         [inventoryHostsPath]: i18n._(t`Hosts`),
         [`${inventoryHostsPath}/add`]: i18n._(t`Create new host`),
-        [`${inventoryHostsPath}/${nested?.id}`]: `${nested?.name}`,
+        [`${inventoryHostsPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
-        [`${inventoryHostsPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
+        [`${inventoryHostsPath}/${nestedObject?.id}/edit`]: i18n._(
-        [`${inventoryHostsPath}/${nested?.id}/details`]: i18n._(
+          t`Edit details`
+        ),
+        [`${inventoryHostsPath}/${nestedObject?.id}/details`]: i18n._(
           t`Host details`
         ),
-        [`${inventoryHostsPath}/${nested?.id}/completed_jobs`]: i18n._(
+        [`${inventoryHostsPath}/${nestedObject?.id}/completed_jobs`]: i18n._(
           t`Completed jobs`
         ),
-        [`${inventoryHostsPath}/${nested?.id}/facts`]: i18n._(t`Facts`),
+        [`${inventoryHostsPath}/${nestedObject?.id}/facts`]: i18n._(t`Facts`),
-        [`${inventoryHostsPath}/${nested?.id}/groups`]: i18n._(t`Groups`),
+        [`${inventoryHostsPath}/${nestedObject?.id}/groups`]: i18n._(t`Groups`),
 
         [inventoryGroupsPath]: i18n._(t`Groups`),
         [`${inventoryGroupsPath}/add`]: i18n._(t`Create new group`),
-        [`${inventoryGroupsPath}/${nested?.id}`]: `${nested?.name}`,
+        [`${inventoryGroupsPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
-        [`${inventoryGroupsPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
+        [`${inventoryGroupsPath}/${nestedObject?.id}/edit`]: i18n._(
-        [`${inventoryGroupsPath}/${nested?.id}/details`]: i18n._(
+          t`Edit details`
+        ),
+        [`${inventoryGroupsPath}/${nestedObject?.id}/details`]: i18n._(
           t`Group details`
         ),
-        [`${inventoryGroupsPath}/${nested?.id}/nested_hosts`]: i18n._(t`Hosts`),
+        [`${inventoryGroupsPath}/${nestedObject?.id}/nested_hosts`]: i18n._(
-        [`${inventoryGroupsPath}/${nested?.id}/nested_hosts/add`]: i18n._(
+          t`Hosts`
+        ),
+        [`${inventoryGroupsPath}/${nestedObject?.id}/nested_hosts/add`]: i18n._(
           t`Create new host`
         ),
-        [`${inventoryGroupsPath}/${nested?.id}/nested_groups`]: i18n._(
+        [`${inventoryGroupsPath}/${nestedObject?.id}/nested_groups`]: i18n._(
-          t`Groups`
+          t`Related Groups`
         ),
-        [`${inventoryGroupsPath}/${nested?.id}/nested_groups/add`]: i18n._(
+        [`${inventoryGroupsPath}/${nestedObject?.id}/nested_groups/add`]: i18n._(
           t`Create new group`
         ),
 
         [`${inventorySourcesPath}`]: i18n._(t`Sources`),
         [`${inventorySourcesPath}/add`]: i18n._(t`Create new source`),
-        [`${inventorySourcesPath}/${nested?.id}`]: `${nested?.name}`,
+        [`${inventorySourcesPath}/${nestedObject?.id}`]: `${nestedObject?.name}`,
-        [`${inventorySourcesPath}/${nested?.id}/details`]: i18n._(t`Details`),
+        [`${inventorySourcesPath}/${nestedObject?.id}/details`]: i18n._(
-        [`${inventorySourcesPath}/${nested?.id}/edit`]: i18n._(t`Edit details`),
+          t`Details`
-        [`${inventorySourcesPath}/${nested?.id}/schedules`]: i18n._(
+        ),
+        [`${inventorySourcesPath}/${nestedObject?.id}/edit`]: i18n._(
+          t`Edit details`
+        ),
+        [`${inventorySourcesPath}/${nestedObject?.id}/schedules`]: i18n._(
           t`Schedules`
         ),
-        [`${inventorySourcesPath}/${nested?.id}/schedules/${schedule?.id}`]: `${schedule?.name}`,
+        [`${inventorySourcesPath}/${nestedObject?.id}/schedules/${schedule?.id}`]: `${schedule?.name}`,
-        [`${inventorySourcesPath}/${nested?.id}/schedules/${schedule?.id}/details`]: i18n._(
+        [`${inventorySourcesPath}/${nestedObject?.id}/schedules/add`]: i18n._(
+          t`Create New Schedule`
+        ),
+        [`${inventorySourcesPath}/${nestedObject?.id}/schedules/${schedule?.id}/details`]: i18n._(
           t`Schedule details`
         ),
+        [`${inventorySourcesPath}/${nestedObject?.id}/notifications`]: i18n._(
+          t`Notifcations`
+        ),
       });
     },
-    [i18n]
+    [i18n, inventory, nestedObject, schedule]
   );
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="inventory"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/inventories/inventory/add">
           <InventoryAdd />
@@ -106,12 +140,12 @@ function Inventories({ i18n }) {
         <Route path="/inventories/inventory/:id">
           <Config>
             {({ me }) => (
-              <Inventory setBreadcrumb={buildBreadcrumbConfig} me={me || {}} />
+              <Inventory setBreadcrumb={setBreadcrumbConfig} me={me || {}} />
             )}
           </Config>
         </Route>
         <Route path="/inventories/smart_inventory/:id">
-          <SmartInventory setBreadcrumb={buildBreadcrumbConfig} />
+          <SmartInventory setBreadcrumb={setBreadcrumbConfig} />
         </Route>
         <Route path="/inventories">
           <InventoryList />

awx/ui_next/src/screens/Inventory/Inventories.test.jsx

@@ -4,6 +4,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Inventories from './Inventories';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Inventories />', () => {
   let pageWrapper;
 

awx/ui_next/src/screens/Job/Job.test.jsx

@@ -4,6 +4,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Job from './Jobs';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Job />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(<Job />);

awx/ui_next/src/screens/Job/Jobs.jsx

@@ -3,7 +3,7 @@ import { Route, Switch, useParams, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { PageSection } from '@patternfly/react-core';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 import Job from './Job';
 import JobTypeRedirect from './JobTypeRedirect';
 import JobList from '../../components/JobList';
@@ -40,7 +40,7 @@ function Jobs({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="job" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route exact path={match.path}>
           <PageSection>

awx/ui_next/src/screens/Job/Jobs.test.jsx

@@ -5,6 +5,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Jobs from './Jobs';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Jobs />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(<Jobs />);
@@ -27,7 +31,7 @@ describe('<Jobs />', () => {
         },
       },
     });
-    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+    expect(wrapper.find('Title').length).toBe(1);
     wrapper.unmount();
   });
 });

awx/ui_next/src/screens/ManagementJob/ManagementJobs.jsx

@@ -2,12 +2,13 @@ import React, { Fragment } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 
 function ManagementJobs({ i18n }) {
   return (
     <Fragment>
-      <Breadcrumbs
+      <ScreenHeader
+        streamType="none"
         breadcrumbConfig={{ '/management_jobs': i18n._(t`Management Jobs`) }}
       />
     </Fragment>

awx/ui_next/src/screens/ManagementJob/ManagementJobs.test.jsx

@@ -4,6 +4,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import ManagementJobs from './ManagementJobs';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<ManagementJobs />', () => {
   let pageWrapper;
 
@@ -17,6 +21,6 @@ describe('<ManagementJobs />', () => {
 
   test('initially renders without crashing', () => {
     expect(pageWrapper.length).toBe(1);
-    expect(pageWrapper.find('Breadcrumbs').length).toBe(1);
+    expect(pageWrapper.find('ScreenHeader').length).toBe(1);
   });
 });

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.jsx

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
 import NotificationTemplateList from './NotificationTemplateList';
 import NotificationTemplateAdd from './NotificationTemplateAdd';
 import NotificationTemplate from './NotificationTemplate';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 
 function NotificationTemplates({ i18n }) {
   const match = useRouteMatch();
@@ -32,7 +32,10 @@ function NotificationTemplates({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="notification_template"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path={`${match.url}/add`}>
           <NotificationTemplateAdd />

awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.test.jsx

@@ -2,6 +2,10 @@ import React from 'react';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import NotificationTemplates from './NotificationTemplates';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<NotificationTemplates />', () => {
   let pageWrapper;
   let pageSections;

awx/ui_next/src/screens/Organization/Organizations.jsx

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Config } from '../../contexts/Config';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 
 import OrganizationsList from './OrganizationList/OrganizationList';
 import OrganizationAdd from './OrganizationAdd/OrganizationAdd';
@@ -42,7 +42,10 @@ function Organizations({ i18n }) {
 
   return (
     <Fragment>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="organization"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path={`${match.path}/add`}>
           <OrganizationAdd />

awx/ui_next/src/screens/Organization/Organizations.test.jsx

@@ -5,6 +5,9 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import Organizations from './Organizations';
 
 jest.mock('../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
 
 describe('<Organizations />', () => {
   test('initially renders succesfully', async () => {

awx/ui_next/src/screens/Project/Projects.jsx

@@ -3,7 +3,7 @@ import { Route, withRouter, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 
 import ProjectsList from './ProjectList/ProjectList';
 import ProjectAdd from './ProjectAdd/ProjectAdd';
@@ -45,7 +45,7 @@ function Projects({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="project" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path="/projects/add">
           <ProjectAdd />

awx/ui_next/src/screens/Project/Projects.test.jsx

@@ -5,6 +5,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Projects from './Projects';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Projects />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(<Projects />);
@@ -27,7 +31,7 @@ describe('<Projects />', () => {
         },
       },
     });
-    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+    expect(wrapper.find('Title').length).toBe(1);
     wrapper.unmount();
   });
 });

awx/ui_next/src/screens/Schedule/AllSchedules.jsx

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { PageSection, Card } from '@patternfly/react-core';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import { ScheduleList } from '../../components/Schedule';
 import { SchedulesAPI } from '../../api';
 
@@ -19,7 +19,8 @@ function AllSchedules({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs
+      <ScreenHeader
+        streamType="schedule"
         breadcrumbConfig={{
           '/schedules': i18n._(t`Schedules`),
         }}

awx/ui_next/src/screens/Schedule/AllSchedules.test.jsx

@@ -3,6 +3,10 @@ import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import AllSchedules from './AllSchedules';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<AllSchedules />', () => {
   let wrapper;
 
@@ -30,7 +34,6 @@ describe('<AllSchedules />', () => {
       },
     });
 
-    expect(wrapper.find('Crumb').length).toBe(1);
+    expect(wrapper.find('Title').text()).toBe('Schedules');
-    expect(wrapper.find('BreadcrumbHeading').text()).toBe('Schedules');
   });
 });

awx/ui_next/src/screens/Setting/Settings.jsx

@@ -5,7 +5,7 @@ import { t } from '@lingui/macro';
 import { PageSection, Card } from '@patternfly/react-core';
 import ContentError from '../../components/ContentError';
 import ContentLoading from '../../components/ContentLoading';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import ActivityStream from './ActivityStream';
 import AzureAD from './AzureAD';
 import GitHub from './GitHub';
@@ -129,7 +129,7 @@ function Settings({ i18n }) {
 
   return (
     <SettingsProvider value={result}>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="setting" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path="/settings/activity_stream">
           <ActivityStream />

awx/ui_next/src/screens/Setting/Settings.test.jsx

@@ -13,6 +13,9 @@ jest.mock('../../api/models/Settings');
 SettingsAPI.readAllOptions.mockResolvedValue({
   data: mockAllOptions,
 });
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
 
 describe('<Settings />', () => {
   let wrapper;

awx/ui_next/src/screens/Team/Teams.jsx

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
 import { Config } from '../../contexts/Config';
-import Breadcrumbs from '../../components/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader';
 import TeamList from './TeamList';
 import TeamAdd from './TeamAdd';
 import Team from './Team';
@@ -29,6 +29,7 @@ function Teams({ i18n }) {
         [`/teams/${team.id}/details`]: i18n._(t`Details`),
         [`/teams/${team.id}/users`]: i18n._(t`Users`),
         [`/teams/${team.id}/access`]: i18n._(t`Access`),
+        [`/teams/${team.id}/roles`]: i18n._(t`Roles`),
       });
     },
     [i18n]
@@ -36,7 +37,7 @@ function Teams({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="team" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path="/teams/add">
           <TeamAdd />

awx/ui_next/src/screens/Team/Teams.test.jsx

@@ -3,6 +3,9 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import Teams from './Teams';
 
 jest.mock('../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
 
 describe('<Teams />', () => {
   test('initially renders succesfully', () => {

awx/ui_next/src/screens/Template/Templates.jsx

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro';
 import { Route, withRouter, Switch } from 'react-router-dom';
 import { PageSection } from '@patternfly/react-core';
 
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 import { TemplateList } from './TemplateList';
 import Template from './Template';
 import WorkflowJobTemplate from './WorkflowJobTemplate';
@@ -12,22 +12,34 @@ import JobTemplateAdd from './JobTemplateAdd';
 import WorkflowJobTemplateAdd from './WorkflowJobTemplateAdd';
 
 function Templates({ i18n }) {
-  const initBreadcrumbs = useRef({
+  const initScreenHeader = useRef({
     '/templates': i18n._(t`Templates`),
     '/templates/job_template/add': i18n._(t`Create New Job Template`),
     '/templates/workflow_job_template/add': i18n._(
       t`Create New Workflow Template`
     ),
   });
-  const [breadcrumbConfig, setBreadcrumbs] = useState(initBreadcrumbs.current);
+  const [breadcrumbConfig, setScreenHeader] = useState(
+    initScreenHeader.current
+  );
+
+  const [schedule, setSchedule] = useState();
+  const [template, setTemplate] = useState();
+
   const setBreadcrumbConfig = useCallback(
-    (template, schedule) => {
+    (passedTemplate, passedSchedule) => {
+      if (passedTemplate && passedTemplate.name !== template?.name) {
+        setTemplate(passedTemplate);
+      }
+      if (passedSchedule && passedSchedule.name !== schedule?.name) {
+        setSchedule(passedSchedule);
+      }
       if (!template) return;
       const templatePath = `/templates/${template.type}/${template.id}`;
       const schedulesPath = `${templatePath}/schedules`;
       const surveyPath = `${templatePath}/survey`;
-      setBreadcrumbs({
+      setScreenHeader({
-        ...initBreadcrumbs.current,
+        ...initScreenHeader.current,
         [templatePath]: `${template.name}`,
         [`${templatePath}/details`]: i18n._(t`Details`),
         [`${templatePath}/edit`]: i18n._(t`Edit Details`),
@@ -40,16 +52,21 @@ function Templates({ i18n }) {
         [schedulesPath]: i18n._(t`Schedules`),
         [`${schedulesPath}/add`]: i18n._(t`Create New Schedule`),
         [`${schedulesPath}/${schedule?.id}`]: `${schedule?.name}`,
-        [`${schedulesPath}/details`]: i18n._(t`Schedule Details`),
+        [`${schedulesPath}/${schedule?.id}/details`]: i18n._(
-        [`${schedulesPath}/edit`]: i18n._(t`Edit Details`),
+          t`Schedule Details`
+        ),
+        [`${schedulesPath}/${schedule?.id}/edit`]: i18n._(t`Edit Schedule`),
       });
     },
-    [i18n]
+    [i18n, template, schedule]
   );
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="job_template,workflow_job_template,workflow_job_template_node"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path="/templates/job_template/add">
           <JobTemplateAdd />

awx/ui_next/src/screens/Template/Templates.test.jsx

@@ -3,6 +3,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Templates from './Templates';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Templates />', () => {
   let pageWrapper;
 

awx/ui_next/src/screens/User/Users.jsx

@@ -3,7 +3,7 @@ import { Route, useRouteMatch, Switch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 import { Config } from '../../contexts/Config';
 
 import UsersList from './UserList/UserList';
@@ -46,7 +46,7 @@ function Users({ i18n }) {
   );
   return (
     <Fragment>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader streamType="user" breadcrumbConfig={breadcrumbConfig} />
       <Switch>
         <Route path={`${match.path}/add`}>
           <UserAdd />

awx/ui_next/src/screens/User/Users.test.jsx

@@ -5,6 +5,10 @@ import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 
 import Users from './Users';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<Users />', () => {
   test('initially renders successfully', () => {
     mountWithContexts(<Users />);
@@ -27,7 +31,7 @@ describe('<Users />', () => {
         },
       },
     });
-    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+    expect(wrapper.find('Title').length).toBe(1);
     wrapper.unmount();
   });
 });

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovals.jsx

@@ -4,7 +4,7 @@ import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import WorkflowApprovalList from './WorkflowApprovalList';
 import WorkflowApproval from './WorkflowApproval';
-import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
+import ScreenHeader from '../../components/ScreenHeader/ScreenHeader';
 
 function WorkflowApprovals({ i18n }) {
   const match = useRouteMatch();
@@ -26,7 +26,10 @@ function WorkflowApprovals({ i18n }) {
 
   return (
     <>
-      <Breadcrumbs breadcrumbConfig={breadcrumbConfig} />
+      <ScreenHeader
+        streamType="workflow_approval"
+        breadcrumbConfig={breadcrumbConfig}
+      />
       <Switch>
         <Route path={`${match.url}/:id`}>
           <WorkflowApproval setBreadcrumb={updateBreadcrumbConfig} />

awx/ui_next/src/screens/WorkflowApproval/WorkflowApprovals.test.jsx

@@ -3,6 +3,10 @@ import { createMemoryHistory } from 'history';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
 import WorkflowApprovals from './WorkflowApprovals';
 
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+}));
+
 describe('<WorkflowApprovals />', () => {
   test('initially renders succesfully', () => {
     mountWithContexts(<WorkflowApprovals />);
@@ -29,7 +33,8 @@ describe('<WorkflowApprovals />', () => {
         },
       },
     });
-    expect(wrapper.find('BreadcrumbHeading').length).toBe(1);
+
+    expect(wrapper.find('Title').length).toBe(1);
     wrapper.unmount();
   });
 });

awx/ui_next/src/util/qs.js

@@ -118,15 +118,20 @@ function encodeValue(key, value) {
  * removing defaults. Used to put into url bar after ui route
  * @param {object} qs config object for namespacing params, filtering defaults
  * @param {object} query param object
+ * @param {object} any non-namespaced params to append
  * @return {string} url query string
  */
-export const encodeNonDefaultQueryString = (config, params) => {
+export const encodeNonDefaultQueryString = (
+  config,
+  params,
+  nonNamespacedParams = {}
+) => {
   if (!params) return '';
-
   const paramsWithoutDefaults = removeParams({}, params, config.defaultParams);
-  return encodeQueryString(
+  return encodeQueryString({
-    namespaceParams(config.namespace, paramsWithoutDefaults)
+    ...namespaceParams(config.namespace, paramsWithoutDefaults),
-  );
+    ...nonNamespacedParams,
+  });
 };
 
 /**