External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-02-04 19:18:13 -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
7 changed files with 60 additions and 76 deletions
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'); const items = wrapper.find('NotificationListItem');
items items
.at(1) .at(1)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification success"]')
.at(1)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -151,8 +150,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification failure"]')
.at(2)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -180,8 +178,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification start"]')
.at(0)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.associateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -208,8 +205,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(0) .at(0)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification success"]')
.at(1)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -236,8 +232,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(1) .at(1)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification failure"]')
.at(2)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 1,
@@ -264,8 +259,7 @@ describe('<NotificationList />', () => {
const items = wrapper.find('NotificationListItem'); const items = wrapper.find('NotificationListItem');
items items
.at(2) .at(2)
.find('Switch') .find('PFSwitch[aria-label="Toggle notification start"]')
.at(0)
.prop('onChange')(); .prop('onChange')();
expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith( expect(MockModelAPI.disassociateNotificationTemplate).toHaveBeenCalledWith(
1, 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 { t } from '@lingui/macro';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { import {
Switch as PFSwitch,
DataListItem, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
DataListCell as PFDataListCell, DataListCell as PFDataListCell,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import Switch from '@components/Switch';
import styled from 'styled-components'; 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) { function NotificationListItem(props) {
const { const {
canToggleNotifications, canToggleNotifications,

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

@@ -89,8 +89,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/> />
); );
wrapper wrapper
.find('Switch') .find('Switch[aria-label="Toggle notification start"]')
.first()
.find('input') .find('input')
.simulate('change'); .simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'started'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'started');
@@ -108,8 +107,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/> />
); );
wrapper wrapper
.find('Switch') .find('Switch[aria-label="Toggle notification success"]')
.at(1)
.find('input') .find('input')
.simulate('change'); .simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'success');
@@ -127,8 +125,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/> />
); );
wrapper wrapper
.find('Switch') .find('Switch[aria-label="Toggle notification success"]')
.at(1)
.find('input') .find('input')
.simulate('change'); .simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success'); expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'success');
@@ -146,8 +143,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/> />
); );
wrapper wrapper
.find('Switch') .find('Switch[aria-label="Toggle notification failure"]')
.at(2)
.find('input') .find('input')
.simulate('change'); .simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error'); expect(toggleNotification).toHaveBeenCalledWith(9000, true, 'error');
@@ -165,8 +161,7 @@ describe('<NotificationListItem canToggleNotifications />', () => {
/> />
); );
wrapper wrapper
.find('Switch') .find('Switch[aria-label="Toggle notification failure"]')
.at(2)
.find('input') .find('input')
.simulate('change'); .simulate('change');
expect(toggleNotification).toHaveBeenCalledWith(9000, false, 'error'); 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" className="pf-c-data-list__cell NotificationListItem__DataListCell-w674ng-0 dXsFLF"
righthalf="true" righthalf="true"
> >
<NotificationListItem__Switch <Switch
aria-label="Toggle notification start" aria-label="Toggle notification start"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
@@ -329,17 +329,17 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "NotificationListItem__Switch-w674ng-1", "componentId": "Switch-sc-1xwas62-0",
"isStatic": true, "isStatic": true,
"lastClassName": "hfzRow", "lastClassName": "eJQXYh",
"rules": Array [ "rules": Array [
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
], ],
}, },
"displayName": "NotificationListItem__Switch", "displayName": "Switch",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "NotificationListItem__Switch-w674ng-1", "styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -354,9 +354,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Start" labelOff="Start"
onChange={[Function]} onChange={[Function]}
> >
<Component <PFSwitch
aria-label="Toggle notification start" aria-label="Toggle notification start"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -369,7 +369,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
componentProps={ componentProps={
Object { Object {
"aria-label": "Toggle notification start", "aria-label": "Toggle notification start",
"className": "NotificationListItem__Switch-w674ng-1 hfzRow", "className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-started-toggle", "id": "notification-9000-started-toggle",
"isChecked": false, "isChecked": false,
"isDisabled": false, "isDisabled": false,
@@ -382,7 +382,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
> >
<Switch <Switch
aria-label="Toggle notification start" aria-label="Toggle notification start"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-started-toggle" id="notification-9000-started-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -397,7 +397,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
> >
<label <label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow" className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-started-toggle" htmlFor="notification-9000-started-toggle"
> >
<input <input
@@ -430,10 +430,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label> </label>
</Switch> </Switch>
</ComponentWithOuia> </ComponentWithOuia>
</Component> </PFSwitch>
</StyledComponent> </StyledComponent>
</NotificationListItem__Switch> </Switch>
<NotificationListItem__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}
@@ -449,17 +449,17 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "NotificationListItem__Switch-w674ng-1", "componentId": "Switch-sc-1xwas62-0",
"isStatic": true, "isStatic": true,
"lastClassName": "hfzRow", "lastClassName": "eJQXYh",
"rules": Array [ "rules": Array [
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
], ],
}, },
"displayName": "NotificationListItem__Switch", "displayName": "Switch",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "NotificationListItem__Switch-w674ng-1", "styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -474,9 +474,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Success" labelOff="Success"
onChange={[Function]} onChange={[Function]}
> >
<Component <PFSwitch
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -489,7 +489,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
componentProps={ componentProps={
Object { Object {
"aria-label": "Toggle notification success", "aria-label": "Toggle notification success",
"className": "NotificationListItem__Switch-w674ng-1 hfzRow", "className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-success-toggle", "id": "notification-9000-success-toggle",
"isChecked": false, "isChecked": false,
"isDisabled": false, "isDisabled": false,
@@ -502,7 +502,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
> >
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -517,7 +517,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
> >
<label <label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow" className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-success-toggle" htmlFor="notification-9000-success-toggle"
> >
<input <input
@@ -550,10 +550,10 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label> </label>
</Switch> </Switch>
</ComponentWithOuia> </ComponentWithOuia>
</Component> </PFSwitch>
</StyledComponent> </StyledComponent>
</NotificationListItem__Switch> </Switch>
<NotificationListItem__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}
@@ -569,17 +569,17 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
"$$typeof": Symbol(react.forward_ref), "$$typeof": Symbol(react.forward_ref),
"attrs": Array [], "attrs": Array [],
"componentStyle": ComponentStyle { "componentStyle": ComponentStyle {
"componentId": "NotificationListItem__Switch-w674ng-1", "componentId": "Switch-sc-1xwas62-0",
"isStatic": true, "isStatic": true,
"lastClassName": "hfzRow", "lastClassName": "eJQXYh",
"rules": Array [ "rules": Array [
"display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;", "display:flex;flex-wrap:no-wrap;--pf-c-switch__toggle-icon--Offset:0.125rem;",
], ],
}, },
"displayName": "NotificationListItem__Switch", "displayName": "Switch",
"foldedComponentIds": Array [], "foldedComponentIds": Array [],
"render": [Function], "render": [Function],
"styledComponentId": "NotificationListItem__Switch-w674ng-1", "styledComponentId": "Switch-sc-1xwas62-0",
"target": [Function], "target": [Function],
"toString": [Function], "toString": [Function],
"warnTooManyClasses": [Function], "warnTooManyClasses": [Function],
@@ -594,9 +594,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
labelOff="Failure" labelOff="Failure"
onChange={[Function]} onChange={[Function]}
> >
<Component <PFSwitch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -609,7 +609,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
componentProps={ componentProps={
Object { Object {
"aria-label": "Toggle notification failure", "aria-label": "Toggle notification failure",
"className": "NotificationListItem__Switch-w674ng-1 hfzRow", "className": "Switch-sc-1xwas62-0 eJQXYh",
"id": "notification-9000-error-toggle", "id": "notification-9000-error-toggle",
"isChecked": false, "isChecked": false,
"isDisabled": false, "isDisabled": false,
@@ -622,7 +622,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
> >
<Switch <Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="NotificationListItem__Switch-w674ng-1 hfzRow" className="Switch-sc-1xwas62-0 eJQXYh"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -637,7 +637,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
> >
<label <label
className="pf-c-switch NotificationListItem__Switch-w674ng-1 hfzRow" className="pf-c-switch Switch-sc-1xwas62-0 eJQXYh"
htmlFor="notification-9000-error-toggle" htmlFor="notification-9000-error-toggle"
> >
<input <input
@@ -670,9 +670,9 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</label> </label>
</Switch> </Switch>
</ComponentWithOuia> </ComponentWithOuia>
</Component> </PFSwitch>
</StyledComponent> </StyledComponent>
</NotificationListItem__Switch> </Switch>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent> </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, DataListItem,
DataListItemRow, DataListItemRow,
DataListItemCells, DataListItemCells,
Switch as PFSwitch,
Tooltip, Tooltip,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
@@ -17,18 +16,10 @@ import DataListCell from '@components/DataListCell';
import DataListCheck from '@components/DataListCheck'; import DataListCheck from '@components/DataListCheck';
import ListActionButton from '@components/ListActionButton'; import ListActionButton from '@components/ListActionButton';
import { Sparkline } from '@components/Sparkline'; import { Sparkline } from '@components/Sparkline';
import Switch from '@components/Switch';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { Host } from '@types'; 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 { class HostListItem extends React.Component {
static propTypes = { static propTypes = {
host: Host.isRequired, host: Host.isRequired,