External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 11:20:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Move Switch into shared component directory and update tests

Browse Source
This commit is contained in:
Marliana Lara 2019-11-20 13:11:06 -05:00
parent 804a3c17bf
commit ea4e98c52a
No known key found for this signature in database
GPG Key ID: 38C73B40DFA809EE
7 changed files with 60 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,8 +123,7 @@ describe('<NotificationList />', () => {
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('<NotificationList />', () => {
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('<NotificationList />', () => {
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('<NotificationList />', () => {
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('<NotificationList />', () => {
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('<NotificationList />', () => {
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,

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

@ -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,

15
awx/ui_next/src/components/NotificationList/NotificationListItem.test.jsx
View File

@ -89,8 +89,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/>
);
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('<NotificationListItem canToggleNotifications />', () => {
/>
);
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('<NotificationListItem canToggleNotifications />', () => {
/>
);
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('<NotificationListItem canToggleNotifications />', () => {
/>
);
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('<NotificationListItem canToggleNotifications />', () => {
/>
);
wrapper
.find('Switch')
.at(2)
.find('Switch[aria-label="Toggle notification failure"]')
.find('input')
.simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error');

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

@ -313,7 +313,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true"
>
<NotificationListItem__Switch
<Switch
aria-label="Toggle notification start"
id="notification-9000-started-toggle"
isChecked={false}
@ -329,17 +329,17 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start"
onChange={[Function]}
>
<Component
<PFSwitch
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}
@ -369,7 +369,7 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
>
<Switch
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}
@ -397,7 +397,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
}
>
<label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow"
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-started-toggle"
>
<input
@ -430,10 +430,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label>
</Switch>
</ComponentWithOuia>
</Component>
</PFSwitch>
</StyledComponent>
</NotificationListItem__Switch>
<NotificationListItem__Switch
</Switch>
<Switch
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
@ -449,17 +449,17 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success"
onChange={[Function]}
>
<Component
<PFSwitch
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}
@ -489,7 +489,7 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
>
<Switch
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}
@ -517,7 +517,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
}
>
<label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow"
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-success-toggle"
>
<input
@ -550,10 +550,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label>
</Switch>
</ComponentWithOuia>
</Component>
</PFSwitch>
</StyledComponent>
</NotificationListItem__Switch>
<NotificationListItem__Switch
</Switch>
<Switch
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
@ -569,17 +569,17 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Failure"
onChange={[Function]}
>
<Component
<PFSwitch
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}
@ -609,7 +609,7 @@ exports[`<NotificationListItem canToggleNotifications /> 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[`<NotificationListItem canToggleNotifications /> initially renders succe
>
<Switch
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}
@ -637,7 +637,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
}
>
<label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow"
className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-error-toggle"
>
<input
@ -670,9 +670,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label>
</Switch>
</ComponentWithOuia>
</Component>
</PFSwitch>
</StyledComponent>
</NotificationListItem__Switch>
</Switch>
</div>
</DataListCell>
</StyledComponent>

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

@ -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;
`;

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

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

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

@ -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,