diff --git a/src/components/KymaModules/support.ts b/src/components/KymaModules/support.ts index e93e854174..f15fc2709f 100644 --- a/src/components/KymaModules/support.ts +++ b/src/components/KymaModules/support.ts @@ -2,6 +2,7 @@ import pluralize from 'pluralize'; import React, { useEffect, useState } from 'react'; import { useFetch } from 'shared/hooks/BackendAPI/useFetch'; +import { ColumnLayoutState } from 'state/columnLayoutAtom'; export type KymaResourceSpecModuleType = { name: string; @@ -224,3 +225,18 @@ export const setChannel = ( } setSelectedModules(modulesToUpdate); }; + +export const checkSelectedModule = ( + module: { name: string }, + layoutState: ColumnLayoutState, +) => { + // Checking if this is the selected module after a refresh or other case after which we have undefined. + if ( + window.location.href.includes('kymamodules') && + layoutState?.midColumn?.resourceType + ) { + const [resourceTypeBase] = layoutState.midColumn.resourceType.split('.'); + return pluralize(module?.name?.replace('-', '') || '') === resourceTypeBase; + } + return false; +}; diff --git a/src/resources/other/kymaModules.routes.js b/src/resources/other/kymaModules.routes.js index c94d689d3f..617d6c517f 100644 --- a/src/resources/other/kymaModules.routes.js +++ b/src/resources/other/kymaModules.routes.js @@ -20,6 +20,7 @@ import { } from 'components/KymaModules/kymaModulesQueries'; import { ModulesDeleteBox } from 'components/KymaModules/components/ModulesDeleteBox'; import { usePrepareLayoutColumns } from 'shared/hooks/usePrepareLayout'; +import { checkSelectedModule } from 'components/KymaModules/support'; const KymaModulesList = React.lazy(() => import('../../components/KymaModules/KymaModulesList'), @@ -29,7 +30,13 @@ const KymaModulesAddModule = React.lazy(() => import('../../components/KymaModules/KymaModulesAddModule'), ); -const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => { +const ColumnWraper = ({ + defaultColumn = 'list', + namespaced = false, + DeleteMessageBox, + handleResourceDelete, + showDeleteDialog, +}) => { const [layoutState, setLayoutColumn] = useRecoilState(columnLayoutState); const { clusterUrl, namespaceUrl } = useUrl(); const url = namespaced @@ -46,11 +53,6 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => { resourceName: resourceName, }); - const [DeleteMessageBox, handleResourceDelete] = useDeleteResource({ - resourceType: t('kyma-modules.title'), - forceConfirmDelete: true, - }); - const { data: kymaResource, loading: kymaResourceLoading, @@ -90,11 +92,16 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => { }), }); - // Force delete functionality - // Fetching all Module Templates can be replaced with fetching one by one from api after implementing https://github.com/kyma-project/lifecycle-manager/issues/2232 - const { data: moduleTemplates } = useModuleTemplatesQuery({ - skip: !(layoutState?.midColumn?.resourceName || resourceName), + const { + data: moduleTemplates, + loading: moduleTemplatesLoading, + } = useModuleTemplatesQuery({ + skip: !( + layoutState?.midColumn?.resourceName || + resourceName || + showDeleteDialog + ), }); let startColumnComponent = null; @@ -185,20 +192,28 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => { return ( <> {createPortal( - , + !kymaResourceLoading && !moduleTemplatesLoading && showDeleteDialog && ( + + checkSelectedModule(module, layoutState), + ) + } + kymaResource={kymaResource} + kymaResourceState={kymaResourceState} + moduleTemplates={moduleTemplates} + detailsOpen={detailsOpen} + setKymaResourceState={setKymaResourceState} + setInitialUnchangedResource={setInitialUnchangedResource} + setChosenModuleIndex={setOpenedModuleIndex} + handleModuleUninstall={handleModuleUninstall} + setLayoutColumn={setLayoutColumn} + /> + ), document.body, )} { ); }; +const KymaModules = ({ defaultColumn, namespaced }) => { + const [ + DeleteMessageBox, + handleResourceDelete, + showDeleteDialog, + ] = useDeleteResource({ + resourceType: t('kyma-modules.title'), + forceConfirmDelete: true, + }); + return ( + + ); +}; + export default ( <> }> - + } /> } + element={} /> } + element={} /> }> - + } /> } + element={} /> } + element={} /> ); diff --git a/src/shared/hooks/useDeleteResource.js b/src/shared/hooks/useDeleteResource.js index b24c00286a..443e947ebc 100644 --- a/src/shared/hooks/useDeleteResource.js +++ b/src/shared/hooks/useDeleteResource.js @@ -21,6 +21,7 @@ import { clusterState } from 'state/clusterAtom'; import { columnLayoutState } from 'state/columnLayoutAtom'; import { usePrepareLayout } from 'shared/hooks/usePrepareLayout'; import { isFormOpenState } from 'state/formOpenAtom'; +import './useDeleteResource.scss'; export function useDeleteResource({ resourceTitle, @@ -191,6 +192,7 @@ export function useDeleteResource({ )} open={showDeleteDialog} className="ui5-content-density-compact" + id="delete-message-box" actions={[