fix(787): Display connector icon in catalog detail modal

KaotoIO · Sep 23, 2024 · cd7d95e · cd7d95e
1 parent 57fb9d1
commit cd7d95e
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/packages/ui/src/camel-utils/camel-to-tile.adapter.ts b/packages/ui/src/camel-utils/camel-to-tile.adapter.ts
@@ -1,5 +1,6 @@
 import { ITile } from '../components/Catalog/Catalog.models';
 import { CatalogKind, ICamelComponentDefinition, ICamelProcessorDefinition, IKameletDefinition } from '../models';
+import { NodeIconType } from '../utils';
 
 export const camelComponentToTile = (componentDef: ICamelComponentDefinition): ITile => {
   const { name, title, description, supportLevel, label, provider, version } = componentDef.component;
@@ -30,6 +31,7 @@ export const camelComponentToTile = (componentDef: ICamelComponentDefinition): I
     tags,
     provider,
     version,
+    nodeIconType: NodeIconType.Component,
   };
 };
 
@@ -44,6 +46,7 @@ export const camelProcessorToTile = (processorDef: ICamelProcessorDefinition): I
     description,
     headerTags: ['Processor'],
     tags,
+    nodeIconType: NodeIconType.EIP,
   };
 };
 
@@ -71,5 +74,6 @@ export const kameletToTile = (kameletDef: IKameletDefinition): ITile => {
     headerTags,
     tags,
     version,
+    nodeIconType: NodeIconType.Kamelet,
   };
 };
diff --git a/packages/ui/src/components/Catalog/Catalog.models.ts b/packages/ui/src/components/Catalog/Catalog.models.ts
@@ -1,3 +1,5 @@
+import { NodeIconType } from '../../utils';
+
 export interface ITile {
   type: string;
   name: string;
@@ -7,6 +9,7 @@ export interface ITile {
   tags: string[];
   version?: string;
   provider?: string;
+  nodeIconType?: NodeIconType;
 }
 
 export type TileFilter = (item: ITile) => boolean;

diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.scss b/packages/ui/src/components/PropertiesModal/PropertiesModal.scss
@@ -41,4 +41,13 @@
       height: 60vh;
     }
   }
+
+  &__title-image {
+    height: 50px;
+    width: 50px;
+  }
+
+  &__title {
+    padding: 10px;
+  }
 }
diff --git a/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx b/packages/ui/src/components/PropertiesModal/PropertiesModal.tsx
@@ -1,17 +1,18 @@
 import { Modal, ModalBoxBody, Tab, Tabs } from '@patternfly/react-core';
-import { FunctionComponent, useContext, useEffect, useMemo, useState } from 'react';
-import { IPropertiesTab } from './PropertiesModal.models';
+import { FunctionComponent, ReactElement, useContext, useEffect, useMemo, useState } from 'react';
 import {
   transformCamelComponentIntoTab,
   transformCamelProcessorComponentIntoTab,
   transformKameletComponentIntoTab,
 } from '../../camel-utils/camel-to-tabs.adapter';
 import { CatalogKind } from '../../models';
+import { CatalogContext } from '../../providers';
+import { NodeIconResolver, NodeIconType } from '../../utils';
 import { ITile } from '../Catalog';
+import { IPropertiesTab } from './PropertiesModal.models';
 import './PropertiesModal.scss';
 import { PropertiesTabs } from './PropertiesTabs';
 import { EmptyTableState } from './Tables';
-import { CatalogContext } from '../../providers';
 
 interface IPropertiesModalProps {
   tile: ITile;
@@ -50,6 +51,18 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
     setActiveTab(tabs[tabIndex as number]);
     setActiveTabKey(tabIndex as number);
   };
+  const iconName = props.tile.nodeIconType === NodeIconType.Kamelet ? `kamelet:${props.tile.name}` : props.tile.name;
+
+  const title: ReactElement = (
+    <div style={{ display: 'flex' }}>
+      <img
+        className={'properties-modal__title-image'}
+        src={NodeIconResolver.getIcon(iconName, props.tile.nodeIconType!)}
+        alt={`${props.tile.type} icon`}
+      />
+      <h1 className="properties-modal__title">{props.tile.title}</h1>
+    </div>
+  );
 
   const description = (
     <div>
@@ -66,7 +79,7 @@ export const PropertiesModal: FunctionComponent<IPropertiesModalProps> = (props)
   return (
     <Modal
       className="properties-modal"
-      title={props.tile.title}
+      title={title}
       isOpen={props.isModalOpen}
       onClose={props.onClose}
       ouiaId="BasicModal"