[One Workflow] Render icons from registry (#243388)

## Summary

Retrieve connector icons from the `actionTypeRegistry` instead of doing
cross-plugin import.

### Benefits
- Adds support for connectorsV2 icons dynamically
- We keep the action registry as the single source of truth for the rest
of connectors

### Screenshots

<img width="472" height="95" alt="Captura de pantalla 2025-11-18 a les
17 18 15"
src="https://github.com/user-attachments/assets/5ca142a5-b370-4668-af99-6bb9e170b161"
/>
<img width="472" height="95" alt="Captura de pantalla 2025-11-18 a les
17 18 35"
src="https://github.com/user-attachments/assets/ddda985d-86cf-4d20-a30e-2dbbfc8448be"
/>
<img width="472" height="95" alt="Captura de pantalla 2025-11-18 a les
17 18 26"
src="https://github.com/user-attachments/assets/d3fcff21-6bf0-44c8-a170-b6ea353d4065"
/>
<img width="472" height="95" alt="Captura de pantalla 2025-11-18 a les
17 18 09"
src="https://github.com/user-attachments/assets/cc510e7c-7f6e-413e-b098-7956138a572f"
/>
<img width="496" height="93" alt="Captura de pantalla 2025-11-18 a les
17 22 21"
src="https://github.com/user-attachments/assets/f46e11e0-0edd-49bb-a975-b3fef5012533"
/>

----

<img width="737" height="191" alt="Captura de pantalla 2025-11-18 a les
17 20 49"
src="https://github.com/user-attachments/assets/291551ff-890c-499c-85f0-05b0172a74e7"
/>
<img width="737" height="191" alt="Captura de pantalla 2025-11-18 a les
17 20 44"
src="https://github.com/user-attachments/assets/7a0acdc0-cd7d-44b6-80d4-880f3322a99e"
/>
<img width="737" height="191" alt="Captura de pantalla 2025-11-18 a les
17 20 40"
src="https://github.com/user-attachments/assets/0e0d5c2c-70d2-4b2b-b78a-1fc694194ef9"
/>
<img width="737" height="191" alt="Captura de pantalla 2025-11-18 a les
17 19 26"
src="https://github.com/user-attachments/assets/5797ce1d-33a7-4f9e-8459-3ca39d006332"
/>
<img width="737" height="191" alt="Captura de pantalla 2025-11-18 a les
17 19 20"
src="https://github.com/user-attachments/assets/c1c1f2aa-ad6b-4b2d-b3b7-7bacc07dc805"
/>

Author: semd

src/platform/plugins/shared/workflows_management/public/shared/ui/step_icons/get_step_icon_base64.ts

@@ -7,10 +7,9 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { IconType } from '@elastic/eui';
+import { type IconType } from '@elastic/eui';
 import React from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
-import { getStackConnectorLogo } from '@kbn/stack-connectors-plugin/public/common/logos';
 import { ElasticsearchLogo } from './icons/elasticsearch.svg';
 import { HARDCODED_ICONS } from './icons/hardcoded_icons';
 import { KibanaLogo } from './icons/kibana.svg';
@@ -27,62 +26,78 @@ const DEFAULT_CONNECTOR_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="16
     <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
     <circle cx="8" cy="8" r="2" fill="currentColor"/>
   </svg>`;
+const DEFAULT_CONNECTOR_DATA_URL = `data:image/svg+xml;base64,${btoa(DEFAULT_CONNECTOR_SVG)}`;
+
+type LazyImageComponent = React.LazyExoticComponent<
+  React.ComponentType<{ width: number; height: number }>
+> & {
+  _payload: {
+    _result: () => Promise<{ default: React.ComponentType<{ width: number; height: number }> }>;
+  };
+};
+
+/**
+ * Type guard to check if a component is a LazyExoticComponent
+ * LazyExoticComponent has an internal _payload property with a _load function
+ */
+function isLazyExoticComponent(component: unknown): component is LazyImageComponent {
+  const comp = component as unknown as LazyImageComponent;
+  return typeof comp?._payload?._result === 'function';
+}
+
+/**
+ * Resolve a LazyExoticComponent to its actual component
+ * Accesses React's internal _payload._result API to resolve the lazy component
+ */
+async function resolveLazyComponent(
+  lazyComponent: LazyImageComponent
+): Promise<React.ComponentType<{ width: number; height: number }>> {
+  // Access React's internal payload to get the loader function
+  const module = await lazyComponent._payload._result();
+  // Return the default export (the actual component)
+  return module.default;
+}
 
 /**
  * Get data URL for a connector icon (supports SVG, PNG, and other image formats)
  * Returns a full data URL (e.g., "data:image/svg+xml;base64,..." or "data:image/png;base64,...")
  */
 export async function getStepIconBase64(connector: GetStepIconBase64Params): Promise<string> {
   try {
-    // Only use connector.icon if it's already a data URL
-    if (
-      connector.icon &&
-      typeof connector.icon === 'string' &&
-      connector.icon.startsWith('data:')
-    ) {
-      return connector.icon;
+    // The icon from action registry,
+    if (connector.icon) {
+      // data URL strings or lazy components supported.
+      // built-in EUI icons are not supported (e.g. 'logoSlack', 'inference') use hardcoded icons for them instead.
+      if (typeof connector.icon === 'string' && connector.icon.startsWith('data:')) {
+        return connector.icon;
+      }
+      if (isLazyExoticComponent(connector.icon)) {
+        const IconComponent = await resolveLazyComponent(connector.icon);
+        return getDataUrlFromReactComponent(IconComponent);
+      }
     }
 
-    const connectorType = connector.actionTypeId;
-    if (connectorType === 'elasticsearch') {
+    if (connector.actionTypeId === 'elasticsearch') {
       return getDataUrlFromReactComponent(ElasticsearchLogo);
     }
 
-    if (connectorType === 'kibana') {
+    if (connector.actionTypeId === 'kibana') {
       return getDataUrlFromReactComponent(KibanaLogo);
     }
 
-    // Handle connectors that use EUI built-in icons instead of custom logo components
-    if (connectorType === 'slack' || connectorType === 'slack_api') {
-      // hardcoded slack logo - convert to data URL if it's just base64
-      const slackIcon = HARDCODED_ICONS.slack;
-      if (slackIcon.startsWith('data:')) {
-        return slackIcon;
-      }
-      return `data:image/svg+xml;base64,${slackIcon}`;
-    }
-
-    if (connectorType in HARDCODED_ICONS) {
-      const hardcodedIcon = HARDCODED_ICONS[connectorType as keyof typeof HARDCODED_ICONS];
+    const hardcodedIcon = HARDCODED_ICONS[connector.actionTypeId];
+    if (hardcodedIcon) {
       if (hardcodedIcon.startsWith('data:')) {
         return hardcodedIcon;
       }
       return `data:image/svg+xml;base64,${hardcodedIcon}`;
     }
 
-    const dotConnectorType = `.${connectorType}`;
-    // First, try to get the logo directly from stack connectors
-    const LogoComponent = await getStackConnectorLogo(dotConnectorType);
-    if (LogoComponent) {
-      // LogoComponent is a React component, not an IconType, so handle it separately
-      return getDataUrlFromReactComponent(LogoComponent);
-    }
-
     // Fallback to default icon for other connector types
-    return `data:image/svg+xml;base64,${btoa(DEFAULT_CONNECTOR_SVG)}`;
+    return DEFAULT_CONNECTOR_DATA_URL;
   } catch (error) {
     // Fallback to default static icon
-    return `data:image/svg+xml;base64,${btoa(DEFAULT_CONNECTOR_SVG)}`;
+    return DEFAULT_CONNECTOR_DATA_URL;
   }
 }
 
@@ -122,8 +137,7 @@ function getDataUrlFromReactComponent(
       if (hasFillNone) {
         // Remove fill="none" and add currentColor fill
         htmlString = htmlString
-          .replace(/fill="none"/gi, '')
-          .replace(/fill='none'/gi, '')
+          .replaceAll(/fill="none"/gi, '')
           .replace(/<svg([^>]*?)>/, '<svg$1 fill="currentColor">');
       }
     }

src/platform/plugins/shared/workflows_management/public/shared/ui/step_icons/get_step_icon_css_properties.ts

@@ -21,12 +21,13 @@ import sparkles from './sparkles.svg';
 import user from './user.svg';
 import warning from './warning.svg';
 
-export const HARDCODED_ICONS = {
+export const HARDCODED_ICONS: Record<string, string> = {
+  '.slack': slackLogoSvg,
+  '.slack_api': slackLogoSvg,
+  '.email': email,
+  '.inference': sparkles,
   elasticsearch: elasticsearchLogoSvg,
   kibana: kibanaLogoSvg,
-  slack: slackLogoSvg,
-  email,
-  inference: sparkles,
   console,
   http: globe,
   foreach: refresh,