Merge pull request #10403 from nixocio/ui_issue_8890

Fix host filter chips on smart inventory

Fix host filter chips on smart inventory

See: #8890

Reviewed-by: Jake McDermott <yo@jakemcdermott.me>
Reviewed-by: Sarah Akus <sarah.akus@gmail.com>

awx/ui_next/src/components/Lookup/HostFilterLookup.jsx

@@ -32,7 +32,9 @@ import {
 } from './shared/HostFilterUtils';
 
 const ChipHolder = styled.div`
-  --pf-c-form-control--Height: auto;
+  && {
+    --pf-c-form-control--Height: auto;
+  }
   .pf-c-chip-group {
     margin-right: 8px;
   }
@@ -271,6 +273,27 @@ function HostFilterLookup({
             ))}
           </ChipGroup>
         ))}
+        {/* Parse advanced search chips */}
+        {Object.keys(chips).length > 0 &&
+          Object.keys(chips)
+            .filter(val => chips[val].chips.length > 0)
+            .filter(
+              val => searchColumns.map(val2 => val2.key).indexOf(val) === -1
+            )
+            .map(leftoverKey => (
+              <ChipGroup
+                categoryName={chips[leftoverKey].key}
+                key={chips[leftoverKey].key}
+                numChips={5}
+                totalChips={chips[leftoverKey]?.chips?.length || 0}
+              >
+                {chips[leftoverKey]?.chips?.map(chip => (
+                  <Chip key={chip.key} isReadOnly>
+                    {chip.node}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            ))}
       </ChipHolder>
     </InputGroup>
   );

awx/ui_next/src/screens/Inventory/SmartInventory.jsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect } from 'react';
-
 import { t } from '@lingui/macro';
 import {
   Link,

awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.test.jsx

@@ -122,12 +122,44 @@ describe('<SmartInventoryForm />', () => {
       expect(groupChipGroup.find('Chip').length).toBe(1);
     });
 
+    test('should display filter chips for advanced host filter', async () => {
+      await act(async () => {
+        wrapper.find('HostFilterLookup').invoke('onBlur')();
+        wrapper.find('HostFilterLookup').invoke('onChange')(
+          'name__contains=f or name__contains=o'
+        );
+      });
+      wrapper.update();
+      const nameChipGroup = wrapper.find(
+        'HostFilterLookup ChipGroup[categoryName="name__contains"]'
+      );
+      expect(nameChipGroup.find('Chip').length).toBe(2);
+      expect(
+        nameChipGroup
+          .find('Chip')
+          .at(0)
+          .prop('children')
+      ).toBe('f');
+      expect(
+        nameChipGroup
+          .find('Chip')
+          .at(1)
+          .prop('children')
+      ).toBe('o');
+    });
+
     test('should submit expected form values on save', async () => {
       await act(async () => {
         wrapper.find('InstanceGroupsLookup').invoke('onChange')(
           mockFormValues.instance_groups
         );
       });
+      await act(async () => {
+        wrapper.find('HostFilterLookup').invoke('onBlur')();
+        wrapper.find('HostFilterLookup').invoke('onChange')(
+          mockFormValues.host_filter
+        );
+      });
       wrapper.update();
       await act(async () => {
         wrapper.find('button[aria-label="Save"]').simulate('click');