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,91 +204,91 @@ 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(
-          <DataToolbarFilter
+          ({ key, name, options, isBoolean, booleanLabels = {} }) => (
-            chips={chipsByKey[key] ? chipsByKey[key].chips : []}
+            <DataToolbarFilter
-            deleteChip={(unusedKey, val) => {
+              chips={chipsByKey[key] ? chipsByKey[key].chips : []}
-              onRemove(chipsByKey[key].key, val);
+              deleteChip={(unusedKey, val) => {
-            }}
+                onRemove(chipsByKey[key].key, val);
-            categoryName={chipsByKey[key] ? chipsByKey[key].label : key}
+              }}
-            key={key}
+              categoryName={chipsByKey[key] ? chipsByKey[key].label : key}
-            showToolbarItem={searchKey === key}
+              key={key}
-          >
+              showToolbarItem={searchKey === key}
-            {(options && (
+            >
-              <Fragment>
+              {(options && (
-                {/* TODO: update value to being object
+                <Fragment>
-                    { actualValue: optionKey, toString: () => label }
+                  <Select
-                    currently a pf bug that makes the checked logic
+                    variant={SelectVariant.checkbox}
-                    not work with object-based values */}
+                    aria-label={name}
-                <Select
+                    onToggle={this.handleFilterDropdownToggle}
-                  variant={SelectVariant.checkbox}
+                    onSelect={(event, selection) =>
-                  aria-label={name}
+                      this.handleFilterDropdownSelect(key, event, selection)
-                  onToggle={this.handleFilterDropdownToggle}
-                  onSelect={(event, selection) =>
-                    this.handleFilterDropdownSelect(key, event, selection)
-                  }
-                  selections={chipsByKey[key].chips}
-                  isExpanded={isFilterDropdownOpen}
-                  placeholderText={`Filter by ${name.toLowerCase()}`}
-                >
-                  {options.map(([optionKey]) => (
-                    <SelectOption key={optionKey} value={optionKey} />
-                  ))}
-                </Select>
-              </Fragment>
-            )) ||
-              (isBoolean && (
-                <Select
-                  aria-label={name}
-                  onToggle={this.handleFilterDropdownToggle}
-                  onSelect={(event, selection) =>
-                    this.handleFilterBooleanSelect(key, selection)
-                  }
-                  selections={chipsByKey[key].chips[0]}
-                  isExpanded={isFilterDropdownOpen}
-                  placeholderText={`Filter by ${name.toLowerCase()}`}
-                >
-                  {/* 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" />
-                </Select>
-              )) || (
-                <InputGroup>
-                  {/* TODO: add support for dates:
-            qsConfig.dateFields.filter(field => field === key).length && "date" */}
-                  <TextInput
-                    type={
-                      (qsConfig.integerFields.find(
-                        field => field === searchKey
-                      ) &&
-                        'number') ||
-                      'search'
                     }
-                    aria-label={i18n._(t`Search text input`)}
+                    selections={chipsByKey[key].chips}
-                    value={searchValue}
+                    isExpanded={isFilterDropdownOpen}
-                    onChange={this.handleSearchInputChange}
+                    placeholderText={`Filter By ${name}`}
-                    onKeyDown={this.handleTextKeyDown}
-                  />
-                  <Button
-                    variant={ButtonVariant.control}
-                    aria-label={i18n._(t`Search submit button`)}
-                    onClick={this.handleSearch}
                   >
-                    <SearchIcon />
+                    {options.map(([optionKey, optionLabel]) => (
-                  </Button>
+                      <SelectOption key={optionKey} value={optionKey}>
-                </InputGroup>
+                        {optionLabel}
-              )}
+                      </SelectOption>
-          </DataToolbarFilter>
+                    ))}
-        ))}
+                  </Select>
+                </Fragment>
+              )) ||
+                (isBoolean && (
+                  <Select
+                    aria-label={name}
+                    onToggle={this.handleFilterDropdownToggle}
+                    onSelect={(event, selection) =>
+                      this.handleFilterBooleanSelect(key, selection)
+                    }
+                    selections={chipsByKey[key].chips[0]}
+                    isExpanded={isFilterDropdownOpen}
+                    placeholderText={`Filter By ${name}`}
+                  >
+                    <SelectOption key="true" value="true">
+                      {booleanLabels.true || i18n._(t`Yes`)}
+                    </SelectOption>
+                    <SelectOption key="false" value="false">
+                      {booleanLabels.false || i18n._(t`No`)}
+                    </SelectOption>
+                  </Select>
+                )) || (
+                  <InputGroup>
+                    {/* TODO: add support for dates:
+            qsConfig.dateFields.filter(field => field === key).length && "date" */}
+                    <TextInput
+                      type={
+                        (qsConfig.integerFields.find(
+                          field => field === searchKey
+                        ) &&
+                          'number') ||
+                        'search'
+                      }
+                      aria-label={i18n._(t`Search text input`)}
+                      value={searchValue}
+                      onChange={this.handleSearchInputChange}
+                      onKeyDown={this.handleTextKeyDown}
+                    />
+                    <Button
+                      variant={ButtonVariant.control}
+                      aria-label={i18n._(t`Search submit button`)}
+                      onClick={this.handleSearch}
+                    >
+                      <SearchIcon />
+                    </Button>
+                  </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)),
   })
 );