fix: Community Modules not disappearing from Add form after installation (#4384)

* fix: Community Modules install

* fix: duplicates on list

* fix: use filter

* better comment

Author: OliwiaGowor

src/components/Modules/community/CommunityModulesList.tsx

@@ -119,24 +119,41 @@ export const CommunityModulesList = ({
   const [modulesToDisplay, setModulesToDisplay] =
     useState<any[]>(installedModules);
 
+  // When multiple instances of the same module templates exist in different namespaces, we want to display only one instance of the module
+  function dedupeByModuleManager(modules: any[]) {
+    const seen = new Set<string>();
+
+    return modules.filter((module) => {
+      const { name, namespace } = module?.resource?.metadata || {};
+
+      if (!name || !namespace) return true;
+
+      const key = `${name}::${namespace}`;
+
+      return seen.has(key) ? false : seen.add(key);
+    });
+  }
+
   useEffect(() => {
+    const uniqueInstalled = dedupeByModuleManager(installedModules);
+
     const modulesDuringProcessing = modulesDuringUpload.filter((m) => {
-      return !installedModules.find(
+      return !uniqueInstalled.find(
         (installed) =>
           installed.moduleTemplateName === m.moduleTpl.metadata.name,
       );
     });
 
     if (modulesDuringProcessing.length === 0) {
-      setModulesToDisplay(installedModules);
+      setModulesToDisplay(uniqueInstalled);
       return;
     }
 
     const moduleTemplatesDuringUpload = modulesDuringProcessing
       .filter((m) => m.state !== State.Finished)
       .map((m) => createFakeModuleTemplateWithStatus(m));
 
-    setModulesToDisplay([...installedModules, ...moduleTemplatesDuringUpload]);
+    setModulesToDisplay([...uniqueInstalled, ...moduleTemplatesDuringUpload]);
   }, [installedModules, modulesDuringUpload]);
 
   const handleShowAddModule = () => {

src/components/Modules/community/communityModulesHelpers.ts

@@ -118,7 +118,7 @@ export function getInstalledModules(
 ): ModuleTemplateListType {
   const installedModuleTemplates = moduleTemplates.items?.filter((module) => {
     const foundManager =
-      managers[`${module.metadata.name}:${module.spec.manager.namespace}`];
+      managers[`${module.metadata.name}:${module.spec?.manager?.namespace}`];
     if (!foundManager) {
       return false;
     }
@@ -127,7 +127,7 @@ export function getInstalledModules(
         (container: { image: string }) => {
           return (
             imageMatchVersion(container.image, module.spec.version) &&
-            foundManager.metadata.namespace === module.spec.manager.namespace
+            foundManager.metadata.namespace === module.spec.manager?.namespace
           );
         },
       );
@@ -145,12 +145,8 @@ export function getNotInstalledModules(
 ): ModuleTemplateListType {
   const notInstalledModuleTemplates = moduleTemplates.items?.filter(
     (module) => {
-      const foundManager = managers?.items?.find((manager: any) => {
-        return (
-          manager.metadata.name === module.metadata.name &&
-          manager.metadata.namespace === module.metadata.namespace
-        );
-      });
+      const foundManager =
+        managers[`${module.metadata.name}:${module.spec?.manager?.namespace}`];
 
       return !foundManager;
     },