diff --git a/__tests__/components/DataListToolbar.test.jsx b/__tests__/components/DataListToolbar.test.jsx index 8bf673d693..c227291c77 100644 --- a/__tests__/components/DataListToolbar.test.jsx +++ b/__tests__/components/DataListToolbar.test.jsx @@ -57,10 +57,9 @@ describe('', () => { }); test('dropdown items sortable columns work', () => { - const sortDropdownToggleSelector = '.pf-l-toolbar__group.sortDropdownGroup .pf-l-toolbar__item button'; - const sortDropdownItemsSelector = '.pf-l-toolbar__group.sortDropdownGroup button.pf-c-dropdown__menu-item'; - const searchDropdownToggleSelector = '.pf-c-dropdown.searchKeyDropdown .pf-c-dropdown__toggle'; - const searchDropdownItemsSelector = '.pf-c-dropdown.searchKeyDropdown button.pf-c-dropdown__menu-item'; + const sortDropdownToggleSelector = 'button[id="awx-sort"]'; + const searchDropdownToggleSelector = 'button[id="awx-search"]'; + const dropdownMenuItems = 'DropdownMenu > ul'; const multipleColumns = [ { name: 'Foo', key: 'foo', isSortable: true }, @@ -80,12 +79,10 @@ describe('', () => { /> ); const sortDropdownToggle = toolbar.find(sortDropdownToggleSelector); - expect(sortDropdownToggle.length).toBe(2); - sortDropdownToggle.at(1).simulate('click'); - sortDropdownToggle.at(0).simulate('click'); + expect(sortDropdownToggle.length).toBe(1); + sortDropdownToggle.simulate('click'); toolbar.update(); - - const sortDropdownItems = toolbar.find(sortDropdownItemsSelector); + const sortDropdownItems = toolbar.find(dropdownMenuItems).children(); expect(sortDropdownItems.length).toBe(2); const mockedSortEvent = { target: { innerText: 'Bar' } }; @@ -101,13 +98,13 @@ describe('', () => { toolbar.update(); const sortDropdownToggleDescending = toolbar.find(sortDropdownToggleSelector); - expect(sortDropdownToggleDescending.length).toBe(2); - sortDropdownToggleDescending.at(1).simulate('click'); - sortDropdownToggleDescending.at(0).simulate('click'); + expect(sortDropdownToggleDescending.length).toBe(1); + sortDropdownToggleDescending.simulate('click'); toolbar.update(); - const sortDropdownItemsDescending = toolbar.find(sortDropdownItemsSelector); + const sortDropdownItemsDescending = toolbar.find(dropdownMenuItems).children(); expect(sortDropdownItemsDescending.length).toBe(2); + sortDropdownToggleDescending.simulate('click'); // toggle close the sort dropdown const mockedSortEventDescending = { target: { innerText: 'Bar' } }; sortDropdownItems.at(0).simulate('click', mockedSortEventDescending); @@ -115,10 +112,10 @@ describe('', () => { const searchDropdownToggle = toolbar.find(searchDropdownToggleSelector); expect(searchDropdownToggle.length).toBe(1); - searchDropdownToggle.at(0).simulate('click'); + searchDropdownToggle.simulate('click'); toolbar.update(); - const searchDropdownItems = toolbar.find(searchDropdownItemsSelector); + const searchDropdownItems = toolbar.find(dropdownMenuItems).children(); expect(searchDropdownItems.length).toBe(3); const mockedSearchEvent = { target: { innerText: 'Bar' } }; diff --git a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap index 3a181290d8..3315e9feb0 100644 --- a/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap +++ b/__tests__/components/PaginatedDataList/__snapshots__/DeleteToolbarButton.test.jsx.snap @@ -69,57 +69,92 @@ exports[` should render button 1`] = ` trigger="mouseenter focus" zIndex={9999} > - - 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]} - tabIndex={null} - type="button" + variant="plain" > - - - - - - - + + + + + + + + + diff --git a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap index 47bf1aee3d..ad97bed524 100644 --- a/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap +++ b/__tests__/components/__snapshots__/NotificationListItem.test.jsx.snap @@ -41,20 +41,8 @@ exports[` initially renders succe className="" dataListCells={ Array [ - - + initially renders succe > Foo - - + slack - - , - + , + - - - , + , ] } key=".0" @@ -119,170 +89,366 @@ exports[` initially renders succe - - - - - - Foo - - - - - - slack - - - - - - - - - + + + + + Foo + + + + + + + + + + slack + + + + + + + + + + + + + - - - Successful - - - Successful - - - - - - + + + + + + Successful + + + Successful + + + + + + - - - Failure - - - Failure - - - - - + + + + + + + Failure + + + Failure + + + + + + + + + diff --git a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap index e7d882aac1..f804e903a0 100644 --- a/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap +++ b/__tests__/pages/Organizations/screens/Organization/__snapshots__/OrganizationNotifications.test.jsx.snap @@ -222,117 +222,732 @@ exports[` initially renders succesfully 1`] = ` update={true} withHash={true} > - - + - - - - + - - + - - - + + + + Modified + , + + Created + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + Name + + } + > + + Modified + , + + Created + , + ] + } + forwardedComponent={ + Object { + "$$typeof": Symbol(react.forward_ref), + "attrs": Array [], + "componentStyle": ComponentStyle { + "componentId": "Search__Dropdown-sc-1dwuww3-2", + "isStatic": true, + "lastClassName": "kcnywV", + "rules": Array [ + "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", + ], + }, + "displayName": "Search__Dropdown", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "Search__Dropdown-sc-1dwuww3-2", + "target": [Function], + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], + } + } + forwardedRef={null} + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + Name + + } + > + + Modified + , + + Created + , + ] + } + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + toggle={ + + Name + + } + > + + + + + Name + + + + + + + } + > + + + + Name + + + + + + + } + > + + + Name + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + initially renders succesfully 1`] = ` ] } isOpen={false} - isPlain={false} onSelect={[Function]} onToggle={[Function]} - position="left" + style={ + Object { + "marginRight": "20px", + } + } toggle={ initially renders succesfully 1`] = ` } > - - - - - Name - - - - - - + Modified + , + + Created + , + ] + } + forwardedComponent={ + Object { + "$$typeof": Symbol(react.forward_ref), + "attrs": Array [], + "componentStyle": ComponentStyle { + "componentId": "Sort__Dropdown-sc-21g5aw-0", + "isStatic": true, + "lastClassName": "kdSQuN", + "rules": Array [ + "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;> span{width:auto;}> svg{margin:0px;padding-top:3px;padding-left:3px;}}}", + ], + }, + "displayName": "Sort__Dropdown", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "Sort__Dropdown-sc-21g5aw-0", + "target": [Function], + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], } - > + } + forwardedRef={null} + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + style={ + Object { + "marginRight": "20px", + } + } + toggle={ + Name + + } + > + + Modified + , + + Created + , + ] + } + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + style={ + Object { + "marginRight": "20px", + } + } + toggle={ + + Name + + } + > + + + + + Name + + + + + + + } + > + + + + Name + + + + + + + } > Name - - - + + + + - - } - > - - - Name - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Modified - , - - Created - , - ] - } - isOpen={false} - isPlain={false} - onSelect={[Function]} - onToggle={[Function]} - position="left" - style={ - Object { - "marginRight": "20px", - } - } - toggle={ - - Name - - } - > - - - - - Name - - - - - + + - } - > - - - - Name - - - - - - + + + + + + - - Name - - - + svg{font-size:18px;}", + ], + }, + "displayName": "Sort__IconWrapper", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "Sort__IconWrapper-sc-21g5aw-1", + "target": "span", + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], } } - viewBox="0 0 320 512" - width="1em" + forwardedRef={null} > - - - + + + + + + + + + - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - - + + - - + + initially renders succesfully 1`] = ` className="" dataListCells={ Array [ - - + initially renders succesfully 1`] = ` > Notification one - - + email - - , - + , + - - - , + , ] } key=".0" @@ -1052,170 +1535,366 @@ exports[` initially renders succesfully 1`] = ` - - - - - - Notification one - - - - - - email - - - - - - - - - + + + + + Notification one + + + + + + + + + + email + + + + + + + + + + + + + - - - Successful - - - Successful - - - - - - + + + + + + Successful + + + Successful + + + + + + - - - Failure - - - Failure - - - - - + + + + + + + Failure + + + Failure + + + + + + + + + @@ -1266,20 +1945,8 @@ exports[` initially renders succesfully 1`] = ` className="" dataListCells={ Array [ - - + initially renders succesfully 1`] = ` > Notification two - - + email - - , - + , + - - - , + , ] } key=".0" @@ -1344,170 +1993,366 @@ exports[` initially renders succesfully 1`] = ` - - - - - - Notification two - - - - - - email - - - - - - - - - + + + + + Notification two + + + + + + + + + + email + + + + + + + + + + + + + - - - Successful - - - Successful - - - - - - + + + + + + Successful + + + Successful + + + + + + - - - Failure - - - Failure - - - - - + + + + + + + Failure + + + Failure + + + + + + + + + @@ -1625,7 +2470,7 @@ exports[` initially renders succesfully 1`] = ` ariaHasPopup={true} className="togglePageSize" iconComponent={[Function]} - id="pf-toggle-id-5" + id="pf-toggle-id-1" isActive={false} isFocused={false} isHovered={false} @@ -1642,7 +2487,7 @@ exports[` initially renders succesfully 1`] = ` aria-expanded="false" aria-haspopup="true" class="pf-c-dropdown__toggle togglePageSize" - id="pf-toggle-id-5" + id="pf-toggle-id-1" type="button" > initially renders succesfully 1`] = ` initially renders succesfully 1`] = ` aria-expanded="false" aria-haspopup="true" class="pf-c-dropdown__toggle togglePageSize" - id="pf-toggle-id-5" + id="pf-toggle-id-1" type="button" > initially renders succesfully 1`] = ` aria-haspopup={true} className="pf-c-dropdown__toggle togglePageSize" disabled={false} - id="pf-toggle-id-5" + id="pf-toggle-id-1" onClick={[Function]} onKeyDown={[Function]} type="button" diff --git a/src/components/DataListToolbar/DataListToolbar.jsx b/src/components/DataListToolbar/DataListToolbar.jsx index f55f57a693..2d62608d4a 100644 --- a/src/components/DataListToolbar/DataListToolbar.jsx +++ b/src/components/DataListToolbar/DataListToolbar.jsx @@ -33,7 +33,7 @@ const AWXToolbar = styled.div` const Toolbar = styled(PFToolbar)` flex-grow: 1; - margin-left: ${props => (props.noleftmargin ? '0' : '20px')}; + margin-left: ${props => (props.marginleft ? '0' : '20px')}; `; const ToolbarGroup = styled(PFToolbarGroup)` @@ -55,7 +55,6 @@ const ColumnLeft = styled.div` `; const ColumnRight = styled(ColumnLeft)` - margin-left: 60px; padding: 8px 0 10px 0; @media screen and (min-width: 980px) { @@ -93,10 +92,10 @@ class DataListToolbar extends React.Component { {({ i18n }) => ( - - { showSelectAll && ( - - + + + { showSelectAll && ( + - - + )} + + + + + + + + + + { (showExpandCollapse || additionalControls.length) ? ( + + ) : null} + {showExpandCollapse && ( + + + - - - - - - - - { (showExpandCollapse || additionalControls.length) ? ( + + { additionalControls && ( - ) : null} - {showExpandCollapse && ( - - - - - { additionalControls && ( - - )} - )} - - {additionalControls} - - - - )} + + )} + + {additionalControls} + + diff --git a/src/components/Search/Search.jsx b/src/components/Search/Search.jsx index 8b12a1b0ec..7223a8d9fe 100644 --- a/src/components/Search/Search.jsx +++ b/src/components/Search/Search.jsx @@ -118,6 +118,7 @@ class Search extends React.Component { isOpen={isSearchDropdownOpen} toggle={( {searchColumnName} diff --git a/src/components/Sort/Sort.jsx b/src/components/Sort/Sort.jsx index 283bfb2dc3..966f1b8d2a 100644 --- a/src/components/Sort/Sort.jsx +++ b/src/components/Sort/Sort.jsx @@ -31,7 +31,7 @@ const Dropdown = styled(PFDropdown)` width: auto; } - > svg { /* carret icon */ + > svg { /* caret icon */ margin: 0px; padding-top: 3px; padding-left: 3px; @@ -121,6 +121,7 @@ class Sort extends React.Component { isOpen={isSortDropdownOpen} toggle={( {sortedColumnName} diff --git a/src/index.jsx b/src/index.jsx index ef03c44108..4b961c6405 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -13,7 +13,6 @@ import { t } from '@lingui/macro'; import '@patternfly/react-core/dist/styles/base.css'; import './app.scss'; import './components/Pagination/styles.scss'; -import './components/DataListToolbar/styles.scss'; import './components/SelectedList/styles.scss'; import './components/AddRole/styles.scss';