From 4b5b95a0f823ab2cfda7f397b687639ed4e13317 Mon Sep 17 00:00:00 2001
From: nixocio <nixocio@gmail.com>
Date: Wed, 18 Nov 2020 11:45:43 -0500
Subject: [PATCH] Hide instance group for Inventory Details if the data is not
 available

Hide instance group for Inventory Details if the data is not available.
This is the the same approach used in other details screens.

See: https://github.com/ansible/awx/issues/8620
---
 .../InventoryDetail/InventoryDetail.jsx       | 28 +++++++-------
 .../InventoryDetail/InventoryDetail.test.jsx  | 37 ++++++++++++++++---
 2 files changed, 47 insertions(+), 18 deletions(-)

diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
index fc17602df1..09dfe7ed54 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx
@@ -80,19 +80,21 @@ function InventoryDetail({ inventory, i18n }) {
             </Link>
           }
         />
-        <Detail
-          fullWidth
-          label={i18n._(t`Instance Groups`)}
-          value={
-            <ChipGroup numChips={5} totalChips={instanceGroups.length}>
-              {instanceGroups.map(ig => (
-                <Chip key={ig.id} isReadOnly>
-                  {ig.name}
-                </Chip>
-              ))}
-            </ChipGroup>
-          }
-        />
+        {instanceGroups && instanceGroups.length > 0 && (
+          <Detail
+            fullWidth
+            label={i18n._(t`Instance Groups`)}
+            value={
+              <ChipGroup numChips={5} totalChips={instanceGroups.length}>
+                {instanceGroups.map(ig => (
+                  <Chip key={ig.id} isReadOnly>
+                    {ig.name}
+                  </Chip>
+                ))}
+              </ChipGroup>
+            }
+          />
+        )}
         <VariablesDetail
           label={i18n._(t`Variables`)}
           value={inventory.variables}
diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.test.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.test.jsx
index d439cca833..426a359289 100644
--- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.test.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.test.jsx
@@ -63,11 +63,6 @@ const associatedInstanceGroups = [
     name: 'Foo',
   },
 ];
-InventoriesAPI.readInstanceGroups.mockResolvedValue({
-  data: {
-    results: associatedInstanceGroups,
-  },
-});
 
 function expectDetailToMatch(wrapper, label, value) {
   const detail = wrapper.find(`Detail[label="${label}"]`);
@@ -77,6 +72,12 @@ function expectDetailToMatch(wrapper, label, value) {
 
 describe('<InventoryDetail />', () => {
   test('should render details', async () => {
+    InventoriesAPI.readInstanceGroups.mockResolvedValue({
+      data: {
+        results: associatedInstanceGroups,
+      },
+    });
+
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(
@@ -105,6 +106,12 @@ describe('<InventoryDetail />', () => {
   });
 
   test('should load instance groups', async () => {
+    InventoriesAPI.readInstanceGroups.mockResolvedValue({
+      data: {
+        results: associatedInstanceGroups,
+      },
+    });
+
     let wrapper;
     await act(async () => {
       wrapper = mountWithContexts(
@@ -119,4 +126,24 @@ describe('<InventoryDetail />', () => {
     expect(chip.prop('isReadOnly')).toEqual(true);
     expect(chip.prop('children')).toEqual('Foo');
   });
+
+  test('should not load instance groups', async () => {
+    InventoriesAPI.readInstanceGroups.mockResolvedValue({
+      data: {
+        results: [],
+      },
+    });
+
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InventoryDetail inventory={mockInventory} />
+      );
+    });
+    wrapper.update();
+    expect(InventoriesAPI.readInstanceGroups).toHaveBeenCalledWith(
+      mockInventory.id
+    );
+    expect(wrapper.find(`Detail[label="Instance Groups"]`)).toHaveLength(0);
+  });
 });