fix: Stop flickering the delete box

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;
+};

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(
-        <ModulesDeleteBox
-          DeleteMessageBox={DeleteMessageBox}
-          selectedModules={activeKymaModules}
-          chosenModuleIndex={openedModuleIndex}
-          kymaResource={kymaResource}
-          kymaResourceState={kymaResourceState}
-          moduleTemplates={moduleTemplates}
-          detailsOpen={detailsOpen}
-          setKymaResourceState={setKymaResourceState}
-          setInitialUnchangedResource={setInitialUnchangedResource}
-          setChosenModuleIndex={setOpenedModuleIndex}
-          handleModuleUninstall={handleModuleUninstall}
-          setLayoutColumn={setLayoutColumn}
-        />,
+        !kymaResourceLoading && !moduleTemplatesLoading && showDeleteDialog && (
+          <ModulesDeleteBox
+            DeleteMessageBox={DeleteMessageBox}
+            selectedModules={activeKymaModules}
+            chosenModuleIndex={
+              openedModuleIndex ??
+              // Find index of the selected module after a refresh or other case after which we have undefined.
+              activeKymaModules.findIndex(module =>
+                checkSelectedModule(module, layoutState),
+              )
+            }
+            kymaResource={kymaResource}
+            kymaResourceState={kymaResourceState}
+            moduleTemplates={moduleTemplates}
+            detailsOpen={detailsOpen}
+            setKymaResourceState={setKymaResourceState}
+            setInitialUnchangedResource={setInitialUnchangedResource}
+            setChosenModuleIndex={setOpenedModuleIndex}
+            handleModuleUninstall={handleModuleUninstall}
+            setLayoutColumn={setLayoutColumn}
+          />
+        ),
         document.body,
       )}
       <FlexibleColumnLayout
@@ -226,39 +241,59 @@ const ColumnWraper = ({ defaultColumn = 'list', namespaced = false }) => {
   );
 };
 
+const KymaModules = ({ defaultColumn, namespaced }) => {
+  const [
+    DeleteMessageBox,
+    handleResourceDelete,
+    showDeleteDialog,
+  ] = useDeleteResource({
+    resourceType: t('kyma-modules.title'),
+    forceConfirmDelete: true,
+  });
+  return (
+    <ColumnWraper
+      defaultColumn={defaultColumn}
+      namespaced={namespaced}
+      DeleteMessageBox={DeleteMessageBox}
+      handleResourceDelete={handleResourceDelete}
+      showDeleteDialog={showDeleteDialog}
+    />
+  );
+};
+
 export default (
   <>
     <Route
       path={'kymamodules'}
       element={
         <Suspense fallback={<Spinner />}>
-          <ColumnWraper />
+          <KymaModules />
         </Suspense>
       }
     />
     <Route
       path="kymamodules/namespaces/:namespace/:resourceType/:resourceName"
-      element={<ColumnWraper defaultColumn="details" />}
+      element={<KymaModules defaultColumn="details" />}
     />
     <Route
       path="kymamodules/:resourceType/:resourceName"
-      element={<ColumnWraper defaultColumn="details" />}
+      element={<KymaModules defaultColumn="details" />}
     />
     <Route
       path={'namespaces/:globalnamespace/kymamodules'}
       element={
         <Suspense fallback={<Spinner />}>
-          <ColumnWraper namespaced={true} />
+          <KymaModules namespaced={true} />
         </Suspense>
       }
     />
     <Route
       path="namespaces/:globalnamespace/kymamodules/namespaces/:namespace/:resourceType/:resourceName"
-      element={<ColumnWraper defaultColumn="details" namespaced={true} />}
+      element={<KymaModules defaultColumn="details" namespaced={true} />}
     />
     <Route
       path="namespaces/:globalnamespace/kymamodules/:resourceType/:resourceName"
-      element={<ColumnWraper defaultColumn="details" namespaced={true} />}
+      element={<KymaModules defaultColumn="details" namespaced={true} />}
     />
   </>
 );

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={[
           <Button
             key="delete-confirmation"
@@ -258,5 +260,5 @@ export function useDeleteResource({
     );
   };
 
-  return [DeleteMessageBox, handleResourceDelete];
+  return [DeleteMessageBox, handleResourceDelete, showDeleteDialog];
 }

src/shared/hooks/useDeleteResource.scss

@@ -0,0 +1,9 @@
+#delete-message-box {
+  position: fixed;
+  top: 50% !important;
+  left: 50% !important;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+  -moz-transform: translateX(-50%) translateY(-50%);
+  -ms-transform: translateX(-50%) translateY(-50%);
+  transform: translateX(-50%) translateY(-50%);
+}