Added icons for javalistener, messagestorelistener, ftpfilesystemlistener and exchangemaillistener (#119)

Author: Daan0709

src/main/frontend/app/routes/builder/builder-files-data-provider.ts

@@ -1,8 +1,10 @@
 import type { Disposable, TreeDataProvider, TreeItem, TreeItemIndex } from 'react-complex-tree'
+import type { ConfigWithAdapters } from '~/routes/builder/builder-structure';
 
-interface ConfigWithAdapters {
+export interface AdapterNodeData {
+  adapterName: string
   configName: string
-  adapterNames: string[]
+  listenerName: string | null
 }
 
 export default class BuilderFilesDataProvider implements TreeDataProvider {
@@ -59,18 +61,18 @@ export default class BuilderFilesDataProvider implements TreeDataProvider {
     }
 
     // Config folders and adapters
-    for (const { configName, adapterNames } of configs) {
+    for (const { configName, adapters } of configs) {
       newData[configName] = {
         index: configName,
         data: configName,
-        children: adapterNames, // only matching adapters
+        children: adapters.map((a) => a.adapterName),
         isFolder: true,
       }
 
-      for (const adapterName of adapterNames) {
+      for (const { adapterName, listenerName } of adapters) {
         newData[adapterName] = {
           index: adapterName,
-          data: { adapterName, configName },
+          data: { adapterName, configName, listenerName } satisfies AdapterNodeData,
           isFolder: false,
         }
       }

src/main/frontend/app/routes/builder/builder-structure.tsx

@@ -1,10 +1,13 @@
-import { type JSX, useEffect, useRef, useState } from 'react'
-import { getAdapterNamesFromConfiguration } from '~/routes/builder/xml-to-json-parser'
+import React, { type JSX, useEffect, useRef, useState } from 'react'
+import { getAdapterListenerType, getAdapterNamesFromConfiguration } from '~/routes/builder/xml-to-json-parser'
 import useTabStore from '~/stores/tab-store'
 import Search from '~/components/search/search'
 import FolderIcon from '/icons/solar/Folder.svg?react'
 import FolderOpenIcon from '/icons/solar/Folder Open.svg?react'
 import CodeIcon from '/icons/solar/Code.svg?react'
+import JavaIcon from '/icons/solar/Cup Hot.svg?react'
+import MessageIcon from '/icons/solar/Chat Dots.svg?react'
+import MailIcon from '/icons/solar/Mailbox.svg?react'
 import 'react-complex-tree/lib/style-modern.css'
 import AltArrowRightIcon from '/icons/solar/Alt Arrow Right.svg?react'
 import AltArrowDownIcon from '/icons/solar/Alt Arrow Down.svg?react'
@@ -16,15 +19,18 @@ import {
   type TreeRef,
   UncontrolledTreeEnvironment,
 } from 'react-complex-tree'
-import BuilderFilesDataProvider from '~/routes/builder/builder-files-data-provider'
+import BuilderFilesDataProvider, { type AdapterNodeData } from '~/routes/builder/builder-files-data-provider'
 import { useProjectStore } from '~/stores/project-store'
 import { Link } from 'react-router'
 import { useTreeStore } from '~/stores/tree-store'
 import { useShallow } from 'zustand/react/shallow'
 
 export interface ConfigWithAdapters {
   configName: string
-  adapterNames: string[]
+  adapters: {
+    adapterName: string
+    listenerName: string | null
+  }[]
 }
 
 const TREE_ID = 'builder-files-tree'
@@ -68,16 +74,27 @@ export default function BuilderStructure() {
         const loaded: ConfigWithAdapters[] = await Promise.all(
           configurationNames.map(async (configName) => {
             const adapterNames = await getAdapterNamesFromConfiguration(configName)
-            return { configName, adapterNames }
+
+            // Fetch listener name for each adapter
+            const adapters = await Promise.all(
+              adapterNames.map(async (adapterName) => {
+                const listenerName = await getAdapterListenerType(configName, adapterName)
+                return { adapterName, listenerName }
+              }),
+            )
+
+            return { configName, adapters }
           }),
         )
+
         setConfigs(loaded)
       } catch (error) {
         console.error('Failed to load adapter names:', error)
       } finally {
         setIsLoading(false)
       }
     }
+
     loadAdapters()
   }, [configurationNames])
 
@@ -157,10 +174,13 @@ export default function BuilderStructure() {
     item: TreeItem<unknown>
     context: TreeItemRenderContext
   }) => {
-    const Icon = (item.isFolder && (context.isExpanded ? FolderOpenIcon : FolderIcon)) || CodeIcon
-
     const searchLower = searchTerm.toLowerCase()
     const titleLower = title.toLowerCase()
+    const listenerType =
+      !item.isFolder && typeof item.data === 'object' && item.data && 'listenerName' in item.data
+        ? (item.data as { listenerName: string | null }).listenerName
+        : null
+    const Icon = item.isFolder ? (context.isExpanded ? FolderOpenIcon : FolderIcon) : getListenerIcon(listenerType)
 
     // Highlight only the substring(s) that match the search term
     let highlightedTitle: JSX.Element | string = title
@@ -190,6 +210,20 @@ export default function BuilderStructure() {
     )
   }
 
+  function getListenerIcon(listenerType: string | null) {
+    if (!listenerType) return CodeIcon
+
+    // TODO: Add more icons for more important listener types
+    const listenerIconMap: Record<string, React.FC<React.SVGProps<SVGSVGElement>>> = {
+      JavaListener: JavaIcon,
+      MessageStoreListener: MessageIcon,
+      FtpFileSystemListener: FolderIcon,
+      ExchangeMailListener: MailIcon,
+    }
+
+    return listenerIconMap[listenerType] ?? CodeIcon
+  }
+
   return (
     <>
       <Search onChange={(event) => setSearchTerm(event.target.value)} />

src/main/frontend/app/routes/builder/xml-to-json-parser.ts

@@ -65,6 +65,21 @@ export async function getAdapterFromConfiguration(filename: string, adapterName:
   return null
 }
 
+export async function getAdapterListenerType(filename: string, adapterName: string): Promise<string | null> {
+  const adapterElement = await getAdapterFromConfiguration(filename, adapterName)
+  if (!adapterElement) return null
+  // Look through all child elements inside the adapter
+  const children = adapterElement.querySelectorAll('*')
+  for (const child of children) {
+    if (child.tagName.includes('Listener')) {
+      return child.tagName // Return the tag name, e.g., "JavaListener"
+    }
+  }
+
+  // No listener element found
+  return null
+}
+
 export async function convertAdapterXmlToJson(adapter: Element) {
   const nodes = convertAdapterToFlowNodes(adapter)
   const adapterJson = { nodes: nodes, edges: extractEdgesFromAdapter(adapter, nodes) }