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 }) => {