From 408b62aa87e6daa81ce849d895170dcd1bd48ae7 Mon Sep 17 00:00:00 2001
From: Oliwia Gowor <72342415+OliwiaGowor@users.noreply.github.com>
Date: Tue, 17 Sep 2024 09:37:17 +0200
Subject: [PATCH] fix console errors (#3349)

---
 .../BusolaExtensionDetails.js                 | 98 ++++++++++---------
 .../BusolaExtensions/BusolaExtensionEdit.js   |  1 +
 .../ResourceForm/fields/KeyValueField.js      | 20 ++--
 .../components/MonacoEditorESM/Editor.js      |  1 -
 src/sidebar/CategoryItem.tsx                  |  5 +-
 5 files changed, 67 insertions(+), 58 deletions(-)

diff --git a/src/components/BusolaExtensions/BusolaExtensionDetails.js b/src/components/BusolaExtensions/BusolaExtensionDetails.js
index 23e5a49a54..320772357a 100644
--- a/src/components/BusolaExtensions/BusolaExtensionDetails.js
+++ b/src/components/BusolaExtensions/BusolaExtensionDetails.js
@@ -43,6 +43,10 @@ export function BusolaExtensionDetails({ name, namespace }) {
   const updateResourceMutation = useUpdate(resourceUrl);
   const notification = useNotification();
 
+  if (!name) {
+    return null;
+  }
+
   const updateBusolaExtension = async (newBusolaExtension, configmap) => {
     try {
       const diff = createPatch(configmap, newBusolaExtension);
@@ -66,56 +70,53 @@ export function BusolaExtensionDetails({ name, namespace }) {
 
   const BusolaExtensionEditor = resource => {
     const { data } = resource;
-    return (
-      <>
-        {SECTIONS.map(key => (
-          <ReadonlyEditorPanel
-            editorProps={{ language: 'yaml' }}
-            title={t(`extensibility.sections.${key}`)}
-            value={data[key]}
-            key={key + JSON.stringify(data[key])}
-            actions={[
-              <ModalWithForm
-                title={t('extensibility.edit-section', {
+    return SECTIONS.map(key => (
+      <ReadonlyEditorPanel
+        editorProps={{ language: 'yaml' }}
+        title={t(`extensibility.sections.${key}`)}
+        value={data[key]}
+        key={key + JSON.stringify(data[key])}
+        actions={[
+          <ModalWithForm
+            title={t('extensibility.edit-section', {
+              section: t(`extensibility.sections.${key}`),
+            })}
+            modalOpeningComponent={
+              <Button style={spacing.sapUiTinyMarginEnd} design="Default">
+                {t('extensibility.edit-section', {
                   section: t(`extensibility.sections.${key}`),
                 })}
-                modalOpeningComponent={
-                  <Button style={spacing.sapUiTinyMarginEnd} design="Default">
-                    {t('extensibility.edit-section', {
-                      section: t(`extensibility.sections.${key}`),
-                    })}
-                  </Button>
-                }
-                confirmText={t('common.buttons.save')}
-                id={`edit-resource-modal`}
-                className="modal-size--l"
-                renderForm={props => (
-                  <ErrorBoundary>
-                    <SectionEditor
-                      {...props}
-                      onlyYaml={!extensibilitySchemas[key]}
-                      data={data[key]}
-                      schema={extensibilitySchemas[key]}
-                      resource={data}
-                      onSubmit={newData => {
-                        const newResource = {
-                          ...resource,
-                          data: {
-                            ...data,
-                            [key]: newData,
-                          },
-                        };
-                        updateBusolaExtension(newResource, resource);
-                      }}
-                    />
-                  </ErrorBoundary>
-                )}
-              />,
-            ]}
-          />
-        ))}
-      </>
-    );
+              </Button>
+            }
+            confirmText={t('common.buttons.save')}
+            id={`edit-resource-modal`}
+            key={`edit-resource-modal`}
+            className="modal-size--l"
+            renderForm={props => (
+              <ErrorBoundary>
+                <SectionEditor
+                  {...props}
+                  onlyYaml={!extensibilitySchemas[key]}
+                  data={data[key]}
+                  schema={extensibilitySchemas[key]}
+                  resource={data}
+                  onSubmit={newData => {
+                    const newResource = {
+                      ...resource,
+                      data: {
+                        ...data,
+                        [key]: newData,
+                      },
+                    };
+                    updateBusolaExtension(newResource, resource);
+                  }}
+                />
+              </ErrorBoundary>
+            )}
+          />,
+        ]}
+      />
+    ));
   };
 
   const ExtensibilityVersion = configmap => {
@@ -180,6 +181,7 @@ export function BusolaExtensionDetails({ name, namespace }) {
       <UI5Panel
         keyComponent="extensibility-version"
         title={t('extensibility.sections.version')}
+        key={'extensibility-version'}
         headerActions={
           hasMigrationFunction && (
             <>
diff --git a/src/components/BusolaExtensions/BusolaExtensionEdit.js b/src/components/BusolaExtensions/BusolaExtensionEdit.js
index c91d972c2a..e680848c91 100644
--- a/src/components/BusolaExtensions/BusolaExtensionEdit.js
+++ b/src/components/BusolaExtensions/BusolaExtensionEdit.js
@@ -73,6 +73,7 @@ export function BusolaExtensionEdit({
         <ResourceForm.CollapsibleSection
           title={t(`extensibility.sections.${key}`)}
           defaultOpen
+          key={key}
         >
           <Editor
             language="yaml"
diff --git a/src/shared/ResourceForm/fields/KeyValueField.js b/src/shared/ResourceForm/fields/KeyValueField.js
index 34b47410a3..1764e12348 100644
--- a/src/shared/ResourceForm/fields/KeyValueField.js
+++ b/src/shared/ResourceForm/fields/KeyValueField.js
@@ -80,8 +80,11 @@ export function KeyValueField({
           .reduce((acc, entry) => ({ ...acc, [entry.key]: entry.val }), {})
       }
       inputs={[
-        ({ value, setValue, ref, updateValue, focus }) => (
-          <div className={readableFromFile ? 'bsl-col-md--4' : 'bsl-col-md--6'}>
+        ({ value, setValue, ref, updateValue, focus, index }) => (
+          <div
+            key={`key-value-field-key-${index}`}
+            className={readableFromFile ? 'bsl-col-md--4' : 'bsl-col-md--6'}
+          >
             {input.key({
               fullWidth: true,
               className: 'full-width',
@@ -101,8 +104,11 @@ export function KeyValueField({
             })}
           </div>
         ),
-        ({ focus, value, setValue, updateValue, ...props }) => (
-          <div className={readableFromFile ? 'bsl-col-md--5' : 'bsl-col-md--6'}>
+        ({ focus, value, setValue, updateValue, index, ...props }) => (
+          <div
+            key={`key-value-field-value-${index}`}
+            className={readableFromFile ? 'bsl-col-md--5' : 'bsl-col-md--6'}
+          >
             {input.value({
               fullWidth: true,
               className: 'value-input full-width',
@@ -131,8 +137,8 @@ export function KeyValueField({
             })}
           </div>
         ),
-        ({ value, setValue, updateValue }) => (
-          <>
+        ({ value, setValue, updateValue, index }) => (
+          <React.Fragment key={`read-file-button-${index}`}>
             {readableFromFile ? (
               <Button
                 onClick={() =>
@@ -151,7 +157,7 @@ export function KeyValueField({
                 {t('components.key-value-form.read-value')}
               </Button>
             ) : null}
-          </>
+          </React.Fragment>
         ),
       ]}
       actions={actions}
diff --git a/src/shared/components/MonacoEditorESM/Editor.js b/src/shared/components/MonacoEditorESM/Editor.js
index 17c578d5fd..4e04187d60 100644
--- a/src/shared/components/MonacoEditorESM/Editor.js
+++ b/src/shared/components/MonacoEditorESM/Editor.js
@@ -92,7 +92,6 @@ export function Editor({
   return (
     <div
       className="resource-form__wrapper"
-      {...rest}
       style={{ height, minHeight: height }}
     >
       {loading ? (
diff --git a/src/sidebar/CategoryItem.tsx b/src/sidebar/CategoryItem.tsx
index 3d1c8dbeb4..ecfd668c9a 100644
--- a/src/sidebar/CategoryItem.tsx
+++ b/src/sidebar/CategoryItem.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { SetterOrUpdater, useRecoilValue } from 'recoil';
 import { Category } from 'state/navigation/categories';
@@ -40,7 +41,7 @@ export function CategoryItem({
   };
 
   const children = category.items?.map(nn => (
-    <>
+    <React.Fragment key={nn.pathSegment}>
       {nn.dataSources ? (
         <DataSourcesContextProvider dataSources={nn.dataSources}>
           <NavItem node={nn} key={nn.pathSegment} subItem={true} />
@@ -48,7 +49,7 @@ export function CategoryItem({
       ) : (
         <NavItem node={nn} key={nn.pathSegment} subItem={true} />
       )}
-    </>
+    </React.Fragment>
   ));
 
   return (