feat(Modules): Add icon from ModuleTemplates (#3550)

* feat(Modules): Add icon from ModuleTemplates

* add checking if image exist

* remove clgs

* some change, idk how to name it

* fix csses

* comment rebase

Author: mrCherry97

.github/workflows/pull-integration-cluster-k3d.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Create Single Cluster
         uses: AbsaOSS/k3d-action@4e8b3239042be1dc0aed6c5eb80c13b18200fc79 #v2.4.0
         with:

.github/workflows/pull-integration-namespace-k3d.yml

@@ -26,7 +26,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Create Single Cluster
         uses: AbsaOSS/k3d-action@4e8b3239042be1dc0aed6c5eb80c13b18200fc79 #v2.4.0
         with:

.github/workflows/pull-kyma-integration-tests.yml

@@ -21,7 +21,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Install k3d
         env:
           K3D_URL: https://raw.githubusercontent.com/k3d-io/k3d/main/install.sh

.github/workflows/pull-lighthouse.yml

@@ -19,7 +19,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Create Single Cluster
         uses: AbsaOSS/k3d-action@4e8b3239042be1dc0aed6c5eb80c13b18200fc79 #v2.4.0
         with:

.github/workflows/pull-smoke-test-prod.yml

@@ -21,7 +21,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Install k3d
         env:
           K3D_URL: https://raw.githubusercontent.com/k3d-io/k3d/main/install.sh

.github/workflows/pull-smoke-test-stage.yml

@@ -21,7 +21,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - name: Install k3d
         env:
           K3D_URL: https://raw.githubusercontent.com/k3d-io/k3d/main/install.sh

.github/workflows/pull-unit-tests.yml

@@ -18,7 +18,7 @@ jobs:
         with:
           comment_on_pr: false
       - uses: actions/checkout@v4
-      - uses: ./.github/actions/rebase
+      # - uses: ./.github/actions/rebase
       - uses: actions/setup-node@v4
         with:
           node-version: 20

src/components/KymaModules/KymaModulesAddModule.js

@@ -102,6 +102,10 @@ export default function KymaModulesAddModule({
           ],
           docsUrl:
             module.metadata.annotations['operator.kyma-project.io/doc-url'],
+          icon: {
+            link: module.spec?.info?.icons[0]?.link,
+            name: module.spec?.info?.icons[0]?.name,
+          },
           isMetaRelease: false,
         });
       } else if (existingModule) {
@@ -130,6 +134,10 @@ export default function KymaModulesAddModule({
                 },
               ],
               docsUrl: module.spec.info.documentation,
+              icon: {
+                link: module.spec?.info?.icons[0]?.link,
+                name: module.spec?.info?.icons[0]?.name,
+              },
             });
           } else {
             acc

src/components/KymaModules/KymaModulesAddModule.scss

@@ -50,6 +50,8 @@
   }
 
   .settings-panel {
+    width: 350px;
+
     &::part(header) {
       font-family: var(--sapFontFamily);
       font-size: var(--sapFontSize);

src/components/KymaModules/ModulesCard.js

@@ -13,6 +13,26 @@ import '@ui5/webcomponents/dist/features/InputElementsFormSupport.js';
 import { ExternalLink } from 'shared/components/ExternalLink/ExternalLink';
 import { useTranslation } from 'react-i18next';
 import { spacing } from '@ui5/webcomponents-react-base';
+import { useEffect, useState } from 'react';
+
+async function isImageAvailable(url) {
+  try {
+    const response = await fetch(url, { method: 'HEAD' });
+    return response.ok;
+  } catch (error) {
+    return false;
+  }
+}
+async function getImageSrc(module) {
+  const defaultImage = '/assets/sap-logo.svg';
+  const iconLink = module.icon.link;
+
+  if (iconLink && (await isImageAvailable(iconLink))) {
+    return iconLink;
+  } else {
+    return defaultImage;
+  }
+}
 
 export default function ModulesCard({
   module,
@@ -26,6 +46,15 @@ export default function ModulesCard({
   checkIfStatusModuleIsBeta,
 }) {
   const { t } = useTranslation();
+  const [imageSrc, setImageSrc] = useState('');
+
+  useEffect(() => {
+    async function checkImage() {
+      const src = await getImageSrc(module);
+      setImageSrc(src);
+    }
+    checkImage();
+  }, [module]);
 
   return (
     <Card key={module.name} className="addModuleCard">
@@ -52,7 +81,13 @@ export default function ModulesCard({
               : t('kyma-modules.no-version')}
           </Text>
         </div>
-        <img className="avatar" alt="SAP" src="\assets\sap-logo.svg" />
+        {imageSrc !== '' && (
+          <img
+            className="avatar"
+            alt={module.icon.name ? module.icon.name : 'SAP'}
+            src={imageSrc}
+          />
+        )}
       </StandardListItem>
       <div className="content">
         {module.docsUrl && (