diff --git a/awx/ui_next/src/components/FilterTags/FilterTags.jsx b/awx/ui_next/src/components/FilterTags/FilterTags.jsx index c9bc1cb4a7..850ca7289a 100644 --- a/awx/ui_next/src/components/FilterTags/FilterTags.jsx +++ b/awx/ui_next/src/components/FilterTags/FilterTags.jsx @@ -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 && ( - {`${itemCount} results`} + {i18n._(t`${itemCount} results`)} {i18n._(t`Active Filters:`)} - {queryParamsArr.map(({ key, value }) => ( + {queryParamsArr.map(({ key, label, value }) => ( onRemove(key, value)} > - {value} + {label}: {value} ))}
diff --git a/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx b/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx index df681d7c68..8bfd6642d7 100644 --- a/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx +++ b/awx/ui_next/src/components/FilterTags/FilterTags.test.jsx @@ -27,7 +27,7 @@ describe('', () => { 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('', () => { ); 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(); }); });