fix console errors (#3349)

kyma-project · Sep 17, 2024 · 408b62a · 408b62a
1 parent c2393c5
commit 408b62a
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,15 +41,15 @@ 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} />
         </DataSourcesContextProvider>
       ) : (
         <NavItem node={nn} key={nn.pathSegment} subItem={true} />
       )}
-    </>
+    </React.Fragment>
   ));
 
   return (