Merge pull request #5639 from jlmitch5/searchLabelImprovement

update select-based search items to utilize labels, not just the api value

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -67,7 +67,7 @@ class DataListToolbar extends React.Component {
       <DataToolbar
         id={`${qsConfig.namespace}-list-toolbar`}
         clearAllFilters={clearAllFilters}
-        collapseListedFiltersBreakpoint="xl"
+        collapseListedFiltersBreakpoint="lg"
       >
         <DataToolbarContent>
           {showSelectAll && (
@@ -83,7 +83,7 @@ class DataListToolbar extends React.Component {
               <DataToolbarSeparator variant="separator" />
             </DataToolbarGroup>
           )}
-          <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="xl">
+          <DataToolbarToggleGroup toggleIcon={<SearchIcon />} breakpoint="lg">
             <DataToolbarItem>
               <Search
                 qsConfig={qsConfig}

awx/ui_next/src/components/Lookup/ProjectLookup.jsx

@@ -78,6 +78,7 @@ function ProjectLookup({
               },
               {
                 name: i18n._(t`Type`),
+                key: 'type',
                 options: [
                   [``, i18n._(t`Manual`)],
                   [`git`, i18n._(t`Git`)],

awx/ui_next/src/components/Search/Search.jsx

@@ -204,13 +204,14 @@ class Search extends React.Component {
               }
               isOpen={isSearchDropdownOpen}
               dropdownItems={searchDropdownItems}
-              style={{ width: '100%' }}
+              style={{ width: '100%', maxWidth: '100px' }}
             />
           ) : (
             <NoOptionDropdown>{searchColumnName}</NoOptionDropdown>
           )}
         </DataToolbarItem>
-        {columns.map(({ key, name, options, isBoolean }) => (
+        {columns.map(
+          ({ key, name, options, isBoolean, booleanLabels = {} }) => (
             <DataToolbarFilter
               chips={chipsByKey[key] ? chipsByKey[key].chips : []}
               deleteChip={(unusedKey, val) => {
@@ -222,10 +223,6 @@ class Search extends React.Component {
             >
               {(options && (
                 <Fragment>
-                {/* 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 */}
                   <Select
                     variant={SelectVariant.checkbox}
                     aria-label={name}
@@ -235,10 +232,12 @@ class Search extends React.Component {
                     }
                     selections={chipsByKey[key].chips}
                     isExpanded={isFilterDropdownOpen}
-                  placeholderText={`Filter by ${name.toLowerCase()}`}
+                    placeholderText={`Filter By ${name}`}
                   >
-                  {options.map(([optionKey]) => (
-                    <SelectOption key={optionKey} value={optionKey} />
+                    {options.map(([optionKey, optionLabel]) => (
+                      <SelectOption key={optionKey} value={optionKey}>
+                        {optionLabel}
+                      </SelectOption>
                     ))}
                   </Select>
                 </Fragment>
@@ -252,14 +251,14 @@ class Search extends React.Component {
                     }
                     selections={chipsByKey[key].chips[0]}
                     isExpanded={isFilterDropdownOpen}
-                  placeholderText={`Filter by ${name.toLowerCase()}`}
+                    placeholderText={`Filter By ${name}`}
                   >
-                  {/* 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 */}
-                  <SelectOption key="true" value="true" />
-                  <SelectOption key="false" value="false" />
+                    <SelectOption key="true" value="true">
+                      {booleanLabels.true || i18n._(t`Yes`)}
+                    </SelectOption>
+                    <SelectOption key="false" value="false">
+                      {booleanLabels.false || i18n._(t`No`)}
+                    </SelectOption>
                   </Select>
                 )) || (
                   <InputGroup>
@@ -288,7 +287,8 @@ class Search extends React.Component {
                   </InputGroup>
                 )}
             </DataToolbarFilter>
-        ))}
+          )
+        )}
       </DataToolbarGroup>
     );
   }

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={
                   <DropdownToggle
                     id="awx-sort"

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx

@@ -184,9 +184,13 @@ function InventoryGroupsList({ i18n, location, match }) {
             isDefault: true,
           },
           {
-            name: i18n._(t`Is Root Group`),
+            name: i18n._(t`Group Type`),
             key: 'parents__isnull',
             isBoolean: true,
+            booleanLabels: {
+              true: i18n._(t`Show Only Root Groups`),
+              false: i18n._(t`Show All Groups`),
+            },
           },
           {
             name: i18n._(t`Created By (Username)`),

awx/ui_next/src/types.js

@@ -257,6 +257,10 @@ export const SearchColumns = arrayOf(
     key: string.isRequired,
     isDefault: bool,
     isBoolean: bool,
+    booleanLabels: shape({
+      true: string.isRequired,
+      false: string.isRequired,
+    }),
     options: arrayOf(arrayOf(string, string)),
   })
 );