External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-11 01:57:35 -03:30
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5639 from jlmitch5/searchLabelImprovement

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

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot] 2020-01-14 20:39:09 +00:00 committed by GitHub
commit 7b3d36ba53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 91 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx
View File

@ -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}

1
awx/ui_next/src/components/Lookup/ProjectLookup.jsx
View File

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

156
awx/ui_next/src/components/Search/Search.jsx
View File

@ -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 }) => (
<DataToolbarFilter
chips={chipsByKey[key] ? chipsByKey[key].chips : []}
deleteChip={(unusedKey, val) => {
onRemove(chipsByKey[key].key, val);
}}
categoryName={chipsByKey[key] ? chipsByKey[key].label : key}
key={key}
showToolbarItem={searchKey === key}
>
{(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}
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'
{columns.map(
({ key, name, options, isBoolean, booleanLabels = {} }) => (
<DataToolbarFilter
chips={chipsByKey[key] ? chipsByKey[key].chips : []}
deleteChip={(unusedKey, val) => {
onRemove(chipsByKey[key].key, val);
}}
categoryName={chipsByKey[key] ? chipsByKey[key].label : key}
key={key}
showToolbarItem={searchKey === key}
>
{(options && (
<Fragment>
<Select
variant={SelectVariant.checkbox}
aria-label={name}
onToggle={this.handleFilterDropdownToggle}
onSelect={(event, selection) =>
this.handleFilterDropdownSelect(key, event, selection)
}
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}
selections={chipsByKey[key].chips}
isExpanded={isFilterDropdownOpen}
placeholderText={`Filter By ${name}`}
>
<SearchIcon />
</Button>
</InputGroup>
)}
</DataToolbarFilter>
))}
{options.map(([optionKey, optionLabel]) => (
<SelectOption key={optionKey} value={optionKey}>
{optionLabel}
</SelectOption>
))}
</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>
);
}

1
awx/ui_next/src/components/Sort/Sort.jsx
View File

@ -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"

6
awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx
View File

@ -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)`),

4
awx/ui_next/src/types.js
View File

@ -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)),
})
);