diff --git a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx index 3f42d47c04..bbc0a603b8 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationList.test.jsx @@ -123,8 +123,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(1) - .find('Switch') - .at(1) + .find('PFSwitch[aria-label="Toggle notification success"]') .prop('onChange')(); expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( 1, @@ -151,8 +150,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(0) - .find('Switch') - .at(2) + .find('PFSwitch[aria-label="Toggle notification failure"]') .prop('onChange')(); expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( 1, @@ -180,8 +178,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(0) - .find('Switch') - .at(0) + .find('PFSwitch[aria-label="Toggle notification start"]') .prop('onChange')(); expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( 1, @@ -208,8 +205,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(0) - .find('Switch') - .at(1) + .find('PFSwitch[aria-label="Toggle notification success"]') .prop('onChange')(); expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( 1, @@ -236,8 +232,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(1) - .find('Switch') - .at(2) + .find('PFSwitch[aria-label="Toggle notification failure"]') .prop('onChange')(); expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( 1, @@ -264,8 +259,7 @@ describe('', () => { const items = wrapper.find('NotificationListItem'); items .at(2) - .find('Switch') - .at(0) + .find('PFSwitch[aria-label="Toggle notification start"]') .prop('onChange')(); expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( 1, diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx index f32e8a80e7..be62aa4b0d 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.jsx @@ -4,12 +4,12 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Link } from 'react-router-dom'; import { - Switch as PFSwitch, DataListItem, DataListItemRow, DataListItemCells, DataListCell as PFDataListCell, } from '@patternfly/react-core'; +import Switch from '@components/Switch'; import styled from 'styled-components'; @@ -24,13 +24,6 @@ const DataListCell = styled(PFDataListCell)` } `; -const Switch = styled(PFSwitch)` - display: flex; - flex-wrap: no-wrap; - /* workaround PF bug; used in calculating switch width: */ - --pf-c-switch__toggle-icon--Offset: 0.125rem; -`; - function NotificationListItem(props) { const { canToggleNotifications, diff --git a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx index 4646023814..d954bb51b2 100644 --- a/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx +++ b/awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx @@ -89,8 +89,7 @@ describe('', () => { /> ); wrapper - .find('Switch') - .first() + .find('Switch[aria-label="Toggle notification start"]') .find('input') .simulate('change'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'started'); @@ -108,8 +107,7 @@ describe('', () => { /> ); wrapper - .find('Switch') - .at(1) + .find('Switch[aria-label="Toggle notification success"]') .find('input') .simulate('change'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success'); @@ -127,8 +125,7 @@ describe('', () => { /> ); wrapper - .find('Switch') - .at(1) + .find('Switch[aria-label="Toggle notification success"]') .find('input') .simulate('change'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success'); @@ -146,8 +143,7 @@ describe('', () => { /> ); wrapper - .find('Switch') - .at(2) + .find('Switch[aria-label="Toggle notification failure"]') .find('input') .simulate('change'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error'); @@ -165,8 +161,7 @@ describe('', () => { /> ); wrapper - .find('Switch') - .at(2) + .find('Switch[aria-label="Toggle notification failure"]') .find('input') .simulate('change'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error'); diff --git a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap index 6b8d98afcc..8498fd2b08 100644 --- a/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap +++ b/awx/ui_next/src/components/NotificationList/__snapshots__/NotificationListItem.test.jsx.snap @@ -313,7 +313,7 @@ exports[` initially renders succe className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF" righthalf="true" > - initially renders succe "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "NotificationListItem__Switch-w674ng-1", + "componentId": "Switch-sc-1xwas62-0", "isStatic": true, - "lastClassName": "hfzRow", + "lastClassName": "eJQXYh", "rules": Array [ "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", ], }, - "displayName": "NotificationListItem__Switch", + "displayName": "Switch", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "NotificationListItem__Switch-w674ng-1", + "styledComponentId": "Switch-sc-1xwas62-0", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -354,9 +354,9 @@ exports[` initially renders succe labelOff="Start" onChange={[Function]} > - initially renders succe componentProps={ Object { "aria-label": "Toggle notification start", - "className": "NotificationListItem__Switch-w674ng-1 hfzRow", + "className": "Switch-sc-1xwas62-0 eJQXYh", "id": "notification-9000-started-toggle", "isChecked": false, "isDisabled": false, @@ -382,7 +382,7 @@ exports[` initially renders succe > initially renders succe } > - + - - + initially renders succe "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "NotificationListItem__Switch-w674ng-1", + "componentId": "Switch-sc-1xwas62-0", "isStatic": true, - "lastClassName": "hfzRow", + "lastClassName": "eJQXYh", "rules": Array [ "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", ], }, - "displayName": "NotificationListItem__Switch", + "displayName": "Switch", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "NotificationListItem__Switch-w674ng-1", + "styledComponentId": "Switch-sc-1xwas62-0", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -474,9 +474,9 @@ exports[` initially renders succe labelOff="Success" onChange={[Function]} > - initially renders succe componentProps={ Object { "aria-label": "Toggle notification success", - "className": "NotificationListItem__Switch-w674ng-1 hfzRow", + "className": "Switch-sc-1xwas62-0 eJQXYh", "id": "notification-9000-success-toggle", "isChecked": false, "isDisabled": false, @@ -502,7 +502,7 @@ exports[` initially renders succe > initially renders succe } > - + - - + initially renders succe "$$typeof": Symbol(react.forward_ref), "attrs": Array [], "componentStyle": ComponentStyle { - "componentId": "NotificationListItem__Switch-w674ng-1", + "componentId": "Switch-sc-1xwas62-0", "isStatic": true, - "lastClassName": "hfzRow", + "lastClassName": "eJQXYh", "rules": Array [ "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", ], }, - "displayName": "NotificationListItem__Switch", + "displayName": "Switch", "foldedComponentIds": Array [], "render": [Function], - "styledComponentId": "NotificationListItem__Switch-w674ng-1", + "styledComponentId": "Switch-sc-1xwas62-0", "target": [Function], "toString": [Function], "warnTooManyClasses": [Function], @@ -594,9 +594,9 @@ exports[` initially renders succe labelOff="Failure" onChange={[Function]} > - initially renders succe componentProps={ Object { "aria-label": "Toggle notification failure", - "className": "NotificationListItem__Switch-w674ng-1 hfzRow", + "className": "Switch-sc-1xwas62-0 eJQXYh", "id": "notification-9000-error-toggle", "isChecked": false, "isDisabled": false, @@ -622,7 +622,7 @@ exports[` initially renders succe > initially renders succe } > - + - + diff --git a/awx/ui_next/src/components/Switch/Switch.jsx b/awx/ui_next/src/components/Switch/Switch.jsx new file mode 100644 index 0000000000..f62376e61b --- /dev/null +++ b/awx/ui_next/src/components/Switch/Switch.jsx @@ -0,0 +1,10 @@ +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 new file mode 100644 index 0000000000..ed80f23e5b --- /dev/null +++ b/awx/ui_next/src/components/Switch/index.js @@ -0,0 +1 @@ +export { default } from './Switch'; diff --git a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx index 4cd624da01..acb2eb537c 100644 --- a/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx +++ b/awx/ui_next/src/screens/Host/HostList/HostListItem.jsx @@ -6,7 +6,6 @@ import { DataListItem, DataListItemRow, DataListItemCells, - Switch as PFSwitch, Tooltip, } from '@patternfly/react-core'; import { Link } from 'react-router-dom'; @@ -17,18 +16,10 @@ 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'; -import styled from 'styled-components'; - -const Switch = styled(PFSwitch)` - display: flex; - flex-wrap: no-wrap; - /* workaround PF bug; used in calculating switch width: */ - --pf-c-switch__toggle-icon--Offset: 0.125rem; -`; - class HostListItem extends React.Component { static propTypes = { host: Host.isRequired,