Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 15 commits into from
Jan 24, 2025
Merged

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

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6e71633
fix mutating state
dbadura Jan 16, 2025
f332ccf
Merge branch 'main' into fix-modules-state
dbadura Jan 20, 2025
2c259e1
Merge branch 'main' into fix-modules-state
dbadura Jan 21, 2025
cd636e9
Merge branch 'main' into fix-modules-state
dbadura Jan 21, 2025
a898e1a
fix re-rendering
dbadura Jan 23, 2025
fddf1ec
cleanup
dbadura Jan 23, 2025
f197b7d
final changes
dbadura Jan 23, 2025
b9939a2
fix?
dbadura Jan 24, 2025
24a05cd
fix?
dbadura Jan 24, 2025
aa64536
small fix
dbadura Jan 24, 2025
d2eb8b0
fix race condition
dbadura Jan 24, 2025
be1215d
fix
dbadura Jan 24, 2025
8b6c4aa
mute lint
dbadura Jan 24, 2025
4c9634b
remove unneeded logic
dbadura Jan 24, 2025
86db3ac
improve readibility
dbadura Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 38 additions & 32 deletions src/components/KymaModules/KymaModulesAddModule.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand All @@ -26,6 +25,27 @@ 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 mergedModules = activeKymaModules.concat(
selectedModules.filter(
i => !activeKymaModules.find(j => j.name === i.name),
),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rename this i and j to something more readable

);
setResource({
...kymaResource,
spec: {
...kymaResource?.spec,
modules: mergedModules,
},
});
}
}, [setKymaResource, kymaResource, selectedModules, activeKymaModules]);

const { data: modules } = useGet(modulesResourceUrl, {
pollingInterval: 3000,
skip: !resourceName,
Expand Down Expand Up @@ -69,7 +89,7 @@ export default function KymaModulesAddModule({
};
}, [cardsContainerRef, calculateColumns]);

if (loading || loadingKymaResources || !kymaResource) {
if (loading || !kymaResource) {
return (
<div style={{ height: 'calc(100vh - 14rem)' }}>
<Spinner />
Expand Down Expand Up @@ -155,53 +175,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 => {
Expand Down Expand Up @@ -290,8 +296,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}
Expand Down
17 changes: 8 additions & 9 deletions src/resources/other/kymaModules.routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
Loading