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

Merge pull request #5914 from marshmalien/5866-remove-custom-list-btns

Browse Source 
Remove Switch, ListActionButton, and ActionButtonCell components

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2020-02-13 21:14:31 +00:00
committed by GitHub
parent ef3ab29649 590199baff
commit cd6d2299a9
28 changed files with 253 additions and 525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx
View File

@@ -1,10 +0,0 @@
import DataListCell from '@components/DataListCell';
import styled from 'styled-components';
const ActionButtonCell = styled(DataListCell)`
& > :not(:first-child) {
margin-left: 20px;
}
`;
ActionButtonCell.displayName = 'ActionButtonCell';
export default ActionButtonCell;

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

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

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

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

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

@@ -5,10 +5,9 @@ import {
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
DataListCell, DataListCell,
DataListCheck,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import DataListCheck from '@components/DataListCheck';
import DataListRadio from '@components/DataListRadio'; import DataListRadio from '@components/DataListRadio';
import VerticalSeparator from '../VerticalSeparator';
const CheckboxListItem = ({ const CheckboxListItem = ({
itemId, itemId,
@@ -37,12 +36,6 @@ const CheckboxListItem = ({
/> />
<DataListItemCells <DataListItemCells
dataListCells={[ dataListCells={[
<DataListCell
key="divider"
className="pf-c-data-list__cell--divider"
>
<VerticalSeparator />
</DataListCell>,
<DataListCell key="name"> <DataListCell key="name">
<label <label
id={`check-action-item-${itemId}`} id={`check-action-item-${itemId}`}

16
awx/ui_next/src/components/ClipboardCopyButton/ClipboardCopyButton.jsx
View File

@@ -3,18 +3,6 @@ import PropTypes from 'prop-types';
import { Button, Tooltip } from '@patternfly/react-core'; import { Button, Tooltip } from '@patternfly/react-core';
import { CopyIcon } from '@patternfly/react-icons'; import { CopyIcon } from '@patternfly/react-icons';
import styled from 'styled-components';
const CopyButton = styled(Button)`
padding: 2px 4px;
margin-left: 8px;
border: none;
&:hover {
background-color: #0066cc;
color: white;
}
`;
export const clipboardCopyFunc = (event, text) => { export const clipboardCopyFunc = (event, text) => {
const clipboard = event.currentTarget.parentElement; const clipboard = event.currentTarget.parentElement;
const el = document.createElement('input'); const el = document.createElement('input');
@@ -62,13 +50,13 @@ class ClipboardCopyButton extends React.Component {
trigger="mouseenter focus click" trigger="mouseenter focus click"
content={copied ? clickTip : hoverTip} content={copied ? clickTip : hoverTip}
> >
<CopyButton <Button
variant="plain" variant="plain"
onClick={this.handleCopyClick} onClick={this.handleCopyClick}
aria-label={hoverTip} aria-label={hoverTip}
> >
<CopyIcon /> <CopyIcon />
</CopyButton> </Button>
</Tooltip> </Tooltip>
); );
} }

11
awx/ui_next/src/components/ListActionButton/ListActionButton.jsx
View File

@@ -1,11 +0,0 @@
import { Button } from '@patternfly/react-core';
import styled from 'styled-components';
export default styled(Button)`
padding: 5px 8px;
border: none;
&:hover {
background-color: #0066cc;
color: white;
}
`;

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

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

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

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

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

@@ -164,7 +164,7 @@ class NotificationList extends Component {
} }
this.setState(stateUpdateFunction); this.setState(stateUpdateFunction);
} catch (err) { } catch (err) {
this.setState({ toggleError: true }); this.setState({ toggleError: err });
} finally { } finally {
this.setState({ toggleLoading: false }); this.setState({ toggleLoading: false });
} }

12
awx/ui_next/src/components/NotificationList/NotificationList.test.jsx
View File

@@ -123,7 +123,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(1) .at(1)
.find('PFSwitch[aria-label="Toggle notification success"]') .find('Switch[aria-label="Toggle notification success"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -150,7 +150,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('PFSwitch[aria-label="Toggle notification failure"]') .find('Switch[aria-label="Toggle notification failure"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -178,7 +178,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('PFSwitch[aria-label="Toggle notification start"]') .find('Switch[aria-label="Toggle notification start"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -205,7 +205,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('PFSwitch[aria-label="Toggle notification success"]') .find('Switch[aria-label="Toggle notification success"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -232,7 +232,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(1) .at(1)
.find('PFSwitch[aria-label="Toggle notification failure"]') .find('Switch[aria-label="Toggle notification failure"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -259,7 +259,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(2) .at(2)
.find('PFSwitch[aria-label="Toggle notification start"]') .find('Switch[aria-label="Toggle notification start"]')
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 1,

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

@@ -8,8 +8,8 @@ import {
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
DataListCell as PFDataListCell, DataListCell as PFDataListCell,
Switch,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import Switch from '@components/Switch';
import styled from 'styled-components'; import styled from 'styled-components';

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

@@ -63,7 +63,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
<ForwardRef <ForwardRef
righthalf="true" righthalf="true"
> >
<ForwardRef <Unknown
aria-label="Toggle notification start" aria-label="Toggle notification start"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
@@ -72,7 +72,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
/> />
<ForwardRef <Unknown
aria-label="Toggle notification success" aria-label="Toggle notification success"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
@@ -81,7 +81,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
/> />
<ForwardRef <Unknown
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
@@ -315,7 +315,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF" className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true" righthalf="true"
> >
<Switch <Component
aria-label="Toggle notification start" aria-label="Toggle notification start"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
@@ -324,118 +324,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
> >
<StyledComponent <ComponentWithOuia
aria-label="Toggle notification start" component={[Function]}
forwardedComponent={ componentProps={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "aria-label": "Toggle notification start",
"attrs": Array [], "id": "notification-9000-started-toggle",
"componentStyle": ComponentStyle { "isChecked": false,
"componentId": "Switch-sc-1xwas62-0", "isDisabled": false,
"isStatic": true, "label": "Start",
"lastClassName": "eJQXYh", "labelOff": "Start",
"rules": Array [ "onChange": [Function],
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
],
},
"displayName": "Switch",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
forwardedRef={null} consumerContext={null}
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
> >
<PFSwitch <Switch
aria-label="Toggle notification start" aria-label="Toggle notification start"
className="Switch-sc-1xwas62-0 eJQXYh" className=""
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Start" label="Start"
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
> ouiaContext={
<ComponentWithOuia Object {
component={[Function]} "isOuia": false,
componentProps={ "ouiaId": null,
Object {
"aria-label": "Toggle notification start",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-started-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
} }
consumerContext={null} }
>
<label
className="pf-c-switch"
htmlFor="notification-9000-started-toggle"
> >
<Switch <input
aria-label="Toggle notification start" aria-label="Toggle notification start"
className="Switch-sc-1xwas62-0 eJQXYh" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Start
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh" </span>
htmlFor="notification-9000-started-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification start" id={null}
aria-labelledby={null} >
checked={false} Start
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-started-toggle" </Switch>
onChange={[Function]} </ComponentWithOuia>
type="checkbox" </Component>
/> <Component
<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>
</PFSwitch>
</StyledComponent>
</Switch>
<Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
@@ -444,118 +399,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
> >
<StyledComponent <ComponentWithOuia
aria-label="Toggle notification success" component={[Function]}
forwardedComponent={ componentProps={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "aria-label": "Toggle notification success",
"attrs": Array [], "id": "notification-9000-success-toggle",
"componentStyle": ComponentStyle { "isChecked": false,
"componentId": "Switch-sc-1xwas62-0", "isDisabled": false,
"isStatic": true, "label": "Success",
"lastClassName": "eJQXYh", "labelOff": "Success",
"rules": Array [ "onChange": [Function],
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
],
},
"displayName": "Switch",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
forwardedRef={null} consumerContext={null}
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
> >
<PFSwitch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="Switch-sc-1xwas62-0 eJQXYh" className=""
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Success" label="Success"
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
> ouiaContext={
<ComponentWithOuia Object {
component={[Function]} "isOuia": false,
componentProps={ "ouiaId": null,
Object {
"aria-label": "Toggle notification success",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-success-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
} }
consumerContext={null} }
>
<label
className="pf-c-switch"
htmlFor="notification-9000-success-toggle"
> >
<Switch <input
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="Switch-sc-1xwas62-0 eJQXYh" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Success
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh" </span>
htmlFor="notification-9000-success-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification success" id={null}
aria-labelledby={null} >
checked={false} Success
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-success-toggle" </Switch>
onChange={[Function]} </ComponentWithOuia>
type="checkbox" </Component>
/> <Component
<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>
</PFSwitch>
</StyledComponent>
</Switch>
<Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
@@ -564,117 +474,72 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Failure" labelOff="Failure"
onChange={[Function]} onChange={[Function]}
> >
<StyledComponent <ComponentWithOuia
aria-label="Toggle notification failure" component={[Function]}
forwardedComponent={ componentProps={
Object { Object {
"$$typeof": Symbol(react.forward_ref), "aria-label": "Toggle notification failure",
"attrs": Array [], "id": "notification-9000-error-toggle",
"componentStyle": ComponentStyle { "isChecked": false,
"componentId": "Switch-sc-1xwas62-0", "isDisabled": false,
"isStatic": true, "label": "Failure",
"lastClassName": "eJQXYh", "labelOff": "Failure",
"rules": Array [ "onChange": [Function],
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
],
},
"displayName": "Switch",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
forwardedRef={null} consumerContext={null}
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
> >
<PFSwitch <Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="Switch-sc-1xwas62-0 eJQXYh" className=""
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Failure" label="Failure"
labelOff="Failure" labelOff="Failure"
onChange={[Function]} onChange={[Function]}
> ouiaContext={
<ComponentWithOuia Object {
component={[Function]} "isOuia": false,
componentProps={ "ouiaId": null,
Object {
"aria-label": "Toggle notification failure",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-error-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
} }
consumerContext={null} }
>
<label
className="pf-c-switch"
htmlFor="notification-9000-error-toggle"
> >
<Switch <input
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="Switch-sc-1xwas62-0 eJQXYh" aria-labelledby={null}
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]} onChange={[Function]}
ouiaContext={ type="checkbox"
Object { />
"isOuia": false, <span
"ouiaId": null, className="pf-c-switch__toggle"
} />
} <span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
id={null}
> >
<label Failure
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh" </span>
htmlFor="notification-9000-error-toggle" <span
> aria-hidden="true"
<input className="pf-c-switch__label pf-m-off"
aria-label="Toggle notification failure" id={null}
aria-labelledby={null} >
checked={false} Failure
className="pf-c-switch__input" </span>
disabled={false} </label>
id="notification-9000-error-toggle" </Switch>
onChange={[Function]} </ComponentWithOuia>
type="checkbox" </Component>
/>
<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>
</PFSwitch>
</StyledComponent>
</Switch>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent> </StyledComponent>

10
awx/ui_next/src/components/Switch/Switch.jsx
View File

@@ -1,10 +0,0 @@
import { Switch } from '@patternfly/react-core';
import styled from 'styled-components';
Switch.displayName = 'PFSwitch';
export default styled(Switch)`
display: flex;
flex-wrap: no-wrap;
/* workaround PF bug; used in calculating switch width: */
--pf-c-switch__toggle-icon--Offset: 0.125rem;
`;

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

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

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

@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells as _DataListItemCells, DataListItemCells as _DataListItemCells,
@@ -11,10 +12,8 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import styled from 'styled-components'; import styled from 'styled-components';
import { Credential } from '@types'; import { Credential } from '@types';
@@ -59,19 +58,19 @@ function CredentialListItem({
<DataListCell key="type"> <DataListCell key="type">
{credential.summary_fields.credential_type.name} {credential.summary_fields.credential_type.name}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{canEdit && ( {canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top"> <Tooltip content={i18n._(t`Edit Credential`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/credentials/${credential.id}/edit`} to={`/credentials/${credential.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

3
awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx
View File

@@ -3,7 +3,7 @@ import { Link, useHistory, useParams, useLocation } from 'react-router-dom';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { Host } from '@types'; import { Host } from '@types';
import { Button } from '@patternfly/react-core'; import { Button, Switch } from '@patternfly/react-core';
import { CardBody, CardActionsRow } from '@components/Card'; import { CardBody, CardActionsRow } from '@components/Card';
import AlertModal from '@components/AlertModal'; import AlertModal from '@components/AlertModal';
import ErrorDetail from '@components/ErrorDetail'; import ErrorDetail from '@components/ErrorDetail';
@@ -11,7 +11,6 @@ import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { VariablesDetail } from '@components/CodeMirrorInput'; import { VariablesDetail } from '@components/CodeMirrorInput';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import DeleteButton from '@components/DeleteButton'; import DeleteButton from '@components/DeleteButton';
import Switch from '@components/Switch';
import { HostsAPI } from '@api'; import { HostsAPI } from '@api';
function HostDetail({ host, i18n, onUpdateHost }) { function HostDetail({ host, i18n, onUpdateHost }) {

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

@@ -34,7 +34,7 @@ class HostsList extends Component {
selected: [], selected: [],
itemCount: 0, itemCount: 0,
actions: null, actions: null,
toggleError: false, toggleError: null,
toggleLoading: null, toggleLoading: null,
}; };
@@ -83,7 +83,7 @@ class HostsList extends Component {
} }
handleHostToggleErrorClose() { handleHostToggleErrorClose() {
this.setState({ toggleError: false }); this.setState({ toggleError: null });
} }
async handleHostDelete() { async handleHostDelete() {
@@ -112,7 +112,7 @@ class HostsList extends Component {
), ),
}); });
} catch (err) { } catch (err) {
this.setState({ toggleError: true }); this.setState({ toggleError: err });
} finally { } finally {
this.setState({ toggleLoading: null }); this.setState({ toggleLoading: null });
} }

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

@@ -3,20 +3,19 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
Switch,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import Switch from '@components/Switch';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types'; import { Host } from '@types';
@@ -83,7 +82,7 @@ class HostListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="enable" alignRight isFilled={false}>
<Tooltip <Tooltip
content={i18n._( 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.` 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.`
@@ -91,6 +90,7 @@ class HostListItem extends React.Component {
position="top" position="top"
> >
<Switch <Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`} id={`host-${host.id}-toggle`}
label={i18n._(t`On`)} label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)} labelOff={i18n._(t`Off`)}
@@ -103,18 +103,20 @@ class HostListItem extends React.Component {
aria-label={i18n._(t`Toggle host`)} aria-label={i18n._(t`Toggle host`)}
/> />
</Tooltip> </Tooltip>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{host.summary_fields.user_capabilities.edit && ( {host.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top"> <Tooltip content={i18n._(t`Edit Host`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/hosts/${host.id}/edit`} to={`/hosts/${host.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -5,6 +5,7 @@ import { t } from '@lingui/macro';
import { Group } from '@types'; import { Group } from '@types';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -13,10 +14,8 @@ import {
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
function InventoryGroupItem({ function InventoryGroupItem({
@@ -47,19 +46,15 @@ function InventoryGroupItem({
<b>{group.name}</b> <b>{group.name}</b>
</Link> </Link>
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{group.summary_fields.user_capabilities.edit && ( {group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top"> <Tooltip content={i18n._(t`Edit Group`)} position="top">
<ListActionButton <Button variant="plain" component={Link} to={editUrl}>
variant="plain"
component={Link}
to={editUrl}
>
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -3,20 +3,19 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
Switch,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import Switch from '@components/Switch';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types'; import { Host } from '@types';
@@ -59,7 +58,7 @@ function InventoryHostItem(props) {
<DataListCell key="recentJobs"> <DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} /> <Sparkline jobs={recentPlaybookJobs} />
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="enable" alignRight isFilled={false}>
<Tooltip <Tooltip
content={i18n._( content={i18n._(
t`Indicates if a host is available and should be included t`Indicates if a host is available and should be included
@@ -69,6 +68,7 @@ function InventoryHostItem(props) {
position="top" position="top"
> >
<Switch <Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`} id={`host-${host.id}-toggle`}
label={i18n._(t`On`)} label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)} labelOff={i18n._(t`Off`)}
@@ -81,18 +81,16 @@ function InventoryHostItem(props) {
aria-label={i18n._(t`Toggle host`)} aria-label={i18n._(t`Toggle host`)}
/> />
</Tooltip> </Tooltip>
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{host.summary_fields.user_capabilities?.edit && ( {host.summary_fields.user_capabilities?.edit && (
<Tooltip content={i18n._(t`Edit Host`)} position="top"> <Tooltip content={i18n._(t`Edit Host`)} position="top">
<ListActionButton <Button variant="plain" component={Link} to={`${editUrl}`}>
variant="plain"
component={Link}
to={`${editUrl}`}
>
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -154,14 +154,14 @@ describe('<InventoryHostList />', () => {
HostsAPI.update.mockResolvedValueOnce({ HostsAPI.update.mockResolvedValueOnce({
data: { ...mockHosts[1], enabled: false }, data: { ...mockHosts[1], enabled: false },
}); });
expect(wrapper.find('PFSwitch[id="host-2-toggle"]').props().isChecked).toBe( expect(wrapper.find('Switch[id="host-2-toggle"]').props().isChecked).toBe(
true true
); );
await act(async () => { await act(async () => {
wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')(); wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
}); });
wrapper.update(); wrapper.update();
expect(wrapper.find('PFSwitch[id="host-2-toggle"]').props().isChecked).toBe( expect(wrapper.find('Switch[id="host-2-toggle"]').props().isChecked).toBe(
false false
); );
expect(HostsAPI.update).toHaveBeenCalledTimes(1); expect(HostsAPI.update).toHaveBeenCalledTimes(1);
@@ -170,7 +170,7 @@ describe('<InventoryHostList />', () => {
test('should show error modal if host is not successfully toggled', async () => { test('should show error modal if host is not successfully toggled', async () => {
HostsAPI.update.mockImplementationOnce(() => Promise.reject(new Error())); HostsAPI.update.mockImplementationOnce(() => Promise.reject(new Error()));
await act(async () => { await act(async () => {
wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')(); wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
}); });
wrapper.update(); wrapper.update();
await waitForElement( await waitForElement(

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

@@ -2,6 +2,7 @@ import React from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -11,10 +12,8 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Inventory } from '@types'; import { Inventory } from '@types';
@@ -55,10 +54,10 @@ class InventoryListItem extends React.Component {
? i18n._(t`Smart Inventory`) ? i18n._(t`Smart Inventory`)
: i18n._(t`Inventory`)} : i18n._(t`Inventory`)}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{inventory.summary_fields.user_capabilities.edit && ( {inventory.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top"> <Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/inventories/${ to={`/inventories/${
@@ -68,10 +67,10 @@ class InventoryListItem extends React.Component {
}/${inventory.id}/edit`} }/${inventory.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -4,17 +4,16 @@ import styled from 'styled-components';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button,
DataListCell,
DataListCheck,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { RocketIcon } from '@patternfly/react-icons'; import { RocketIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton'; import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { StatusIcon } from '@components/Sparkline'; import { StatusIcon } from '@components/Sparkline';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates'; import { formatDateString } from '@util/dates';
@@ -29,11 +28,7 @@ class JobListItem extends Component {
const { i18n, job, isSelected, onSelect } = this.props; const { i18n, job, isSelected, onSelect } = this.props;
return ( return (
<DataListItem <DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
aria-labelledby={`check-action-${job.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${job.id}`}
>
<DataListItemRow> <DataListItemRow>
<DataListCheck <DataListCheck
id={`select-job-${job.id}`} id={`select-job-${job.id}`}
@@ -44,7 +39,6 @@ class JobListItem extends Component {
<DataListItemCells <DataListItemCells
dataListCells={[ dataListCells={[
<DataListCell key="divider"> <DataListCell key="divider">
<VerticalSeparator />
{job.status && <PaddedIcon status={job.status} />} {job.status && <PaddedIcon status={job.status} />}
<span> <span>
<Link <Link
@@ -60,18 +54,15 @@ class JobListItem extends Component {
<DataListCell key="finished"> <DataListCell key="finished">
{formatDateString(job.finished)} {formatDateString(job.finished)}
</DataListCell>, </DataListCell>,
<DataListCell lastcolumn="true" key="relaunch"> <DataListCell isFilled={false} alignRight key="relaunch">
{job.type !== 'system_job' && {job.type !== 'system_job' &&
job.summary_fields.user_capabilities.start && ( job.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Relaunch Job`)} position="top"> <Tooltip content={i18n._(t`Relaunch Job`)} position="top">
<LaunchButton resource={job}> <LaunchButton resource={job}>
{({ handleRelaunch }) => ( {({ handleRelaunch }) => (
<ListActionButton <Button variant="plain" onClick={handleRelaunch}>
variant="plain"
onClick={handleRelaunch}
>
<RocketIcon /> <RocketIcon />
</ListActionButton> </Button>
)} )}
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>

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

@@ -4,6 +4,7 @@ import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Badge as PFBadge, Badge as PFBadge,
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -13,10 +14,8 @@ import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Organization } from '@types'; import { Organization } from '@types';
@@ -85,19 +84,19 @@ function OrganizationListItem({
</Badge> </Badge>
</ListGroup> </ListGroup>
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{organization.summary_fields.user_capabilities.edit && ( {organization.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Organization`)} position="top"> <Tooltip content={i18n._(t`Edit Organization`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/organizations/${organization.id}/edit`} to={`/organizations/${organization.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
import { string, bool, func } from 'prop-types'; import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -11,11 +12,9 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons'; import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import ClipboardCopyButton from '@components/ClipboardCopyButton'; import ClipboardCopyButton from '@components/ClipboardCopyButton';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import ProjectSyncButton from '../shared/ProjectSyncButton'; import ProjectSyncButton from '../shared/ProjectSyncButton';
import { StatusIcon } from '@components/Sparkline'; import { StatusIcon } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
@@ -106,7 +105,7 @@ class ProjectListItem extends React.Component {
? i18n._(t`Manual`) ? i18n._(t`Manual`)
: toTitleCase(project.scm_type)} : toTitleCase(project.scm_type)}
</DataListCell>, </DataListCell>,
<DataListCell key="revision"> <DataListCell alignRight isFilled={false} key="revision">
{project.scm_revision.substring(0, 7)} {project.scm_revision.substring(0, 7)}
{project.scm_revision ? ( {project.scm_revision ? (
<ClipboardCopyButton <ClipboardCopyButton
@@ -116,30 +115,32 @@ class ProjectListItem extends React.Component {
/> />
) : null} ) : null}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell alignRight isFilled={false} key="sync">
{project.summary_fields.user_capabilities.start && ( {project.summary_fields.user_capabilities.start && (
<Tooltip content={i18n._(t`Sync Project`)} position="top"> <Tooltip content={i18n._(t`Sync Project`)} position="top">
<ProjectSyncButton projectId={project.id}> <ProjectSyncButton projectId={project.id}>
{handleSync => ( {handleSync => (
<ListActionButton variant="plain" onClick={handleSync}> <Button variant="plain" onClick={handleSync}>
<SyncIcon /> <SyncIcon />
</ListActionButton> </Button>
)} )}
</ProjectSyncButton> </ProjectSyncButton>
</Tooltip> </Tooltip>
)} )}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{project.summary_fields.user_capabilities.edit && ( {project.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Project`)} position="top"> <Tooltip content={i18n._(t`Edit Project`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/projects/${project.id}/edit`} to={`/projects/${project.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -11,10 +12,8 @@ import {
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Team } from '@types'; import { Team } from '@types';
@@ -60,19 +59,19 @@ class TeamListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{team.summary_fields.user_capabilities.edit && ( {team.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Team`)} position="top"> <Tooltip content={i18n._(t`Edit Team`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/teams/${team.id}/edit`} to={`/teams/${team.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells as PFDataListItemCells, DataListItemCells,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
@@ -14,50 +15,12 @@ import {
RocketIcon, RocketIcon,
} from '@patternfly/react-icons'; } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton'; import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import styled from 'styled-components';
const rightStyle = `
@media screen and (max-width: 768px) {
&& {
padding-top: 0px;
flex: 0 0 33%;
padding-right: 20px;
}
}
`;
const DataListItemCells = styled(PFDataListItemCells)`
display: flex;
@media screen and (max-width: 768px) {
flex-wrap: wrap;
justify-content: space-between;
}
`;
const LeftDataListCell = styled(DataListCell)`
@media screen and (max-width: 768px) {
&& {
padding-bottom: 16px;
flex: 1 1 100%;
}
}
`;
const RightDataListCell = styled(DataListCell)`
${rightStyle}
`;
const RightActionButtonCell = styled(ActionButtonCell)`
${rightStyle}
`;
function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) { function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
const canLaunch = template.summary_fields.user_capabilities.start; const canLaunch = template.summary_fields.user_capabilities.start;
@@ -71,7 +34,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
return ( return (
<DataListItem <DataListItem
aria-labelledby={`check-action-${template.id}`} aria-labelledby={`check-action-${template.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${template.id}`} id={`${template.id}`}
> >
<DataListItemRow> <DataListItemRow>
@@ -83,7 +45,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
/> />
<DataListItemCells <DataListItemCells
dataListCells={[ dataListCells={[
<LeftDataListCell key="divider"> <DataListCell key="divider">
<VerticalSeparator /> <VerticalSeparator />
<span> <span>
<Link to={`${detailUrl}`}> <Link to={`${detailUrl}`}>
@@ -102,46 +64,39 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</Tooltip> </Tooltip>
</span> </span>
)} )}
</LeftDataListCell>, </DataListCell>,
<RightDataListCell <DataListCell key="type">
css="padding-left: 40px;"
righthalf="true"
key="type"
>
{toTitleCase(template.type)} {toTitleCase(template.type)}
</RightDataListCell>, </DataListCell>,
<RightDataListCell css="flex: 1;" righthalf="true" key="sparkline"> <DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} /> <Sparkline jobs={template.summary_fields.recent_jobs} />
</RightDataListCell>, </DataListCell>,
<RightActionButtonCell <DataListCell alignRight isFilled={false} key="launch">
css="max-width: 80px;"
righthalf="true"
lastcolumn="true"
key="launch"
>
{canLaunch && template.type === 'job_template' && ( {canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top"> <Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}> <LaunchButton resource={template}>
{({ handleLaunch }) => ( {({ handleLaunch }) => (
<ListActionButton variant="plain" onClick={handleLaunch}> <Button variant="plain" onClick={handleLaunch}>
<RocketIcon /> <RocketIcon />
</ListActionButton> </Button>
)} )}
</LaunchButton> </LaunchButton>
</Tooltip> </Tooltip>
)} )}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{template.summary_fields.user_capabilities.edit && ( {template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top"> <Tooltip content={i18n._(t`Edit Template`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/templates/${template.type}/${template.id}/edit`} to={`/templates/${template.type}/${template.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</RightActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>

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

@@ -3,6 +3,7 @@ import { string, bool, func } from 'prop-types';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
Button,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
@@ -11,10 +12,8 @@ import {
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons'; import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell'; import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { User } from '@types'; import { User } from '@types';
@@ -62,19 +61,19 @@ class UserListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<ActionButtonCell lastcolumn="true" key="action"> <DataListCell key="edit" alignRight isFilled={false}>
{user.summary_fields.user_capabilities.edit && ( {user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top"> <Tooltip content={i18n._(t`Edit User`)} position="top">
<ListActionButton <Button
variant="plain" variant="plain"
component={Link} component={Link}
to={`/users/${user.id}/edit`} to={`/users/${user.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</ActionButtonCell>, </DataListCell>,
]} ]}
/> />
</DataListItemRow> </DataListItemRow>