mirror of
https://github.com/ansible/awx.git
synced 2026-01-12 18:40:01 -03:30
Patternfly upgrade (#188)
* correct spacing after PF update * update wizard layout/borders for PF upgrade
This commit is contained in:
Keith Grant
GitHub
parent
420b19cfb9
commit
1be496cfc1
@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
|
||||
import { mountWithContexts } from '../enzymeHelpers';
|
||||
import AddResourceRole from '../../src/components/AddRole/AddResourceRole';
|
||||
|
||||
describe('<SelectResourceStep />', () => {
|
||||
describe('<AddResourceRole />', () => {
|
||||
const readUsers = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
count: 2,
|
||||
@ -147,6 +147,7 @@ describe('<SelectResourceStep />', () => {
|
||||
foo: 'bar'
|
||||
});
|
||||
});
|
||||
|
||||
test('handleResourceSelect clears out selected lists and sets selectedResource', () => {
|
||||
const wrapper = shallow(
|
||||
<AddResourceRole
|
||||
@ -176,15 +177,18 @@ describe('<SelectResourceStep />', () => {
|
||||
expect(wrapper.state()).toEqual({
|
||||
selectedResource: 'users',
|
||||
selectedResourceRows: [],
|
||||
selectedRoleRows: []
|
||||
selectedRoleRows: [],
|
||||
currentStepId: 1,
|
||||
});
|
||||
wrapper.instance().handleResourceSelect('teams');
|
||||
expect(wrapper.state()).toEqual({
|
||||
selectedResource: 'teams',
|
||||
selectedResourceRows: [],
|
||||
selectedRoleRows: []
|
||||
selectedRoleRows: [],
|
||||
currentStepId: 1
|
||||
});
|
||||
});
|
||||
|
||||
test('handleWizardSave makes correct api calls, calls onSave when done', async () => {
|
||||
const handleSave = jest.fn();
|
||||
const wrapper = mountWithContexts(
|
||||
|
||||
@ -2,6 +2,7 @@ import React from 'react';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { createMemoryHistory } from 'history';
|
||||
import { Tab } from '@patternfly/react-core';
|
||||
import RoutedTabs, { _RoutedTabs } from '../../src/components/Tabs/RoutedTabs';
|
||||
|
||||
let wrapper;
|
||||
@ -28,7 +29,7 @@ describe('<RoutedTabs />', () => {
|
||||
history={history}
|
||||
/>
|
||||
);
|
||||
expect(wrapper.find('Tab')).toHaveLength(4);
|
||||
expect(wrapper.find(Tab)).toHaveLength(4);
|
||||
});
|
||||
|
||||
test('Given a URL the correct tab is active', async () => {
|
||||
|
||||
@ -80,10 +80,16 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<Switch
|
||||
@ -175,15 +181,27 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
key="toggles"
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<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
|
||||
aria-label="Toggle notification success"
|
||||
|
||||
@ -85,6 +85,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
}
|
||||
}
|
||||
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>
|
||||
<PaginatedDataList
|
||||
@ -140,6 +161,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
"key": "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",
|
||||
"name": "Name",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "modified",
|
||||
"name": "Modified",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "created",
|
||||
"name": "Created",
|
||||
},
|
||||
]
|
||||
}
|
||||
deleteTooltip="Delete"
|
||||
@ -262,6 +307,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
"key": "name",
|
||||
"name": "Name",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "modified",
|
||||
"name": "Modified",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "created",
|
||||
"name": "Created",
|
||||
},
|
||||
]
|
||||
}
|
||||
onSearch={[Function]}
|
||||
@ -277,7 +334,28 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
<Dropdown
|
||||
className="searchKeyDropdown"
|
||||
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}
|
||||
isPlain={false}
|
||||
onSelect={[Function]}
|
||||
@ -305,10 +383,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
onToggle={[Function]}
|
||||
>
|
||||
<DropdownToggle
|
||||
ariaHasPopup={null}
|
||||
ariaHasPopup={true}
|
||||
className=""
|
||||
iconComponent={[Function]}
|
||||
id="pf-toggle-id-2"
|
||||
id="pf-toggle-id-3"
|
||||
isActive={false}
|
||||
isFocused={false}
|
||||
isHovered={false}
|
||||
@ -323,8 +401,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="pf-toggle-id-2"
|
||||
id="pf-toggle-id-3"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -352,9 +431,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
}
|
||||
>
|
||||
<DropdownToggle
|
||||
ariaHasPopup={null}
|
||||
ariaHasPopup={true}
|
||||
className=""
|
||||
id="pf-toggle-id-2"
|
||||
id="pf-toggle-id-3"
|
||||
isActive={false}
|
||||
isDisabled={false}
|
||||
isFocused={false}
|
||||
@ -369,8 +448,9 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle"
|
||||
id="pf-toggle-id-2"
|
||||
id="pf-toggle-id-3"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -399,10 +479,10 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
>
|
||||
<button
|
||||
aria-expanded={false}
|
||||
aria-haspopup={null}
|
||||
aria-haspopup={true}
|
||||
className="pf-c-dropdown__toggle"
|
||||
disabled={false}
|
||||
id="pf-toggle-id-2"
|
||||
id="pf-toggle-id-3"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
@ -550,6 +630,18 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
"key": "name",
|
||||
"name": "Name",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "modified",
|
||||
"name": "Modified",
|
||||
},
|
||||
Object {
|
||||
"isNumeric": true,
|
||||
"isSortable": true,
|
||||
"key": "created",
|
||||
"name": "Created",
|
||||
},
|
||||
]
|
||||
}
|
||||
onSort={[Function]}
|
||||
@ -560,6 +652,211 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
update={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
|
||||
aria-label="Sort"
|
||||
className=""
|
||||
@ -717,10 +1014,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<Switch
|
||||
@ -812,15 +1115,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
key="toggles"
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<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
|
||||
aria-label="Toggle notification success"
|
||||
@ -991,10 +1306,16 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<Switch
|
||||
@ -1086,15 +1407,27 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
</div>
|
||||
</DataListCell>
|
||||
<DataListCell
|
||||
alignRight={true}
|
||||
alignRight={false}
|
||||
className=""
|
||||
isFilled={true}
|
||||
isIcon={false}
|
||||
key="toggles"
|
||||
style={
|
||||
Object {
|
||||
"display": "flex",
|
||||
"justifyContent": "flex-end",
|
||||
}
|
||||
}
|
||||
width={1}
|
||||
>
|
||||
<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
|
||||
aria-label="Toggle notification success"
|
||||
@ -1293,7 +1626,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
ariaHasPopup={true}
|
||||
className="togglePageSize"
|
||||
iconComponent={[Function]}
|
||||
id="pf-toggle-id-3"
|
||||
id="pf-toggle-id-5"
|
||||
isActive={false}
|
||||
isFocused={false}
|
||||
isHovered={false}
|
||||
@ -1310,7 +1643,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle togglePageSize"
|
||||
id="pf-toggle-id-3"
|
||||
id="pf-toggle-id-5"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -1340,7 +1673,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
<DropdownToggle
|
||||
ariaHasPopup={true}
|
||||
className="togglePageSize"
|
||||
id="pf-toggle-id-3"
|
||||
id="pf-toggle-id-5"
|
||||
isActive={false}
|
||||
isDisabled={false}
|
||||
isFocused={false}
|
||||
@ -1357,7 +1690,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="pf-c-dropdown__toggle togglePageSize"
|
||||
id="pf-toggle-id-3"
|
||||
id="pf-toggle-id-5"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
@ -1389,7 +1722,7 @@ exports[`<OrganizationNotifications /> initially renders succesfully 1`] = `
|
||||
aria-haspopup={true}
|
||||
className="pf-c-dropdown__toggle togglePageSize"
|
||||
disabled={false}
|
||||
id="pf-toggle-id-3"
|
||||
id="pf-toggle-id-5"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
type="button"
|
||||
|
||||
11
src/app.scss
11
src/app.scss
@ -95,11 +95,15 @@
|
||||
|
||||
.pf-c-data-list__item-content {
|
||||
--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--PaddingTop: 16px;
|
||||
--pf-c-data-list__item-control--MarginRight: 8px;
|
||||
--pf-c-data-list__item-control--PaddingBottom: 16px;
|
||||
}
|
||||
|
||||
.pf-c-data-list__item {
|
||||
@ -124,8 +128,9 @@
|
||||
}
|
||||
|
||||
&.pf-c-data-list__cell--divider {
|
||||
--pf-c-data-list__cell-cell--MarginRight: 0;
|
||||
--pf-c-data-list__cell--PaddingTop: 12px;
|
||||
flex-grow: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -246,10 +251,6 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.awx-c-list {
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
}
|
||||
|
||||
.at-c-listCardBody {
|
||||
--pf-c-card__footer--PaddingX: 0;
|
||||
--pf-c-card__footer--PaddingY: 0;
|
||||
|
||||
@ -2,11 +2,7 @@ import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18n, i18nMark } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
BackgroundImageSrc,
|
||||
Wizard
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import { Wizard } from '@patternfly/react-core';
|
||||
import SelectResourceStep from './SelectResourceStep';
|
||||
import SelectRoleStep from './SelectRoleStep';
|
||||
import SelectableCard from './SelectableCard';
|
||||
@ -18,12 +14,14 @@ class AddResourceRole extends React.Component {
|
||||
this.state = {
|
||||
selectedResource: null,
|
||||
selectedResourceRows: [],
|
||||
selectedRoleRows: []
|
||||
selectedRoleRows: [],
|
||||
currentStepId: 1,
|
||||
};
|
||||
|
||||
this.handleResourceCheckboxClick = this.handleResourceCheckboxClick.bind(this);
|
||||
this.handleResourceSelect = this.handleResourceSelect.bind(this);
|
||||
this.handleRoleCheckboxClick = this.handleRoleCheckboxClick.bind(this);
|
||||
this.handleWizardNext = this.handleWizardNext.bind(this);
|
||||
this.handleWizardSave = this.handleWizardSave.bind(this);
|
||||
this.readTeams = this.readTeams.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 () {
|
||||
const {
|
||||
onSave,
|
||||
@ -118,22 +122,14 @@ class AddResourceRole extends React.Component {
|
||||
const {
|
||||
selectedResource,
|
||||
selectedResourceRows,
|
||||
selectedRoleRows
|
||||
selectedRoleRows,
|
||||
currentStepId,
|
||||
} = this.state;
|
||||
const {
|
||||
onClose,
|
||||
roles
|
||||
} = 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 = [
|
||||
{ name: i18nMark('Username'), key: 'username', isSortable: true }
|
||||
];
|
||||
@ -157,6 +153,7 @@ class AddResourceRole extends React.Component {
|
||||
|
||||
const steps = [
|
||||
{
|
||||
id: 1,
|
||||
name: i18nMark('Select Users Or Teams'),
|
||||
component: (
|
||||
<I18n>
|
||||
@ -179,6 +176,7 @@ class AddResourceRole extends React.Component {
|
||||
enableNext: selectedResource !== null
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: i18nMark('Select items from list'),
|
||||
component: (
|
||||
<I18n>
|
||||
@ -215,6 +213,7 @@ class AddResourceRole extends React.Component {
|
||||
enableNext: selectedResourceRows.length > 0
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: i18nMark('Apply roles'),
|
||||
component: (
|
||||
<I18n>
|
||||
@ -230,25 +229,23 @@ class AddResourceRole extends React.Component {
|
||||
)}
|
||||
</I18n>
|
||||
),
|
||||
nextButtonText: i18nMark('Save'),
|
||||
enableNext: selectedRoleRows.length > 0
|
||||
}
|
||||
];
|
||||
|
||||
const currentStep = steps.find(step => step.id === currentStepId);
|
||||
|
||||
return (
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Wizard
|
||||
backgroundImgSrc={images}
|
||||
footerRightAlign
|
||||
isOpen
|
||||
lastStepButtonText={i18n._(t`Save`)}
|
||||
onClose={onClose}
|
||||
onSave={this.handleWizardSave}
|
||||
steps={steps}
|
||||
title={wizardTitle}
|
||||
/>
|
||||
)}
|
||||
</I18n>
|
||||
<Wizard
|
||||
isOpen
|
||||
onNext={this.handleWizardNext}
|
||||
onClose={onClose}
|
||||
onSave={this.handleWizardSave}
|
||||
steps={steps}
|
||||
title={wizardTitle}
|
||||
nextButtonText={currentStep.nextButtonText || undefined}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,7 +10,7 @@ class CheckboxCard extends Component {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
border: '1px solid var(--pf-global--BorderColor)',
|
||||
border: '1px solid var(--pf-global--BorderColor--200)',
|
||||
borderRadius: 'var(--pf-global--BorderRadius--sm)',
|
||||
padding: '10px'
|
||||
}}
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
import { i18nMark } from '@lingui/react';
|
||||
|
||||
import {
|
||||
EmptyState,
|
||||
EmptyStateBody,
|
||||
EmptyStateIcon,
|
||||
Title,
|
||||
DataList,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import { CubesIcon } from '@patternfly/react-icons';
|
||||
|
||||
import CheckboxListItem from '../ListItem';
|
||||
@ -162,7 +160,7 @@ class SelectResourceStep extends React.Component {
|
||||
sortOrder={sortOrder}
|
||||
sortedColumnKey={sortedColumnKey}
|
||||
/>
|
||||
<ul className="pf-c-data-list awx-c-list">
|
||||
<DataList aria-label={i18nMark('Roles List')}>
|
||||
{resources.map(i => (
|
||||
<CheckboxListItem
|
||||
isSelected={selectedResourceRows.some(item => item.id === i.id)}
|
||||
@ -172,7 +170,7 @@ class SelectResourceStep extends React.Component {
|
||||
onSelect={() => onRowClick(i)}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</DataList>
|
||||
<Pagination
|
||||
count={count}
|
||||
onSetPage={this.handleSetPage}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.awx-selectableCard {
|
||||
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);
|
||||
margin-right: 20px;
|
||||
font-weight: bold;
|
||||
@ -25,4 +25,4 @@
|
||||
.awx-selectableCard__indicator {
|
||||
background-color: var(--pf-global--active-color--100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { I18n } from '@lingui/react';
|
||||
import { t } from '@lingui/macro';
|
||||
import {
|
||||
Checkbox,
|
||||
DataListItem,
|
||||
DataListItemRow,
|
||||
DataListItemCells,
|
||||
DataListCheck,
|
||||
DataListCell,
|
||||
} from '@patternfly/react-core';
|
||||
|
||||
import VerticalSeparator from '../VerticalSeparator';
|
||||
@ -14,25 +16,32 @@ const CheckboxListItem = ({
|
||||
isSelected,
|
||||
onSelect,
|
||||
}) => (
|
||||
<li key={itemId} className="pf-c-data-list__item" aria-labelledby="check-action-item1">
|
||||
<I18n>
|
||||
{({ i18n }) => (
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-label={i18n._(t`selected ${itemId}`)}
|
||||
id={`selectd-${itemId}`}
|
||||
value={itemId}
|
||||
/>
|
||||
)}
|
||||
</I18n>
|
||||
<VerticalSeparator />
|
||||
<div className="pf-c-data-list__cell">
|
||||
<label htmlFor={`selectd-${itemId}`} className="check-action-item">
|
||||
<b>{name}</b>
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<DataListItem key={itemId} aria-labelledby={`check-action-item-${itemId}`}>
|
||||
<DataListItemRow>
|
||||
<DataListCheck
|
||||
id={`selected-${itemId}`}
|
||||
checked={isSelected}
|
||||
onChange={onSelect}
|
||||
aria-labelledby={`check-action-item-${itemId}`}
|
||||
value={itemId}
|
||||
/>
|
||||
<DataListItemCells dataListCells={[
|
||||
<DataListCell key="divider" className="pf-c-data-list__cell--divider">
|
||||
<VerticalSeparator />
|
||||
</DataListCell>,
|
||||
<DataListCell key="name">
|
||||
<label
|
||||
id={`check-action-item-${itemId}`}
|
||||
htmlFor={`selected-${itemId}`}
|
||||
className="check-action-item"
|
||||
>
|
||||
<b>{name}</b>
|
||||
</label>
|
||||
</DataListCell>
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
);
|
||||
|
||||
CheckboxListItem.propTypes = {
|
||||
|
||||
@ -24,6 +24,10 @@ function NotificationListItem (props) {
|
||||
const capText = {
|
||||
textTransform: 'capitalize'
|
||||
};
|
||||
const toggleCellStyles = {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
};
|
||||
|
||||
return (
|
||||
<I18n>
|
||||
@ -50,7 +54,7 @@ function NotificationListItem (props) {
|
||||
{notification.notification_type}
|
||||
</Badge>
|
||||
</DataListCell>,
|
||||
<DataListCell key="toggles" alignRight>
|
||||
<DataListCell key="toggles" style={toggleCellStyles}>
|
||||
<Switch
|
||||
id={`notification-${notification.id}-success-toggle`}
|
||||
label={i18n._(t`Successful`)}
|
||||
|
||||
@ -8,7 +8,6 @@ import {
|
||||
DataListCell,
|
||||
Text,
|
||||
TextContent,
|
||||
TextVariants,
|
||||
Title,
|
||||
EmptyState,
|
||||
EmptyStateIcon,
|
||||
@ -162,13 +161,10 @@ class PaginatedDataList extends React.Component {
|
||||
<TextContent style={detailWrapperStyle}>
|
||||
<Link to={{ pathname: item.url }}>
|
||||
<Text
|
||||
id="items-list-item"
|
||||
component={TextVariants.h6}
|
||||
id={`items-list-item-${item.id}`}
|
||||
style={detailLabelStyle}
|
||||
>
|
||||
<span id={`items-list-item-${item.id}`}>
|
||||
{item.name}
|
||||
</span>
|
||||
{item.name}
|
||||
</Text>
|
||||
</Link>
|
||||
</TextContent>
|
||||
|
||||
@ -48,7 +48,7 @@ class OrganizationListItem extends React.Component {
|
||||
</Link>
|
||||
</span>
|
||||
</DataListCell>,
|
||||
<DataListCell key="org-members">
|
||||
<DataListCell key="org-members" width={2}>
|
||||
<span className="awx-c-list-group">
|
||||
<Trans>Members</Trans>
|
||||
<Badge className="awx-c-list-group--badge" isRead>
|
||||
|
||||
@ -12,6 +12,12 @@ const DEFAULT_QUERY_PARAMS = {
|
||||
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 {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
@ -186,6 +192,7 @@ class OrganizationNotifications extends Component {
|
||||
itemCount={itemCount}
|
||||
itemName="notification"
|
||||
queryParams={this.getQueryParams()}
|
||||
toolbarColumns={COLUMNS}
|
||||
renderItem={(notification) => (
|
||||
<NotificationListItem
|
||||
key={notification.id}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user