fix: Fix showing undefined release version (#3936)

* Fix showing undefined release version

* Remove option when version is undefined

* Set another channel when channel from kymaResource does not exists during adding

* Make variable for for repeated iteration

* Add alternative version

Author: KonradPietocha

src/components/KymaModules/components/ModulesCard.js

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from 'react';
 import {
   Card,
   CheckBox,
@@ -11,7 +12,6 @@ import {
 } from '@ui5/webcomponents-react';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
 import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
 import {
   findModuleSpec,
   findModuleStatus,
@@ -60,11 +60,53 @@ export default function ModulesCard({
     checkImage();
   }, [module]);
 
+  const defaultVersion = useMemo(
+    () =>
+      module?.channels?.find(
+        channel => channel?.channel === kymaResource?.spec?.channel,
+      )?.version,
+    [kymaResource?.spec?.channel, module?.channels],
+  );
+
+  // Check if the module version from kymaResource exists and set the channel if not.
+  const checkIfVersionExistsAndSet = () => {
+    if (!defaultVersion && module?.channels?.[0]?.channel) {
+      setChannel(
+        module,
+        module.channels[0].channel,
+        index,
+        selectedModules,
+        setSelectedModules,
+      );
+    }
+  };
+
+  const getNameForVersion = version => {
+    if (typeof version === 'string' && version.startsWith('v')) {
+      return version;
+    }
+    return `v${version}`;
+  };
+
+  const getSelectedValue = () => {
+    const defaultValue = defaultVersion
+      ? 'predefined'
+      : module?.channels?.[0]?.channel;
+    return (
+      findModuleSpec(kymaResource, module.name)?.channel ||
+      findModuleStatus(kymaResource, module.name)?.channel ||
+      defaultValue
+    );
+  };
+
   return (
     <Card key={module.name} className="addModuleCard">
       <ListItemStandard
         className="moduleCardHeader"
-        onClick={() => setCheckbox(module, !isChecked(module.name), index)}
+        onClick={() => {
+          setCheckbox(module, !isChecked(module.name), index);
+          checkIfVersionExistsAndSet();
+        }}
       >
         <CheckBox className="checkbox" checked={isChecked(module.name)} />
         <div className="titles">
@@ -84,6 +126,8 @@ export default function ModulesCard({
                     channel => kymaResource?.spec?.channel === channel.channel,
                   )?.version
                 } ${checkIfStatusModuleIsBeta(module.name) ? '(Beta)' : ''}`
+              : module?.channels?.[0]?.version
+              ? `v${module?.channels?.[0]?.version}`
               : t('kyma-modules.no-version')}
           </Text>
         </div>
@@ -124,33 +168,25 @@ export default function ModulesCard({
                 setSelectedModules,
               );
             }}
-            value={
-              findModuleSpec(kymaResource, module.name)?.channel ||
-              findModuleStatus(kymaResource, module.name)?.channel ||
-              'predefined'
-            }
+            value={getSelectedValue()}
             className="channel-select"
           >
-            <Option
-              selected={
-                !module.channels?.filter(
+            {defaultVersion && (
+              <Option
+                selected={module?.channels?.find(
                   channel =>
                     channel.channel ===
                     findModuleSpec(kymaResource, module.name)?.channel,
-                )
-              }
-              value={'predefined'}
-            >
-              {`${t(
-                'kyma-modules.predefined-channel',
-              )} (${kymaResource?.spec?.channel[0].toUpperCase()}${kymaResource?.spec?.channel.slice(
-                1,
-              )} v${
-                module.channels?.filter(
-                  channel => channel.channel === kymaResource?.spec?.channel,
-                )[0]?.version
-              })`}
-            </Option>
+                )}
+                value={'predefined'}
+              >
+                {`${t(
+                  'kyma-modules.predefined-channel',
+                )} (${kymaResource?.spec?.channel[0].toUpperCase()}${kymaResource?.spec?.channel.slice(
+                  1,
+                )} ${getNameForVersion(defaultVersion)})`}
+              </Option>
+            )}
             {module.channels?.map(channel => (
               <Option
                 selected={
@@ -165,9 +201,9 @@ export default function ModulesCard({
               >
                 {`${(
                   channel?.channel[0] || ''
-                ).toUpperCase()}${channel.channel.slice(1)} (v${
-                  channel.version
-                })`}{' '}
+                ).toUpperCase()}${channel.channel.slice(
+                  1,
+                )} (${getNameForVersion(channel.version)})`}{' '}
               </Option>
             ))}
           </Select>