first pass of tweaks needed to compile pf v4 branch

awx/ui_next/src/components/AlertModal/AlertModal.jsx

@@ -60,7 +60,7 @@ export default function AlertModal({
   const customHeader = (
     <Header>
       {variant ? variantIcons[variant] : null}
-      <Title size="2xl">{title}</Title>
+      <Title size="2xl" headingLevel="h2">{title}</Title>
     </Header>
   );
 

awx/ui_next/src/components/Background/Background.jsx

@@ -1,18 +1,10 @@
 import React, { Fragment } from 'react';
 
-import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
-
-const backgroundImageConfig = {
-  [BackgroundImageSrc.xs]: './images/pfbg_576.jpg',
-  [BackgroundImageSrc.xs2x]: './images/pfbg_576@2x.jpg',
-  [BackgroundImageSrc.sm]: './images/pfbg_768.jpg',
-  [BackgroundImageSrc.sm2x]: './images/pfbg_768@2x.jpg',
-  [BackgroundImageSrc.lg]: './images/pfbg_2000.jpg',
-};
+import { BackgroundImage } from '@patternfly/react-core';
 
 export default ({ children }) => (
   <Fragment>
-    <BackgroundImage src={backgroundImageConfig} />
+    <BackgroundImage />
     {children}
   </Fragment>
 );

awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx

@@ -12,7 +12,7 @@ import { CubesIcon } from '@patternfly/react-icons';
 const ContentEmpty = ({ i18n, title = '', message = '' }) => (
   <EmptyState variant="full">
     <EmptyStateIcon icon={CubesIcon} />
-    <Title size="lg">{title || i18n._(t`No items found.`)}</Title>
+    <Title size="lg" headingLevel="h3">{title || i18n._(t`No items found.`)}</Title>
     <EmptyStateBody>{message}</EmptyStateBody>
   </EmptyState>
 );

awx/ui_next/src/components/ContentError/ContentError.jsx

@@ -35,7 +35,7 @@ function ContentError({ error, children, isNotFound, i18n }) {
       ) : (
         <EmptyState variant="full">
           <EmptyStateIcon icon={ExclamationTriangleIcon} />
-          <Title size="lg">
+          <Title size="lg" headingLevel="h3">
             {is404 ? i18n._(t`Not Found`) : i18n._(t`Something went wrong...`)}
           </Title>
           <EmptyStateBody>

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -2,27 +2,27 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Checkbox } from '@patternfly/react-core';
+import {
+  Checkbox,
+  Toolbar,
+  ToolbarContent as _ToolbarContent,
+  ToolbarGroup as _ToolbarGroup,
+  ToolbarItem,
+  ToolbarToggleGroup,
+ } from '@patternfly/react-core';
 import styled from 'styled-components';
 import { SearchIcon } from '@patternfly/react-icons';
-import {
-  DataToolbar,
-  DataToolbarContent as _DataToolbarContent,
-  DataToolbarGroup as _DataToolbarGroup,
-  DataToolbarItem,
-  DataToolbarToggleGroup,
-} from '@patternfly/react-core/dist/umd/experimental';
 import ExpandCollapse from '../ExpandCollapse';
 import Search from '../Search';
 import Sort from '../Sort';
 
 import { SearchColumns, SortColumns, QSConfig } from '../../types';
 
-const DataToolbarContent = styled(_DataToolbarContent)`
+const ToolbarContent = styled(_ToolbarContent)`
   --pf-c-data-toolbar__content--PaddingLeft: 24px;
   --pf-c-data-toolbar__content--PaddingRight: 8px;
 `;
-const DataToolbarGroup = styled(_DataToolbarGroup)`
+const ToolbarGroup = styled(_ToolbarGroup)`
   --pf-c-data-toolbar__group--spacer: 24px;
 `;
 
@@ -49,26 +49,26 @@ class DataListToolbar extends React.Component {
 
     const showExpandCollapse = onCompact && onExpand;
     return (
-      <DataToolbar
+      <Toolbar
         id={`${qsConfig.namespace}-list-toolbar`}
         clearAllFilters={clearAllFilters}
         collapseListedFiltersBreakpoint="lg"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           {showSelectAll && (
-            <DataToolbarGroup>
-              <DataToolbarItem>
+            <ToolbarGroup>
+              <ToolbarItem>
                 <Checkbox
                   isChecked={isAllSelected}
                   onChange={onSelectAll}
                   aria-label={i18n._(t`Select all`)}
                   id="select-all"
                 />
-              </DataToolbarItem>
-            </DataToolbarGroup>
+              </ToolbarItem>
+            </ToolbarGroup>
           )}
-          <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
-            <DataToolbarItem>
+          <ToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
+            <ToolbarItem>
               <Search
                 qsConfig={qsConfig}
                 columns={searchColumns}
@@ -76,31 +76,31 @@ class DataListToolbar extends React.Component {
                 onReplaceSearch={onReplaceSearch}
                 onRemove={onRemove}
               />
-            </DataToolbarItem>
-            <DataToolbarItem>
+            </ToolbarItem>
+            <ToolbarItem>
               <Sort qsConfig={qsConfig} columns={sortColumns} onSort={onSort} />
-            </DataToolbarItem>
-          </DataToolbarToggleGroup>
+            </ToolbarItem>
+          </ToolbarToggleGroup>
           {showExpandCollapse && (
-            <DataToolbarGroup>
+            <ToolbarGroup>
               <Fragment>
-                <DataToolbarItem>
+                <ToolbarItem>
                   <ExpandCollapse
                     isCompact={isCompact}
                     onCompact={onCompact}
                     onExpand={onExpand}
                   />
-                </DataToolbarItem>
+                </ToolbarItem>
               </Fragment>
-            </DataToolbarGroup>
+            </ToolbarGroup>
           )}
-          <DataToolbarGroup>
+          <ToolbarGroup>
             {additionalControls.map(control => (
-              <DataToolbarItem key={control.key}>{control}</DataToolbarItem>
+              <ToolbarItem key={control.key}>{control}</ToolbarItem>
             ))}
-          </DataToolbarGroup>
-        </DataToolbarContent>
-      </DataToolbar>
+          </ToolbarGroup>
+        </ToolbarContent>
+      </Toolbar>
     );
   }
 }

awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx

@@ -7,7 +7,7 @@ import { t } from '@lingui/macro';
 import {
   Card as PFCard,
   CardBody as PFCardBody,
-  Expandable as PFExpandable,
+  ExpandableSection as PFExpandable,
 } from '@patternfly/react-core';
 import getErrorMessage from './getErrorMessage';
 

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import styled from 'styled-components';
 import {
-  DataToolbar,
-  DataToolbarContent,
-} from '@patternfly/react-core/dist/umd/experimental';
+  Toolbar,
+  ToolbarContent,
+} from '@patternfly/react-core';
 import DataListToolbar from '../DataListToolbar';
 
 import {
@@ -107,17 +107,17 @@ class ListHeader extends React.Component {
     return (
       <Fragment>
         {isEmpty ? (
-          <DataToolbar
+          <Toolbar
             id={`${qsConfig.namespace}-list-toolbar`}
             clearAllFilters={this.handleRemoveAll}
             collapseListedFiltersBreakpoint="md"
           >
-            <DataToolbarContent>
+            <ToolbarContent>
               <EmptyStateControlsWrapper>
                 {emptyStateControls}
               </EmptyStateControlsWrapper>
-            </DataToolbarContent>
-          </DataToolbar>
+            </ToolbarContent>
+          </Toolbar>
         ) : (
           <Fragment>
             {renderToolbar({

awx/ui_next/src/components/Schedule/shared/ScheduleForm.jsx

@@ -153,7 +153,7 @@ function ScheduleFormFields({ i18n, zoneOptions }) {
       </FormGroup>
       {frequency.value !== 'none' && (
         <SubFormLayout>
-          <Title size="md">{i18n._(t`Frequency Details`)}</Title>
+          <Title size="md" headingLevel="h4">{i18n._(t`Frequency Details`)}</Title>
           <FormColumnLayout>
             <FrequencyDetailSubform />
           </FormColumnLayout>

awx/ui_next/src/components/Search/Search.jsx

@@ -16,12 +16,10 @@ import {
   SelectOption,
   SelectVariant,
   TextInput,
+  ToolbarGroup,
+  ToolbarItem,
+  ToolbarFilter,
 } from '@patternfly/react-core';
-import {
-  DataToolbarGroup,
-  DataToolbarItem,
-  DataToolbarFilter,
-} from '@patternfly/react-core/dist/umd/experimental';
 import { SearchIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import { parseQueryString } from '../../util/qs';
@@ -205,8 +203,8 @@ class Search extends React.Component {
     const chipsByKey = getChipsByKey();
 
     return (
-      <DataToolbarGroup variant="filter-group">
-        <DataToolbarItem>
+      <ToolbarGroup variant="filter-group">
+        <ToolbarItem>
           {searchDropdownItems.length > 0 ? (
             <Dropdown
               onToggle={this.handleDropdownToggle}
@@ -227,10 +225,10 @@ class Search extends React.Component {
           ) : (
             <NoOptionDropdown>{searchColumnName}</NoOptionDropdown>
           )}
-        </DataToolbarItem>
+        </ToolbarItem>
         {columns.map(
           ({ key, name, options, isBoolean, booleanLabels = {} }) => (
-            <DataToolbarFilter
+            <ToolbarFilter
               chips={chipsByKey[key] ? chipsByKey[key].chips : []}
               deleteChip={(unusedKey, chip) => {
                 const [columnKey, ...value] = chip.key.split(':');
@@ -311,10 +309,10 @@ class Search extends React.Component {
                     </div>
                   </InputGroup>
                 )}
-            </DataToolbarFilter>
+            </ToolbarFilter>
           )
         )}
-      </DataToolbarGroup>
+      </ToolbarGroup>
     );
   }
 }

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import {
-  DataToolbar,
-  DataToolbarContent,
-} from '@patternfly/react-core/dist/umd/experimental';
+  Toolbar,
+  ToolbarContent,
+} from '@patternfly/react-core';
 import { createMemoryHistory } from 'history';
 import { act } from 'react-dom/test-utils';
 import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
@@ -33,15 +33,15 @@ describe('<Search />', () => {
     const onSearch = jest.fn();
 
     search = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </DataToolbarContent>
-      </DataToolbar>
+        </ToolbarContent>
+      </Toolbar>
     );
 
     search.find(searchTextInput).instance().value = 'test-321';
@@ -56,15 +56,15 @@ describe('<Search />', () => {
     const columns = [{ name: 'Name', key: 'name', isDefault: true }];
     const onSearch = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </DataToolbarContent>
-      </DataToolbar>
+        </ToolbarContent>
+      </Toolbar>
     ).find('Search');
     expect(wrapper.state('isSearchDropdownOpen')).toEqual(false);
     wrapper.instance().handleDropdownToggle(true);
@@ -78,15 +78,15 @@ describe('<Search />', () => {
     ];
     const onSearch = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </DataToolbarContent>
-      </DataToolbar>
+        </ToolbarContent>
+      </Toolbar>
     ).find('Search');
     expect(wrapper.state('searchKey')).toEqual('name');
     wrapper
@@ -101,15 +101,15 @@ describe('<Search />', () => {
     const columns = [{ name: 'Name', key: 'name', isDefault: true }];
     const onSearch = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </DataToolbarContent>
-      </DataToolbar>
+        </ToolbarContent>
+      </Toolbar>
     );
 
     wrapper.find(searchTextInput).instance().value = '';
@@ -125,15 +125,15 @@ describe('<Search />', () => {
     const columns = [{ name: 'Name', key: 'name', isDefault: true }];
     const onSearch = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} onSearch={onSearch} />
-        </DataToolbarContent>
-      </DataToolbar>
+        </ToolbarContent>
+      </Toolbar>
     );
 
     wrapper.find(searchTextInput).instance().value = 'test-321';
@@ -156,23 +156,23 @@ describe('<Search />', () => {
       initialEntries: [`/organizations/${query}`],
     });
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${QS_CONFIG.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search qsConfig={QS_CONFIG} columns={columns} />
-        </DataToolbarContent>
-      </DataToolbar>,
+        </ToolbarContent>
+      </Toolbar>,
       { context: { router: { history } } }
     );
     const typeFilterWrapper = wrapper.find(
-      'DataToolbarFilter[categoryName="Type"]'
+      'ToolbarFilter[categoryName="Type"]'
     );
     expect(typeFilterWrapper.prop('chips')[0].key).toEqual('or__type:foo');
     const nameFilterWrapper = wrapper.find(
-      'DataToolbarFilter[categoryName="Name"]'
+      'ToolbarFilter[categoryName="Name"]'
     );
     expect(nameFilterWrapper.prop('chips')[0].key).toEqual('name:bar');
   });
@@ -197,19 +197,19 @@ describe('<Search />', () => {
     });
     const onRemove = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${qsConfigNew.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search
             qsConfig={qsConfigNew}
             columns={columns}
             onRemove={onRemove}
           />
-        </DataToolbarContent>
-      </DataToolbar>,
+        </ToolbarContent>
+      </Toolbar>,
       { context: { router: { history } } }
     );
     expect(history.location.search).toEqual(query);
@@ -243,19 +243,19 @@ describe('<Search />', () => {
     });
     const onRemove = jest.fn();
     const wrapper = mountWithContexts(
-      <DataToolbar
+      <Toolbar
         id={`${qsConfigNew.namespace}-list-toolbar`}
         clearAllFilters={() => {}}
         collapseListedFiltersBreakpoint="md"
       >
-        <DataToolbarContent>
+        <ToolbarContent>
           <Search
             qsConfig={qsConfigNew}
             columns={columns}
             onRemove={onRemove}
           />
-        </DataToolbarContent>
-      </DataToolbar>,
+        </ToolbarContent>
+      </Toolbar>,
       { context: { router: { history } } }
     );
     expect(history.location.search).toEqual(query);

awx/ui_next/src/screens/AuthSetting/AuthSettings.jsx

@@ -15,7 +15,7 @@ class AuthSettings extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Authentication Settings`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Authentication Settings`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

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

@@ -15,7 +15,7 @@ class Dashboard extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Dashboard`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Dashboard`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

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

@@ -15,7 +15,7 @@ class InstanceGroups extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Instance Groups`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Instance Groups`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx

@@ -164,7 +164,7 @@ describe('<InventoryGroupsList />', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find('DataToolbar Button[aria-label="Delete"]')
+        .find('Toolbar Button[aria-label="Delete"]')
         .invoke('onClick')();
     });
     await waitForElement(
@@ -198,7 +198,7 @@ describe('<InventoryGroupsList />', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find('DataToolbar Button[aria-label="Delete"]')
+        .find('Toolbar Button[aria-label="Delete"]')
         .invoke('onClick')();
     });
     await waitForElement(

awx/ui_next/src/screens/Inventory/shared/InventorySourceForm.jsx

@@ -161,7 +161,7 @@ const InventorySourceFormFields = ({ sourceOptions, i18n }) => {
       )}
       {sourceField.value !== '' && (
         <SubFormLayout>
-          <Title size="md">{i18n._(t`Source details`)}</Title>
+          <Title size="md" headingLevel="h4">{i18n._(t`Source details`)}</Title>
           <FormColumnLayout>
             {
               {

awx/ui_next/src/screens/InventoryScript/InventoryScripts.jsx

@@ -15,7 +15,7 @@ class InventoryScripts extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Inventory Scripts`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Inventory Scripts`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/JobsSetting/JobsSettings.jsx

@@ -15,7 +15,7 @@ class JobsSettings extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Jobs Settings`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Jobs Settings`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/License/License.jsx

@@ -15,7 +15,7 @@ class License extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`License`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`License`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

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

@@ -15,7 +15,7 @@ class ManagementJobs extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Management Jobs`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Management Jobs`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

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

@@ -15,7 +15,7 @@ class NotificationTemplates extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`Notification Templates`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`Notification Templates`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/Portal/Portal.jsx

@@ -15,7 +15,7 @@ class Portal extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`My View`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`My View`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/Project/shared/ProjectForm.jsx

@@ -204,7 +204,7 @@ function ProjectFormFields({
       </FormGroup>
       {formik.values.scm_type !== '' && (
         <SubFormLayout>
-          <Title size="md">{i18n._(t`Type Details`)}</Title>
+          <Title size="md" headingLevel="h4">{i18n._(t`Type Details`)}</Title>
           <FormColumnLayout>
             {
               {

awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx

@@ -104,7 +104,7 @@ export const ScmTypeOptions = withI18n()(
 
       {scmUpdateOnLaunch && (
         <>
-          <Title size="md">{i18n._(t`Option Details`)}</Title>
+          <Title size="md" headingLevel="h4">{i18n._(t`Option Details`)}</Title>
           <FormField
             id="project-cache-timeout"
             name="scm_update_cache_timeout"

awx/ui_next/src/screens/SystemSetting/SystemSettings.jsx

@@ -15,7 +15,7 @@ class SystemSettings extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`System Settings`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`System Settings`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>

awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx

@@ -142,7 +142,7 @@ describe('<SurveyList />', () => {
 
     expect(
       wrapper
-        .find('DataToolbar')
+        .find('Toolbar')
         .find('Checkbox')
         .prop('isDisabled')
     ).toBe(true);

awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx

@@ -5,15 +5,17 @@ import { withI18n } from '@lingui/react';
 import styled from 'styled-components';
 
 import {
-  DataToolbar as _DataToolbar,
-  DataToolbarContent,
-  DataToolbarGroup,
-  DataToolbarItem,
-} from '@patternfly/react-core/dist/umd/experimental';
-import { Switch, Checkbox, Button } from '@patternfly/react-core';
+  Switch,
+  Checkbox,
+  Button,
+  Toolbar as _Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+} from '@patternfly/react-core';
 import { ToolbarAddButton } from '../../../components/PaginatedDataList';
 
-const DataToolbar = styled(_DataToolbar)`
+const Toolbar = styled(_Toolbar)`
   margin-left: 52px;
 `;
 
@@ -30,9 +32,9 @@ function SurveyToolbar({
   isDeleteDisabled = !canEdit || isDeleteDisabled;
   const match = useRouteMatch();
   return (
-    <DataToolbar id="survey-toolbar">
-      <DataToolbarContent>
-        <DataToolbarItem>
+    <Toolbar id="survey-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>
           <Checkbox
             isDisabled={!canEdit}
             isChecked={isAllSelected}
@@ -42,8 +44,8 @@ function SurveyToolbar({
             aria-label={i18n._(t`Select all`)}
             id="select-all"
           />
-        </DataToolbarItem>
-        <DataToolbarItem>
+        </ToolbarItem>
+        <ToolbarItem>
           <Switch
             aria-label={i18n._(t`Survey Toggle`)}
             id="survey-toggle"
@@ -53,15 +55,15 @@ function SurveyToolbar({
             isDisabled={!canEdit}
             onChange={() => onToggleSurvey(!surveyEnabled)}
           />
-        </DataToolbarItem>
-        <DataToolbarGroup>
-          <DataToolbarItem>
+        </ToolbarItem>
+        <ToolbarGroup>
+          <ToolbarItem>
             <ToolbarAddButton
               isDisabled={!canEdit}
               linkTo={`${match.url}/add`}
             />
-          </DataToolbarItem>
-          <DataToolbarItem>
+          </ToolbarItem>
+          <ToolbarItem>
             <Button
               variant="danger"
               isDisabled={isDeleteDisabled}
@@ -69,10 +71,10 @@ function SurveyToolbar({
             >
               {i18n._(t`Delete`)}
             </Button>
-          </DataToolbarItem>
-        </DataToolbarGroup>
-      </DataToolbarContent>
-    </DataToolbar>
+          </ToolbarItem>
+        </ToolbarGroup>
+      </ToolbarContent>
+    </Toolbar>
   );
 }
 

awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx

@@ -102,7 +102,7 @@ describe('<SurveyToolbar />', () => {
     });
     expect(
       wrapper
-        .find('DataToolbar')
+        .find('Toolbar')
         .find('Checkbox')
         .prop('isDisabled')
     ).toBe(true);

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/LinkModals/LinkAddModal.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BaseSizes, Title, TitleLevel } from '@patternfly/react-core';
+import { BaseSizes, Title } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { WorkflowDispatchContext } from '../../../../../contexts/Workflow';
@@ -10,7 +10,7 @@ function LinkAddModal({ i18n }) {
   return (
     <LinkModal
       header={
-        <Title headingLevel={TitleLevel.h1} size={BaseSizes['2xl']}>
+        <Title headingLevel="h1" size={BaseSizes['2xl']}>
           {i18n._(t`Add Link`)}
         </Title>
       }

awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/LinkModals/LinkEditModal.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { BaseSizes, Title, TitleLevel } from '@patternfly/react-core';
+import { BaseSizes, Title } from '@patternfly/react-core';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { WorkflowDispatchContext } from '../../../../../contexts/Workflow';
@@ -10,7 +10,7 @@ function LinkEditModal({ i18n }) {
   return (
     <LinkModal
       header={
-        <Title headingLevel={TitleLevel.h1} size={BaseSizes['2xl']}>
+        <Title headingLevel="h1" size={BaseSizes['2xl']}>
           {i18n._(t`Edit Link`)}
         </Title>
       }

awx/ui_next/src/screens/UISetting/UISettings.jsx

@@ -15,7 +15,7 @@ class UISettings extends Component {
     return (
       <Fragment>
         <PageSection variant={light} className="pf-m-condensed">
-          <Title size="2xl">{i18n._(t`User Interface Settings`)}</Title>
+          <Title size="2xl" headingLevel="h2">{i18n._(t`User Interface Settings`)}</Title>
         </PageSection>
         <PageSection />
       </Fragment>