External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-09 03:59:21 -02:30
Code Issues Packages Projects Releases Wiki Activity

first pass of tweaks needed to compile pf v4 branch

Browse Source
This commit is contained in:
John Mitchell
2020-06-09 14:17:12 -04:00
parent 2a922861c3
commit 475b733890
30 changed files with 136 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
awx/ui_next/src/components/AlertModal/AlertModal.jsx
View File

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

12
awx/ui_next/src/components/Background/Background.jsx
View File

@@ -1,18 +1,10 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core'; import { BackgroundImage } 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',
};
export default ({ children }) => ( export default ({ children }) => (
<Fragment> <Fragment>
<BackgroundImage src={backgroundImageConfig} /> <BackgroundImage />
{children} {children}
</Fragment> </Fragment>
); );

2
awx/ui_next/src/components/ContentEmpty/ContentEmpty.jsx
View File

@@ -12,7 +12,7 @@ import { CubesIcon } from '@patternfly/react-icons';
const ContentEmpty = ({ i18n, title = '', message = '' }) => ( const ContentEmpty = ({ i18n, title = '', message = '' }) => (
<EmptyState variant="full"> <EmptyState variant="full">
<EmptyStateIcon icon={CubesIcon} /> <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> <EmptyStateBody>{message}</EmptyStateBody>
</EmptyState> </EmptyState>
); );

2
awx/ui_next/src/components/ContentError/ContentError.jsx
View File

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

62
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

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

2
awx/ui_next/src/components/ErrorDetail/ErrorDetail.jsx
View File

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

14
awx/ui_next/src/components/ListHeader/ListHeader.jsx
View File

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

2
awx/ui_next/src/components/Schedule/shared/ScheduleForm.jsx
View File

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

20
awx/ui_next/src/components/Search/Search.jsx
View File

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

74
awx/ui_next/src/components/Search/Search.test.jsx
View File

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

2
awx/ui_next/src/screens/AuthSetting/AuthSettings.jsx
View File

@@ -15,7 +15,7 @@ class AuthSettings extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/Dashboard/Dashboard.jsx
View File

@@ -15,7 +15,7 @@ class Dashboard extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/InstanceGroup/InstanceGroups.jsx
View File

@@ -15,7 +15,7 @@ class InstanceGroups extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

4
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx
View File

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

2
awx/ui_next/src/screens/Inventory/shared/InventorySourceForm.jsx
View File

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

2
awx/ui_next/src/screens/InventoryScript/InventoryScripts.jsx
View File

@@ -15,7 +15,7 @@ class InventoryScripts extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/JobsSetting/JobsSettings.jsx
View File

@@ -15,7 +15,7 @@ class JobsSettings extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/License/License.jsx
View File

@@ -15,7 +15,7 @@ class License extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/ManagementJob/ManagementJobs.jsx
View File

@@ -15,7 +15,7 @@ class ManagementJobs extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/NotificationTemplate/NotificationTemplates.jsx
View File

@@ -15,7 +15,7 @@ class NotificationTemplates extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/Portal/Portal.jsx
View File

@@ -15,7 +15,7 @@ class Portal extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
View File

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

2
awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx
View File

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

2
awx/ui_next/src/screens/SystemSetting/SystemSettings.jsx
View File

@@ -15,7 +15,7 @@ class SystemSettings extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>

2
awx/ui_next/src/screens/Template/Survey/SurveyList.test.jsx
View File

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

44
awx/ui_next/src/screens/Template/Survey/SurveyToolbar.jsx
View File

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

2
awx/ui_next/src/screens/Template/Survey/SurveyToolbar.test.jsx
View File

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

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

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

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

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

2
awx/ui_next/src/screens/UISetting/UISettings.jsx
View File

@@ -15,7 +15,7 @@ class UISettings extends Component {
return ( return (
<Fragment> <Fragment>
<PageSection variant={light} className="pf-m-condensed"> <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>
<PageSection /> <PageSection />
</Fragment> </Fragment>