feat: Community modules details (#3943)

akucharska · web-flow · commit 022a48a19b12 · 2025-06-04T11:45:55.000+02:00
diff --git a/src/components/KymaModules/components/CommunityModulesList.tsx b/src/components/KymaModules/components/CommunityModulesList.tsx
@@ -4,6 +4,9 @@ import { useSetRecoilState } from 'recoil';
 import { Button } from '@ui5/webcomponents-react';
 import pluralize from 'pluralize';
 import {
+  createModulePartialPath,
+  findCrd,
+  findExtension,
   findModuleTemplate,
   ModuleTemplateListType,
   ModuleTemplateType,
@@ -16,12 +19,13 @@ import {
   ShowCreate,
 } from 'state/columnLayoutAtom';
 import { isFormOpenState } from 'state/formOpenAtom';
+import { useGet, useGetList } from 'shared/hooks/BackendAPI/useGet';
 import { GenericList } from 'shared/components/GenericList/GenericList';
 import { useNavigate } from 'react-router';
 import { useFetchModuleData } from '../hooks';
 import { ModulesListRows } from './ModulesListRows';
 
-type ModulesListProps = {
+type CommunityModulesListProps = {
   moduleTemplates: ModuleTemplateListType;
   selectedModules: any[];
   modulesLoading: boolean;
@@ -43,8 +47,23 @@ export const CommunityModulesList = ({
   handleResourceDelete,
   customSelectedEntry,
   setSelectedEntry,
-}: ModulesListProps) => {
+}: CommunityModulesListProps) => {
   const { t } = useTranslation();
+
+  const { data: communityExtentions } = useGetList(
+    (ext: { metadata: { labels: Record<string, string> } }) =>
+      ext.metadata.labels['app.kubernetes.io/part-of'] !== 'Kyma',
+  )('/api/v1/configmaps?labelSelector=busola.io/extension=resource', {
+    pollingInterval: 5000,
+  } as any);
+
+  const { data: crds } = useGet(
+    `/apis/apiextensions.k8s.io/v1/customresourcedefinitions`,
+    {
+      pollingInterval: 5000,
+    } as any,
+  );
+
   const navigate = useNavigate();
   const { clusterUrl, namespaceUrl } = useUrl();
   const setLayoutColumn = useSetRecoilState(columnLayoutState);
@@ -175,40 +194,43 @@ export const CommunityModulesList = ({
       };
     }
 
+    const hasExtension = !!findExtension(
+      moduleStatus?.resource?.kind,
+      communityExtentions,
+    );
+    const moduleCrd = findCrd(moduleStatus?.resource?.kind, crds);
     const skipRedirect = !hasDetailsLink(moduleStatus);
 
     if (skipRedirect) {
       return;
     }
 
-    const pathName = `${pluralize(
-      moduleStatus?.resource?.kind || '',
-    ).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`;
-
-    const partialPath = moduleStatus?.resource?.metadata?.namespace
-      ? `kymamodules/namespaces/${moduleStatus?.resource?.metadata?.namespace}/${pathName}`
-      : `kymamodules/${pathName}`;
-
+    const partialPath = createModulePartialPath(
+      hasExtension,
+      moduleStatus.resource,
+      moduleCrd,
+    );
     const path = namespaced
       ? namespaceUrl(partialPath)
       : clusterUrl(partialPath);
 
     const { group, version } = extractApiGroupVersion(
       moduleStatus?.resource?.apiVersion,
     );
+
     setLayoutColumn({
       startColumn: {
-        resourceType: pluralize(
-          moduleStatus?.resource?.kind || '',
-        ).toLowerCase(),
+        resourceType: hasExtension
+          ? pluralize(moduleStatus?.resource?.kind || '').toLowerCase()
+          : moduleCrd?.metadata?.name,
         namespaceId: moduleStatus?.resource?.metadata.namespace || '',
         apiGroup: group,
         apiVersion: version,
       } as ColumnState,
       midColumn: {
-        resourceType: pluralize(
-          moduleStatus?.resource?.kind || '',
-        ).toLowerCase(),
+        resourceType: hasExtension
+          ? pluralize(moduleStatus?.resource?.kind || '').toLowerCase()
+          : moduleCrd?.metadata?.name,
         resourceName: moduleStatus?.resource?.metadata?.name,
         namespaceId: moduleStatus?.resource?.metadata.namespace || '',
         apiGroup: group,
diff --git a/src/components/KymaModules/components/ModulesList.tsx b/src/components/KymaModules/components/ModulesList.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSetRecoilState } from 'recoil';
-import jsyaml from 'js-yaml';
 import { Button } from '@ui5/webcomponents-react';
 import pluralize from 'pluralize';
 import {
+  createModulePartialPath,
+  findCrd,
+  findExtension,
   findModuleStatus,
   findModuleTemplate,
   KymaResourceSpecModuleType,
@@ -26,13 +28,6 @@ import { GenericList } from 'shared/components/GenericList/GenericList';
 import { ModulesListRows } from './ModulesListRows';
 import { useNavigate } from 'react-router';
 
-type CustomResourceDefinitionsType = {
-  items: {
-    metadata?: { name: string };
-    spec?: { names?: { kind?: string } };
-  }[];
-};
-
 type ModulesListProps = {
   resource: KymaResourceType;
   moduleTemplates: ModuleTemplateListType;
@@ -63,12 +58,14 @@ export const ModulesList = ({
   setSelectedEntry,
 }: ModulesListProps) => {
   const { t } = useTranslation();
+
   const { data: kymaExt } = useGetList(
     (ext: { metadata: { labels: Record<string, string> } }) =>
       ext.metadata.labels['app.kubernetes.io/part-of'] === 'Kyma',
   )('/api/v1/configmaps?labelSelector=busola.io/extension=resource', {
     pollingInterval: 5000,
   } as any);
+
   const { data: crds } = useGet(
     `/apis/apiextensions.k8s.io/v1/customresourcedefinitions`,
     {
@@ -106,20 +103,6 @@ export const ModulesList = ({
     setIsFormOpen(state => ({ ...state, formOpen: true }));
   };
 
-  const findExtension = (resourceKind: string) => {
-    return (kymaExt as { data: { general: string } }[] | null)?.find(ext => {
-      const { resource: extensionResource } =
-        jsyaml.load(ext.data.general, { json: true }) || ({} as any);
-      return extensionResource.kind === resourceKind;
-    });
-  };
-
-  const findCrd = (resourceKind: string) => {
-    return (crds as CustomResourceDefinitionsType | null)?.items?.find(
-      crd => crd.spec?.names?.kind === resourceKind,
-    );
-  };
-
   const headerRenderer = () => [
     t('common.headers.name'),
     t('kyma-modules.namespaces'),
@@ -144,8 +127,8 @@ export const ModulesList = ({
     const isDeletionFailed = moduleStatus?.state === 'Warning';
     const isError = moduleStatus?.state === 'Error';
 
-    const hasExtension = !!findExtension(resource?.resource?.kind);
-    const hasCrd = !!findCrd(resource?.resource?.kind);
+    const hasExtension = !!findExtension(resource?.resource?.kind, kymaExt);
+    const hasCrd = !!findCrd(resource?.resource?.kind, crds);
 
     let hasModuleTpl = !!findModuleTemplate(
       moduleTemplates,
@@ -232,25 +215,19 @@ export const ModulesList = ({
       };
     }
 
-    const hasExtension = !!findExtension(moduleStatus?.resource?.kind);
-    const moduleCrd = findCrd(moduleStatus?.resource?.kind);
+    const hasExtension = !!findExtension(moduleStatus?.resource?.kind, kymaExt);
+    const moduleCrd = findCrd(moduleStatus?.resource?.kind, crds);
     const skipRedirect = !hasDetailsLink(moduleStatus);
 
     if (skipRedirect) {
       return;
     }
 
-    const pathName = `${
-      hasExtension
-        ? `${pluralize(moduleStatus?.resource?.kind || '').toLowerCase()}/${
-            moduleStatus?.resource?.metadata?.name
-          }`
-        : `${moduleCrd?.metadata?.name}/${moduleStatus?.resource?.metadata?.name}`
-    }`;
-
-    const partialPath = moduleStatus?.resource?.metadata?.namespace
-      ? `kymamodules/namespaces/${moduleStatus?.resource?.metadata?.namespace}/${pathName}`
-      : `kymamodules/${pathName}`;
+    const partialPath = createModulePartialPath(
+      hasExtension,
+      moduleStatus.resource,
+      moduleCrd,
+    );
 
     const path = namespaced
       ? namespaceUrl(partialPath)
diff --git a/src/components/KymaModules/support.ts b/src/components/KymaModules/support.ts
@@ -1,4 +1,5 @@
 import pluralize from 'pluralize';
+import jsyaml from 'js-yaml';
 import { ColumnLayoutState } from 'state/columnLayoutAtom';
 import { resolveType } from './components/ModuleStatus';
 
@@ -22,6 +23,13 @@ export type ConditionType = {
   type: string;
 };
 
+export type CustomResourceDefinitionsType = {
+  items: {
+    metadata?: { name: string };
+    spec?: { names?: { kind?: string } };
+  }[];
+};
+
 export type KymaResourceSpecModuleType = {
   name: string;
   channel?: string;
@@ -106,6 +114,20 @@ export const getResourcePath = (resource: any) => {
       ).toLowerCase()}/${resourceName}`;
 };
 
+export const findCrd = (resourceKind: string, crds: any) => {
+  return (crds as CustomResourceDefinitionsType | null)?.items?.find(
+    crd => crd.spec?.names?.kind === resourceKind,
+  );
+};
+
+export const findExtension = (resourceKind: string, extensions: any) => {
+  return (extensions as { data: { general: string } }[] | null)?.find(ext => {
+    const { resource: extensionResource } =
+      jsyaml.load(ext.data.general, { json: true }) || ({} as any);
+    return extensionResource.kind === resourceKind;
+  });
+};
+
 export const findModuleStatus = (
   kymaResource: KymaResourceType,
   moduleName: string,
@@ -195,6 +217,31 @@ export const checkSelectedModule = (
   return false;
 };
 
+export const createModulePartialPath = (
+  hasExtension: boolean,
+  moduleStatusResource: {
+    kind: string;
+    apiVersion: string;
+    metadata: { name: string; namespace: string };
+  },
+  moduleCrd?: { metadata?: { name: string } },
+) => {
+  // Taking info for path from extension or crd
+  const pathName = `${
+    hasExtension
+      ? `${pluralize(moduleStatusResource?.kind || '').toLowerCase()}/${
+          moduleStatusResource?.metadata?.name
+        }`
+      : `${moduleCrd?.metadata?.name}/${moduleStatusResource?.metadata?.name}`
+  }`;
+
+  const partialPath = moduleStatusResource?.metadata?.namespace
+    ? `kymamodules/namespaces/${moduleStatusResource?.metadata?.namespace}/${pathName}`
+    : `kymamodules/${pathName}`;
+
+  return partialPath;
+};
+
 export const resolveInstallationStateName = (
   state?: string,
   managerExists?: boolean,
