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={[