From 495392b1b74028223d656f0aa4429b00fc8c2e45 Mon Sep 17 00:00:00 2001
From: Christian Karidas <105549337+chriskari@users.noreply.github.com>
Date: Tue, 9 Jul 2024 15:28:46 +0200
Subject: [PATCH] fix: remove empty space for empty health section (#3051)

* fix: remove empty space for empyt health section

* fix: remove console errors
---
 src/components/Extensibility/ExtensibilityDetails.js      | 2 +-
 src/components/Extensibility/ExtensibilityInjections.js   | 8 ++++++--
 src/shared/ResourceForm/fields/MultiInput.js              | 2 +-
 src/shared/components/ResourceDetails/ResourceDetails.js  | 8 ++++----
 .../components/UnsavedMessageBox/UnsavedMessageBox.tsx    | 8 ++++++--
 5 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/components/Extensibility/ExtensibilityDetails.js b/src/components/Extensibility/ExtensibilityDetails.js
index c3912908c8..073906297b 100644
--- a/src/components/Extensibility/ExtensibilityDetails.js
+++ b/src/components/Extensibility/ExtensibilityDetails.js
@@ -161,7 +161,7 @@ export const ExtensibilityDetailsCore = ({
           : []
       }
       customHealthCards={
-        Array.isArray(health)
+        Array.isArray(health) && health?.length > 0
           ? [
               (resource, i) => (
                 <Widget
diff --git a/src/components/Extensibility/ExtensibilityInjections.js b/src/components/Extensibility/ExtensibilityInjections.js
index db2a7d8125..962b678733 100644
--- a/src/components/Extensibility/ExtensibilityInjections.js
+++ b/src/components/Extensibility/ExtensibilityInjections.js
@@ -71,9 +71,13 @@ export const ExtensibilityInjectionCore = ({ resMetaData, root }) => {
 const ExtensibilityInjections = ({ destination, slot, root }) => {
   const injections = useGetInjections(destination, slot);
   let itemList = [];
-  (injections || []).forEach(injection => {
+  (injections || []).forEach((injection, index) => {
     itemList.push(
-      <ExtensibilityInjection resMetaData={injection} root={root} />,
+      <ExtensibilityInjection
+        resMetaData={injection}
+        root={root}
+        key={index}
+      />,
     );
   });
   return itemList;
diff --git a/src/shared/ResourceForm/fields/MultiInput.js b/src/shared/ResourceForm/fields/MultiInput.js
index a3ddf8d00b..f57291e20a 100644
--- a/src/shared/ResourceForm/fields/MultiInput.js
+++ b/src/shared/ResourceForm/fields/MultiInput.js
@@ -157,7 +157,7 @@ export function MultiInput({
       tooltipContent={sectionTooltipContent || tooltipContent}
       {...props}
     >
-      <div className="form-field multi-input" justifyContent="Center">
+      <div className="form-field multi-input">
         <ul className="bsl-col-md--12">
           {internalValue.map((entry, index) => {
             const fieldWidth =
diff --git a/src/shared/components/ResourceDetails/ResourceDetails.js b/src/shared/components/ResourceDetails/ResourceDetails.js
index 8097aae054..c81e1401c5 100644
--- a/src/shared/components/ResourceDetails/ResourceDetails.js
+++ b/src/shared/components/ResourceDetails/ResourceDetails.js
@@ -67,7 +67,7 @@ ResourceDetails.propTypes = {
   showYamlTab: PropTypes.bool,
   layoutCloseCreateUrl: PropTypes.string,
   layoutNumber: PropTypes.string,
-  customHealthCards: PropTypes.node,
+  customHealthCards: PropTypes.arrayOf(PropTypes.func),
   showHealthCardsTitle: PropTypes.bool,
 };
 
@@ -394,9 +394,9 @@ function Resource({
     />
   );
 
-  const customOverviewCard = (customHealthCards || []).map(healthCard =>
-    healthCard(resource),
-  );
+  const customOverviewCard = (
+    customHealthCards || []
+  ).map((healthCard, index) => healthCard(resource, index));
 
   return (
     <ResourceDetailContext.Provider value={true}>
diff --git a/src/shared/components/UnsavedMessageBox/UnsavedMessageBox.tsx b/src/shared/components/UnsavedMessageBox/UnsavedMessageBox.tsx
index 7cb2900482..c40d2985fc 100644
--- a/src/shared/components/UnsavedMessageBox/UnsavedMessageBox.tsx
+++ b/src/shared/components/UnsavedMessageBox/UnsavedMessageBox.tsx
@@ -58,8 +58,12 @@ export function UnsavedMessageBox({ isOpen }: UnsavedMessageBoxProps) {
       onClose={handleClose}
       titleText={t('common.headers.discard-changes')}
       actions={[
-        <Button design="Emphasized">{t('common.buttons.discard')}</Button>,
-        <Button design="Transparent">{`${t('common.buttons.cancel')}`}</Button>,
+        <Button design="Emphasized" key="discard">
+          {t('common.buttons.discard')}
+        </Button>,
+        <Button design="Transparent" key="cancel">{`${t(
+          'common.buttons.cancel',
+        )}`}</Button>,
       ]}
     >
       {t('common.messages.discard-changes-warning')}