diff --git a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx b/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx deleted file mode 100644 index ce8f58ef27..0000000000 --- a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.jsx +++ /dev/null @@ -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; diff --git a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx b/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx deleted file mode 100644 index 894e481a65..0000000000 --- a/awx/ui_next/src/components/ActionButtonCell/ActionButtonCell.test.jsx +++ /dev/null @@ -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(); - expect(wrapper).toHaveLength(1); - }); -}); diff --git a/awx/ui_next/src/components/ActionButtonCell/index.js b/awx/ui_next/src/components/ActionButtonCell/index.js deleted file mode 100644 index 6eff34a9c4..0000000000 --- a/awx/ui_next/src/components/ActionButtonCell/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './ActionButtonCell'; diff --git a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx index 94e8f82017..2616cf15cd 100644 --- a/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx +++ b/awx/ui_next/src/components/CheckboxListItem/CheckboxListItem.jsx @@ -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 = ({ /> - - , + + + + initially renders succe labelOff="Success" onChange={[Function]} > - - - + - - - - + + + + + + initially renders succe labelOff="Failure" onChange={[Function]} > - - - + - - - + Failure + + + + + + diff --git a/awx/ui_next/src/components/Switch/Switch.jsx b/awx/ui_next/src/components/Switch/Switch.jsx deleted file mode 100644 index f62376e61b..0000000000 --- a/awx/ui_next/src/components/Switch/Switch.jsx +++ /dev/null @@ -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; -`; diff --git a/awx/ui_next/src/components/Switch/index.js b/awx/ui_next/src/components/Switch/index.js deleted file mode 100644 index ed80f23e5b..0000000000 --- a/awx/ui_next/src/components/Switch/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './Switch'; diff --git a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx index 5296483db8..937dde8607 100644 --- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx +++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialListItem.jsx @@ -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({ {credential.summary_fields.credential_type.name} , - + {canEdit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx index a705c87bdc..f3c70b066f 100644 --- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx +++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx @@ -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 }) { diff --git a/awx/ui_next/src/screens/Host/HostList/HostList.jsx b/awx/ui_next/src/screens/Host/HostList/HostList.jsx index 36ddd8f0dc..a84af76a4c 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx @@ -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 }); } diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx index d5523d74ff..cb81224fd3 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx @@ -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 { )} , - + + , + {host.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx index 3c76f84444..94c4edb7f4 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupItem.jsx @@ -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({ {group.name} , - + {group.summary_fields.user_capabilities.edit && ( - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx index 439da004c6..305fdfca92 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostItem.jsx @@ -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) { , - + + , + {host.summary_fields.user_capabilities?.edit && ( - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx index e5d01c256d..0a60a71ada 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.test.jsx @@ -154,14 +154,14 @@ describe('', () => { 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('', () => { 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( diff --git a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx index 7772e4f21c..168ac9e61b 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryListItem.jsx @@ -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`)} , - + {inventory.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx index 4d2c734a37..47acd95865 100644 --- a/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx +++ b/awx/ui_next/src/screens/Job/JobList/JobListItem.jsx @@ -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 ( - + - {job.status && } {formatDateString(job.finished)} , - + {job.type !== 'system_job' && job.summary_fields.user_capabilities.start && ( {({ handleRelaunch }) => ( - + )} diff --git a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx index 364b963cdb..261dee5700 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx +++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx @@ -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({ , - + {organization.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx index 255b076f26..10626c5c70 100644 --- a/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx +++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectListItem.jsx @@ -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)} , - + {project.scm_revision.substring(0, 7)} {project.scm_revision ? ( ) : null} , - + {project.summary_fields.user_capabilities.start && ( {handleSync => ( - + )} )} + , + {project.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx index 99562e5f1a..6668547824 100644 --- a/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx +++ b/awx/ui_next/src/screens/Team/TeamList/TeamListItem.jsx @@ -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 { )} , - + {team.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx index ed32babfd3..b3742dc574 100644 --- a/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx +++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateListItem.jsx @@ -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 ( @@ -83,7 +45,7 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) { /> + @@ -102,46 +64,39 @@ function TemplateListItem({ i18n, template, isSelected, onSelect, detailUrl }) { )} - , - + , + {toTitleCase(template.type)} - , - + , + - , - + , + {canLaunch && template.type === 'job_template' && ( {({ handleLaunch }) => ( - + )} )} + , + {template.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} /> diff --git a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx index 0ae8eaf07e..cf9ee9a382 100644 --- a/awx/ui_next/src/screens/User/UserList/UserListItem.jsx +++ b/awx/ui_next/src/screens/User/UserList/UserListItem.jsx @@ -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 { )} , - + {user.summary_fields.user_capabilities.edit && ( - - + )} - , + , ]} />