Fix inconsistent screen title bars

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

@@ -8,18 +8,17 @@ import {
   CardActions,
   CardBody,
   PageSection,
-  PageSectionVariants,
   Select,
   SelectVariant,
   SelectOption,
   Tabs,
   Tab,
   TabTitleText,
-  Title,
 } from '@patternfly/react-core';
 
 import useRequest from '../../util/useRequest';
 import { DashboardAPI } from '../../api';
+import Breadcrumbs from '../../components/Breadcrumbs';
 import JobList from '../../components/JobList';
 
 import LineChart from './shared/LineChart';
@@ -56,8 +55,6 @@ const GraphCardActions = styled(CardActions)`
 `;
 
 function Dashboard({ i18n }) {
-  const { light } = PageSectionVariants;
-
   const [isPeriodDropdownOpen, setIsPeriodDropdownOpen] = useState(false);
   const [isJobTypeDropdownOpen, setIsJobTypeDropdownOpen] = useState(false);
   const [periodSelection, setPeriodSelection] = useState('month');
@@ -111,11 +108,7 @@ function Dashboard({ i18n }) {
 
   return (
     <Fragment>
-      <PageSection variant={light} className="pf-m-condensed">
+      <Breadcrumbs breadcrumbConfig={{ '/home': i18n._(t`Dashboard`) }} />
-        <Title size="2xl" headingLevel="h2">
-          {i18n._(t`Dashboard`)}
-        </Title>
-      </PageSection>
       <PageSection>
         <Counts>
           <Count

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

@@ -1,25 +1,18 @@
 import React, { Component, Fragment } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import {
+
-  PageSection,
+import Breadcrumbs from '../../components/Breadcrumbs';
-  PageSectionVariants,
-  Title,
-} from '@patternfly/react-core';
 
 class ManagementJobs extends Component {
   render() {
     const { i18n } = this.props;
-    const { light } = PageSectionVariants;
 
     return (
       <Fragment>
-        <PageSection variant={light} className="pf-m-condensed">
+        <Breadcrumbs
-          <Title size="2xl" headingLevel="h2">
+          breadcrumbConfig={{ '/management_jobs': i18n._(t`Management Jobs`) }}
-            {i18n._(t`Management Jobs`)}
+        />
-          </Title>
-        </PageSection>
-        <PageSection />
       </Fragment>
     );
   }

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

@@ -6,13 +6,9 @@ import ManagementJobs from './ManagementJobs';
 
 describe('<ManagementJobs />', () => {
   let pageWrapper;
-  let pageSections;
-  let title;
 
   beforeEach(() => {
     pageWrapper = mountWithContexts(<ManagementJobs />);
-    pageSections = pageWrapper.find('PageSection');
-    title = pageWrapper.find('Title');
   });
 
   afterEach(() => {
@@ -21,9 +17,6 @@ describe('<ManagementJobs />', () => {
 
   test('initially renders without crashing', () => {
     expect(pageWrapper.length).toBe(1);
-    expect(pageSections.length).toBe(2);
+    expect(pageWrapper.find('Breadcrumbs').length).toBe(1);
-    expect(title.length).toBe(1);
-    expect(title.props().size).toBe('2xl');
-    expect(pageSections.first().props().variant).toBe('light');
   });
 });