feat: Remove module meta from community modules (#4059)

* remove module meta

* fix if

* fix if

* fixes after review

Author: dbadura

src/components/KymaModules/CommunityModulesAddModule.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-import { useRecoilState } from 'recoil';
+import { SetterOrUpdater, useRecoilState, useSetRecoilState } from 'recoil';
 import { useFeature } from 'hooks/useFeature';
 import { columnLayoutState } from 'state/columnLayoutAtom';
 import { ResourceForm } from 'shared/ResourceForm';
@@ -19,27 +19,24 @@ import {
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { UnsavedMessageBox } from 'shared/components/UnsavedMessageBox/UnsavedMessageBox';
 import { createPortal } from 'react-dom';
-import { SetterOrUpdater, useSetRecoilState } from 'recoil';
 import { isResourceEditedState } from 'state/resourceEditedAtom';
 import { useUploadResources } from 'resources/Namespaces/YamlUpload/useUploadResources';
 import { usePost } from 'shared/hooks/BackendAPI/usePost';
 import { CommunityModuleContext } from 'components/KymaModules/providers/CommunityModuleProvider';
 import CommunityModuleCard from 'components/KymaModules/components/CommunityModuleCard';
 
 import { useNotification } from 'shared/contexts/NotificationContext';
-import { ModuleTemplatesContext } from 'components/KymaModules/providers/ModuleTemplatesProvider';
 
 import './KymaModulesAddModule.scss';
+
 type VersionDisplayInfo = {
   moduleTemplate: {
     name: string;
     namespace: string;
   };
   version: string;
-  channel: string;
   installed: boolean;
   textToDisplay: string;
-  beta?: boolean;
   icon?: { link: string; name: string };
   docsURL?: string;
 };
@@ -95,11 +92,6 @@ function transformDataForDisplay(
   availableCommunityModules: Map<string, VersionInfo[]>,
 ): ModuleDisplayInfo[] {
   return Array.from(availableCommunityModules, ([moduleName, versions]) => {
-    const formatDisplayText = (v: VersionInfo): string => {
-      const version = `${v.channel ? v.channel + ' ' : ''}(v${v.version})`;
-      return version;
-    };
-
     return {
       name: moduleName,
       versions: versions.map(v => ({
@@ -108,10 +100,8 @@ function transformDataForDisplay(
           namespace: v.moduleTemplateNamespace,
         },
         version: v.version,
-        channel: v.channel ?? '',
         installed: v.installed ?? false,
-        textToDisplay: formatDisplayText(v),
-        beta: v.beta,
+        textToDisplay: `v${v.version}`,
         icon: v.icon,
         docsURL: v.docsURL,
       })),
@@ -145,32 +135,22 @@ export default function CommunityModulesAddModule(props: any) {
   ] = useState(new Map<string, ModuleTemplateType>());
 
   const {
-    moduleTemplatesLoading,
-    moduleReleaseMetasLoading,
-    moduleReleaseMetas,
-  } = useContext(ModuleTemplatesContext);
-  const {
-    installedCommunityModules,
     notInstalledCommunityModuleTemplates,
     installedCommunityModulesLoading: notInstalledCommunityModulesLoading,
   } = useContext(CommunityModuleContext);
 
   const availableCommunityModules = useMemo(() => {
-    if (!moduleReleaseMetasLoading && notInstalledCommunityModuleTemplates) {
+    if (!notInstalledCommunityModulesLoading) {
       return getAvailableCommunityModules(
         notInstalledCommunityModuleTemplates,
         {} as ModuleTemplateListType,
-        moduleReleaseMetas,
       );
     } else {
       return new Map();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     notInstalledCommunityModuleTemplates,
-    installedCommunityModules,
-    moduleReleaseMetas,
-    moduleReleaseMetasLoading,
+    notInstalledCommunityModulesLoading,
   ]);
 
   useEffect(() => {
@@ -216,7 +196,7 @@ export default function CommunityModulesAddModule(props: any) {
       }
     };
   }, [cardsContainerRef, calculateColumns]);
-  if (notInstalledCommunityModulesLoading || moduleTemplatesLoading) {
+  if (notInstalledCommunityModulesLoading) {
     return (
       <div style={{ height: 'calc(100vh - 14rem)' }}>
         <Spinner />

src/components/KymaModules/components/CommunityModuleCard.js

@@ -102,14 +102,14 @@ export default function CommunityModuleCard({
         <div className="settings-panel__content sap-margin-y-small">
           <Label>{t('modules.community.release-channel') + ':'} </Label>
           <Select
-            accessibleName={`${module.name} channel select`}
+            accessibleName={`${module.name} version select`}
             onChange={event => {
               onChange(event.detail.selectedOption.value, false);
             }}
             value={`${module.versions[0].moduleTemplate.name}|${module.versions[0].moduleTemplate.namespace}`}
             className="channel-select"
           >
-            {module.versions?.map((version, idx) => (
+            {module.versions?.map(version => (
               <Option
                 selected={selectedModules.get(module.name)}
                 key={`option-${version.moduleTemplate.name}|${version.moduleTemplate.namespace}`}

src/components/KymaModules/components/CommunityModuleVersionSelect.tsx

@@ -16,10 +16,8 @@ export type VersionDisplayInfo = {
     namespace: string;
   };
   version: string;
-  channel: string;
   installed: boolean;
   textToDisplay: string;
-  beta?: boolean;
 };
 
 export default function CommunityModuleVersionSelect({
@@ -35,7 +33,7 @@ export default function CommunityModuleVersionSelect({
     <FlexBox direction="Column" style={{ gap: '0.5rem' }} key={module?.name}>
       <Label>{`${module.name}:`}</Label>
       <Select
-        accessibleName={`${module.name} channel select`}
+        accessibleName={`${module.name} version select`}
         onChange={event => {
           onChange(event.detail.selectedOption.value);
         }}
@@ -47,7 +45,6 @@ export default function CommunityModuleVersionSelect({
             selected={version.installed}
             key={`${idx}-${installedVersion.moduleTemplate.name}|${installedVersion.moduleTemplate.namespace}`}
             value={`${version.moduleTemplate.name}|${version.moduleTemplate.namespace}`}
-            additionalText={version.beta ? 'Beta' : ''}
           >
             {version.textToDisplay}
           </Option>

src/components/KymaModules/components/CommunityModulesEdit.tsx

@@ -32,7 +32,6 @@ import {
 import { ModuleTemplatesContext } from 'components/KymaModules/providers/ModuleTemplatesProvider';
 
 import './CommunityModule.scss';
-import { capitalizeFirstLetter } from '@ui5/webcomponents-react-base';
 
 const isModuleInstalled = (
   foundModuleTemplate: ModuleTemplateType,
@@ -125,12 +124,6 @@ function transformDataForDisplay(
   t: Function,
 ): ModuleDisplayInfo[] {
   return Array.from(availableCommunityModules, ([moduleName, versions]) => {
-    const formatDisplayText = (v: VersionInfo): string => {
-      return `${v.channel ? capitalizeFirstLetter(v.channel) + ' ' : ''}(v${
-        v.version
-      })`;
-    };
-
     return {
       name: moduleName,
       versions: versions.map(v => ({
@@ -139,10 +132,8 @@ function transformDataForDisplay(
           namespace: v.moduleTemplateNamespace,
         },
         version: v.version,
-        channel: v.channel ?? '',
         installed: v.installed ?? false,
-        beta: v.beta,
-        textToDisplay: formatDisplayText(v),
+        textToDisplay: `v${v.version}`,
       })),
     };
   });
@@ -170,32 +161,28 @@ export default function CommunityModulesEdit() {
     setCommunityModulesTemplatesToApply,
   ] = useState(new Map<string, ModuleTemplateType>());
 
-  const {
-    moduleTemplatesLoading,
-    communityModuleTemplates,
-    moduleReleaseMetasLoading,
-    moduleReleaseMetas,
-  } = useContext(ModuleTemplatesContext);
+  const { moduleTemplatesLoading, communityModuleTemplates } = useContext(
+    ModuleTemplatesContext,
+  );
   const {
     installedCommunityModuleTemplates,
     installedCommunityModulesLoading,
   } = useContext(CommunityModuleContext);
 
   const availableCommunityModules = useMemo(() => {
-    if (!moduleReleaseMetasLoading) {
+    if (!moduleTemplatesLoading && !installedCommunityModulesLoading) {
       return getAvailableCommunityModules(
         communityModuleTemplates,
         installedCommunityModuleTemplates,
-        moduleReleaseMetas,
       );
     } else {
       return new Map();
     }
   }, [
     communityModuleTemplates,
-    moduleReleaseMetas,
+    moduleTemplatesLoading,
     installedCommunityModuleTemplates,
-    moduleReleaseMetasLoading,
+    installedCommunityModulesLoading,
   ]);
 
   useEffect(() => {

src/components/KymaModules/components/communityModulesHelpers.ts

@@ -1,6 +1,5 @@
 import {
   getModuleName,
-  ModuleReleaseMetaListType,
   ModuleTemplateListType,
   ModuleTemplateType,
 } from 'components/KymaModules/support';
@@ -10,9 +9,7 @@ export type VersionInfo = {
   version: string;
   moduleTemplateName: string;
   moduleTemplateNamespace: string;
-  channel?: string;
   installed?: boolean;
-  beta?: boolean;
   docsURL?: string;
   icon?: {
     link: string;
@@ -23,12 +20,10 @@ export type VersionInfo = {
 export function getAvailableCommunityModules(
   communityModulesTemplates: ModuleTemplateListType,
   installedModuleTemplates: ModuleTemplateListType,
-  moduleReleaseMetas: ModuleReleaseMetaListType,
 ): Map<string, VersionInfo[]> {
   const availableCommunityModules = new Map<string, VersionInfo[]>();
   fillModuleVersions(availableCommunityModules, communityModulesTemplates);
   markInstalledVersion(availableCommunityModules, installedModuleTemplates);
-  fillModulesWithMetadata(availableCommunityModules, moduleReleaseMetas);
   return availableCommunityModules;
 }
 
@@ -46,10 +41,7 @@ function fillModuleVersions(
     const moduleVersions = acc.get(moduleName);
     if (moduleVersions) {
       const foundVersion = moduleVersions.find(module => {
-        return (
-          module.channel === newVersionCandidate.channel &&
-          module.version === newVersionCandidate.version
-        );
+        return module.version === newVersionCandidate.version;
       });
       if (!foundVersion) {
         moduleVersions.push(newVersionCandidate);
@@ -64,7 +56,6 @@ function fillModuleVersions(
 function createVersion(moduleTemplate: ModuleTemplateType): VersionInfo {
   return {
     version: moduleTemplate.spec.version,
-    channel: moduleTemplate.spec.channel,
     moduleTemplateNamespace: moduleTemplate.metadata.namespace,
     moduleTemplateName: moduleTemplate.metadata.name,
     docsURL: moduleTemplate.spec.info?.documentation,
@@ -111,30 +102,6 @@ function markInstalledVersion(
   });
 }
 
-function fillModulesWithMetadata(
-  availableCommunityModules: Map<string, VersionInfo[]>,
-  moduleReleaseMetas: ModuleReleaseMetaListType,
-) {
-  (moduleReleaseMetas?.items || [])?.forEach(releaseMeta => {
-    const foundVersions = availableCommunityModules.get(
-      releaseMeta.spec.moduleName,
-    );
-    if (foundVersions) {
-      foundVersions.forEach(version => {
-        const matchedChannelMeta = releaseMeta.spec.channels.find(
-          channelMeta => {
-            return channelMeta.version === version.version;
-          },
-        );
-        if (matchedChannelMeta) {
-          version.channel = matchedChannelMeta.channel;
-          version.beta = releaseMeta.spec.beta ?? false;
-        }
-      });
-    }
-  });
-}
-
 export function getInstalledModules(
   moduleTemplates: ModuleTemplateListType,
   managers: any,