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

Remove ListActionButton component

Browse Source
This commit is contained in:
Marliana Lara
2020-02-11 16:11:47 -05:00
parent 3b9dd3ba8c
commit 590199baff
19 changed files with 226 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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';

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,

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>

8
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,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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';
@@ -58,16 +58,16 @@ function CredentialListItem({
<DataListCell key="type"> <DataListCell key="type">
{credential.summary_fields.credential_type.name} {credential.summary_fields.credential_type.name}
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

10
awx/ui_next/src/screens/Host/HostList/HostListItem.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,
@@ -14,7 +15,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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 VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types'; import { Host } from '@types';
@@ -82,7 +82,7 @@ class HostListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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.`
@@ -104,16 +104,16 @@ class HostListItem extends React.Component {
/> />
</Tooltip> </Tooltip>
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

12
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,
@@ -15,7 +16,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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({
@@ -46,16 +46,12 @@ function InventoryGroupItem({
<b>{group.name}</b> <b>{group.name}</b>
</Link> </Link>
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

14
awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.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,
@@ -14,7 +15,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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 VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types'; import { Host } from '@types';
@@ -58,7 +58,7 @@ function InventoryHostItem(props) {
<DataListCell key="recentJobs"> <DataListCell key="recentJobs">
<Sparkline jobs={recentPlaybookJobs} /> <Sparkline jobs={recentPlaybookJobs} />
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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
@@ -82,16 +82,12 @@ function InventoryHostItem(props) {
/> />
</Tooltip> </Tooltip>
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

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(

8
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,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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';
@@ -54,10 +54,10 @@ class InventoryListItem extends React.Component {
? i18n._(t`Smart Inventory`) ? i18n._(t`Smart Inventory`)
: i18n._(t`Inventory`)} : i18n._(t`Inventory`)}
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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/${
@@ -67,7 +67,7 @@ class InventoryListItem extends React.Component {
}/${inventory.id}/edit`} }/${inventory.id}/edit`}
> >
<PencilAltIcon /> <PencilAltIcon />
</ListActionButton> </Button>
</Tooltip> </Tooltip>
)} )}
</DataListCell>, </DataListCell>,

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

@@ -4,6 +4,7 @@ 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, DataListCell,
DataListCheck, DataListCheck,
DataListItem, DataListItem,
@@ -13,7 +14,6 @@ import {
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { RocketIcon } from '@patternfly/react-icons'; import { RocketIcon } from '@patternfly/react-icons';
import LaunchButton from '@components/LaunchButton'; import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton';
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';
@@ -60,12 +60,9 @@ class JobListItem extends Component {
<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>

8
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,
@@ -15,7 +16,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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';
@@ -84,16 +84,16 @@ function OrganizationListItem({
</Badge> </Badge>
</ListGroup> </ListGroup>
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

16
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,
@@ -14,7 +15,6 @@ import { PencilAltIcon, SyncIcon } from '@patternfly/react-icons';
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';
@@ -105,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
@@ -115,29 +115,29 @@ class ProjectListItem extends React.Component {
/> />
) : null} ) : null}
</DataListCell>, </DataListCell>,
<DataListCell 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>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

20
awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
View File

@@ -37,22 +37,22 @@ const ManualSubForm = ({
return ( return (
<> <>
{/* {options.length === 1 && ( */} {options.length === 1 && (
<Alert <Alert
title={i18n._(t`WARNING: `)} title={i18n._(t`WARNING: `)}
css="grid-column: 1/-1" css="grid-column: 1/-1"
variant="warning" variant="warning"
isInline isInline
> >
{i18n._(t` {i18n._(t`
There are no available playbook directories in ${project_base_dir}. There are no available playbook directories in ${project_base_dir}.
Either that directory is empty, or all of the contents are already Either that directory is empty, or all of the contents are already
assigned to other projects. Create a new directory there and make assigned to other projects. Create a new directory there and make
sure the playbook files can be read by the "awx" system user, sure the playbook files can be read by the "awx" system user,
or have ${brandName} directly retrieve your playbooks from or have ${brandName} directly retrieve your playbooks from
source control using the SCM Type option above.`)} source control using the SCM Type option above.`)}
</Alert> </Alert>
{/* )} */} )}
<FormField <FormField
id="project-base-dir" id="project-base-dir"
label={i18n._(t`Project Base Path`)} label={i18n._(t`Project Base Path`)}

8
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,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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';
@@ -59,16 +59,16 @@ class TeamListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

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

@@ -1,6 +1,7 @@
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, DataListItemCells,
@@ -17,7 +18,6 @@ import {
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';
@@ -76,24 +76,24 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) {
<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>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,

8
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,
@@ -13,7 +14,6 @@ import { PencilAltIcon } from '@patternfly/react-icons';
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';
@@ -61,16 +61,16 @@ class UserListItem extends React.Component {
</Fragment> </Fragment>
)} )}
</DataListCell>, </DataListCell>,
<DataListCell alignRight isFilled={false}> <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>
)} )}
</DataListCell>, </DataListCell>,