diff --git a/awx/ui_next/src/components/ListHeader/ListHeader.jsx b/awx/ui_next/src/components/ListHeader/ListHeader.jsx index 5db0c677fb..ad9cab62ce 100644 --- a/awx/ui_next/src/components/ListHeader/ListHeader.jsx +++ b/awx/ui_next/src/components/ListHeader/ListHeader.jsx @@ -46,16 +46,14 @@ class ListHeader extends React.Component { } handleSearch(key, value) { - const { history, qsConfig } = this.props; - const { search } = history.location; - const oldParams = parseQueryString(qsConfig, search); + const { location, qsConfig } = this.props; + const oldParams = parseQueryString(qsConfig, location.search); this.pushHistoryState(mergeParams(oldParams, { [key]: value })); } handleRemove(key, value) { - const { history, qsConfig } = this.props; - const { search } = history.location; - const oldParams = parseQueryString(qsConfig, search); + const { location, qsConfig } = this.props; + const oldParams = parseQueryString(qsConfig, location.search); this.pushHistoryState(removeParams(qsConfig, oldParams, { [key]: value })); } @@ -64,9 +62,8 @@ class ListHeader extends React.Component { } handleSort(key, order) { - const { history, qsConfig } = this.props; - const { search } = history.location; - const oldParams = parseQueryString(qsConfig, search); + const { location, qsConfig } = this.props; + const oldParams = parseQueryString(qsConfig, location.search); this.pushHistoryState( replaceParams(oldParams, { order_by: order === 'ascending' ? key : `-${key}`, @@ -89,11 +86,14 @@ class ListHeader extends React.Component { columns, renderToolbar, qsConfig, + location, } = this.props; const [orderBy, sortOrder] = this.getSortOrder(); + const params = parseQueryString(qsConfig, location.search); + const isEmpty = itemCount === 0 && Object.keys(params).length === 0; return ( - {itemCount === 0 ? ( + {isEmpty ? ( {emptyStateControls} diff --git a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx index fc0c2d16e2..e89431d3a8 100644 --- a/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx +++ b/awx/ui_next/src/components/PaginatedDataList/PaginatedDataList.jsx @@ -99,47 +99,36 @@ class PaginatedDataList extends React.Component { ); } - if (items.length <= 0) { - return ( - - - {Content} - - ); - } - return ( {Content} - + {items.length ? ( + + ) : null} ); } diff --git a/awx/ui_next/src/screens/Job/JobList/JobList.jsx b/awx/ui_next/src/screens/Job/JobList/JobList.jsx index 02e76946df..6cfdab62e0 100644 --- a/awx/ui_next/src/screens/Job/JobList/JobList.jsx +++ b/awx/ui_next/src/screens/Job/JobList/JobList.jsx @@ -150,7 +150,8 @@ class JobList extends Component { selected, } = this.state; const { match, i18n } = this.props; - const isAllSelected = selected.length === jobs.length; + const isAllSelected = + selected.length === jobs.length && selected.length > 0; return ( diff --git a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap index a26f750136..16a90aad59 100644 --- a/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap +++ b/awx/ui_next/src/screens/Organization/OrganizationAccess/__snapshots__/OrganizationAccess.test.jsx.snap @@ -248,6 +248,7 @@ exports[` initially renders succesfully 1`] = ` "namespace": "access", } } + renderToolbar={[Function]} > initially renders succesfully 1`] = ` } renderToolbar={[Function]} > - - , + ] + } + columns={ + Array [ Object { - "$$typeof": Symbol(react.forward_ref), - "attrs": Array [], - "componentStyle": ComponentStyle { - "componentId": "ListHeader__EmptyStateControlsWrapper-sc-1gm7wbv-0", - "isStatic": true, - "lastClassName": "bXVfpW", - "rules": Array [ - "display:flex;margin-top:20px;margin-right:20px;margin-bottom:20px;justify-content:flex-end;& >:not(:first-child){margin-left:20px;}", - ], - }, - "displayName": "ListHeader__EmptyStateControlsWrapper", - "foldedComponentIds": Array [], - "render": [Function], - "styledComponentId": "ListHeader__EmptyStateControlsWrapper-sc-1gm7wbv-0", - "target": "div", - "toString": [Function], - "warnTooManyClasses": [Function], - "withComponent": [Function], - } + "isSearchable": true, + "isSortable": true, + "key": "first_name", + "name": "First Name", + }, + Object { + "isSearchable": true, + "isSortable": true, + "key": "username", + "name": "Username", + }, + Object { + "isSearchable": true, + "isSortable": true, + "key": "last_name", + "name": "Last Name", + }, + ] + } + onSearch={[Function]} + onSort={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "first_name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "access", } - forwardedRef={null} + } + sortOrder="ascending" + sortedColumnKey="first_name" + > + -
- - + , + ] + } + columns={ + Array [ + Object { + "isSearchable": true, + "isSortable": true, + "key": "first_name", + "name": "First Name", + }, + Object { + "isSearchable": true, + "isSortable": true, + "key": "username", + "name": "Username", + }, + Object { + "isSearchable": true, + "isSortable": true, + "key": "last_name", + "name": "Last Name", + }, + ] + } + fillWidth={false} + i18n={"/i18n/"} + isAllSelected={false} + isCompact={false} + onCompact={null} + onExpand={null} + onSearch={[Function]} + onSelectAll={null} + onSort={[Function]} + qsConfig={ + Object { + "dateFields": Array [ + "modified", + "created", + ], + "defaultParams": Object { + "order_by": "first_name", + "page": 1, + "page_size": 5, + }, + "integerFields": Array [ + "page", + "page_size", + ], + "namespace": "access", + } + } + showSelectAll={false} + sortOrder="ascending" + sortedColumnKey="first_name" + > + + +
+ + + +
+ + +
+ + + +
+ + + +
+ +
+ + Search key dropdown + + } + > +
+ + + Username + , + + Last Name + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + forwardedComponent={ + Object { + "$$typeof": Symbol(react.forward_ref), + "attrs": Array [], + "componentStyle": ComponentStyle { + "componentId": "Search__Dropdown-sc-1dwuww3-2", + "isStatic": true, + "lastClassName": "eQMakY", + "rules": Array [ + "&&&{> button{min-height:30px;min-width:70px;height:30px;padding:0 10px;margin:0px;::before{border-color:var(--pf-global--BorderColor--200);border-top-left-radius:3px;border-bottom-left-radius:3px;}> 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={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + toggle={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + toggle={ + + First Name + + } + > +
+ + +
, + } + } + > + + +
, + } + } + > + + + +
+ + + + +
+ + + Search value text input + + } + style={ + Object { + "width": "100%", + } + } + suppressClassNameWarning={true} + > + + Search value text input + + } + style={ + Object { + "width": "100%", + } + } + suppressClassNameWarning={true} + > + + Search value text input + + } + style={ + Object { + "width": "100%", + } + } + > +
+ + + + + + + + +
+
+
+
+ + + + + + +
+ + + + + +
+ +
+ + +
+ + + + + +
+
+
+
+ + + +
+ +
+ + + + + + + Sort By + + + + + Username + , + + Last Name + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + style={ + Object { + "marginRight": "10px", + } + } + toggle={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + 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": "10px", + } + } + toggle={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + isOpen={false} + onSelect={[Function]} + onToggle={[Function]} + style={ + Object { + "marginRight": "10px", + } + } + toggle={ + + First Name + + } + > + + Username + , + + Last Name + , + ] + } + isGrouped={false} + isOpen={false} + isPlain={false} + onSelect={[Function]} + onToggle={[Function]} + position="left" + style={ + Object { + "marginRight": "10px", + } + } + toggle={ + + First Name + + } + > +
+ + +
, + } + } + > + + +
, + } + } + > + + + +
+ + +
+ + + Reverse Sort Order +
+ } + distance={15} + enableFlip={true} + entryDelay={500} + exitDelay={500} + flipBehavior={ + Array [ + "top", + "right", + "bottom", + "left", + "top", + "right", + "bottom", + ] + } + isAppLauncher={false} + maxWidth="18.75rem" + position="top" + trigger="mouseenter focus" + zIndex={9999} + > + + +
+ Reverse Sort Order +
+
+ + } + delay={ + Array [ + 500, + 500, + ] + } + distance={15} + flip={true} + flipBehavior={ + Array [ + "top", + "right", + "bottom", + "left", + "top", + "right", + "bottom", + ] + } + lazy={true} + maxWidth="18.75rem" + onCreate={[Function]} + performance={true} + placement="top" + popperOptions={ + Object { + "modifiers": Object { + "hide": Object { + "enabled": true, + }, + "preventOverflow": Object { + "enabled": true, + }, + }, + } + } + theme="pf-tooltip" + trigger="mouseenter focus" + zIndex={9999} + > + + + + + + + +
+
+
+ Reverse Sort Order +
+
+
+ + } + > +
+ +
+
+ Reverse Sort Order +
+
+
+
+
+
+ + +
+ + + + + :not(:first-child){margin-left:20px;}", + ], + }, + "displayName": "DataListToolbar__AdditionalControlsWrapper", + "foldedComponentIds": Array [], + "render": [Function], + "styledComponentId": "DataListToolbar__AdditionalControlsWrapper-ajzso8-5", + "target": "div", + "toString": [Function], + "warnTooManyClasses": [Function], + "withComponent": [Function], + } + } + forwardedRef={null} + > +
+ + + + + + + + + + + + +
+
+
+ +
+ + + + + + + + + + + 0; return ( diff --git a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx index 9993f58aa5..f4618956dc 100644 --- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx +++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx @@ -184,7 +184,8 @@ class TemplatesList extends Component { const { match, i18n } = this.props; const canAdd = actions && Object.prototype.hasOwnProperty.call(actions, 'POST'); - const isAllSelected = selected.length === templates.length; + const isAllSelected = + selected.length === templates.length && selected.length > 0; return (