External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-16 13:57:39 -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' } };

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

@@ -69,57 +69,92 @@ exports[`<ToolbarDeleteButton /> should render button 1`] = `
trigger="mouseenter focus" trigger="mouseenter focus"
zIndex={9999} zIndex={9999}
> >
<Button <ToolbarDeleteButton__Button
aria-label="Delete" aria-label="Delete"
className="awx-ToolBarBtn"
component="button"
isActive={false}
isBlock={false}
isDisabled={true} isDisabled={true}
isFocus={false}
isHover={false}
onClick={[Function]} onClick={[Function]}
type="button"
variant="plain" variant="plain"
> >
<button <StyledComponent
aria-disabled={null}
aria-label="Delete" aria-label="Delete"
className="pf-c-button pf-m-plain pf-m-disabled awx-ToolBarBtn" forwardedComponent={
disabled={true} 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]} onClick={[Function]}
tabIndex={null} variant="plain"
type="button"
> >
<TrashAltIcon <Button
className="awx-ToolBarTrashCanIcon" aria-label="Delete"
color="currentColor" className="ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
size="sm" component="button"
title={null} isActive={false}
isBlock={false}
isDisabled={true}
isFocus={false}
isHover={false}
onClick={[Function]}
type="button"
variant="plain"
> >
<svg <button
aria-hidden={true} aria-disabled={null}
aria-labelledby={null} aria-label="Delete"
className="awx-ToolBarTrashCanIcon" className="pf-c-button pf-m-plain pf-m-disabled ToolbarDeleteButton__Button-sc-1e3r0eg-0 iyjqWq"
fill="currentColor" disabled={true}
height="1em" onClick={[Function]}
role="img" tabIndex={null}
style={ type="button"
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 448 512"
width="1em"
> >
<path <TrashAltIcon
d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z" color="currentColor"
transform="" size="sm"
/> title={null}
</svg> >
</TrashAltIcon> <svg
</button> aria-hidden={true}
</Button> aria-labelledby={null}
fill="currentColor"
height="1em"
role="img"
style={
Object {
"verticalAlign": "-0.125em",
}
}
viewBox="0 0 448 512"
width="1em"
>
<path
d="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1-32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
transform=""
/>
</svg>
</TrashAltIcon>
</button>
</Button>
</StyledComponent>
</ToolbarDeleteButton__Button>
<Portal <Portal
containerInfo={ containerInfo={
<div> <div>

544
__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"
@@ -119,170 +89,366 @@ exports[`<NotificationListItem canToggleNotifications /> initially renders succe
<div <div
className="pf-c-data-list__item-content" className="pf-c-data-list__item-content"
> >
<DataListCell <NotificationListItem__DataListCell
alignRight={false}
className=""
isFilled={true}
isIcon={false}
key="name" key="name"
width={1}
> >
<div <StyledComponent
className="pf-c-data-list__cell" forwardedComponent={
>
<Link
replace={false}
style={
Object {
"marginRight": "1.5em",
}
}
to={
Object {
"pathname": "/foo",
}
}
>
<a
onClick={[Function]}
style={
Object {
"marginRight": "1.5em",
}
}
>
<b
id="items-list-item-9000"
>
Foo
</b>
</a>
</Link>
<Badge
className=""
isRead={true}
style={
Object {
"textTransform": "capitalize",
}
}
>
<span
className="pf-c-badge pf-m-read"
style={
Object {
"textTransform": "capitalize",
}
}
>
slack
</span>
</Badge>
</div>
</DataListCell>
<DataListCell
alignRight={false}
className=""
isFilled={true}
isIcon={false}
key="toggles"
style={
Object {
"display": "flex",
"justifyContent": "flex-end",
}
}
width={1}
>
<div
className="pf-c-data-list__cell"
style={
Object { Object {
"display": "flex", "$$typeof": Symbol(react.forward_ref),
"justifyContent": "flex-end", "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}
> >
<Switch <DataListCell
aria-label="Toggle notification success" alignRight={false}
className="" className="NotificationListItem__DataListCell-j7c411-0 kIdLtz"
id="notification-9000-success-toggle" isFilled={true}
isChecked={false} isIcon={false}
isDisabled={false} width={1}
label="Successful"
onChange={[Function]}
> >
<label <div
className="pf-c-switch" className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 kIdLtz"
htmlFor="notification-9000-success-toggle"
> >
<input <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
className="sc-bdVaJa eBseNd"
replace={false}
to={
Object {
"pathname": "/foo",
}
}
>
<a
className="sc-bdVaJa eBseNd"
onClick={[Function]}
>
<b
id="items-list-item-9000"
>
Foo
</b>
</a>
</Link>
</StyledComponent>
</Styled(Link)>
<Styled(Badge)
isRead={true}
>
<StyledComponent
forwardedComponent={
Object {
"$$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
className="pf-c-badge pf-m-read sc-bwzfXH chTbOZ"
>
slack
</span>
</Badge>
</StyledComponent>
</Styled(Badge)>
</div>
</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
alignRight={false}
className="NotificationListItem__DataListCell-j7c411-0 hoXOpW"
isFilled={true}
isIcon={false}
righthalf="true"
width={1}
>
<div
className="pf-c-data-list__cell NotificationListItem__DataListCell-j7c411-0 hoXOpW"
righthalf="true"
>
<NotificationListItem__Switch
aria-label="Toggle notification success" aria-label="Toggle notification success"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle" id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]} onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
> >
Successful <StyledComponent
</span> aria-label="Toggle notification success"
<span forwardedComponent={
aria-hidden="true" Object {
className="pf-c-switch__label pf-m-off" "$$typeof": Symbol(react.forward_ref),
> "attrs": Array [],
Successful "componentStyle": ComponentStyle {
</span> "componentId": "NotificationListItem__Switch-j7c411-1",
</label> "isStatic": true,
</Switch> "lastClassName": "ceuHGn",
<Switch "rules": Array [
aria-label="Toggle notification failure" "display:flex;flex-wrap:no-wrap;",
className="" ],
id="notification-9000-error-toggle" },
isChecked={false} "displayName": "NotificationListItem__Switch",
isDisabled={false} "foldedComponentIds": Array [],
label="Failure" "render": [Function],
onChange={[Function]} "styledComponentId": "NotificationListItem__Switch-j7c411-1",
> "target": [Function],
<label "toString": [Function],
className="pf-c-switch" "warnTooManyClasses": [Function],
htmlFor="notification-9000-error-toggle" "withComponent": [Function],
> }
<input }
forwardedRef={null}
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<Switch
aria-label="Toggle notification success"
className="NotificationListItem__Switch-j7c411-1 ceuHGn"
id="notification-9000-success-toggle"
isChecked={false}
isDisabled={false}
label="Successful"
onChange={[Function]}
>
<label
className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
htmlFor="notification-9000-success-toggle"
>
<input
aria-label="Toggle notification success"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-success-toggle"
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
>
Successful
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
>
Successful
</span>
</label>
</Switch>
</StyledComponent>
</NotificationListItem__Switch>
<NotificationListItem__Switch
aria-label="Toggle notification failure" aria-label="Toggle notification failure"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle" id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]} onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
> >
Failure <StyledComponent
</span> aria-label="Toggle notification failure"
<span forwardedComponent={
aria-hidden="true" Object {
className="pf-c-switch__label pf-m-off" "$$typeof": Symbol(react.forward_ref),
> "attrs": Array [],
Failure "componentStyle": ComponentStyle {
</span> "componentId": "NotificationListItem__Switch-j7c411-1",
</label> "isStatic": true,
</Switch> "lastClassName": "ceuHGn",
</div> "rules": Array [
</DataListCell> "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
aria-label="Toggle notification failure"
className="NotificationListItem__Switch-j7c411-1 ceuHGn"
id="notification-9000-error-toggle"
isChecked={false}
isDisabled={false}
label="Failure"
onChange={[Function]}
>
<label
className="pf-c-switch NotificationListItem__Switch-j7c411-1 ceuHGn"
htmlFor="notification-9000-error-toggle"
>
<input
aria-label="Toggle notification failure"
checked={false}
className="pf-c-switch__input"
disabled={false}
id="notification-9000-error-toggle"
onChange={[Function]}
type="checkbox"
/>
<span
className="pf-c-switch__toggle"
/>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-on"
>
Failure
</span>
<span
aria-hidden="true"
className="pf-c-switch__label pf-m-off"
>
Failure
</span>
</label>
</Switch>
</StyledComponent>
</NotificationListItem__Switch>
</div>
</DataListCell>
</StyledComponent>
</NotificationListItem__DataListCell>
</div> </div>
</DataListItemCells> </DataListItemCells>
</div> </div>

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

File diff suppressed because it is too large Load Diff

87
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}>
{ showSelectAll && ( <ColumnLeft>
<Fragment> { showSelectAll && (
<ColumnLeft> <Fragment>
<ToolbarItem> <ToolbarItem>
<Checkbox <Checkbox
checked={isAllSelected} checked={isAllSelected}
@@ -106,47 +105,47 @@ class DataListToolbar extends React.Component {
/> />
</ToolbarItem> </ToolbarItem>
<VerticalSeparator /> <VerticalSeparator />
<ToolbarItem css="flex-grow: 1;"> </Fragment>
<Search )}
columns={columns} <ToolbarItem css="flex-grow: 1;">
onSearch={onSearch} <Search
sortedColumnKey={sortedColumnKey} columns={columns}
onSearch={onSearch}
sortedColumnKey={sortedColumnKey}
/>
</ToolbarItem>
<VerticalSeparator />
</ColumnLeft>
<ColumnRight>
<ToolbarItem>
<Sort
columns={columns}
onSort={onSort}
sortOrder={sortOrder}
sortedColumnKey={sortedColumnKey}
/>
</ToolbarItem>
{ (showExpandCollapse || additionalControls.length) ? (
<VerticalSeparator />
) : null}
{showExpandCollapse && (
<Fragment>
<ToolbarGroup>
<ExpandCollapse
isCompact={isCompact}
onCompact={onCompact}
onExpand={onExpand}
/> />
</ToolbarItem> </ToolbarGroup>
<VerticalSeparator /> { additionalControls && (
</ColumnLeft>
<ColumnRight>
<ToolbarItem>
<Sort
columns={columns}
onSort={onSort}
sortOrder={sortOrder}
sortedColumnKey={sortedColumnKey}
/>
</ToolbarItem>
{ (showExpandCollapse || additionalControls.length) ? (
<VerticalSeparator /> <VerticalSeparator />
) : null}
{showExpandCollapse && (
<Fragment>
<ToolbarGroup>
<ExpandCollapse
isCompact={isCompact}
onCompact={onCompact}
onExpand={onExpand}
/>
</ToolbarGroup>
{ additionalControls && (
<VerticalSeparator />
)}
</Fragment>
)} )}
<AdditionalControlsWrapper> </Fragment>
{additionalControls} )}
</AdditionalControlsWrapper> <AdditionalControlsWrapper>
</ColumnRight> {additionalControls}
</Fragment> </AdditionalControlsWrapper>
)} </ColumnRight>
</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';