From f65985e9525ba3c83f00600f25cf904bb0146d01 Mon Sep 17 00:00:00 2001
From: Michael Johnson <johnsonm325@gmail.com>
Date: Wed, 13 Nov 2024 03:29:24 -0500
Subject: [PATCH] fix(RHINENG-14334): System detail shows empty GridItem
 (#2264)

There is the case when you have your system assigned to multiple policies but it's not reported against each policy - we will still try to show a card (you can see an GridItem - we show there an empty component).
This is happening because we have multiple reports returned but some of them have 0 test results ( as system is never reported)

To repro:
- Go to Compliance -> Systems
- Find a system with multiple policies but at least one policy with 0   test results (data.meta.total === 0)

Before, the GridItem would render, but with no card.

Now, the GridItem has been moved into the child component and will only display the GridItem if the meta.total > 0.

Co-authored-by: Michael Johnson <micjohns@micjohns-thinkpadp16vgen1.rmtusnc.csb>
---
 .../SystemPolicyCards/SystemPolicyCards.js    | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/SmartComponents/SystemPolicyCards/SystemPolicyCards.js b/src/SmartComponents/SystemPolicyCards/SystemPolicyCards.js
index aa2526db9..e298686db 100644
--- a/src/SmartComponents/SystemPolicyCards/SystemPolicyCards.js
+++ b/src/SmartComponents/SystemPolicyCards/SystemPolicyCards.js
@@ -24,15 +24,19 @@ const SystemPolicyCard = ({ policy }) => {
     ],
   });
 
-  return data === undefined ? (
-    <LoadingPolicyCards count={1} />
-  ) : data.meta.total === 0 ? (
-    <React.Fragment />
-  ) : (
-    <SystemPolicyCardPresentational
-      policy={dataSerialiser({ ...data.data[0], ...policy }, dataMap)}
-      style={{ height: '100%' }}
-    />
+  return (
+    data?.meta.total === 0 || (
+      <GridItem sm={12} md={12} lg={6} xl={4}>
+        {data === undefined ? (
+          <LoadingPolicyCards count={1} />
+        ) : (
+          <SystemPolicyCardPresentational
+            policy={dataSerialiser({ ...data.data[0], ...policy }, dataMap)}
+            style={{ height: '100%' }}
+          />
+        )}
+      </GridItem>
+    )
   );
 };
 
@@ -55,11 +59,15 @@ export const SystemPolicyCards = () => {
       {loading ? (
         <LoadingPolicyCards />
       ) : (
-        (data?.data || []).map((policy) => (
-          <GridItem sm={12} md={12} lg={6} xl={4} key={policy.id}>
-            <SystemPolicyCard policy={policy} inventoryId={inventoryId} />
-          </GridItem>
-        ))
+        (data?.data || []).map((policy) => {
+          return (
+            <SystemPolicyCard
+              policy={policy}
+              inventoryId={inventoryId}
+              key={policy.id}
+            />
+          );
+        })
       )}
     </Grid>
   );