More icon usage in connect visualize panel

Author: SpicyPete

frontend/src/assets/connectors/component-logo-map.tsx

@@ -18,6 +18,7 @@ import { RedpandaUILetterIcon } from 'components/redpanda-ui/components/icons';
 import {
   Activity,
   Archive,
+  Ban,
   BarChart3,
   CircleSlash,
   Command,
@@ -34,12 +35,14 @@ import {
   FolderOpen,
   GitBranch,
   Globe,
+  Layers,
   Network,
   Package,
   RefreshCw,
   ScrollText,
   Server,
   Settings,
+  Share2,
   Terminal,
   Type,
   Workflow,
@@ -135,7 +138,7 @@ export const componentLogoMap = {
   bloblang: RedpandaLetterLogo,
   bounds_check: undefined,
   branch: undefined,
-  broker: undefined,
+  broker: Share2,
   cache: Database,
   cached: Database,
   cassandra: CassandraLogo,
@@ -155,8 +158,8 @@ export const componentLogoMap = {
   decompress: FolderOpen,
   dedupe: undefined,
   discord: DiscordLogo,
-  drop: undefined,
-  drop_on: undefined,
+  drop: Ban,
+  drop_on: Ban,
   dynamic: undefined,
   elasticsearch_v8: ElasticsearchLogo,
   fallback: undefined,
@@ -177,8 +180,8 @@ export const componentLogoMap = {
   google_drive_list_labels: GoogleDriveLogo,
   google_drive_search: GoogleDriveLogo,
   grok: ElasticsearchLogo,
-  group_by: undefined,
-  group_by_value: undefined,
+  group_by: Layers,
+  group_by_value: Layers,
   hdfs: HadoopLogo,
   http: Globe,
   http_client: Globe,
@@ -322,6 +325,7 @@ export const componentLogoMap = {
   tcp_server: Server,
   text: Type,
   timeplus: Database,
+  tracer: OpenTelemetryLogo,
   try: undefined,
   unarchive: FolderOpen,
   websocket: WebSocketLogo,

frontend/src/components/pages/rp-connect/onboarding/connector-logo.tsx

@@ -1,16 +1,21 @@
 import { type ComponentName, componentLogoMap } from 'assets/connectors/component-logo-map';
 import { cn } from 'components/redpanda-ui/lib/utils';
 
+type LogoComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;
+
 export const ConnectorLogo = ({
   name,
   className,
   style,
+  fallback,
 }: {
   name: ComponentName;
   className?: string;
   style?: React.CSSProperties;
+  /** Icon to render when `name` has no mapping in `componentLogoMap`. */
+  fallback?: LogoComponent;
 }) => {
-  const Component = componentLogoMap[name];
+  const Component = (componentLogoMap[name] as LogoComponent | undefined) ?? fallback;
   if (!Component) {
     return null;
   }

frontend/src/components/pages/rp-connect/pipeline/pipeline-flow-nodes.tsx

@@ -10,7 +10,7 @@
  */
 
 import { BaseEdge, type EdgeProps, Handle, Position } from '@xyflow/react';
-import { type ComponentName, componentLogoMap } from 'assets/connectors/component-logo-map';
+import type { ComponentName } from 'assets/connectors/component-logo-map';
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { BadgeGroup } from 'components/redpanda-ui/components/badge-group';
 import { Banner, BannerClose, BannerContent } from 'components/redpanda-ui/components/banner';
@@ -20,7 +20,7 @@ import { Skeleton } from 'components/redpanda-ui/components/skeleton';
 import { Text } from 'components/redpanda-ui/components/typography';
 import { cn } from 'components/redpanda-ui/lib/utils';
 import { BaseNode } from 'components/ui/base-node';
-import { BookOpenIcon, ChevronDown, ChevronUp, PlusIcon } from 'lucide-react';
+import { BookOpenIcon, Box, ChevronDown, ChevronUp, PlusIcon } from 'lucide-react';
 
 import { ConnectorLogo } from '../onboarding/connector-logo';
 
@@ -106,12 +106,16 @@ const TreeSectionNode = ({ data }: { data: TreeNodeData }) => (
 
 const TreeGroupNode = ({ data }: { data: TreeNodeData }) => (
   <button
-    className={cn('nodrag nopan flex h-7 max-w-[220px] items-center text-sm', data.collapsible && 'cursor-pointer')}
+    className={cn(
+      'nodrag nopan flex h-7 max-w-[220px] items-center gap-1.5 text-sm',
+      data.collapsible && 'cursor-pointer'
+    )}
     disabled={!data.collapsible}
     onClick={data.collapsible ? data.onToggle : undefined}
     type="button"
   >
     <Handle className={invisibleHandle} position={Position.Left} type="target" />
+    <ConnectorLogo className="size-4" fallback={Box} name={data.label as ComponentName} />
     <Text as="span" className="min-w-0 truncate" title={data.label} variant="bodyStrongMedium">
       {data.label}
     </Text>
@@ -173,8 +177,8 @@ const TreeLeafNode = ({ data }: { data: TreeNodeData }) => {
     >
       <Handle className={invisibleHandle} position={Position.Left} type="target" />
       <div className="flex items-center gap-1.5">
-        {!isPlaceholder && componentLogoMap[data.label as ComponentName] ? (
-          <ConnectorLogo className="size-4 shrink-0" name={data.label as ComponentName} />
+        {!isPlaceholder ? (
+          <ConnectorLogo className="size-4" fallback={Box} name={data.label as ComponentName} />
         ) : null}
         <Text
           as="span"