External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-06 11:11:07 -03:30
Code Issues Packages Projects Releases Wiki Activity

Patternfly upgrade (#188)

Browse Source 
* correct spacing after PF update

* update wizard layout/borders for PF upgrade
This commit is contained in:
Keith Grant
2019-05-01 13:50:00 -04:00
committed by GitHub
parent 420b19cfb9
commit 1be496cfc1
14 changed files with 468 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
__tests__/components/AddResourceRole.test.jsx
View File

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { mountWithContexts } from '../enzymeHelpers'; import { mountWithContexts } from '../enzymeHelpers';
import AddResourceRole from '../../src/components/AddRole/AddResourceRole'; import AddResourceRole from '../../src/components/AddRole/AddResourceRole';
describe('<SelectResourceStep />', () => { describe('<AddResourceRole />', () => {
const readUsers = jest.fn().mockResolvedValue({ const readUsers = jest.fn().mockResolvedValue({
data: { data: {
count: 2, count: 2,
@@ -147,6 +147,7 @@ describe('<SelectResourceStep />', () => {
foo: 'bar' foo: 'bar'
}); });
}); });
test('handleResourceSelect clears out selected lists and sets selectedResource', () => { test('handleResourceSelect clears out selected lists and sets selectedResource', () => {
const wrapper = shallow( const wrapper = shallow(
<AddResourceRole <AddResourceRole
@@ -176,15 +177,18 @@ describe('<SelectResourceStep />', () => {
expect(wrapper.state()).toEqual({ expect(wrapper.state()).toEqual({
selectedResource: 'users', selectedResource: 'users',
selectedResourceRows: [], selectedResourceRows: [],
selectedRoleRows: [] selectedRoleRows: [],
currentStepId: 1,
}); });
wrapper.instance().handleResourceSelect('teams'); wrapper.instance().handleResourceSelect('teams');
expect(wrapper.state()).toEqual({ expect(wrapper.state()).toEqual({
selectedResource: 'teams', selectedResource: 'teams',
selectedResourceRows: [], selectedResourceRows: [],
selectedRoleRows: [] selectedRoleRows: [],
currentStepId: 1
}); });
}); });
test('handleWizardSave makes correct api calls, calls onSave when done', async () => { test('handleWizardSave makes correct api calls, calls onSave when done', async () => {
const handleSave = jest.fn(); const handleSave = jest.fn();
const wrapper = mountWithContexts( const wrapper = mountWithContexts(

3
__tests__/components/RoutedTabs.test.jsx
View File

@@ -2,6 +2,7 @@ import React from 'react';
import { mount, shallow } from 'enzyme'; import { mount, shallow } from 'enzyme';
import { Router } from 'react-router-dom'; import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history'; import { createMemoryHistory } from 'history';
import { Tab } from '@patternfly/react-core';
import RoutedTabs, { _RoutedTabs } from '../../src/components/Tabs/RoutedTabs'; import RoutedTabs, { _RoutedTabs } from '../../src/components/Tabs/RoutedTabs';
let wrapper; let wrapper;
@@ -28,7 +29,7 @@ describe('<RoutedTabs />', () => {
history={history} history={history}
/> />
); );
expect(wrapper.find('Tab')).toHaveLength(4); expect(wrapper.find(Tab)).toHaveLength(4);
}); });
test('Given a URL the correct tab is active', async () => { test('Given a URL the correct tab is active', async () => {

24
__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
View File

@@ -80,10 +80,16 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</Badge> </Badge>
</DataListCell>, </DataListCell>,
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<Switch <Switch
@@ -175,15 +181,27 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</div> </div>
</DataListCell> </DataListCell>
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
key="toggles" key="toggles"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<div <div
className="pf-c-data-list__cell pf-m-align-right" className="pf-c-data-list__cell"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
> >
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"

373
__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

@@ -85,6 +85,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
} }
renderItem={[Function]} renderItem={[Function]}
toolbarColumns={
Array [
Object {
"isSortable": true,
"key": "name",
"name": "Name",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "modified",
"name": "Modified",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "created",
"name": "Created",
},
]
}
> >
<Route> <Route>
<PaginatedDataList <PaginatedDataList
@@ -140,6 +161,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"key": "name", "key": "name",
"name": "Name", "name": "Name",
}, },
Object {
"isNumeric": true,
"isSortable": true,
"key": "modified",
"name": "Modified",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "created",
"name": "Created",
},
] ]
} }
> >
@@ -157,6 +190,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"key": "name", "key": "name",
"name": "Name", "name": "Name",
}, },
Object {
"isNumeric": true,
"isSortable": true,
"key": "modified",
"name": "Modified",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "created",
"name": "Created",
},
] ]
} }
deleteTooltip="Delete" deleteTooltip="Delete"
@@ -262,6 +307,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"key": "name", "key": "name",
"name": "Name", "name": "Name",
}, },
Object {
"isNumeric": true,
"isSortable": true,
"key": "modified",
"name": "Modified",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "created",
"name": "Created",
},
] ]
} }
onSearch={[Function]} onSearch={[Function]}
@@ -277,7 +334,28 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
<Dropdown <Dropdown
className="searchKeyDropdown" className="searchKeyDropdown"
direction="down" direction="down"
dropdownItems={Array []} dropdownItems={
Array [
<Item
className=""
component="button"
href="#"
isDisabled={false}
isHovered={false}
>
Modified
</Item>,
<Item
className=""
component="button"
href="#"
isDisabled={false}
isHovered={false}
>
Created
</Item>,
]
}
isOpen={false} isOpen={false}
isPlain={false} isPlain={false}
onSelect={[Function]} onSelect={[Function]}
@@ -305,10 +383,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
onToggle={[Function]} onToggle={[Function]}
> >
<DropdownToggle <DropdownToggle
ariaHasPopup={null} ariaHasPopup={true}
className="" className=""
iconComponent={[Function]} iconComponent={[Function]}
id="pf-toggle-id-2" id="pf-toggle-id-3"
isActive={false} isActive={false}
isFocused={false} isFocused={false}
isHovered={false} isHovered={false}
@@ -323,8 +401,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
> >
<button <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="true"
class="pf-c-dropdown__toggle" class="pf-c-dropdown__toggle"
id="pf-toggle-id-2" id="pf-toggle-id-3"
type="button" type="button"
> >
<span <span
@@ -352,9 +431,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
} }
> >
<DropdownToggle <DropdownToggle
ariaHasPopup={null} ariaHasPopup={true}
className="" className=""
id="pf-toggle-id-2" id="pf-toggle-id-3"
isActive={false} isActive={false}
isDisabled={false} isDisabled={false}
isFocused={false} isFocused={false}
@@ -369,8 +448,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
> >
<button <button
aria-expanded="false" aria-expanded="false"
aria-haspopup="true"
class="pf-c-dropdown__toggle" class="pf-c-dropdown__toggle"
id="pf-toggle-id-2" id="pf-toggle-id-3"
type="button" type="button"
> >
<span <span
@@ -399,10 +479,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
> >
<button <button
aria-expanded={false} aria-expanded={false}
aria-haspopup={null} aria-haspopup={true}
className="pf-c-dropdown__toggle" className="pf-c-dropdown__toggle"
disabled={false} disabled={false}
id="pf-toggle-id-2" id="pf-toggle-id-3"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
type="button" type="button"
@@ -550,6 +630,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
"key": "name", "key": "name",
"name": "Name", "name": "Name",
}, },
Object {
"isNumeric": true,
"isSortable": true,
"key": "modified",
"name": "Modified",
},
Object {
"isNumeric": true,
"isSortable": true,
"key": "created",
"name": "Created",
},
] ]
} }
onSort={[Function]} onSort={[Function]}
@@ -560,6 +652,211 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
update={true} update={true}
withHash={true} withHash={true}
> >
<Dropdown
className=""
direction="down"
dropdownItems={
Array [
<Item
className=""
component="button"
href="#"
isDisabled={false}
isHovered={false}
>
Modified
</Item>,
<Item
className=""
component="button"
href="#"
isDisabled={false}
isHovered={false}
>
Created
</Item>,
]
}
isOpen={false}
isPlain={false}
onSelect={[Function]}
onToggle={[Function]}
position="left"
style={
Object {
"marginRight": "20px",
}
}
toggle={
<DropdownToggle
className=""
iconComponent={[Function]}
id=""
isActive={false}
isFocused={false}
isHovered={false}
isOpen={false}
isPlain={false}
onToggle={[Function]}
parentRef={null}
>
Name
</DropdownToggle>
}
>
<div
className="pf-c-dropdown"
onToggle={[Function]}
style={
Object {
"marginRight": "20px",
}
}
>
<DropdownToggle
ariaHasPopup={true}
className=""
iconComponent={[Function]}
id="pf-toggle-id-4"
isActive={false}
isFocused={false}
isHovered={false}
isOpen={false}
isPlain={false}
key=".0"
onEnter={[Function]}
onToggle={[Function]}
parentRef={
<div
class="pf-c-dropdown"
style="margin-right: 20px;"
>
<button
aria-expanded="false"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="pf-toggle-id-4"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Name
</span>
<svg
aria-hidden="true"
class="pf-c-dropdown__toggle-icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</button>
</div>
}
>
<DropdownToggle
ariaHasPopup={true}
className=""
id="pf-toggle-id-4"
isActive={false}
isDisabled={false}
isFocused={false}
isHovered={false}
isOpen={false}
isPlain={false}
onEnter={[Function]}
onToggle={[Function]}
parentRef={
<div
class="pf-c-dropdown"
style="margin-right: 20px;"
>
<button
aria-expanded="false"
aria-haspopup="true"
class="pf-c-dropdown__toggle"
id="pf-toggle-id-4"
type="button"
>
<span
class="pf-c-dropdown__toggle-text"
>
Name
</span>
<svg
aria-hidden="true"
class="pf-c-dropdown__toggle-icon"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</button>
</div>
}
>
<button
aria-expanded={false}
aria-haspopup={true}
className="pf-c-dropdown__toggle"
disabled={false}
id="pf-toggle-id-4"
onClick={[Function]}
onKeyDown={[Function]}
type="button"
>
<span
className="pf-c-dropdown__toggle-text"
>
Name
</span>
<CaretDownIcon
className="pf-c-dropdown__toggle-icon"
color="currentColor"
size="sm"
title={null}
>
<svg
aria-hidden={true}
aria-labelledby={null}
className="pf-c-dropdown__toggle-icon"
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 320 512"
width="1em"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
transform=""
/>
</svg>
</CaretDownIcon>
</button>
</DropdownToggle>
</DropdownToggle>
</div>
</Dropdown>
<Button <Button
aria-label="Sort" aria-label="Sort"
className="" className=""
@@ -717,10 +1014,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</Badge> </Badge>
</DataListCell>, </DataListCell>,
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<Switch <Switch
@@ -812,15 +1115,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div> </div>
</DataListCell> </DataListCell>
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
key="toggles" key="toggles"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<div <div
className="pf-c-data-list__cell pf-m-align-right" className="pf-c-data-list__cell"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
> >
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
@@ -991,10 +1306,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</Badge> </Badge>
</DataListCell>, </DataListCell>,
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<Switch <Switch
@@ -1086,15 +1407,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
</div> </div>
</DataListCell> </DataListCell>
<DataListCell <DataListCell
alignRight={true} alignRight={false}
className="" className=""
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
key="toggles" key="toggles"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<div <div
className="pf-c-data-list__cell pf-m-align-right" className="pf-c-data-list__cell"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
> >
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
@@ -1293,7 +1626,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
ariaHasPopup={true} ariaHasPopup={true}
className="togglePageSize" className="togglePageSize"
iconComponent={[Function]} iconComponent={[Function]}
id="pf-toggle-id-3" id="pf-toggle-id-5"
isActive={false} isActive={false}
isFocused={false} isFocused={false}
isHovered={false} isHovered={false}
@@ -1310,7 +1643,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="pf-c-dropdown__toggle togglePageSize" class="pf-c-dropdown__toggle togglePageSize"
id="pf-toggle-id-3" id="pf-toggle-id-5"
type="button" type="button"
> >
<span <span
@@ -1340,7 +1673,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
<DropdownToggle <DropdownToggle
ariaHasPopup={true} ariaHasPopup={true}
className="togglePageSize" className="togglePageSize"
id="pf-toggle-id-3" id="pf-toggle-id-5"
isActive={false} isActive={false}
isDisabled={false} isDisabled={false}
isFocused={false} isFocused={false}
@@ -1357,7 +1690,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
class="pf-c-dropdown__toggle togglePageSize" class="pf-c-dropdown__toggle togglePageSize"
id="pf-toggle-id-3" id="pf-toggle-id-5"
type="button" type="button"
> >
<span <span
@@ -1389,7 +1722,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
aria-haspopup={true} aria-haspopup={true}
className="pf-c-dropdown__toggle togglePageSize" className="pf-c-dropdown__toggle togglePageSize"
disabled={false} disabled={false}
id="pf-toggle-id-3" id="pf-toggle-id-5"
onClick={[Function]} onClick={[Function]}
onKeyDown={[Function]} onKeyDown={[Function]}
type="button" type="button"

11
src/app.scss
View File

@@ -95,11 +95,15 @@
.pf-c-data-list__item-content { .pf-c-data-list__item-content {
--pf-c-data-list__item-content--PaddingBottom: 16px; --pf-c-data-list__item-content--PaddingBottom: 16px;
min-height: 59px;
align-items: center;
} }
.pf-c-data-list__item-control { .pf-c-data-list__item-control {
--pf-c-data-list__item-control--PaddingTop: 16px; --pf-c-data-list__item-control--PaddingTop: 16px;
--pf-c-data-list__item-control--MarginRight: 8px; --pf-c-data-list__item-control--MarginRight: 8px;
--pf-c-data-list__item-control--PaddingBottom: 16px;
} }
.pf-c-data-list__item { .pf-c-data-list__item {
@@ -124,8 +128,9 @@
} }
&.pf-c-data-list__cell--divider { &.pf-c-data-list__cell--divider {
--pf-c-data-list__cell-cell--MarginRight: 0;
--pf-c-data-list__cell--PaddingTop: 12px;
flex-grow: 0; flex-grow: 0;
margin-right: 0;
} }
} }
@@ -246,10 +251,6 @@
overflow-y: auto; overflow-y: auto;
} }
.awx-c-list {
border-bottom: 1px solid #d7d7d7;
}
.at-c-listCardBody { .at-c-listCardBody {
--pf-c-card__footer--PaddingX: 0; --pf-c-card__footer--PaddingX: 0;
--pf-c-card__footer--PaddingY: 0; --pf-c-card__footer--PaddingY: 0;

57
src/components/AddRole/AddResourceRole.jsx
View File

@@ -2,11 +2,7 @@ import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { I18n, i18nMark } from '@lingui/react'; import { I18n, i18nMark } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import { Wizard } from '@patternfly/react-core';
BackgroundImageSrc,
Wizard
} from '@patternfly/react-core';
import SelectResourceStep from './SelectResourceStep'; import SelectResourceStep from './SelectResourceStep';
import SelectRoleStep from './SelectRoleStep'; import SelectRoleStep from './SelectRoleStep';
import SelectableCard from './SelectableCard'; import SelectableCard from './SelectableCard';
@@ -18,12 +14,14 @@ class AddResourceRole extends React.Component {
this.state = { this.state = {
selectedResource: null, selectedResource: null,
selectedResourceRows: [], selectedResourceRows: [],
selectedRoleRows: [] selectedRoleRows: [],
currentStepId: 1,
}; };
this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(this); this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(this);
this.handleResourceSelect = this.handleResourceSelect.bind(this); this.handleResourceSelect = this.handleResourceSelect.bind(this);
this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this); this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this);
this.handleWizardNext = this.handleWizardNext.bind(this);
this.handleWizardSave = this.handleWizardSave.bind(this); this.handleWizardSave = this.handleWizardSave.bind(this);
this.readTeams = this.readTeams.bind(this); this.readTeams = this.readTeams.bind(this);
this.readUsers = this.readUsers.bind(this); this.readUsers = this.readUsers.bind(this);
@@ -69,6 +67,12 @@ class AddResourceRole extends React.Component {
}); });
} }
handleWizardNext (step) {
this.setState({
currentStepId: step.id,
});
}
async handleWizardSave () { async handleWizardSave () {
const { const {
onSave, onSave,
@@ -118,22 +122,14 @@ class AddResourceRole extends React.Component {
const { const {
selectedResource, selectedResource,
selectedResourceRows, selectedResourceRows,
selectedRoleRows selectedRoleRows,
currentStepId,
} = this.state; } = this.state;
const { const {
onClose, onClose,
roles roles
} = this.props; } = this.props;
const images = {
[BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
[BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
[BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
[BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
[BackgroundImageSrc.lg]: '/assets/images/pfbg_2000.jpg',
[BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
};
const userColumns = [ const userColumns = [
{ name: i18nMark('Username'), key: 'username', isSortable: true } { name: i18nMark('Username'), key: 'username', isSortable: true }
]; ];
@@ -157,6 +153,7 @@ class AddResourceRole extends React.Component {
const steps = [ const steps = [
{ {
id: 1,
name: i18nMark('Select Users Or Teams'), name: i18nMark('Select Users Or Teams'),
component: ( component: (
<I18n> <I18n>
@@ -179,6 +176,7 @@ class AddResourceRole extends React.Component {
enableNext: selectedResource !== null enableNext: selectedResource !== null
}, },
{ {
id: 2,
name: i18nMark('Select items from list'), name: i18nMark('Select items from list'),
component: ( component: (
<I18n> <I18n>
@@ -215,6 +213,7 @@ class AddResourceRole extends React.Component {
enableNext: selectedResourceRows.length > 0 enableNext: selectedResourceRows.length > 0
}, },
{ {
id: 3,
name: i18nMark('Apply roles'), name: i18nMark('Apply roles'),
component: ( component: (
<I18n> <I18n>
@@ -230,25 +229,23 @@ class AddResourceRole extends React.Component {
)} )}
</I18n> </I18n>
), ),
nextButtonText: i18nMark('Save'),
enableNext: selectedRoleRows.length > 0 enableNext: selectedRoleRows.length > 0
} }
]; ];
const currentStep = steps.find(step => step.id === currentStepId);
return ( return (
<I18n> <Wizard
{({ i18n }) => ( isOpen
<Wizard onNext={this.handleWizardNext}
backgroundImgSrc={images} onClose={onClose}
footerRightAlign onSave={this.handleWizardSave}
isOpen steps={steps}
lastStepButtonText={i18n._(t`Save`)} title={wizardTitle}
onClose={onClose} nextButtonText={currentStep.nextButtonText || undefined}
onSave={this.handleWizardSave} />
steps={steps}
title={wizardTitle}
/>
)}
</I18n>
); );
} }
} }

2
src/components/AddRole/CheckboxCard.jsx
View File

@@ -10,7 +10,7 @@ class CheckboxCard extends Component {
return ( return (
<div style={{ <div style={{
display: 'flex', display: 'flex',
border: '1px solid var(--pf-global--BorderColor)', border: '1px solid var(--pf-global--BorderColor--200)',
borderRadius: 'var(--pf-global--BorderRadius--sm)', borderRadius: 'var(--pf-global--BorderRadius--sm)',
padding: '10px' padding: '10px'
}} }}

8
src/components/AddRole/SelectResourceStep.jsx
View File

@@ -1,15 +1,13 @@
import React, { Fragment } from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { i18nMark } from '@lingui/react'; import { i18nMark } from '@lingui/react';
import { import {
EmptyState, EmptyState,
EmptyStateBody, EmptyStateBody,
EmptyStateIcon, EmptyStateIcon,
Title, Title,
DataList,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { CubesIcon } from '@patternfly/react-icons'; import { CubesIcon } from '@patternfly/react-icons';
import CheckboxListItem from '../ListItem'; import CheckboxListItem from '../ListItem';
@@ -162,7 +160,7 @@ class SelectResourceStep extends React.Component {
sortOrder={sortOrder} sortOrder={sortOrder}
sortedColumnKey={sortedColumnKey} sortedColumnKey={sortedColumnKey}
/> />
<ul className="pf-c-data-list awx-c-list"> <DataList aria-label={i18nMark('Roles List')}>
{resources.map(i => ( {resources.map(i => (
<CheckboxListItem <CheckboxListItem
isSelected={selectedResourceRows.some(item => item.id === i.id)} isSelected={selectedResourceRows.some(item => item.id === i.id)}
@@ -172,7 +170,7 @@ class SelectResourceStep extends React.Component {
onSelect={() => onRowClick(i)} onSelect={() => onRowClick(i)}
/> />
))} ))}
</ul> </DataList>
<Pagination <Pagination
count={count} count={count}
onSetPage={this.handleSetPage} onSetPage={this.handleSetPage}

4
src/components/AddRole/styles.scss
View File

@@ -1,6 +1,6 @@
.awx-selectableCard { .awx-selectableCard {
min-width: 200px; min-width: 200px;
border: 1px solid var(--pf-global--BorderColor); border: 1px solid var(--pf-global--BorderColor--200);
border-radius: var(--pf-global--BorderRadius--sm); border-radius: var(--pf-global--BorderRadius--sm);
margin-right: 20px; margin-right: 20px;
font-weight: bold; font-weight: bold;
@@ -25,4 +25,4 @@
.awx-selectableCard__indicator { .awx-selectableCard__indicator {
background-color: var(--pf-global--active-color--100); background-color: var(--pf-global--active-color--100);
} }
} }

53
src/components/ListItem/CheckboxListItem.jsx
View File

@@ -1,9 +1,11 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { import {
Checkbox, DataListItem,
DataListItemRow,
DataListItemCells,
DataListCheck,
DataListCell,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import VerticalSeparator from '../VerticalSeparator'; import VerticalSeparator from '../VerticalSeparator';
@@ -14,25 +16,32 @@ const CheckboxListItem = ({
isSelected, isSelected,
onSelect, onSelect,
}) => ( }) => (
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1"> <DataListItem key={itemId} aria-labelledby={`check-action-item-${itemId}`}>
<I18n> <DataListItemRow>
{({ i18n }) => ( <DataListCheck
<Checkbox id={`selected-${itemId}`}
checked={isSelected} checked={isSelected}
onChange={onSelect} onChange={onSelect}
aria-label={i18n._(t`selected ${itemId}`)} aria-labelledby={`check-action-item-${itemId}`}
id={`selectd-${itemId}`} value={itemId}
value={itemId} />
/> <DataListItemCells dataListCells={[
)} <DataListCell key="divider" className="pf-c-data-list__cell--divider">
</I18n> <VerticalSeparator />
<VerticalSeparator /> </DataListCell>,
<div className="pf-c-data-list__cell"> <DataListCell key="name">
<label htmlFor={`selectd-${itemId}`} className="check-action-item"> <label
<b>{name}</b> id={`check-action-item-${itemId}`}
</label> htmlFor={`selected-${itemId}`}
</div> className="check-action-item"
</li> >
<b>{name}</b>
</label>
</DataListCell>
]}
/>
</DataListItemRow>
</DataListItem>
); );
CheckboxListItem.propTypes = { CheckboxListItem.propTypes = {

6
src/components/NotificationsList/NotificationListItem.jsx
View File

@@ -24,6 +24,10 @@ function NotificationListItem (props) {
const capText = { const capText = {
textTransform: 'capitalize' textTransform: 'capitalize'
}; };
const toggleCellStyles = {
display: 'flex',
justifyContent: 'flex-end',
};
return ( return (
<I18n> <I18n>
@@ -50,7 +54,7 @@ function NotificationListItem (props) {
{notification.notification_type} {notification.notification_type}
</Badge> </Badge>
</DataListCell>, </DataListCell>,
<DataListCell key="toggles" alignRight> <DataListCell key="toggles" style={toggleCellStyles}>
<Switch <Switch
id={`notification-${notification.id}-success-toggle`} id={`notification-${notification.id}-success-toggle`}
label={i18n._(t`Successful`)} label={i18n._(t`Successful`)}

8
src/components/PaginatedDataList/PaginatedDataList.jsx
View File

@@ -8,7 +8,6 @@ import {
DataListCell, DataListCell,
Text, Text,
TextContent, TextContent,
TextVariants,
Title, Title,
EmptyState, EmptyState,
EmptyStateIcon, EmptyStateIcon,
@@ -162,13 +161,10 @@ class PaginatedDataList extends React.Component {
<TextContent style={detailWrapperStyle}> <TextContent style={detailWrapperStyle}>
<Link to={{ pathname: item.url }}> <Link to={{ pathname: item.url }}>
<Text <Text
id="items-list-item" id={`items-list-item-${item.id}`}
component={TextVariants.h6}
style={detailLabelStyle} style={detailLabelStyle}
> >
<span id={`items-list-item-${item.id}`}> {item.name}
{item.name}
</span>
</Text> </Text>
</Link> </Link>
</TextContent> </TextContent>

2
src/pages/Organizations/components/OrganizationListItem.jsx
View File

@@ -48,7 +48,7 @@ class OrganizationListItem extends React.Component {
</Link> </Link>
</span> </span>
</DataListCell>, </DataListCell>,
<DataListCell key="org-members"> <DataListCell key="org-members" width={2}>
<span className="awx-c-list-group"> <span className="awx-c-list-group">
<Trans>Members</Trans> <Trans>Members</Trans>
<Badge className="awx-c-list-group--badge" isRead> <Badge className="awx-c-list-group--badge" isRead>

7
src/pages/Organizations/screens/Organization/OrganizationNotifications.jsx
View File

@@ -12,6 +12,12 @@ const DEFAULT_QUERY_PARAMS = {
order_by: 'name', order_by: 'name',
}; };
const COLUMNS = [
{ key: 'name', name: 'Name', isSortable: true },
{ key: 'modified', name: 'Modified', isSortable: true, isNumeric: true },
{ key: 'created', name: 'Created', isSortable: true, isNumeric: true },
];
class OrganizationNotifications extends Component { class OrganizationNotifications extends Component {
constructor (props) { constructor (props) {
super(props); super(props);
@@ -186,6 +192,7 @@ class OrganizationNotifications extends Component {
itemCount={itemCount} itemCount={itemCount}
itemName="notification" itemName="notification"
queryParams={this.getQueryParams()} queryParams={this.getQueryParams()}
toolbarColumns={COLUMNS}
renderItem={(notification) => ( renderItem={(notification) => (
<NotificationListItem <NotificationListItem
key={notification.id} key={notification.id}