fix: Allow force delete on modules details (kyma-project#3751)

* Allow force delete on modules details

* Fix loading associated resources

Author: akucharska

src/components/KymaModules/KymaModulesList.js

@@ -16,7 +16,7 @@ import {
 } from '@ui5/webcomponents-react';
 
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { GenericList } from 'shared/components/GenericList/GenericList';
 import {
@@ -50,7 +50,7 @@ import {
   useModulesReleaseQuery,
   useModuleTemplatesQuery,
 } from './kymaModulesQueries';
-import { findModuleStatus } from './support';
+import { findModuleStatus, findModuleTemplate } from './support';
 import {
   checkIfAssociatedResourceLeft,
   deleteAssociatedResources,
@@ -140,28 +140,6 @@ export default function KymaModulesList({
   };
 
   const ModulesList = resource => {
-    const findModuleTemplate = (moduleName, channel, version) => {
-      // This change was made due to changes in moduleTemplates and should be simplified once all moduleTemplates migrate
-      const moduleTemplateWithoutInfo = moduleTemplates?.items?.find(
-        moduleTemplate =>
-          moduleName ===
-            moduleTemplate.metadata.labels[
-              'operator.kyma-project.io/module-name'
-            ] && moduleTemplate.spec.channel === channel,
-      );
-      const moduleWithInfo = moduleTemplates?.items?.find(
-        moduleTemplate =>
-          moduleName ===
-            moduleTemplate.metadata.labels[
-              'operator.kyma-project.io/module-name'
-            ] &&
-          !moduleTemplate.spec.channel &&
-          moduleTemplate.spec.version === version,
-      );
-
-      return moduleWithInfo ?? moduleTemplateWithoutInfo;
-    };
-
     const findModuleReleaseMeta = moduleName => {
       return moduleReleaseMetas?.items.find(
         item => item.spec.moduleName === moduleName,
@@ -210,6 +188,7 @@ export default function KymaModulesList({
       const hasCrd = !!findCrd(resource?.resource?.kind);
 
       let hasModuleTpl = !!findModuleTemplate(
+        moduleTemplates,
         resource.name,
         resource.channel,
         resource.version,
@@ -230,6 +209,7 @@ export default function KymaModulesList({
       );
 
       const currentModuleTemplate = findModuleTemplate(
+        moduleTemplates,
         resource?.name,
         resource?.channel || kymaResource?.spec?.channel,
         resource?.version,
@@ -352,6 +332,7 @@ export default function KymaModulesList({
       // It can be refactored after implementing https://github.com/kyma-project/lifecycle-manager/issues/2232
       if (!moduleStatus.resource) {
         const connectedModule = findModuleTemplate(
+          moduleTemplates,
           moduleName,
           moduleStatus.channel,
           moduleStatus.version,
@@ -429,19 +410,24 @@ export default function KymaModulesList({
     const [allowForceDelete, setAllowForceDelete] = useState(false);
     const [associatedResourceLeft, setAssociatedResourceLeft] = useState(false);
 
-    useEffect(() => {
-      const fetchCounts = async () => {
-        const resources = getAssociatedResources(
+    const associatedResources = useMemo(
+      () =>
+        getAssociatedResources(
           chosenModuleIndex,
-          findModuleTemplate,
           selectedModules,
           kymaResource,
-        );
+          moduleTemplates,
+        ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [chosenModuleIndex, moduleTemplates],
+    );
 
-        const counts = await fetchResourceCounts(resources, fetchFn);
+    useEffect(() => {
+      const fetchCounts = async () => {
+        const counts = await fetchResourceCounts(associatedResources, fetchFn);
 
         const urls = await generateAssociatedResourcesUrls(
-          resources,
+          associatedResources,
           fetchFn,
           clusterUrl,
           getScope,
@@ -451,9 +437,9 @@ export default function KymaModulesList({
 
         const crUResources = getCRResource(
           chosenModuleIndex,
-          findModuleTemplate,
           selectedModules,
           kymaResource,
+          moduleTemplates,
         );
 
         const crUrl = await generateAssociatedResourcesUrls(
@@ -472,21 +458,18 @@ export default function KymaModulesList({
 
       fetchCounts();
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [chosenModuleIndex]);
+    }, [associatedResources]);
 
     useEffect(() => {
       const resourcesLeft = checkIfAssociatedResourceLeft(
         resourceCounts,
-        chosenModuleIndex,
-        findModuleTemplate,
-        selectedModules,
-        kymaResource,
+        associatedResources,
       );
 
       setAssociatedResourceLeft(resourcesLeft);
 
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [resourceCounts]);
+    }, [resourceCounts, associatedResources]);
 
     function getEntries(statusModules = [], specModules = []) {
       specModules.forEach(specItem => {
@@ -525,12 +508,7 @@ export default function KymaModulesList({
                       name: selectedModules[chosenModuleIndex]?.name,
                     })}
                   </Text>
-                  {getAssociatedResources(
-                    chosenModuleIndex,
-                    findModuleTemplate,
-                    selectedModules,
-                    kymaResource,
-                  ).length > 0 && (
+                  {associatedResources.length > 0 && (
                     <>
                       <MessageStrip
                         design="Information"
@@ -544,12 +522,7 @@ export default function KymaModulesList({
                         mode="None"
                         separators="All"
                       >
-                        {getAssociatedResources(
-                          chosenModuleIndex,
-                          findModuleTemplate,
-                          selectedModules,
-                          kymaResource,
-                        ).map(assResource => {
+                        {associatedResources.map(assResource => {
                           const resourceCount =
                             resourceCounts[
                               `${assResource.kind}-${assResource.group}-${assResource.version}`

src/components/KymaModules/deleteModulesHelpers.tsx

@@ -1,5 +1,9 @@
 import pluralize from 'pluralize';
-import { findModuleStatus } from './support';
+import {
+  findModuleStatus,
+  findModuleTemplate,
+  ModuleTemplateListType,
+} from './support';
 
 interface Counts {
   [key: string]: number;
@@ -13,9 +17,9 @@ type Resource = {
 
 export const getAssociatedResources = (
   chosenModuleIndex: number,
-  findModuleTemplate: Function,
   selectedModules: any,
   kymaResource: any,
+  moduleTemplates: ModuleTemplateListType,
 ) => {
   if (!chosenModuleIndex) {
     return [];
@@ -27,6 +31,7 @@ export const getAssociatedResources = (
     findModuleStatus(kymaResource, selectedModule?.name)?.version;
 
   const module = findModuleTemplate(
+    moduleTemplates,
     selectedModule?.name,
     moduleChannel,
     moduleVersion,
@@ -36,9 +41,9 @@ export const getAssociatedResources = (
 
 export const getCRResource = (
   chosenModuleIndex: number,
-  findModuleTemplate: Function,
   selectedModules: any,
   kymaResource: any,
+  moduleTemplates: ModuleTemplateListType,
 ) => {
   if (!chosenModuleIndex) {
     return [];
@@ -50,13 +55,14 @@ export const getCRResource = (
     findModuleStatus(kymaResource, selectedModule?.name)?.version;
 
   const module = findModuleTemplate(
+    moduleTemplates,
     selectedModule?.name,
     moduleChannel,
     moduleVersion,
   );
 
   let resource: Resource | null = null;
-  if (module.spec.data) {
+  if (module && module.spec.data) {
     resource = {
       group: module.spec.data.apiVersion.split('/')[0],
       version: module.spec.data.apiVersion.split('/')[1],
@@ -185,19 +191,9 @@ export const fetchResourceCounts = async (
 
 export const checkIfAssociatedResourceLeft = (
   resourceCounts: Counts,
-  chosenModuleIndex: number,
-  findModuleTemplate: Function,
-  selectedModules: any,
-  kymaResource: any,
+  associatedResources: Resource[],
 ) => {
-  const resources: Resource[] = getAssociatedResources(
-    chosenModuleIndex,
-    findModuleTemplate,
-    selectedModules,
-    kymaResource,
-  );
-
-  for (const resource of resources) {
+  for (const resource of associatedResources) {
     if (
       resourceCounts[`${resource.kind}-${resource.group}-${resource.version}`] >
       0

src/components/KymaModules/support.ts

@@ -137,6 +137,51 @@ export const findModuleSpec = (
   );
 };
 
+type ModuleTemplateType = {
+  metadata: {
+    name: string;
+    namespace: string;
+    labels: Record<string, string>;
+  };
+  spec: {
+    associatedResources: any;
+    data: any;
+    channel: string;
+    version: string;
+  };
+};
+
+export type ModuleTemplateListType = {
+  items: ModuleTemplateType[];
+};
+
+export const findModuleTemplate = (
+  moduleTemplates: ModuleTemplateListType,
+  moduleName: string,
+  channel: string,
+  version: string,
+) => {
+  // This change was made due to changes in moduleTemplates and should be simplified once all moduleTemplates migrate
+  const moduleTemplateWithoutInfo = moduleTemplates?.items?.find(
+    moduleTemplate =>
+      moduleName ===
+        moduleTemplate.metadata.labels[
+          'operator.kyma-project.io/module-name'
+        ] && moduleTemplate.spec.channel === channel,
+  );
+  const moduleWithInfo = moduleTemplates?.items?.find(
+    moduleTemplate =>
+      moduleName ===
+        moduleTemplate.metadata.labels[
+          'operator.kyma-project.io/module-name'
+        ] &&
+      !moduleTemplate.spec.channel &&
+      moduleTemplate.spec.version === version,
+  );
+
+  return moduleWithInfo ?? moduleTemplateWithoutInfo;
+};
+
 export const setChannel = (
   module: { name: string },
   channel: string,