update select-based items to utilize labels

This commit is contained in:
John Mitchell
2020-01-13 12:10:36 -05:00
parent 04576af6a5
commit bbf9c13952
3 changed files with 22 additions and 8 deletions

View File

@@ -210,7 +210,7 @@ class Search extends React.Component {
<NoOptionDropdown>{searchColumnName}</NoOptionDropdown> <NoOptionDropdown>{searchColumnName}</NoOptionDropdown>
)} )}
</DataToolbarItem> </DataToolbarItem>
{columns.map(({ key, name, options, isBoolean }) => ( {columns.map(({ key, name, options, isBoolean, booleanLabels = {} }) => (
<DataToolbarFilter <DataToolbarFilter
chips={chipsByKey[key] ? chipsByKey[key].chips : []} chips={chipsByKey[key] ? chipsByKey[key].chips : []}
deleteChip={(unusedKey, val) => { deleteChip={(unusedKey, val) => {
@@ -235,10 +235,12 @@ class Search extends React.Component {
} }
selections={chipsByKey[key].chips} selections={chipsByKey[key].chips}
isExpanded={isFilterDropdownOpen} isExpanded={isFilterDropdownOpen}
placeholderText={`Filter by ${name.toLowerCase()}`} placeholderText={`Filter By ${name}`}
> >
{options.map(([optionKey]) => ( {options.map(([optionKey, optionLabel]) => (
<SelectOption key={optionKey} value={optionKey} /> <SelectOption key={optionKey} value={optionKey}>
{optionLabel}
</SelectOption>
))} ))}
</Select> </Select>
</Fragment> </Fragment>
@@ -252,14 +254,18 @@ class Search extends React.Component {
} }
selections={chipsByKey[key].chips[0]} selections={chipsByKey[key].chips[0]}
isExpanded={isFilterDropdownOpen} isExpanded={isFilterDropdownOpen}
placeholderText={`Filter by ${name.toLowerCase()}`} placeholderText={`Filter By ${name}`}
> >
{/* TODO: update value to being object {/* TODO: update value to being object
{ actualValue: optionKey, toString: () => label } { actualValue: optionKey, toString: () => label }
currently a pf bug that makes the checked logic currently a pf bug that makes the checked logic
not work with object-based values */} not work with object-based values */}
<SelectOption key="true" value="true" /> <SelectOption key="true" value="true">
<SelectOption key="false" value="false" /> {booleanLabels.true || i18n._(t`Yes`)}
</SelectOption>
<SelectOption key="false" value="false">
{booleanLabels.false || i18n._(t`No`)}
</SelectOption>
</Select> </Select>
)) || ( )) || (
<InputGroup> <InputGroup>

View File

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

View File

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