fix: add modules shouldn't reset after some time (#3598)

* fix mutating state

Author: dbadura

src/components/KymaModules/KymaModulesAddModule.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { MessageStrip } from '@ui5/webcomponents-react';
 import { spacing } from '@ui5/webcomponents-react-base';
 import { useTranslation } from 'react-i18next';
@@ -7,14 +7,13 @@ import { ResourceForm } from 'shared/ResourceForm';
 import { Spinner } from 'shared/components/Spinner/Spinner';
 import ModulesCard from './ModulesCard';
 import './KymaModulesAddModule.scss';
+import { cloneDeep } from 'lodash';
 
 export default function KymaModulesAddModule({
   resourceName,
-  loadingKymaResources,
   kymaResourceUrl,
-  initialKymaResource,
   loading,
-  selectedModules,
+  activeKymaModules,
   initialUnchangedResource,
   kymaResource,
   setKymaResource,
@@ -26,6 +25,29 @@ export default function KymaModulesAddModule({
 
   const modulesReleaseMetaResourceUrl = `/apis/operator.kyma-project.io/v1beta2/modulereleasemetas`;
 
+  const [resource, setResource] = useState(cloneDeep(kymaResource));
+
+  const [selectedModules, setSelectedModules] = useState([]);
+
+  useEffect(() => {
+    if (selectedModules && kymaResource) {
+      const newModules = selectedModules.filter(
+        newModules =>
+          !activeKymaModules.find(
+            activeModules => activeModules.name === newModules.name,
+          ),
+      );
+      const mergedModules = activeKymaModules.concat(newModules);
+      setResource({
+        ...kymaResource,
+        spec: {
+          ...kymaResource?.spec,
+          modules: mergedModules,
+        },
+      });
+    }
+  }, [setKymaResource, kymaResource, selectedModules, activeKymaModules]);
+
   const { data: modules } = useGet(modulesResourceUrl, {
     pollingInterval: 3000,
     skip: !resourceName,
@@ -69,7 +91,7 @@ export default function KymaModulesAddModule({
     };
   }, [cardsContainerRef, calculateColumns]);
 
-  if (loading || loadingKymaResources || !kymaResource) {
+  if (loading || !kymaResource) {
     return (
       <div style={{ height: 'calc(100vh - 14rem)' }}>
         <Spinner />
@@ -155,53 +177,39 @@ export default function KymaModulesAddModule({
   }, []);
 
   const isChecked = name => {
-    return kymaResource?.spec?.modules?.find(module => module.name === name)
-      ? true
-      : false;
+    return !!selectedModules?.find(module => module.name === name);
   };
 
   const setCheckbox = (module, checked, index) => {
+    const newSelectedModules = [...selectedModules];
     if (checked) {
-      selectedModules.push({
+      newSelectedModules.push({
         name: module.name,
       });
     } else {
-      selectedModules.splice(index, 1);
+      newSelectedModules.splice(index, 1);
     }
-
-    setKymaResource({
-      ...kymaResource,
-      spec: {
-        ...kymaResource.spec,
-        modules: selectedModules,
-      },
-    });
+    setSelectedModules(newSelectedModules);
   };
 
   const setChannel = (module, channel, index) => {
+    const modulesToUpdate = [...selectedModules];
     if (
       selectedModules.find(
         selectedModule => selectedModule.name === module.name,
       )
     ) {
       if (channel === 'predefined') {
-        delete selectedModules[index].channel;
-      } else selectedModules[index].channel = channel;
+        delete modulesToUpdate[index].channel;
+      } else modulesToUpdate[index].channel = channel;
     } else {
-      selectedModules.push({
+      modulesToUpdate.push({
         name: module.name,
       });
       if (channel !== 'predefined')
-        selectedModules[selectedModules?.length - 1].channel = channel;
+        modulesToUpdate[modulesToUpdate?.length - 1].channel = channel;
     }
-
-    setKymaResource({
-      ...kymaResource,
-      spec: {
-        ...kymaResource.spec,
-        modules: selectedModules,
-      },
-    });
+    setSelectedModules(modulesToUpdate);
   };
 
   const findStatus = moduleName => {
@@ -290,8 +298,8 @@ export default function KymaModulesAddModule({
       createUrl={kymaResourceUrl}
       pluralKind={'kymas'}
       singularName={'Kyma'}
-      resource={kymaResource}
-      setResource={setKymaResource}
+      resource={resource}
+      setResource={setResource}
       initialResource={initialUnchangedResource}
       disableDefaultFields
       formElementRef={props.formElementRef}

src/resources/other/kymaModules.routes.js

@@ -75,14 +75,14 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
       skip: !kymaResourceName,
     },
   );
-  const [selectedModules, setSelectedModules] = useState(
+  const [activeKymaModules, setActiveKymaModules] = useState(
     kymaResource?.spec?.modules ?? [],
   );
   const [detailsOpen, setDetailsOpen] = useState(false);
   const [openedModuleIndex, setOpenedModuleIndex] = useState();
   useEffect(() => {
     if (kymaResource) {
-      setSelectedModules(kymaResource?.spec?.modules || []);
+      setActiveKymaModules(kymaResource?.spec?.modules || []);
       setKymaResourceState(kymaResource);
       setInitialUnchangedResource(cloneDeep(kymaResource));
     }
@@ -118,14 +118,14 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
       </Button>
       {createPortal(
         <DeleteMessageBox
-          resourceTitle={selectedModules[openedModuleIndex]?.name}
+          resourceTitle={activeKymaModules[openedModuleIndex]?.name}
           deleteFn={() => {
-            selectedModules.splice(openedModuleIndex, 1);
+            activeKymaModules.splice(openedModuleIndex, 1);
             setKymaResourceState({
               ...kymaResource,
               spec: {
                 ...kymaResource.spec,
-                modules: selectedModules,
+                modules: activeKymaModules,
               },
             });
             handleModuleUninstall();
@@ -172,7 +172,7 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
         kymaResourceLoading={kymaResourceLoading}
         kymaResourcesLoading={kymaResourcesLoading}
         kymaResourceState={kymaResourceState}
-        selectedModules={selectedModules}
+        selectedModules={activeKymaModules}
         setOpenedModuleIndex={setOpenedModuleIndex}
         detailsOpen={detailsOpen}
         namespaced={namespaced}
@@ -209,11 +209,10 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
           <ErrorBoundary>
             <KymaModulesAddModule
               resourceName={kymaResourceName}
-              loadingKymaResources={kymaResourcesLoading}
               kymaResourceUrl={resourceUrl}
               initialKymaResource={kymaResource}
-              loading={kymaResourceLoading}
-              selectedModules={selectedModules}
+              loading={kymaResourcesLoading || kymaResourceLoading}
+              activeKymaModules={activeKymaModules}
               initialUnchangedResource={initialUnchangedResource}
               kymaResource={kymaResourceState}
               setKymaResource={setKymaResourceState}