From 89fcbfd12049337e62c782266c70b857597bafc6 Mon Sep 17 00:00:00 2001 From: Pietocha Date: Tue, 10 Jun 2025 14:10:54 +0200 Subject: [PATCH 01/16] Add initial changes for delete --- src/components/KymaModules/KymaModulesList.js | 3 +- .../providers/CommunityModuleProvider.js | 94 +++++++++++++++++-- 2 files changed, 88 insertions(+), 9 deletions(-) diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js index d721b93620..74b056f8b6 100644 --- a/src/components/KymaModules/KymaModulesList.js +++ b/src/components/KymaModules/KymaModulesList.js @@ -41,6 +41,7 @@ export default function KymaModulesList({ namespaced }) { installedCommunityModules, communityModulesLoading, setOpenedModuleIndex: setOpenedCommunityModuleIndex, + handleResourceDelete: handleCommunityModuleDelete, } = useContext(CommunityModuleContext); const [selectedEntry, setSelectedEntry] = useState(null); @@ -94,7 +95,7 @@ export default function KymaModulesList({ namespaced }) { modulesLoading={communityModulesLoading} namespaced={namespaced} setOpenedModuleIndex={setOpenedCommunityModuleIndex} - handleResourceDelete={handleResourceDelete} + handleResourceDelete={handleCommunityModuleDelete} customSelectedEntry={selectedEntry} setSelectedEntry={setSelectedEntry} /> diff --git a/src/components/KymaModules/providers/CommunityModuleProvider.js b/src/components/KymaModules/providers/CommunityModuleProvider.js index 8caafb4509..8b762feb72 100644 --- a/src/components/KymaModules/providers/CommunityModuleProvider.js +++ b/src/components/KymaModules/providers/CommunityModuleProvider.js @@ -1,6 +1,14 @@ import { createContext, useContext, useEffect, useState } from 'react'; +import { t } from 'i18next'; import { useGetInstalledModules } from '../hooks'; import { ModuleTemplatesContext } from './ModuleTemplatesProvider'; +import { createPortal } from 'react-dom'; +import { ModulesDeleteBox } from '../components/ModulesDeleteBox'; +import { checkSelectedModule } from '../support'; +import { Button } from '@ui5/webcomponents-react'; +import { cloneDeep } from 'lodash'; +import { useNotification } from 'shared/contexts/NotificationContext'; +import { useCreateResource } from 'shared/ResourceForm/useCreateResource'; export const CommunityModuleContext = createContext({ setOpenedModuleIndex: () => {}, @@ -15,16 +23,16 @@ export function CommunityModuleContextProvider({ children, layoutState, showDeleteDialog, + DeleteMessageBox, + handleResourceDelete, + setLayoutColumn, }) { - const [, setOpenedModuleIndex] = useState(); - const [, setDetailsOpen] = useState(false); - - useEffect(() => { - if (layoutState?.layout) { - setDetailsOpen(layoutState?.layout !== 'OneColumn'); - } - }, [layoutState]); + const [openedModuleIndex, setOpenedModuleIndex] = useState(); + const [detailsOpen, setDetailsOpen] = useState(false); + const [initialUnchangedResource, setInitialUnchangedResource] = useState(); + const [kymaResourceState, setKymaResourceState] = useState(); + const notification = useNotification(); const { moduleTemplatesLoading, communityModuleTemplates } = useContext( ModuleTemplatesContext, ); @@ -33,6 +41,46 @@ export function CommunityModuleContextProvider({ installed: installedCommunityModules, loading: communityModulesLoading, } = useGetInstalledModules(communityModuleTemplates, moduleTemplatesLoading); + /////////////////////////// TODO: Is it necessary? KymaResource? resourceUrl? + const handleModuleUninstall = useCreateResource({ + singularName: 'Kyma', + pluralKind: 'Kymas', + resource: kymaResourceState, + initialResource: initialUnchangedResource, + updateInitialResource: setInitialUnchangedResource, + createUrl: + ' /apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas/default', + afterCreatedFn: () => + notification.notifySuccess({ + content: t('kyma-modules.module-uninstall'), + }), + }); + + useEffect(() => { + if (layoutState?.layout) { + setDetailsOpen(layoutState?.layout !== 'OneColumn'); + } + }, [layoutState]); + + useEffect(() => { + /////////////////////////// TODO: Is it proper for KymaResource and KymaResourceState? + if (installedCommunityModules?.[openedModuleIndex]?.resource) { + setKymaResourceState( + installedCommunityModules[openedModuleIndex].resource, + ); + setInitialUnchangedResource( + cloneDeep(installedCommunityModules[openedModuleIndex].resource), + ); + } + }, [installedCommunityModules, openedModuleIndex]); + + const deleteModuleButton = ( +
+ +
+ ); return ( + {createPortal( + !communityModulesLoading && + !moduleTemplatesLoading && + showDeleteDialog && ( + + checkSelectedModule(module, layoutState), + ) + } + kymaResource={kymaResourceState} + kymaResourceState={kymaResourceState} + moduleTemplates={communityModuleTemplates} + detailsOpen={detailsOpen} + setKymaResourceState={setKymaResourceState} + setInitialUnchangedResource={setInitialUnchangedResource} + setChosenModuleIndex={setOpenedModuleIndex} + handleModuleUninstall={handleModuleUninstall} + setLayoutColumn={setLayoutColumn} + /> + ), + document.body, + )} {children} ); From 29d881fd23516325a737d132ef1bb86bdac3373d Mon Sep 17 00:00:00 2001 From: Pietocha Date: Wed, 11 Jun 2025 12:42:22 +0200 Subject: [PATCH 02/16] Checking if index is from community --- .../components/ModulesDeleteBox.tsx | 2 + .../providers/CommunityModuleProvider.js | 50 ++++++++++------- .../providers/KymaModuleProvider.js | 55 +++++++++++-------- 3 files changed, 66 insertions(+), 41 deletions(-) diff --git a/src/components/KymaModules/components/ModulesDeleteBox.tsx b/src/components/KymaModules/components/ModulesDeleteBox.tsx index da3ab1bef0..97ff0aba0b 100644 --- a/src/components/KymaModules/components/ModulesDeleteBox.tsx +++ b/src/components/KymaModules/components/ModulesDeleteBox.tsx @@ -35,6 +35,7 @@ type ModulesListDeleteBoxProps = { kymaResource: KymaResourceType; kymaResourceState: KymaResourceType; detailsOpen: boolean; + isCommunity?: boolean; setLayoutColumn: SetterOrUpdater; handleModuleUninstall: () => void; setChosenModuleIndex: React.Dispatch>; @@ -50,6 +51,7 @@ export const ModulesDeleteBox = ({ kymaResource, kymaResourceState, detailsOpen, + isCommunity, setLayoutColumn, handleModuleUninstall, setChosenModuleIndex, diff --git a/src/components/KymaModules/providers/CommunityModuleProvider.js b/src/components/KymaModules/providers/CommunityModuleProvider.js index 8b762feb72..a1d020cb44 100644 --- a/src/components/KymaModules/providers/CommunityModuleProvider.js +++ b/src/components/KymaModules/providers/CommunityModuleProvider.js @@ -9,6 +9,7 @@ import { Button } from '@ui5/webcomponents-react'; import { cloneDeep } from 'lodash'; import { useNotification } from 'shared/contexts/NotificationContext'; import { useCreateResource } from 'shared/ResourceForm/useCreateResource'; +import { useKymaQuery } from '../kymaModulesQueries'; export const CommunityModuleContext = createContext({ setOpenedModuleIndex: () => {}, @@ -37,6 +38,12 @@ export function CommunityModuleContextProvider({ ModuleTemplatesContext, ); + const { + data: kymaResource, + loading: kymaResourceLoading, + resourceUrl, + } = useKymaQuery(); + const { installed: installedCommunityModules, loading: communityModulesLoading, @@ -48,8 +55,7 @@ export function CommunityModuleContextProvider({ resource: kymaResourceState, initialResource: initialUnchangedResource, updateInitialResource: setInitialUnchangedResource, - createUrl: - ' /apis/operator.kyma-project.io/v1beta2/namespaces/kyma-system/kymas/default', + createUrl: resourceUrl, afterCreatedFn: () => notification.notifySuccess({ content: t('kyma-modules.module-uninstall'), @@ -63,16 +69,21 @@ export function CommunityModuleContextProvider({ }, [layoutState]); useEffect(() => { - /////////////////////////// TODO: Is it proper for KymaResource and KymaResourceState? - if (installedCommunityModules?.[openedModuleIndex]?.resource) { - setKymaResourceState( - installedCommunityModules[openedModuleIndex].resource, - ); - setInitialUnchangedResource( - cloneDeep(installedCommunityModules[openedModuleIndex].resource), - ); + if (kymaResource) { + setKymaResourceState(kymaResource); + setInitialUnchangedResource(cloneDeep(kymaResource)); } - }, [installedCommunityModules, openedModuleIndex]); + }, [kymaResource]); + + const getOpenedModuleIndex = (moduleIndex, activeModules) => { + const index = + moduleIndex ?? + // Find index of the selected module after a refresh or other case after which we have undefined. + activeModules.findIndex(module => + checkSelectedModule(module, layoutState), + ); + return index > -1 ? index : undefined; + }; const deleteModuleButton = (
@@ -95,19 +106,19 @@ export function CommunityModuleContextProvider({ }} > {createPortal( - !communityModulesLoading && + getOpenedModuleIndex(openedModuleIndex, installedCommunityModules) != + undefined && + !communityModulesLoading && + !kymaResourceLoading && !moduleTemplatesLoading && showDeleteDialog && ( - checkSelectedModule(module, layoutState), - ) - } + chosenModuleIndex={getOpenedModuleIndex( + openedModuleIndex, + installedCommunityModules, + )} kymaResource={kymaResourceState} kymaResourceState={kymaResourceState} moduleTemplates={communityModuleTemplates} @@ -117,6 +128,7 @@ export function CommunityModuleContextProvider({ setChosenModuleIndex={setOpenedModuleIndex} handleModuleUninstall={handleModuleUninstall} setLayoutColumn={setLayoutColumn} + isCommunity={true} /> ), document.body, diff --git a/src/components/KymaModules/providers/KymaModuleProvider.js b/src/components/KymaModules/providers/KymaModuleProvider.js index 47d5fde683..f687877e45 100644 --- a/src/components/KymaModules/providers/KymaModuleProvider.js +++ b/src/components/KymaModules/providers/KymaModuleProvider.js @@ -81,6 +81,16 @@ export function KymaModuleContextProvider({ ModuleTemplatesContext, ); + const getOpenedModuleIndex = (moduleIndex, activeModules) => { + const index = + moduleIndex ?? + // Find index of the selected module after a refresh or other case after which we have undefined. + activeModules.findIndex(module => + checkSelectedModule(module, layoutState), + ); + return index > -1 ? index : undefined; + }; + const deleteModuleButton = (