External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-12 02:19:58 -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
commit cd6d2299a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
28 changed files with 253 additions and 525 deletions
Show Stats 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,
DataListItemCells,
DataListCell,
DataListCheck,
} from '@patternfly/react-core';
import DataListCheck from '@components/DataListCheck';
import DataListRadio from '@components/DataListRadio';
import VerticalSeparator from '../VerticalSeparator';
const CheckboxListItem = ({
itemId,
@ -37,12 +36,6 @@ const CheckboxListItem = ({
/>
<DataListItemCells
dataListCells={[
<DataListCell
key="divider"
className="pf-c-data-list__cell--divider"
>
<VerticalSeparator />
</DataListCell>,
<DataListCell key="name">
<label
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 { 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) => {
const clipboard = event.currentTarget.parentElement;
const el = document.createElement('input');
@ -62,13 +50,13 @@ class ClipboardCopyButton extends React.Component {
trigger="mouseenter focus click"
content={copied ? clickTip : hoverTip}
>
<CopyButton
<Button
variant="plain"
onClick={this.handleCopyClick}
aria-label={hoverTip}
>
<CopyIcon />
</CopyButton>
</Button>
</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);
} catch (err) {
this.setState({ toggleError: true });
this.setState({ toggleError: err });
} finally {
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');
items
.at(1)
.find('PFSwitch[aria-label="Toggle notification success"]')
.find('Switch[aria-label="Toggle notification success"]')
.prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1,
@ -150,7 +150,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem');
items
.at(0)
.find('PFSwitch[aria-label="Toggle notification failure"]')
.find('Switch[aria-label="Toggle notification failure"]')
.prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1,
@ -178,7 +178,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem');
items
.at(0)
.find('PFSwitch[aria-label="Toggle notification start"]')
.find('Switch[aria-label="Toggle notification start"]')
.prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1,
@ -205,7 +205,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem');
items
.at(0)
.find('PFSwitch[aria-label="Toggle notification success"]')
.find('Switch[aria-label="Toggle notification success"]')
.prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1,
@ -232,7 +232,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem');
items
.at(1)
.find('PFSwitch[aria-label="Toggle notification failure"]')
.find('Switch[aria-label="Toggle notification failure"]')
.prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1,
@ -259,7 +259,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem');
items
.at(2)
.find('PFSwitch[aria-label="Toggle notification start"]')
.find('Switch[aria-label="Toggle notification start"]')
.prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1,

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

@ -8,8 +8,8 @@ import {
DataListItemRow,
DataListItemCells,
DataListCell as PFDataListCell,
Switch,
} from '@patternfly/react-core';
import Switch from '@components/Switch';
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
righthalf="true"
>
<ForwardRef
<Unknown
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
@ -72,7 +72,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start"
onChange={[Function]}
/>
<ForwardRef
<Unknown
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
@ -81,7 +81,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success"
onChange={[Function]}
/>
<ForwardRef
<Unknown
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
@ -315,7 +315,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true"
>
<Switch
<Component
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
@ -324,118 +324,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start"
onChange={[Function]}
>
<StyledComponent
aria-label="Toggle notification start"
forwardedComponent={
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Switch-sc-1xwas62-0",
"isStatic": true,
"lastClassName": "eJQXYh",
"rules": Array [
"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],
"aria-label": "Toggle notification start",
"id": "notification-9000-started-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Start",
"labelOff": "Start",
"onChange": [Function],
}
}
forwardedRef={null}
id="notification-9000-started-toggle"
isChecked={false}
isDisabled={false}
label="Start"
labelOff="Start"
onChange={[Function]}
consumerContext={null}
>
<PFSwitch
<Switch
aria-label="Toggle notification start"
className="Switch-sc-1xwas62-0 eJQXYh"
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",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"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="Switch-sc-1xwas62-0 eJQXYh"
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 Switch-sc-1xwas62-0 eJQXYh"
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>
</PFSwitch>
</StyledComponent>
</Switch>
<Switch
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}
@ -444,118 +399,73 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success"
onChange={[Function]}
>
<StyledComponent
aria-label="Toggle notification success"
forwardedComponent={
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Switch-sc-1xwas62-0",
"isStatic": true,
"lastClassName": "eJQXYh",
"rules": Array [
"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],
"aria-label": "Toggle notification success",
"id": "notification-9000-success-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Success",
"labelOff": "Success",
"onChange": [Function],
}
}
forwardedRef={null}
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Success"
labelOff="Success"
onChange={[Function]}
consumerContext={null}
>
<PFSwitch
<Switch
aria-label="Toggle notification success"
className="Switch-sc-1xwas62-0 eJQXYh"
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",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"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="Switch-sc-1xwas62-0 eJQXYh"
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 Switch-sc-1xwas62-0 eJQXYh"
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>
</PFSwitch>
</StyledComponent>
</Switch>
<Switch
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}
@ -564,117 +474,72 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Failure"
onChange={[Function]}
>
<StyledComponent
aria-label="Toggle notification failure"
forwardedComponent={
<ComponentWithOuia
component={[Function]}
componentProps={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "Switch-sc-1xwas62-0",
"isStatic": true,
"lastClassName": "eJQXYh",
"rules": Array [
"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],
"aria-label": "Toggle notification failure",
"id": "notification-9000-error-toggle",
"isChecked": false,
"isDisabled": false,
"label": "Failure",
"labelOff": "Failure",
"onChange": [Function],
}
}
forwardedRef={null}
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
labelOff="Failure"
onChange={[Function]}
consumerContext={null}
>
<PFSwitch
<Switch
aria-label="Toggle notification failure"
className="Switch-sc-1xwas62-0 eJQXYh"
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",
"className": "Switch-sc-1xwas62-0 eJQXYh",
"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="Switch-sc-1xwas62-0 eJQXYh"
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 Switch-sc-1xwas62-0 eJQXYh"
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>
</PFSwitch>
</StyledComponent>
</Switch>
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>

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 { Link } from 'react-router-dom';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells as _DataListItemCells,
@ -11,10 +12,8 @@ import {
} from '@patternfly/react-core';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import styled from 'styled-components';
import { Credential } from '@types';
@ -59,19 +58,19 @@ function CredentialListItem({
<DataListCell key="type">
{credential.summary_fields.credential_type.name}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{canEdit && (
<Tooltip content={i18n._(t`Edit Credential`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/credentials/${credential.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 { t } from '@lingui/macro';
import { Host } from '@types';
import { Button } from '@patternfly/react-core';
import { Button, Switch } from '@patternfly/react-core';
import { CardBody, CardActionsRow } from '@components/Card';
import AlertModal from '@components/AlertModal';
import ErrorDetail from '@components/ErrorDetail';
@ -11,7 +11,6 @@ import { DetailList, Detail, UserDateDetail } from '@components/DetailList';
import { VariablesDetail } from '@components/CodeMirrorInput';
import { Sparkline } from '@components/Sparkline';
import DeleteButton from '@components/DeleteButton';
import Switch from '@components/Switch';
import { HostsAPI } from '@api';
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: [],
itemCount: 0,
actions: null,
toggleError: false,
toggleError: null,
toggleLoading: null,
};
@ -83,7 +83,7 @@ class HostsList extends Component {
}
handleHostToggleErrorClose() {
this.setState({ toggleError: false });
this.setState({ toggleError: null });
}
async handleHostDelete() {
@ -112,7 +112,7 @@ class HostsList extends Component {
),
});
} catch (err) {
this.setState({ toggleError: true });
this.setState({ toggleError: err });
} finally {
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 { t } from '@lingui/macro';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
Switch,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import { Sparkline } from '@components/Sparkline';
import Switch from '@components/Switch';
import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types';
@ -83,7 +82,7 @@ class HostListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<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.`
@ -91,6 +90,7 @@ class HostListItem extends React.Component {
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
@ -103,18 +103,20 @@ class HostListItem extends React.Component {
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">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/hosts/${host.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -13,10 +14,8 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
function InventoryGroupItem({
@ -47,19 +46,15 @@ function InventoryGroupItem({
<b>{group.name}</b>
</Link>
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{group.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Group`)} position="top">
<ListActionButton
variant="plain"
component={Link}
to={editUrl}
>
<Button variant="plain" component={Link} to={editUrl}>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 { t } from '@lingui/macro';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
Switch,
Tooltip,
} from '@patternfly/react-core';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import { Sparkline } from '@components/Sparkline';
import Switch from '@components/Switch';
import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types';
@ -59,7 +58,7 @@ function InventoryHostItem(props) {
<DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} />
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="enable" alignRight isFilled={false}>
<Tooltip
content={i18n._(
t`Indicates if a host is available and should be included
@ -69,6 +68,7 @@ function InventoryHostItem(props) {
position="top"
>
<Switch
css="display: inline-flex;"
id={`host-${host.id}-toggle`}
label={i18n._(t`On`)}
labelOff={i18n._(t`Off`)}
@ -81,18 +81,16 @@ function InventoryHostItem(props) {
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">
<ListActionButton
variant="plain"
component={Link}
to={`${editUrl}`}
>
<Button variant="plain" component={Link} to={`${editUrl}`}>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

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

@ -154,14 +154,14 @@ describe('<InventoryHostList />', () => {
HostsAPI.update.mockResolvedValueOnce({
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
);
await act(async () => {
wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')();
wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
});
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
);
expect(HostsAPI.update).toHaveBeenCalledTimes(1);
@ -170,7 +170,7 @@ describe('<InventoryHostList />', () => {
test('should show error modal if host is not successfully toggled', async () => {
HostsAPI.update.mockImplementationOnce(() => Promise.reject(new Error()));
await act(async () => {
wrapper.find('PFSwitch[id="host-2-toggle"]').invoke('onChange')();
wrapper.find('Switch[id="host-2-toggle"]').invoke('onChange')();
});
wrapper.update();
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 { withI18n } from '@lingui/react';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -11,10 +12,8 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Inventory } from '@types';
@ -55,10 +54,10 @@ class InventoryListItem extends React.Component {
? i18n._(t`Smart Inventory`)
: i18n._(t`Inventory`)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{inventory.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Inventory`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/inventories/${
@ -68,10 +67,10 @@ class InventoryListItem extends React.Component {
}/${inventory.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 { t } from '@lingui/macro';
import {
Button,
DataListCell,
DataListCheck,
DataListItem,
DataListItemRow,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { RocketIcon } from '@patternfly/react-icons';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { StatusIcon } from '@components/Sparkline';
import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates';
@ -29,11 +28,7 @@ class JobListItem extends Component {
const { i18n, job, isSelected, onSelect } = this.props;
return (
<DataListItem
aria-labelledby={`check-action-${job.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${job.id}`}
>
<DataListItem aria-labelledby={`check-action-${job.id}`} id={`${job.id}`}>
<DataListItemRow>
<DataListCheck
id={`select-job-${job.id}`}
@ -44,7 +39,6 @@ class JobListItem extends Component {
<DataListItemCells
dataListCells={[
<DataListCell key="divider">
<VerticalSeparator />
{job.status && <PaddedIcon status={job.status} />}
<span>
<Link
@ -60,18 +54,15 @@ class JobListItem extends Component {
<DataListCell key="finished">
{formatDateString(job.finished)}
</DataListCell>,
<DataListCell lastcolumn="true" key="relaunch">
<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 }) => (
<ListActionButton
variant="plain"
onClick={handleRelaunch}
>
<Button variant="plain" onClick={handleRelaunch}>
<RocketIcon />
</ListActionButton>
</Button>
)}
</LaunchButton>
</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 {
Badge as PFBadge,
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -13,10 +14,8 @@ import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Organization } from '@types';
@ -85,19 +84,19 @@ function OrganizationListItem({
</Badge>
</ListGroup>
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{organization.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Organization`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/organizations/${organization.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 { withI18n } from '@lingui/react';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -11,11 +12,9 @@ import { t } from '@lingui/macro';
import { Link } from 'react-router-dom';
import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import ClipboardCopyButton from '@components/ClipboardCopyButton';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import ProjectSyncButton from '../shared/ProjectSyncButton';
import { StatusIcon } from '@components/Sparkline';
import VerticalSeparator from '@components/VerticalSeparator';
@ -106,7 +105,7 @@ class ProjectListItem extends React.Component {
? i18n._(t`Manual`)
: toTitleCase(project.scm_type)}
</DataListCell>,
<DataListCell key="revision">
<DataListCell alignRight isFilled={false} key="revision">
{project.scm_revision.substring(0, 7)}
{project.scm_revision ? (
<ClipboardCopyButton
@ -116,30 +115,32 @@ class ProjectListItem extends React.Component {
/>
) : null}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<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 => (
<ListActionButton variant="plain" onClick={handleSync}>
<Button variant="plain" onClick={handleSync}>
<SyncIcon />
</ListActionButton>
</Button>
)}
</ProjectSyncButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{project.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Project`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/projects/${project.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</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 { t } from '@lingui/macro';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -11,10 +12,8 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Team } from '@types';
@ -60,19 +59,19 @@ class TeamListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{team.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Team`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/teams/${team.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>

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

@ -1,9 +1,10 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells as PFDataListItemCells,
DataListItemCells,
Tooltip,
} from '@patternfly/react-core';
import { t } from '@lingui/macro';
@ -14,50 +15,12 @@ import {
RocketIcon,
} from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { Sparkline } from '@components/Sparkline';
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 }) {
const canLaunch = template.summary_fields.user_capabilities.start;
@ -71,7 +34,6 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
return (
<DataListItem
aria-labelledby={`check-action-${template.id}`}
css="--pf-c-data-list__expandable-content--BoxShadow: none;"
id={`${template.id}`}
>
<DataListItemRow>
@ -83,7 +45,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
/>
<DataListItemCells
dataListCells={[
<LeftDataListCell key="divider">
<DataListCell key="divider">
<VerticalSeparator />
<span>
<Link to={`${detailUrl}`}>
@ -102,46 +64,39 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
</Tooltip>
</span>
)}
</LeftDataListCell>,
<RightDataListCell
css="padding-left: 40px;"
righthalf="true"
key="type"
>
</DataListCell>,
<DataListCell key="type">
{toTitleCase(template.type)}
</RightDataListCell>,
<RightDataListCell css="flex: 1;" righthalf="true" key="sparkline">
</DataListCell>,
<DataListCell key="sparkline">
<Sparkline jobs={template.summary_fields.recent_jobs} />
</RightDataListCell>,
<RightActionButtonCell
css="max-width: 80px;"
righthalf="true"
lastcolumn="true"
key="launch"
>
</DataListCell>,
<DataListCell alignRight isFilled={false} key="launch">
{canLaunch && template.type === 'job_template' && (
<Tooltip content={i18n._(t`Launch Template`)} position="top">
<LaunchButton resource={template}>
{({ handleLaunch }) => (
<ListActionButton variant="plain" onClick={handleLaunch}>
<Button variant="plain" onClick={handleLaunch}>
<RocketIcon />
</ListActionButton>
</Button>
)}
</LaunchButton>
</Tooltip>
)}
</DataListCell>,
<DataListCell key="edit" alignRight isFilled={false}>
{template.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit Template`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/templates/${template.type}/${template.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</RightActionButtonCell>,
</DataListCell>,
]}
/>
</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 { t } from '@lingui/macro';
import {
Button,
DataListItem,
DataListItemRow,
DataListItemCells,
@ -11,10 +12,8 @@ import {
import { Link } from 'react-router-dom';
import { PencilAltIcon } from '@patternfly/react-icons';
import ActionButtonCell from '@components/ActionButtonCell';
import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator';
import { User } from '@types';
@ -62,19 +61,19 @@ class UserListItem extends React.Component {
</Fragment>
)}
</DataListCell>,
<ActionButtonCell lastcolumn="true" key="action">
<DataListCell key="edit" alignRight isFilled={false}>
{user.summary_fields.user_capabilities.edit && (
<Tooltip content={i18n._(t`Edit User`)} position="top">
<ListActionButton
<Button
variant="plain"
component={Link}
to={`/users/${user.id}/edit`}
>
<PencilAltIcon />
</ListActionButton>
</Button>
</Tooltip>
)}
</ActionButtonCell>,
</DataListCell>,
]}
/>
</DataListItemRow>