fix: Modules disable link (#3047)

* WIP * Disable link to details if there is no page to show * Remove console.log
kyma-project · Jul 9, 2024 · b90cb56 · b90cb56
1 parent 4fa125a
commit b90cb56
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 22 deletions.
diff --git a/src/components/KymaModules/KymaModulesList.js b/src/components/KymaModules/KymaModulesList.js
@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import jsyaml from 'js-yaml';
 
 import { ResourceDetails } from 'shared/components/ResourceDetails/ResourceDetails';
 import {
@@ -7,6 +8,7 @@ import {
   FlexBox,
   Text,
 } from '@ui5/webcomponents-react';
+
 import { HintButton } from 'shared/components/DescriptionHint/DescriptionHint';
 import { spacing } from '@ui5/webcomponents-react-base';
 import { useState } from 'react';
@@ -112,19 +114,29 @@ export function KymaModulesList(props) {
         module => moduleName === module.name,
       );
     };
-
+    const findExtension = resourceKind => {
+      return kymaExt?.find(ext => {
+        const { resource: extensionResource } =
+          jsyaml.load(ext.data.general, { json: true }) || {};
+        return extensionResource === resourceKind;
+      });
+    };
     const checkBeta = module => {
       return module?.metadata.labels['operator.kyma-project.io/beta'] === 'true'
         ? 'beta'
         : EMPTY_TEXT_PLACEHOLDER;
     };
 
+    // TODO: Remove this function and use newfindCrd instead
     const findCrd = moduleName =>
       crds?.items?.find(crd =>
         crd.metadata.name
           .toLocaleLowerCase()
           .includes(pluralize(moduleName.replace('-', '').toLocaleLowerCase())),
       );
+    const newfindCrd = resourceKind => {
+      return crds?.items?.find(crd => crd.spec?.names?.kind === resourceKind);
+    };
 
     const headerRenderer = () => [
       t('common.headers.name'),
@@ -136,13 +148,36 @@ export function KymaModulesList(props) {
       t('kyma-modules.documentation'),
     ];
 
+    const hasDetailsLink = resource => {
+      const isInstalled =
+        selectedModules?.findIndex(kymaResourceModule => {
+          return kymaResourceModule.name === resource.name;
+        }) >= 0;
+      const moduleStatus = findStatus(resource.name);
+      const isDeletionFailed = moduleStatus?.state === 'Warning';
+      const isError = moduleStatus?.state === 'Error';
+
+      const hasExtension = !!findExtension(resource?.resource?.kind);
+      const hasCrd = !!findCrd(resource.name);
+
+      return (
+        (isInstalled || isDeletionFailed || !isError) &&
+        (hasCrd || hasExtension)
+      );
+    };
+
     const rowRenderer = resource => {
       const moduleStatus = findStatus(resource.name);
+      const showDetailsLink = hasDetailsLink(resource);
       return [
         // Name
-        <Text style={{ fontWeight: 'bold', color: 'var(--sapLinkColor)' }}>
-          {resource.name}
-        </Text>,
+        showDetailsLink ? (
+          <Text style={{ fontWeight: 'bold', color: 'var(--sapLinkColor)' }}>
+            {resource.name}
+          </Text>
+        ) : (
+          resource.name
+        ),
         // Beta
         checkBeta(
           findModule(
@@ -255,11 +290,15 @@ export function KymaModulesList(props) {
       },
     ];
 
-    const handleClickResource = resourceName => {
-      const isExtension = !!kymaExt?.find(ext =>
-        ext.metadata.name.includes(resourceName),
-      );
+    const handleClickResource = (resourceName, resource) => {
+      const isExtension = !!findExtension(resource?.resource?.kind);
       const moduleStatus = findStatus(resourceName);
+      const skipRedirect = !hasDetailsLink(resource);
+
+      if (skipRedirect) {
+        return;
+      }
+
       const path = moduleStatus?.resource?.metadata?.namespace
         ? clusterUrl(
             `kymamodules/namespaces/${
@@ -269,7 +308,7 @@ export function KymaModulesList(props) {
                 ? `${pluralize(
                     moduleStatus?.resource?.kind || '',
                   ).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
-                : `${findCrd(resourceName)?.metadata?.name}/${
+                : `${newfindCrd(resource?.resource?.kind)?.metadata?.name}/${
                     moduleStatus?.resource?.metadata?.name
                   }`
             }`,
@@ -280,11 +319,12 @@ export function KymaModulesList(props) {
                 ? `${pluralize(
                     moduleStatus?.resource?.kind || '',
                   ).toLowerCase()}/${moduleStatus?.resource?.metadata?.name}`
-                : `${findCrd(resourceName)?.metadata?.name}/${
+                : `${newfindCrd(resource?.resource?.kind)?.metadata?.name}/${
                     moduleStatus?.resource?.metadata?.name
                   }`
             }`,
           );
+
       if (!isExtension) {
         setLayoutColumn({
           midColumn: {

diff --git a/src/resources/other/kymaModules.routes.js b/src/resources/other/kymaModules.routes.js
@@ -51,7 +51,12 @@ const ColumnWraper = (defaultColumn = 'list') => {
         layoutCloseCreateUrl={clusterUrl('kymamodules')}
         resourceName={layoutState?.midColumn?.resourceName || resourceName}
         resourceType={layoutState?.midColumn?.resourceType || resourceType}
-        namespaceId={layoutState?.midColumn?.namespaceId || namespace}
+        namespaceId={
+          layoutState?.midColumn?.namespaceId ||
+          layoutState?.midColumn?.namespaceId === ''
+            ? layoutState?.midColumn?.namespaceId
+            : namespace
+        }
       />
     );
   } else {
@@ -65,7 +70,12 @@ const ColumnWraper = (defaultColumn = 'list') => {
         layoutCloseCreateUrl={clusterUrl('kymamodules')}
         resourceName={layoutState?.midColumn?.resourceName || resourceName}
         resourceType={layoutState?.midColumn?.resourceType || resourceType}
-        namespaceId={layoutState?.midColumn?.namespaceId || namespace}
+        namespaceId={
+          layoutState?.midColumn?.namespaceId ||
+          layoutState?.midColumn?.namespaceId === ''
+            ? layoutState?.midColumn?.namespaceId
+            : namespace
+        }
       />
     );
   }

diff --git a/src/shared/components/GenericList/GenericList.js b/src/shared/components/GenericList/GenericList.js
@@ -303,19 +303,22 @@ export const GenericList = ({
   };
 
   const handleRowClick = e => {
+    const selectedEntry = entries.find(entry => {
+      return (
+        entry?.metadata?.name === e.target.children[nameColIndex].innerText ||
+        pluralize(entry?.spec?.names?.kind ?? '') ===
+          e.target.children[nameColIndex].innerText ||
+        entry?.name === e.target.children[nameColIndex].innerText
+      );
+    });
+
     if (customRowClick) {
       setEntrySelected(e.target.children[nameColIndex].innerText);
-      return customRowClick(e.target.children[nameColIndex].innerText);
+      return customRowClick(
+        e.target.children[nameColIndex].innerText,
+        selectedEntry,
+      );
     } else {
-      const selectedEntry = entries.find(entry => {
-        return (
-          entry?.metadata?.name === e.target.children[nameColIndex].innerText ||
-          pluralize(entry?.spec?.names?.kind ?? '') ===
-            e.target.children[nameColIndex].innerText ||
-          entry?.name === e.target.children[nameColIndex].innerText
-        );
-      });
-
       if (handleRedirect) {
         const redirectLayout = handleRedirect(selectedEntry, resourceType);
         if (redirectLayout) {