Display search key along with value in tag

This commit is contained in:
mabashian 2019-09-09 15:41:39 -04:00
parent a3a5db1c44
commit ea015190de
2 changed files with 16 additions and 6 deletions

View File

@ -45,28 +45,34 @@ const FilterTags = ({
qsConfig
);
nonDefaultParams.forEach(key => {
const label = key
.replace('__icontains', '')
.split('_')
.map(word => `${word.charAt(0).toUpperCase()}${word.slice(1)}`)
.join(' ');
if (Array.isArray(queryParams[key])) {
queryParams[key].forEach(val => queryParamsArr.push({ key, value: val }));
queryParams[key].forEach(val => queryParamsArr.push({ key, value: val, label }));
} else {
queryParamsArr.push({ key, value: queryParams[key] });
queryParamsArr.push({ key, value: queryParams[key], label });
}
});
return (
queryParamsArr.length > 0 && (
<FilterTagsRow>
<ResultCount>{`${itemCount} results`}</ResultCount>
<ResultCount>{i18n._(t`${itemCount} results`)}</ResultCount>
<VerticalSeparator />
<FilterLabel>{i18n._(t`Active Filters:`)}</FilterLabel>
<ChipGroup>
{queryParamsArr.map(({ key, value }) => (
{queryParamsArr.map(({ key, label, value }) => (
<Chip
className="searchTagChip"
key={`${key}__${value}`}
isReadOnly={false}
onClick={() => onRemove(key, value)}
>
{value}
<b>{label}:</b>&nbsp;{value}
</Chip>
))}
<div className="pf-c-chip pf-m-overflow">

View File

@ -27,7 +27,7 @@ describe('<ExpandCollapse />', () => {
test('renders non-default param tags based on location history', () => {
const history = createMemoryHistory({
initialEntries: [
'/foo?item.page=1&item.page_size=2&item.foo=bar&item.baz=bust',
'/foo?item.page=1&item.page_size=2&item.name__icontains=bar&item.job_type__icontains=project',
],
});
const wrapper = mountWithContexts(
@ -42,6 +42,10 @@ describe('<ExpandCollapse />', () => {
);
const chips = wrapper.find('.pf-c-chip.searchTagChip');
expect(chips.length).toBe(2);
const chipLabels = wrapper.find('.pf-c-chip__text b');
expect(chipLabels.length).toBe(2);
expect(chipLabels.at(0).text()).toEqual('Name:');
expect(chipLabels.at(1).text()).toEqual('Job Type:');
wrapper.unmount();
});
});