diff --git a/src/components/KymaModules/KymaModulesAddModule.js b/src/components/KymaModules/KymaModulesAddModule.js
index 0019a2b153..63e31e588a 100644
--- a/src/components/KymaModules/KymaModulesAddModule.js
+++ b/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 (
@@ -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}
diff --git a/src/resources/other/kymaModules.routes.js b/src/resources/other/kymaModules.routes.js
index 6aa0032d46..dd138d5784 100644
--- a/src/resources/other/kymaModules.routes.js
+++ b/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 }) => {
{createPortal(
{
- 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 }) => {