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

Remove DataList component overrides

Browse Source
This commit is contained in:
Marliana Lara 2020-02-18 10:40:18 -05:00
parent fe9b03a189
commit 4ebc2573a3
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
45 changed files with 788 additions and 998 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui_next/src/app.scss
View File

@ -1,4 +0,0 @@
// https://github.com/patternfly/patternfly-react/issues/1294
#app {
height: 100%;
}

31
awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx
View File

@ -6,19 +6,21 @@ import {
DataListItemCells,
DataListCell,
DataListCheck,
Radio,
} from '@patternfly/react-core';
import DataListRadio from '@components/DataListRadio';
const CheckboxListItem = ({
isDisabled = false,
isRadio = false,
isSelected = false,
itemId,
name,
label,
isSelected,
onSelect,
name,
onDeselect,
isRadio,
onSelect,
}) => {
const CheckboxRadio = isRadio ? DataListRadio : DataListCheck;
const CheckboxRadio = isRadio ? Radio : DataListCheck;
return (
<DataListItem
key={itemId}
@ -27,11 +29,14 @@ const CheckboxListItem = ({
>
<DataListItemRow>
<CheckboxRadio
id={`selected-${itemId}`}
checked={isSelected}
onChange={isSelected ? onDeselect : onSelect}
aria-label={`check-action-item-${itemId}`}
aria-labelledby={`check-action-item-${itemId}`}
checked={isSelected}
disabled={isDisabled}
id={`selected-${itemId}`}
isChecked={isSelected}
name={name}
onChange={isSelected ? onDeselect : onSelect}
value={itemId}
/>
<DataListItemCells
@ -53,12 +58,12 @@ const CheckboxListItem = ({
};
CheckboxListItem.propTypes = {
itemId: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
isSelected: PropTypes.bool.isRequired,
onSelect: PropTypes.func.isRequired,
itemId: PropTypes.number.isRequired,
label: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
onDeselect: PropTypes.func.isRequired,
onSelect: PropTypes.func.isRequired,
};
export default CheckboxListItem;

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

@ -1,14 +0,0 @@
import { DataListCell as PFDataListCell } from '@patternfly/react-core';
import styled from 'styled-components';
const DataListCell = styled(PFDataListCell)`
display: flex;
align-items: center;
padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
@media screen and (min-width: 768px) {
padding-bottom: 0;
justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
}
`;
export default DataListCell;

11
awx/ui_next/src/components/DataListCell/DataListCell.test.jsx
View File

@ -1,11 +0,0 @@
import React from 'react';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import DataListCell from './DataListCell';
describe('DataListCell', () => {
test('renders without failing', () => {
const wrapper = mountWithContexts(<DataListCell />);
expect(wrapper).toHaveLength(1);
});
});

1
awx/ui_next/src/components/DataListCell/index.js
View File

@ -1 +0,0 @@
export { default } from './DataListCell';

15
awx/ui_next/src/components/DataListCheck/DataListCheck.jsx
View File

@ -1,15 +0,0 @@
import { DataListCheck as PFDataListCheck } from '@patternfly/react-core';
import styled from 'styled-components';
PFDataListCheck.displayName = 'PFDataListCheck';
export default styled(PFDataListCheck)`
padding-top: 18px;
@media screen and (min-width: 768px) {
padding-top: 16px;
justify-content: ${props => (props.lastcolumn ? 'flex-end' : 'inherit')};
.pf-c-data-list__check {
display: flex;
align-items: center;
}
}
`;

10
awx/ui_next/src/components/DataListCheck/DataListCheck.test.jsx
View File

@ -1,10 +0,0 @@
import React from 'react';
import { mount } from 'enzyme';
import DataListCheck from './DataListCheck';
describe('DataListCheck', () => {
test('renders the expected content', () => {
const wrapper = mount(<DataListCheck checked aria-labelledby="Checkbox" />);
expect(wrapper).toHaveLength(1);
});
});

1
awx/ui_next/src/components/DataListCheck/index.js
View File

@ -1 +0,0 @@
export { default } from './DataListCheck';

47
awx/ui_next/src/components/DataListRadio/DataListRadio.jsx
View File

@ -1,47 +0,0 @@
import * as React from 'react';
import { string, bool, func } from 'prop-types';
function DataListRadio({
className = '',
onChange,
isValid = true,
isDisabled = false,
isChecked = null,
checked = null,
...props
}) {
return (
<div className={`pf-c-data-list__item-control ${className}`}>
<div className="pf-c-data-list__check">
<input
{...props}
type="radio"
onChange={event => onChange(event.currentTarget.checked, event)}
aria-invalid={!isValid}
disabled={isDisabled}
checked={isChecked || checked}
/>
</div>
</div>
);
}
DataListRadio.propTypes = {
className: string,
isValid: bool,
isDisabled: bool,
isChecked: bool,
checked: bool,
onChange: func,
'aria-labelledby': string,
};
DataListRadio.defaultProps = {
className: '',
isValid: true,
isDisabled: false,
isChecked: false,
checked: false,
onChange: () => {},
'aria-labelledby': '',
};
export default DataListRadio;

36
awx/ui_next/src/components/DataListRadio/DataListRadio.test.jsx
View File

@ -1,36 +0,0 @@
import React from 'react';
import { mountWithContexts } from '@testUtils/enzymeHelpers';
import DataListRadio from './DataListRadio';
describe('DataListRadio', () => {
test('should call onChange', () => {
const onChange = jest.fn();
const wrapper = mountWithContexts(<DataListRadio onChange={onChange} />);
wrapper.find('input[type="radio"]').prop('onChange')({
currentTarget: { checked: true },
});
expect(onChange).toHaveBeenCalledWith(true, {
currentTarget: { checked: true },
});
});
test('should pass props to correct children', () => {
const onChange = jest.fn();
const wrapper = mountWithContexts(
<DataListRadio
onChange={onChange}
className="foo"
isValid
isDisabled
checked
/>
);
const div = wrapper.find('.pf-c-data-list__item-control');
const input = wrapper.find('input[type="radio"]');
expect(div.prop('className')).toEqual('pf-c-data-list__item-control foo');
expect(input.prop('disabled')).toBe(true);
expect(input.prop('checked')).toBe(true);
expect(input.prop('aria-invalid')).toBe(false);
});
});

1
awx/ui_next/src/components/DataListRadio/index.js
View File

@ -1 +0,0 @@
export { default } from './DataListRadio';

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

@ -7,10 +7,10 @@ import styled from 'styled-components';
import { SearchIcon } from '@patternfly/react-icons';
import {
DataToolbar,
DataToolbarContent,
DataToolbarGroup,
DataToolbarToggleGroup,
DataToolbarContent as _DataToolbarContent,
DataToolbarGroup as _DataToolbarGroup,
DataToolbarItem,
DataToolbarToggleGroup,
} from '@patternfly/react-core/dist/umd/experimental';
import ExpandCollapse from '../ExpandCollapse';
import Search from '../Search';
@ -18,20 +18,12 @@ import Sort from '../Sort';
import { SearchColumns, SortColumns, QSConfig } from '@types';
const AdditionalControlsWrapper = styled.div`
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: center;
& > :not(:first-child) {
margin-left: 20px;
}
const DataToolbarContent = styled(_DataToolbarContent)`
--pf-c-data-toolbar__content--PaddingLeft: 24px;
--pf-c-data-toolbar__content--PaddingRight: 8px;
`;
const AdditionalControlsDataToolbarGroup = styled(DataToolbarGroup)`
margin-left: auto;
margin-right: 0 !important;
const DataToolbarGroup = styled(_DataToolbarGroup)`
--pf-c-data-toolbar__group--spacer: 24px;
`;
class DataListToolbar extends React.Component {
@ -102,13 +94,11 @@ class DataListToolbar extends React.Component {
</Fragment>
)}
</DataToolbarGroup>
<AdditionalControlsDataToolbarGroup>
<DataToolbarItem>
<AdditionalControlsWrapper>
{additionalControls}
</AdditionalControlsWrapper>
</DataToolbarItem>
</AdditionalControlsDataToolbarGroup>
<DataToolbarGroup css="margin-left: auto">
{additionalControls.map(control => (
<DataToolbarItem key={control.key}>{control}</DataToolbarItem>
))}
</DataToolbarGroup>
</DataToolbarContent>
</DataToolbar>
);

103
awx/ui_next/src/components/NotificationList/NotificationListItem.jsx
View File

@ -4,24 +4,20 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import {
DataListAction as _DataListAction,
DataListCell,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListCell as PFDataListCell,
DataListItemRow,
Switch,
} from '@patternfly/react-core';
import styled from 'styled-components';
const DataListCell = styled(PFDataListCell)`
display: flex;
justify-content: ${props => (props.righthalf ? 'flex-start' : 'inherit')};
padding-bottom: ${props => (props.righthalf ? '16px' : '8px')};
@media screen and (min-width: 768px) {
justify-content: ${props => (props.righthalf ? 'flex-end' : 'inherit')};
padding-bottom: 0;
}
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(3, max-content);
`;
function NotificationListItem(props) {
@ -51,7 +47,6 @@ function NotificationListItem(props) {
to={{
pathname: detailUrl,
}}
css="margin-right: 1.5em;"
>
<b id={`items-list-item-${notification.id}`}>
{notification.name}
@ -61,51 +56,47 @@ function NotificationListItem(props) {
<DataListCell key="type">
{typeLabels[notification.notification_type]}
</DataListCell>,
<DataListCell righthalf="true" key="toggles">
<Switch
id={`notification-${notification.id}-started-toggle`}
label={i18n._(t`Start`)}
labelOff={i18n._(t`Start`)}
isChecked={startedTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(
notification.id,
startedTurnedOn,
'started'
)
}
aria-label={i18n._(t`Toggle notification start`)}
/>
<Switch
id={`notification-${notification.id}-success-toggle`}
label={i18n._(t`Success`)}
labelOff={i18n._(t`Success`)}
isChecked={successTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(
notification.id,
successTurnedOn,
'success'
)
}
aria-label={i18n._(t`Toggle notification success`)}
/>
<Switch
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
labelOff={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(notification.id, errorTurnedOn, 'error')
}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={`items-list-item-${notification.id}`}
id={`items-list-item-${notification.id}`}
>
<Switch
id={`notification-${notification.id}-started-toggle`}
label={i18n._(t`Start`)}
labelOff={i18n._(t`Start`)}
isChecked={startedTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(notification.id, startedTurnedOn, 'started')
}
aria-label={i18n._(t`Toggle notification start`)}
/>
<Switch
id={`notification-${notification.id}-success-toggle`}
label={i18n._(t`Success`)}
labelOff={i18n._(t`Success`)}
isChecked={successTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(notification.id, successTurnedOn, 'success')
}
aria-label={i18n._(t`Toggle notification success`)}
/>
<Switch
id={`notification-${notification.id}-error-toggle`}
label={i18n._(t`Failure`)}
labelOff={i18n._(t`Failure`)}
isChecked={errorTurnedOn}
isDisabled={!canToggleNotifications}
onChange={() =>
toggleNotification(notification.id, errorTurnedOn, 'error')
}
aria-label={i18n._(t`Toggle notification failure`)}
/>
</DataListAction>
</DataListItemRow>
</DataListItem>
);

698
awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap
View File

@ -42,7 +42,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
<DataListItemCells
dataListCells={
Array [
<ForwardRef>
<DataListCell>
<ForwardRef
to={
Object {
@ -56,41 +56,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
Foo
</b>
</ForwardRef>
</ForwardRef>,
<ForwardRef>
</DataListCell>,
<DataListCell>
Slack
</ForwardRef>,
<ForwardRef
righthalf="true"
>
<Unknown
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
/>
<Unknown
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
/>
<Unknown
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
/>
</ForwardRef>,
</DataListCell>,
]
}
key=".0"
@ -99,453 +68,324 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
<div
className="pf-c-data-list__item-content"
>
<NotificationListItem__DataListCell
<DataListCell
key="name"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListCell-w674ng-0",
"isStatic": false,
"lastClassName": "dXsFLF",
"rules": Array [
"display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
],
},
"displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
<div
className="pf-c-data-list__cell"
>
<DataListCell
className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
<Link
to={
Object {
"pathname": "/foo",
}
}
>
<div
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
<LinkAnchor
href="/foo"
navigate={[Function]}
>
<Styled(Link)
to={
Object {
"pathname": "/foo",
}
}
<a
href="/foo"
onClick={[Function]}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": true,
"lastClassName": "eBseNd",
"rules": Array [
"margin-right: 1.5em;",
],
},
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"propTypes": Object {
"innerRef": [Function],
"onClick": [Function],
"replace": [Function],
"target": [Function],
"to": [Function],
},
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": Object {
"$$typeof": Symbol(react.forward_ref),
"displayName": "Link",
"propTypes": Object {
"innerRef": [Function],
"onClick": [Function],
"replace": [Function],
"target": [Function],
"to": [Function],
},
"render": [Function],
},
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
to={
Object {
"pathname": "/foo",
}
}
<b
id="items-list-item-9000"
>
<Link
className="sc-bdVaJa eBseNd"
to={
Object {
"pathname": "/foo",
}
}
>
<LinkAnchor
className="sc-bdVaJa eBseNd"
href="/foo"
navigate={[Function]}
>
<a
className="sc-bdVaJa eBseNd"
href="/foo"
onClick={[Function]}
>
<b
id="items-list-item-9000"
>
Foo
</b>
</a>
</LinkAnchor>
</Link>
</StyledComponent>
</Styled(Link)>
</div>
</DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
Foo
</b>
</a>
</LinkAnchor>
</Link>
</div>
</DataListCell>
<DataListCell
key="type"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListCell-w674ng-0",
"isStatic": false,
"lastClassName": "dXsFLF",
"rules": Array [
"display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
],
},
"displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
<div
className="pf-c-data-list__cell"
>
<DataListCell
className="NotificationListItem__DataListCell-w674ng-0 faYgxF"
>
<div
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 faYgxF"
>
Slack
</div>
</DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
key="toggles"
righthalf="true"
Slack
</div>
</DataListCell>
</div>
</DataListItemCells>
<NotificationListItem__DataListAction
aria-label="actions"
aria-labelledby="items-list-item-9000"
id="items-list-item-9000"
key=".1"
rowid="items-list-item-9000"
>
<StyledComponent
aria-label="actions"
aria-labelledby="items-list-item-9000"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListAction-w674ng-0",
"isStatic": true,
"lastClassName": "hhZchj",
"rules": Array [
"align-items:center;display:grid;grid-gap:16px;grid-template-columns:repeat(3,max-content);",
],
},
"displayName": "NotificationListItem__DataListAction",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListAction-w674ng-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
id="items-list-item-9000"
rowid="items-list-item-9000"
>
<DataListAction
aria-label="actions"
aria-labelledby="items-list-item-9000"
className="NotificationListItem__DataListAction-w674ng-0 hhZchj"
id="items-list-item-9000"
rowid="items-list-item-9000"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListCell-w674ng-0",
"isStatic": false,
"lastClassName": "dXsFLF",
"rules": Array [
"display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
],
},
"displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListCell-w674ng-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
righthalf="true"
<div
className="pf-c-data-list__item-action NotificationListItem__DataListAction-w674ng-0 hhZchj"
rowid="items-list-item-9000"
>
<DataListCell
className="NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true"
<Component
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
>
<div
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true"
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification start",
"id": "notification-9000-started-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
}
consumerContext={null}
>
<Component
<Switch
aria-label="Toggle notification start"
className=""
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification start",
"id": "notification-9000-started-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
consumerContext={null}
}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-started-toggle"
>
<Switch
<input
aria-label="Toggle notification start"
className=""
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-started-toggle"
>
<input
aria-label="Toggle notification start"
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-started-toggle"
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Start
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Start
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
Start
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Start
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification success",
"id": "notification-9000-success-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
}
consumerContext={null}
>
<Switch
aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification success",
"id": "notification-9000-success-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
consumerContext={null}
}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-success-toggle"
>
<Switch
<input
aria-label="Toggle notification success"
className=""
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-success-toggle"
>
<input
aria-label="Toggle notification success"
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle"
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Success
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Success
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
Success
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Success
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
<Component
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification failure",
"id": "notification-9000-error-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
}
consumerContext={null}
>
<Switch
aria-label="Toggle notification failure"
className=""
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
>
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"aria-label": "Toggle notification failure",
"id": "notification-9000-error-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
consumerContext={null}
}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-error-toggle"
>
<Switch
<input
aria-label="Toggle notification failure"
className=""
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
ouiaContext={
Object {
"isOuia": false,
"ouiaId": null,
}
}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
<label
className="pf-c-switch"
htmlFor="notification-9000-error-toggle"
>
<input
aria-label="Toggle notification failure"
aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle"
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
>
Failure
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Failure
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
</div>
</DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
</div>
</DataListItemCells>
Failure
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
id={null}
>
Failure
</span>
</label>
</Switch>
</ComponentWithOuia>
</Component>
</div>
</DataListAction>
</StyledComponent>
</NotificationListItem__DataListAction>
</div>
</DataListItemRow>
</li>

3
awx/ui_next/src/components/SelectedList/SelectedList.jsx
View File

@ -15,6 +15,7 @@ const Split = styled(PFSplit)`
const SplitLabelItem = styled(SplitItem)`
font-weight: bold;
margin-right: 32px;
word-break: initial;
`;
@ -39,7 +40,7 @@ class SelectedList extends Component {
return (
<Split>
<SplitLabelItem css="margin-right: 32px">{label}</SplitLabelItem>
<SplitLabelItem>{label}</SplitLabelItem>
<SplitItem>
<ChipGroup numChips={5}>
{selected.map(item =>

8
awx/ui_next/src/components/Sparkline/Sparkline.jsx
View File

@ -13,6 +13,10 @@ import { JOB_TYPE_URL_SEGMENTS } from '@constants';
const Link = styled(props => <_Link {...props} />)`
margin-right: 5px;
`;
const Wrapper = styled.div`
display: inline-flex;
`;
/* eslint-enable react/jsx-pascal-case */
const Sparkline = ({ i18n, jobs }) => {
@ -32,13 +36,15 @@ const Sparkline = ({ i18n, jobs }) => {
</Fragment>
);
return jobs.map(job => (
const statusIcons = jobs.map(job => (
<Tooltip position="top" content={generateTooltip(job)} key={job.id}>
<Link to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}>
<StatusIcon status={job.status} />
</Link>
</Tooltip>
));
return <Wrapper>{statusIcons}</Wrapper>;
};
Sparkline.propTypes = {

1
awx/ui_next/src/index.jsx
View File

@ -5,7 +5,6 @@ import { I18n } from '@lingui/react';
import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css';
import './app.scss';
import { isAuthenticated } from '@util/auth';
import Background from '@components/Background';

6
awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
View File

@ -125,9 +125,9 @@ function CredentialList({ i18n }) {
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Credentials`)}
/>,
canAdd && (
<ToolbarAddButton key="add" linkTo="/credentials/add" />
),
...(canAdd
? [<ToolbarAddButton key="add" linkTo="/credentials/add" />]
: []),
]}
/>
)}

42
awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx
View File

@ -5,24 +5,18 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells as _DataListItemCells,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import styled from 'styled-components';
import { Credential } from '@types';
const DataListItemCells = styled(_DataListItemCells)`
${DataListCell}:first-child {
flex-grow: 2;
}
`;
function CredentialListItem({
credential,
detailUrl,
@ -56,21 +50,25 @@ function CredentialListItem({
<DataListCell key="type">
{credential.summary_fields.credential_type.name}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button
variant="plain"
component={Link}
to={`/credentials/${credential.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<Button
variant="plain"
component={Link}
to={`/credentials/${credential.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

11
awx/ui_next/src/screens/Host/HostList/HostList.jsx
View File

@ -224,9 +224,14 @@ class HostsList extends Component {
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Hosts`)}
/>,
canAdd ? (
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
) : null,
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`${match.url}/add`}
/>,
]
: []),
]}
/>
)}

86
awx/ui_next/src/screens/Host/HostList/HostListItem.jsx
View File

@ -4,6 +4,8 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
@ -14,9 +16,16 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { Sparkline } from '@components/Sparkline';
import { Host } from '@types';
import styled from 'styled-components';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 24px;
grid-template-columns: min-content 40px;
`;
class HostListItem extends React.Component {
static propTypes = {
@ -65,9 +74,7 @@ class HostListItem extends React.Component {
<DataListCell key="inventory">
{host.summary_fields.inventory && (
<Fragment>
<b style={{ marginRight: '20px' }}>
{i18n._(t`Inventory`)}
</b>
<b css="margin-right: 24px">{i18n._(t`Inventory`)}</b>
<Link
to={`/inventories/${
host.summary_fields.inventory.kind === 'smart'
@ -80,43 +87,44 @@ class HostListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<DataListCell key="enable" alignRight isFilled={false}>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included in running jobs. For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
)}
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
isChecked={host.enabled}
isDisabled={
toggleLoading ||
!host.summary_fields.user_capabilities.edit
}
onChange={() => onToggleHost(host)}
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{host.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
variant="plain"
component={Link}
to={`/hosts/${host.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included in running jobs. For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
)}
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
isChecked={host.enabled}
isDisabled={
toggleLoading || !host.summary_fields.user_capabilities.edit
}
onChange={() => onToggleHost(host)}
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
{host.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button
variant="plain"
component={Link}
to={`/hosts/${host.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

30
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx
View File

@ -6,17 +6,17 @@ import { Group } from '@types';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
function InventoryGroupItem({
i18n,
group,
@ -39,22 +39,26 @@ function InventoryGroupItem({
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<DataListCell key="name">
<Link to={`${detailUrl}`} id={labelId}>
<b>{group.name}</b>
</Link>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top">
<Button variant="plain" component={Link} to={editUrl}>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top">
<Button variant="plain" component={Link} to={editUrl}>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

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

@ -238,12 +238,14 @@ function InventoryGroupsList({ i18n, location, match }) {
</DeleteButton>
</div>
</Tooltip>,
canAdd && (
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
/>
),
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${inventoryId}/groups/add`}
/>,
]
: []),
]}
/>
)}

81
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx
View File

@ -4,19 +4,27 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Switch,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { Sparkline } from '@components/Sparkline';
import { Host } from '@types';
import styled from 'styled-components';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 24px;
grid-template-columns: min-content 40px;
`;
function InventoryHostItem(props) {
const {
@ -56,41 +64,42 @@ function InventoryHostItem(props) {
<DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} />
</DataListCell>,
<DataListCell key="enable" alignRight isFilled={false}>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included
in running jobs. For hosts that are part of an external
inventory, this may be reset by the inventory sync process.`
)}
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
isChecked={host.enabled}
isDisabled={
toggleLoading ||
!host.summary_fields.user_capabilities?.edit
}
onChange={() => toggleHost(host)}
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{host.summary_fields.user_capabilities?.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button variant="plain" component={Link} to={`${editUrl}`}>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included
in running jobs. For hosts that are part of an external
inventory, this may be reset by the inventory sync process.`
)}
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
isChecked={host.enabled}
isDisabled={
toggleLoading || !host.summary_fields.user_capabilities?.edit
}
onChange={() => toggleHost(host)}
aria-label={i18n._(t`Toggle host`)}
/>
</Tooltip>
{host.summary_fields.user_capabilities?.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top">
<Button variant="plain" component={Link} to={`${editUrl}`}>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

14
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
View File

@ -165,12 +165,14 @@ function InventoryHostList({ i18n, location, match }) {
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Hosts`)}
/>,
canAdd && (
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
/>
),
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`/inventories/inventory/${match.params.id}/hosts/add`}
/>,
]
: []),
]}
/>
)}

2
awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
View File

@ -208,7 +208,7 @@ class InventoriesList extends Component {
itemsToDelete={selected}
pluralizedItemName="Inventories"
/>,
canAdd && addButton,
...(canAdd ? [addButton] : []),
]}
/>
)}

41
awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx
View File

@ -3,17 +3,18 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { Inventory } from '@types';
class InventoryListItem extends React.Component {
@ -52,25 +53,27 @@ class InventoryListItem extends React.Component {
? i18n._(t`Smart Inventory`)
: i18n._(t`Inventory`)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{inventory.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<Button
variant="plain"
component={Link}
to={`/inventories/${
inventory.kind === 'smart'
? 'smart_inventory'
: 'inventory'
}/${inventory.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{inventory.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<Button
variant="plain"
component={Link}
to={`/inventories/${
inventory.kind === 'smart' ? 'smart_inventory' : 'inventory'
}/${inventory.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

6
awx/ui_next/src/screens/Job/JobList/JobList.test.jsx
View File

@ -23,6 +23,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
start: true,
},
},
},
@ -34,6 +35,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
start: true,
},
},
},
@ -45,6 +47,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
start: true,
},
},
},
@ -56,6 +59,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
start: true,
},
},
},
@ -67,6 +71,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
},
},
},
@ -78,6 +83,7 @@ const mockResults = [
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
},
},
},

45
awx/ui_next/src/screens/Job/JobList/JobListItem.jsx
View File

@ -5,6 +5,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
@ -20,28 +21,26 @@ import { formatDateString } from '@util/dates';
import { JOB_TYPE_URL_SEGMENTS } from '@constants';
const PaddedIcon = styled(StatusIcon)`
margin-right: 20px;
margin: 6px 20px 0 0;
`;
class JobListItem extends Component {
render() {
const { i18n, job, isSelected, onSelect } = this.props;
const labelId = `check-action-${job.id}`;
return (
<DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
<DataListItem aria-labelledby={labelId} id={`${job.id}`}>
<DataListItemRow>
<DataListCheck
id={`select-job-${job.id}`}
checked={isSelected}
onChange={onSelect}
aria-labelledby={`check-action-${job.id}`}
aria-labelledby={labelId}
/>
<DataListItemCells
dataListCells={[
<DataListCell
key="name"
css="display: inline-flex; align-items: center;"
>
<DataListCell key="name" css="display: inline-flex;">
{job.status && <PaddedIcon status={job.status} />}
<span>
<Link
@ -57,22 +56,26 @@ class JobListItem extends Component {
<DataListCell key="finished">
{formatDateString(job.finished)}
</DataListCell>,
<DataListCell isFilled={false} alignRight key="relaunch">
{job.type !== 'system_job' &&
job.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
)}
</DataListCell>,
]}
/>
{job.type !== 'system_job' &&
job.summary_fields?.user_capabilities?.start && (
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
<Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}>
{({ handleRelaunch }) => (
<Button variant="plain" onClick={handleRelaunch}>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
</DataListAction>
)}
</DataListItemRow>
</DataListItem>
);

6
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
View File

@ -146,9 +146,9 @@ function OrganizationsList({ i18n }) {
itemsToDelete={selected}
pluralizedItemName="Organizations"
/>,
canAdd ? (
<ToolbarAddButton key="add" linkTo={addUrl} />
) : null,
...(canAdd
? [<ToolbarAddButton key="add" linkTo={addUrl} />]
: []),
]}
/>
)}

3
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.test.jsx
View File

@ -23,6 +23,7 @@ const mockOrganizations = {
},
user_capabilities: {
delete: true,
edit: true,
},
},
},
@ -37,6 +38,7 @@ const mockOrganizations = {
},
user_capabilities: {
delete: true,
edit: true,
},
},
},
@ -51,6 +53,7 @@ const mockOrganizations = {
},
user_capabilities: {
delete: true,
edit: true,
},
},
},

51
awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx
View File

@ -5,36 +5,29 @@ import { t } from '@lingui/macro';
import {
Badge as PFBadge,
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { Organization } from '@types';
const Badge = styled(PFBadge)`
align-items: center;
display: flex;
justify-content: center;
margin-left: 10px;
margin-left: 8px;
`;
const ListGroup = styled.span`
display: flex;
margin-left: 40px;
margin-left: 24px;
@media screen and (min-width: 768px) {
margin-left: 20px;
&:first-of-type {
margin-left: 0;
}
&:first-of-type {
margin-left: 0;
}
`;
@ -82,21 +75,25 @@ function OrganizationListItem({
</Badge>
</ListGroup>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{organization.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<Button
variant="plain"
component={Link}
to={`/organizations/${organization.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{organization.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<Button
variant="plain"
component={Link}
to={`/organizations/${organization.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

11
awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
View File

@ -206,9 +206,14 @@ class ProjectsList extends Component {
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Projects`)}
/>,
canAdd ? (
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
) : null,
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`${match.url}/add`}
/>,
]
: []),
]}
/>
)}

85
awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx
View File

@ -3,6 +3,8 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react';
import {
Button,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
@ -12,14 +14,24 @@ import {
import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
import ClipboardCopyButton from '@components/ClipboardCopyButton';
import DataListCell from '@components/DataListCell';
import ProjectSyncButton from '../shared/ProjectSyncButton';
import { StatusIcon } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import { Project } from '@types';
const PaddedIcon = styled(StatusIcon)`
margin: 6px 20px 0 0;
`;
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 40px);
`;
class ProjectListItem extends React.Component {
static propTypes = {
project: Project.isRequired,
@ -72,7 +84,7 @@ class ProjectListItem extends React.Component {
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<DataListCell key="name" css="display: inline-flex">
{project.summary_fields.last_job && (
<Tooltip
position="top"
@ -84,17 +96,13 @@ class ProjectListItem extends React.Component {
<Link
to={`/jobs/project/${project.summary_fields.last_job.id}`}
>
<StatusIcon
<PaddedIcon
status={project.summary_fields.last_job.status}
/>
</Link>
</Tooltip>
)}
<Link
id={labelId}
to={`${detailUrl}`}
css={{ marginLeft: '10px' }}
>
<Link id={labelId} to={`${detailUrl}`}>
<b>{project.name}</b>
</Link>
</DataListCell>,
@ -103,7 +111,7 @@ class ProjectListItem extends React.Component {
? i18n._(t`Manual`)
: toTitleCase(project.scm_type)}
</DataListCell>,
<DataListCell alignRight isFilled={false} key="revision">
<DataListCell key="revision">
{project.scm_revision.substring(0, 7)}
{project.scm_revision ? (
<ClipboardCopyButton
@ -113,34 +121,41 @@ class ProjectListItem extends React.Component {
/>
) : null}
</DataListCell>,
<DataListCell alignRight isFilled={false} key="sync">
{project.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}>
{handleSync => (
<Button variant="plain" onClick={handleSync}>
<SyncIcon />
</Button>
)}
</ProjectSyncButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{project.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<Button
variant="plain"
component={Link}
to={`/projects/${project.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{project.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}>
{handleSync => (
<Button
css="grid-column: 1"
variant="plain"
onClick={handleSync}
>
<SyncIcon />
</Button>
)}
</ProjectSyncButton>
</Tooltip>
)}
{project.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<Button
css="grid-column: 2"
variant="plain"
component={Link}
to={`/projects/${project.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

11
awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
View File

@ -193,9 +193,14 @@ class TeamsList extends Component {
itemsToDelete={selected}
pluralizedItemName={i18n._(t`Teams`)}
/>,
canAdd ? (
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
) : null,
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`${match.url}/add`}
/>,
]
: []),
]}
/>
)}

3
awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx
View File

@ -17,6 +17,7 @@ const mockAPITeamsList = {
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
},
},
},
@ -27,6 +28,7 @@ const mockAPITeamsList = {
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
},
},
},
@ -37,6 +39,7 @@ const mockAPITeamsList = {
summary_fields: {
user_capabilities: {
delete: true,
edit: true,
},
},
},

42
awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx
View File

@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { Team } from '@types';
class TeamListItem extends React.Component {
@ -27,6 +28,7 @@ class TeamListItem extends React.Component {
render() {
const { team, isSelected, onSelect, detailUrl, i18n } = this.props;
const labelId = `check-action-${team.id}`;
return (
<DataListItem key={team.id} aria-labelledby={labelId} id={`${team.id}`}>
<DataListItemRow>
@ -38,7 +40,7 @@ class TeamListItem extends React.Component {
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<DataListCell key="name">
<Link id={labelId} to={`${detailUrl}`}>
<b>{team.name}</b>
</Link>
@ -46,9 +48,7 @@ class TeamListItem extends React.Component {
<DataListCell key="organization">
{team.summary_fields.organization && (
<Fragment>
<b css={{ marginRight: '20px' }}>
{i18n._(t`Organization`)}
</b>
<b css="margin-right: 24px">{i18n._(t`Organization`)}</b>
<Link
to={`/organizations/${team.summary_fields.organization.id}/details`}
>
@ -57,21 +57,25 @@ class TeamListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{team.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<Button
variant="plain"
component={Link}
to={`/teams/${team.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{team.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<Button
variant="plain"
component={Link}
to={`/teams/${team.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

6
awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
View File

@ -121,21 +121,25 @@ function TemplateList({ i18n }) {
const canAddWFJT =
wfjtActions && Object.prototype.hasOwnProperty.call(wfjtActions, 'POST');
const addButtonOptions = [];
if (canAddJT) {
addButtonOptions.push({
label: i18n._(t`Template`),
url: `/templates/job_template/add/`,
});
}
if (canAddWFJT) {
addButtonOptions.push({
label: i18n._(t`Workflow Template`),
url: `/templates/workflow_job_template/add/`,
});
}
const addButton = (
<AddDropDownButton key="add" dropdownItems={addButtonOptions} />
);
return (
<>
<Card>
@ -215,7 +219,7 @@ function TemplateList({ i18n }) {
itemsToDelete={selected}
pluralizedItemName="Templates"
/>,
(canAddJT || canAddWFJT) && addButton,
...(canAddJT || canAddWFJT ? [addButton] : []),
]}
/>
)}

78
awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx
View File

@ -2,6 +2,8 @@ import React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
DataListAction as _DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
@ -16,12 +18,20 @@ import {
RocketIcon,
} from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import LaunchButton from '@components/LaunchButton';
import { Sparkline } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import styled from 'styled-components';
const DataListAction = styled(_DataListAction)`
align-items: center;
display: grid;
grid-gap: 16px;
grid-template-columns: repeat(2, 40px);
`;
function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
const labelId = `check-action-${template.id}`;
const canLaunch = template.summary_fields.user_capabilities.start;
const missingResourceIcon =
@ -31,16 +41,13 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
!template.ask_inventory_on_launch));
return (
<DataListItem
aria-labelledby={`check-action-${template.id}`}
id={`${template.id}`}
>
<DataListItem aria-labelledby={labelId} id={`${template.id}`}>
<DataListItemRow>
<DataListCheck
id={`select-jobTemplate-${template.id}`}
checked={isSelected}
onChange={onSelect}
aria-labelledby={`check-action-${template.id}`}
aria-labelledby={labelId}
/>
<DataListItemCells
dataListCells={[
@ -69,34 +76,41 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} />
</DataListCell>,
<DataListCell alignRight isFilled={false} key="launch">
{canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<Button variant="plain" onClick={handleLaunch}>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<Button
css="grid-column: 1"
variant="plain"
onClick={handleLaunch}
>
<RocketIcon />
</Button>
)}
</LaunchButton>
</Tooltip>
)}
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<Button
css="grid-column: 2"
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);

10
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeModal.test.jsx
View File

@ -109,7 +109,7 @@ describe('NodeModal', () => {
wrapper.find('button#next-node-modal').simulate('click');
});
wrapper.update();
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
await act(async () => {
wrapper.find('button#next-node-modal').simulate('click');
});
@ -136,7 +136,7 @@ describe('NodeModal', () => {
wrapper.find('AnsibleSelect').prop('onChange')(null, 'project_sync');
});
wrapper.update();
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
await act(async () => {
wrapper.find('button#next-node-modal').simulate('click');
});
@ -166,7 +166,7 @@ describe('NodeModal', () => {
);
});
wrapper.update();
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
await act(async () => {
wrapper.find('button#next-node-modal').simulate('click');
});
@ -193,7 +193,7 @@ describe('NodeModal', () => {
);
});
wrapper.update();
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
await act(async () => {
wrapper.find('button#next-node-modal').simulate('click');
});
@ -396,7 +396,7 @@ describe('NodeModal', () => {
);
});
wrapper.update();
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
await act(async () => {
wrapper.find('button#next-node-modal').simulate('click');
});

6
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.jsx
View File

@ -7,7 +7,6 @@ import { Formik, Field } from 'formik';
import { Form, FormGroup, TextInput } from '@patternfly/react-core';
import FormRow from '@components/FormRow';
import AnsibleSelect from '@components/AnsibleSelect';
import VerticalSeperator from '@components/VerticalSeparator';
import InventorySourcesList from './InventorySourcesList';
import JobTemplatesList from './JobTemplatesList';
import ProjectsList from './ProjectsList';
@ -47,9 +46,8 @@ function NodeTypeStep({
}) {
return (
<>
<div css=" display: flex; align-items: center; margin-bottom: 20px;">
<b>{i18n._(t`Node Type`)}</b>
<VerticalSeperator />
<div css="display: flex; align-items: center; margin-bottom: 20px;">
<b css="margin-right: 24px">{i18n._(t`Node Type`)}</b>
<div>
<AnsibleSelect
id="nodeResource-select"

8
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/Modals/NodeModals/NodeTypeStep/NodeTypeStep.test.jsx
View File

@ -94,7 +94,7 @@ describe('NodeTypeStep', () => {
wrapper.update();
expect(wrapper.find('AnsibleSelect').prop('value')).toBe('job_template');
expect(wrapper.find('JobTemplatesList').length).toBe(1);
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 1,
name: 'Test Job Template',
@ -119,7 +119,7 @@ describe('NodeTypeStep', () => {
wrapper.update();
expect(wrapper.find('AnsibleSelect').prop('value')).toBe('project_sync');
expect(wrapper.find('ProjectsList').length).toBe(1);
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 1,
name: 'Test Project',
@ -146,7 +146,7 @@ describe('NodeTypeStep', () => {
'inventory_source_sync'
);
expect(wrapper.find('InventorySourcesList').length).toBe(1);
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 1,
name: 'Test Inventory Source',
@ -173,7 +173,7 @@ describe('NodeTypeStep', () => {
'workflow_job_template'
);
expect(wrapper.find('WorkflowJobTemplatesList').length).toBe(1);
wrapper.find('DataListRadio').simulate('click');
wrapper.find('Radio').simulate('click');
expect(onUpdateNodeResource).toHaveBeenCalledWith({
id: 1,
name: 'Test Workflow Job Template',

16
awx/ui_next/src/screens/Template/WorkflowJobTemplateVisualizer/VisualizerToolbar.jsx
View File

@ -6,7 +6,12 @@ import {
import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import { func, shape } from 'prop-types';
import { Badge as PFBadge, Button, Tooltip } from '@patternfly/react-core';
import {
Badge as PFBadge,
Button,
Title,
Tooltip,
} from '@patternfly/react-core';
import {
BookIcon,
CompassIcon,
@ -15,7 +20,6 @@ import {
TrashAltIcon,
WrenchIcon,
} from '@patternfly/react-icons';
import VerticalSeparator from '@components/VerticalSeparator';
import styled from 'styled-components';
const Badge = styled(PFBadge)`
@ -51,15 +55,12 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
return (
<div id="visualizer-toolbar">
<div css="align-items: center; border-bottom: 1px solid grey; display: flex; height: 56px; padding: 0px 20px;">
<div css="display: flex;" id="visualizer-toolbar-template-name">
<b>{template.name}</b>
</div>
<Title size="xl">{template.name}</Title>
<div css="align-items: center; display: flex; flex: 1; justify-content: flex-end">
<div>{i18n._(t`Total Nodes`)}</div>
<Badge id="visualizer-total-nodes-badge" isRead>
{totalNodes}
</Badge>
<VerticalSeparator />
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
<ActionButton
id="visualizer-toggle-legend"
@ -108,16 +109,15 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
<TrashAltIcon />
</ActionButton>
</Tooltip>
<VerticalSeparator />
<Button
id="visualizer-save"
css="margin: 0 32px"
aria-label={i18n._(t`Save`)}
variant="primary"
onClick={onSave}
>
{i18n._(t`Save`)}
</Button>
<VerticalSeparator />
<Button
id="visualizer-close"
aria-label={i18n._(t`Close`)}

11
awx/ui_next/src/screens/User/UserList/UserList.jsx
View File

@ -197,9 +197,14 @@ class UsersList extends Component {
itemsToDelete={selected}
pluralizedItemName="Users"
/>,
canAdd ? (
<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
) : null,
...(canAdd
? [
<ToolbarAddButton
key="add"
linkTo={`${match.url}/add`}
/>,
]
: []),
]}
/>
)}

41
awx/ui_next/src/screens/User/UserList/UserListItem.jsx
View File

@ -4,16 +4,17 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro';
import {
Button,
DataListAction,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
DataListItemRow,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import { User } from '@types';
class UserListItem extends React.Component {
@ -38,7 +39,7 @@ class UserListItem extends React.Component {
/>
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<DataListCell key="username">
<Link to={`${detailUrl}`} id={labelId}>
<b>{user.username}</b>
</Link>
@ -46,7 +47,7 @@ class UserListItem extends React.Component {
<DataListCell key="first-name">
{user.first_name && (
<Fragment>
<b css={{ marginRight: '20px' }}>{i18n._(t`First Name`)}</b>
<b css="margin-right: 24px">{i18n._(t`First Name`)}</b>
{user.first_name}
</Fragment>
)}
@ -54,26 +55,30 @@ class UserListItem extends React.Component {
<DataListCell key="last-name">
{user.last_name && (
<Fragment>
<b css={{ marginRight: '20px' }}>{i18n._(t`Last Name`)}</b>
<b css="margin-right: 24px">{i18n._(t`Last Name`)}</b>
{user.last_name}
</Fragment>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top">
<Button
variant="plain"
component={Link}
to={`/users/${user.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListCell>,
]}
/>
<DataListAction
aria-label="actions"
aria-labelledby={labelId}
id={labelId}
>
{user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top">
<Button
variant="plain"
component={Link}
to={`/users/${user.id}/edit`}
>
<PencilAltIcon />
</Button>
</Tooltip>
)}
</DataListAction>
</DataListItemRow>
</DataListItem>
);