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

General cleanup.

Browse Source 
- Fix tests.
- Update snapshots.
- Remove old import statement.
- Add element ids for Sort and Search Components.
This commit is contained in:
Kia Lam
2019-05-13 14:56:36 -04:00
parent 3322123dd4
commit 457c6287a2
8 changed files with 2317 additions and 1274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
__tests__/components/DataListToolbar.test.jsx
View File

@@ -57,10 +57,9 @@ describe('<DataListToolbar />', () => {
}); });
test('dropdown items sortable columns work', () => { test('dropdown items sortable columns work', () => {
const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button'; const sortDropdownToggleSelector = 'button[id="awx-sort"]';
const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item'; const searchDropdownToggleSelector = 'button[id="awx-search"]';
const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle'; const dropdownMenuItems = 'DropdownMenu > ul';
const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item';
const multipleColumns = [ const multipleColumns = [
{ name: 'Foo', key: 'foo', isSortable: true }, { name: 'Foo', key: 'foo', isSortable: true },
@@ -80,12 +79,10 @@ describe('<DataListToolbar />', () => {
/> />
); );
const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector);
expect(sortDropdownToggle.length).toBe(2); expect(sortDropdownToggle.length).toBe(1);
sortDropdownToggle.at(1).simulate('click'); sortDropdownToggle.simulate('click');
sortDropdownToggle.at(0).simulate('click');
toolbar.update(); toolbar.update();
const sortDropdownItems = toolbar.find(dropdownMenuItems).children();
const sortDropdownItems = toolbar.find(sortDropdownItemsSelector);
expect(sortDropdownItems.length).toBe(2); expect(sortDropdownItems.length).toBe(2);
const mockedSortEvent = { target: { innerText: 'Bar' } }; const mockedSortEvent = { target: { innerText: 'Bar' } };
@@ -101,13 +98,13 @@ describe('<DataListToolbar />', () => {
toolbar.update(); toolbar.update();
const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector); const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector);
expect(sortDropdownToggleDescending.length).toBe(2); expect(sortDropdownToggleDescending.length).toBe(1);
sortDropdownToggleDescending.at(1).simulate('click'); sortDropdownToggleDescending.simulate('click');
sortDropdownToggleDescending.at(0).simulate('click');
toolbar.update(); toolbar.update();
const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector); const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children();
expect(sortDropdownItemsDescending.length).toBe(2); expect(sortDropdownItemsDescending.length).toBe(2);
sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown
const mockedSortEventDescending = { target: { innerText: 'Bar' } }; const mockedSortEventDescending = { target: { innerText: 'Bar' } };
sortDropdownItems.at(0).simulate('click', mockedSortEventDescending); sortDropdownItems.at(0).simulate('click', mockedSortEventDescending);
@@ -115,10 +112,10 @@ describe('<DataListToolbar />', () => {
const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector); const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector);
expect(searchDropdownToggle.length).toBe(1); expect(searchDropdownToggle.length).toBe(1);
searchDropdownToggle.at(0).simulate('click'); searchDropdownToggle.simulate('click');
toolbar.update(); toolbar.update();
const searchDropdownItems = toolbar.find(searchDropdownItemsSelector); const searchDropdownItems = toolbar.find(dropdownMenuItems).children();
expect(searchDropdownItems.length).toBe(3); expect(searchDropdownItems.length).toBe(3);
const mockedSearchEvent = { target: { innerText: 'Bar' } }; const mockedSearchEvent = { target: { innerText: 'Bar' } };

43
__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap
View File

@@ -68,10 +68,45 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
theme="pf-tippy" theme="pf-tippy"
trigger="mouseenter focus" trigger="mouseenter focus"
zIndex={9999} zIndex={9999}
>
<ToolbarDeleteButton__Button
aria-label="Delete"
isDisabled={true}
onClick={[Function]}
variant="plain"
>
<StyledComponent
aria-label="Delete"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
"isStatic": true,
"lastClassName": "iyjqWq",
"rules": Array [
"width:30px;height:30px;display:flex;justify-content:center;margin-right:20px;border-radius:3px;padding:0;&:disabled{cursor:not-allowed;&:hover{background-color:white;> svg{color:#d2d2d2;}}}&:hover{background-color:#d9534f;> svg{color:white;}}",
],
},
"displayName": "ToolbarDeleteButton__Button",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "ToolbarDeleteButton__Button-sc-1e3r0eg-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
isDisabled={true}
onClick={[Function]}
variant="plain"
> >
<Button <Button
aria-label="Delete" aria-label="Delete"
className="awx-ToolBarBtn" className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
component="button" component="button"
isActive={false} isActive={false}
isBlock={false} isBlock={false}
@@ -85,14 +120,13 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
<button <button
aria-disabled={null} aria-disabled={null}
aria-label="Delete" aria-label="Delete"
className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn" className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
disabled={true} disabled={true}
onClick={[Function]} onClick={[Function]}
tabIndex={null} tabIndex={null}
type="button" type="button"
> >
<TrashAltIcon <TrashAltIcon
className="awx-ToolBarTrashCanIcon"
color="currentColor" color="currentColor"
size="sm" size="sm"
title={null} title={null}
@@ -100,7 +134,6 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
<svg <svg
aria-hidden={true} aria-hidden={true}
aria-labelledby={null} aria-labelledby={null}
className="awx-ToolBarTrashCanIcon"
fill="currentColor" fill="currentColor"
height="1em" height="1em"
role="img" role="img"
@@ -120,6 +153,8 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
</TrashAltIcon> </TrashAltIcon>
</button> </button>
</Button> </Button>
</StyledComponent>
</ToolbarDeleteButton__Button>
<Portal <Portal
containerInfo={ containerInfo={
<div> <div>

326
__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap
View File

@@ -41,20 +41,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
className="" className=""
dataListCells={ dataListCells={
Array [ Array [
<DataListCell <ForwardRef>
alignRight={false} <ForwardRef
className=""
isFilled={true}
isIcon={false}
width={1}
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={ to={
Object { Object {
"pathname": "/foo", "pathname": "/foo",
@@ -66,51 +54,33 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
> >
Foo Foo
</b> </b>
</Link> </ForwardRef>
<Badge <ForwardRef
className=""
isRead={true} isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
> >
slack slack
</Badge> </ForwardRef>
</DataListCell>, </ForwardRef>,
<DataListCell <ForwardRef
alignRight={false} righthalf="true"
className=""
isFilled={true}
isIcon={false}
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1}
> >
<Switch <ForwardRef
aria-label="Toggle notification success" aria-label="Toggle notification success"
className=""
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Successful" label="Successful"
onChange={[Function]} onChange={[Function]}
/> />
<Switch <ForwardRef
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className=""
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
label="Failure" label="Failure"
onChange={[Function]} onChange={[Function]}
/> />
</DataListCell>, </ForwardRef>,
] ]
} }
key=".0" key=".0"
@@ -118,25 +88,91 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
> >
<div <div
className="pf-c-data-list__item-content" className="pf-c-data-list__item-content"
>
<NotificationListItem__DataListCell
key="name"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListCell-j7c411-0",
"isStatic": false,
"lastClassName": "hoXOpW",
"rules": Array [
"display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
],
},
"displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
> >
<DataListCell <DataListCell
alignRight={false} alignRight={false}
className="" className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
key="name"
width={1} width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
>
<Styled(Link)
to={
Object {
"pathname": "/foo",
}
}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": true,
"lastClassName": "eBseNd",
"rules": Array [
"margin-right: 1.5em;",
],
},
"displayName": "Styled(Link)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
to={
Object {
"pathname": "/foo",
}
}
> >
<Link <Link
className="sc-bdVaJa eBseNd"
replace={false} replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={ to={
Object { Object {
"pathname": "/foo", "pathname": "/foo",
@@ -144,12 +180,8 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
} }
> >
<a <a
className="sc-bdVaJa eBseNd"
onClick={[Function]} onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
> >
<b <b
id="items-list-item-9000" id="items-list-item-9000"
@@ -158,54 +190,143 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</b> </b>
</a> </a>
</Link> </Link>
<Badge </StyledComponent>
className="" </Styled(Link)>
<Styled(Badge)
isRead={true} isRead={true}
style={ >
<StyledComponent
forwardedComponent={
Object { Object {
"textTransform": "capitalize", "$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": true,
"lastClassName": "chTbOZ",
"rules": Array [
"text-transform: capitalize;",
],
},
"displayName": "Styled(Badge)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
forwardedRef={null}
isRead={true}
>
<Badge
className="sc-bwzfXH chTbOZ"
isRead={true}
> >
<span <span
className="pf-c-badge pf-m-read" className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
style={
Object {
"textTransform": "capitalize",
}
}
> >
slack slack
</span> </span>
</Badge> </Badge>
</StyledComponent>
</Styled(Badge)>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
<NotificationListItem__DataListCell
key="toggles"
righthalf="true"
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__DataListCell-j7c411-0",
"isStatic": false,
"lastClassName": "hoXOpW",
"rules": Array [
"display:flex;justify-content:",
[Function],
";padding-bottom:",
[Function],
";@media screen and (min-width:768px){justify-content:",
[Function],
";padding-bottom:0;}",
],
},
"displayName": "NotificationListItem__DataListCell",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__DataListCell-j7c411-0",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
righthalf="true"
>
<DataListCell <DataListCell
alignRight={false} alignRight={false}
className="" className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
isFilled={true} isFilled={true}
isIcon={false} isIcon={false}
key="toggles" righthalf="true"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1} width={1}
> >
<div <div
className="pf-c-data-list__cell" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
style={ righthalf="true"
>
<NotificationListItem__Switch
aria-label="Toggle notification success"
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<StyledComponent
aria-label="Toggle notification success"
forwardedComponent={
Object { Object {
"display": "flex", "$$typeof": Symbol(react.forward_ref),
"justifyContent": "flex-end", "attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__Switch-j7c411-1",
"isStatic": true,
"lastClassName": "ceuHGn",
"rules": Array [
"display:flex;flex-wrap:no-wrap;",
],
},
"displayName": "NotificationListItem__Switch",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__Switch-j7c411-1",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
} }
} }
forwardedRef={null}
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
> >
<Switch <Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
className="" className="NotificationListItem__Switch-j7c411-1 ceuHGn"
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -213,7 +334,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
onChange={[Function]} onChange={[Function]}
> >
<label <label
className="pf-c-switch" className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
htmlFor="notification-9000-success-toggle" htmlFor="notification-9000-success-toggle"
> >
<input <input
@@ -242,9 +363,50 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</span> </span>
</label> </label>
</Switch> </Switch>
</StyledComponent>
</NotificationListItem__Switch>
<NotificationListItem__Switch
aria-label="Toggle notification failure"
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<StyledComponent
aria-label="Toggle notification failure"
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "NotificationListItem__Switch-j7c411-1",
"isStatic": true,
"lastClassName": "ceuHGn",
"rules": Array [
"display:flex;flex-wrap:no-wrap;",
],
},
"displayName": "NotificationListItem__Switch",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "NotificationListItem__Switch-j7c411-1",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<Switch <Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
className="" className="NotificationListItem__Switch-j7c411-1 ceuHGn"
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false} isChecked={false}
isDisabled={false} isDisabled={false}
@@ -252,7 +414,7 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
onChange={[Function]} onChange={[Function]}
> >
<label <label
className="pf-c-switch" className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
htmlFor="notification-9000-error-toggle" htmlFor="notification-9000-error-toggle"
> >
<input <input
@@ -281,8 +443,12 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
</span> </span>
</label> </label>
</Switch> </Switch>
</StyledComponent>
</NotificationListItem__Switch>
</div> </div>
</DataListCell> </DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
</div> </div>
</DataListItemCells> </DataListItemCells>
</div> </div>

1357
__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap
View File

File diff suppressed because it is too large Load Diff

11
src/components/DataListToolbar/DataListToolbar.jsx
View File

@@ -33,7 +33,7 @@ const AWXToolbar = styled.div`
const Toolbar = styled(PFToolbar)` const Toolbar = styled(PFToolbar)`
flex-grow: 1; flex-grow: 1;
margin-left: ${props => (props.noleftmargin ? '0' : '20px')}; margin-left: ${props => (props.marginleft ? '0' : '20px')};
`; `;
const ToolbarGroup = styled(PFToolbarGroup)` const ToolbarGroup = styled(PFToolbarGroup)`
@@ -55,7 +55,6 @@ const ColumnLeft = styled.div`
`; `;
const ColumnRight = styled(ColumnLeft)` const ColumnRight = styled(ColumnLeft)`
margin-left: 60px;
padding: 8px 0 10px 0; padding: 8px 0 10px 0;
@media screen and (min-width: 980px) { @media screen and (min-width: 980px) {
@@ -93,10 +92,10 @@ class DataListToolbar extends React.Component {
<I18n> <I18n>
{({ i18n }) => ( {({ i18n }) => (
<AWXToolbar> <AWXToolbar>
<Toolbar noleftmargin={noLeftMargin}> <Toolbar marginleft={noLeftMargin ? 1 : 0}>
<ColumnLeft>
{ showSelectAll && ( { showSelectAll && (
<Fragment> <Fragment>
<ColumnLeft>
<ToolbarItem> <ToolbarItem>
<Checkbox <Checkbox
checked={isAllSelected} checked={isAllSelected}
@@ -106,6 +105,8 @@ class DataListToolbar extends React.Component {
/> />
</ToolbarItem> </ToolbarItem>
<VerticalSeparator /> <VerticalSeparator />
</Fragment>
)}
<ToolbarItem css="flex-grow: 1;"> <ToolbarItem css="flex-grow: 1;">
<Search <Search
columns={columns} columns={columns}
@@ -145,8 +146,6 @@ class DataListToolbar extends React.Component {
{additionalControls} {additionalControls}
</AdditionalControlsWrapper> </AdditionalControlsWrapper>
</ColumnRight> </ColumnRight>
</Fragment>
)}
</Toolbar> </Toolbar>
</AWXToolbar> </AWXToolbar>

1
src/components/Search/Search.jsx
View File

@@ -118,6 +118,7 @@ class Search extends React.Component {
isOpen={isSearchDropdownOpen} isOpen={isSearchDropdownOpen}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
id="awx-search"
onToggle={this.handleDropdownToggle} onToggle={this.handleDropdownToggle}
> >
{searchColumnName} {searchColumnName}

3
src/components/Sort/Sort.jsx
View File

@@ -31,7 +31,7 @@ const Dropdown = styled(PFDropdown)`
width: auto; width: auto;
} }
> svg { /* carret icon */ > svg { /* caret icon */
margin: 0px; margin: 0px;
padding-top: 3px; padding-top: 3px;
padding-left: 3px; padding-left: 3px;
@@ -121,6 +121,7 @@ class Sort extends React.Component {
isOpen={isSortDropdownOpen} isOpen={isSortDropdownOpen}
toggle={( toggle={(
<DropdownToggle <DropdownToggle
id="awx-sort"
onToggle={this.handleDropdownToggle} onToggle={this.handleDropdownToggle}
> >
{sortedColumnName} {sortedColumnName}

1
src/index.jsx
View File

@@ -13,7 +13,6 @@ import { t } from '@lingui/macro';
import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/react-core/dist/styles/base.css';
import './app.scss'; import './app.scss';
import './components/Pagination/styles.scss'; import './components/Pagination/styles.scss';
import './components/DataListToolbar/styles.scss';
import './components/SelectedList/styles.scss'; import './components/SelectedList/styles.scss';
import './components/AddRole/styles.scss'; import './components/AddRole/styles.scss';