diff --git a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx index 9bded82e19..3b03ac838e 100644 --- a/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx +++ b/awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx @@ -67,7 +67,7 @@ class DataListToolbar extends React.Component { {showSelectAll && ( @@ -83,7 +83,7 @@ class DataListToolbar extends React.Component { )} - } breakpoint="xl"> + } breakpoint="lg"> ) : ( {searchColumnName} )} - {columns.map(({ key, name, options, isBoolean }) => ( - { - onRemove(chipsByKey[key].key, val); - }} - categoryName={chipsByKey[key] ? chipsByKey[key].label : key} - key={key} - showToolbarItem={searchKey === key} - > - {(options && ( - - {/* TODO: update value to being object - { actualValue: optionKey, toString: () => label } - currently a pf bug that makes the checked logic - not work with object-based values */} - - - )) || - (isBoolean && ( - - )) || ( - - {/* TODO: add support for dates: - qsConfig.dateFields.filter(field => field === key).length && "date" */} - field === searchKey - ) && - 'number') || - 'search' + {columns.map( + ({ key, name, options, isBoolean, booleanLabels = {} }) => ( + { + onRemove(chipsByKey[key].key, val); + }} + categoryName={chipsByKey[key] ? chipsByKey[key].label : key} + key={key} + showToolbarItem={searchKey === key} + > + {(options && ( + + + + )) || + (isBoolean && ( + + )) || ( + + {/* TODO: add support for dates: + qsConfig.dateFields.filter(field => field === key).length && "date" */} + field === searchKey + ) && + 'number') || + 'search' + } + aria-label={i18n._(t`Search text input`)} + value={searchValue} + onChange={this.handleSearchInputChange} + onKeyDown={this.handleTextKeyDown} + /> + + + )} + + ) + )} ); } diff --git a/awx/ui_next/src/components/Sort/Sort.jsx b/awx/ui_next/src/components/Sort/Sort.jsx index 79e4eda02f..b5f18d7eff 100644 --- a/awx/ui_next/src/components/Sort/Sort.jsx +++ b/awx/ui_next/src/components/Sort/Sort.jsx @@ -135,6 +135,7 @@ class Sort extends React.Component { onSelect={this.handleDropdownSelect} direction={up} isOpen={isSortDropdownOpen} + style={{ width: '100%', maxWidth: '100px' }} toggle={