From ea015190de921b394a6db6729460b38d9b194e45 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Mon, 9 Sep 2019 15:41:39 -0400
Subject: [PATCH 1/2] Display search key along with value in tag

---
 .../src/components/FilterTags/FilterTags.jsx     | 16 +++++++++++-----
 .../components/FilterTags/FilterTags.test.jsx    |  6 +++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

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 && (
       <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">
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('<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();
   });
 });

From da43b9b84cbef90055dc90bf866cea7ba90d6669 Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Tue, 10 Sep 2019 10:08:42 -0400
Subject: [PATCH 2/2] Prettify FilterTags

---
 awx/ui_next/src/components/FilterTags/FilterTags.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/awx/ui_next/src/components/FilterTags/FilterTags.jsx b/awx/ui_next/src/components/FilterTags/FilterTags.jsx
index 850ca7289a..97773ba65a 100644
--- a/awx/ui_next/src/components/FilterTags/FilterTags.jsx
+++ b/awx/ui_next/src/components/FilterTags/FilterTags.jsx
@@ -52,7 +52,9 @@ const FilterTags = ({
       .join(' ');
 
     if (Array.isArray(queryParams[key])) {
-      queryParams[key].forEach(val => queryParamsArr.push({ key, value: val, label }));
+      queryParams[key].forEach(val =>
+        queryParamsArr.push({ key, value: val, label })
+      );
     } else {
       queryParamsArr.push({ key, value: queryParams[key], label });
     }