More icons

Author: SpicyPete

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

@@ -18,34 +18,63 @@ import { RedpandaUILetterIcon } from 'components/redpanda-ui/components/icons';
 import {
   Activity,
   Archive,
+  ArrowRightLeft,
   Ban,
   BarChart3,
+  Bomb,
+  BookOpen,
+  Boxes,
+  Braces,
   CircleSlash,
+  Columns3,
   Command,
   Cpu,
   Database,
+  Eraser,
   File,
   FileArchive,
   FileInput,
+  FileJson,
   FileOutput,
   FileSearch,
   FileSpreadsheet,
   FileText,
+  Filter,
   Folder,
   FolderOpen,
+  FolderUp,
   GitBranch,
+  GitFork,
   Globe,
+  HardDrive,
   Layers,
+  LifeBuoy,
+  ListOrdered,
+  MemoryStick,
+  Moon,
+  MousePointer,
   Network,
   Package,
+  PlusSquare,
+  Radio,
+  Regex,
   RefreshCw,
+  Repeat,
+  Replace,
+  Reply,
+  Ruler,
+  Scissors,
   ScrollText,
   Server,
   Settings,
   Share2,
+  Shield,
+  Sparkles,
   Terminal,
   Type,
+  Wand2,
   Workflow,
+  Zap,
 } from 'lucide-react';
 import type { SVGProps } from 'react';
 
@@ -136,35 +165,35 @@ export const componentLogoMap = {
   beanstalkd: BeanstalkdLogo,
   benchmark: Activity,
   bloblang: RedpandaLetterLogo,
-  bounds_check: undefined,
-  branch: undefined,
+  bounds_check: Ruler,
+  branch: GitFork,
   broker: Share2,
   cache: Database,
   cached: Database,
   cassandra: CassandraLogo,
-  catch: undefined,
-  chunker: undefined,
+  catch: Shield,
+  chunker: Scissors,
   cockroachdb_changefeed: SiCockroachlabs,
   cohere_chat: CohereLogo,
   cohere_embeddings: CohereLogo,
   cohere_rerank: CohereLogo,
   command: Command,
   compress: FileArchive,
   couchbase: CouchbaseLogo,
-  crash: undefined,
+  crash: Bomb,
   csv: FileSpreadsheet,
   cyborgdb: Database,
   cypher: SiNeo4j,
   decompress: FolderOpen,
-  dedupe: undefined,
+  dedupe: Filter,
   discord: DiscordLogo,
   drop: Ban,
   drop_on: Ban,
-  dynamic: undefined,
+  dynamic: Zap,
   elasticsearch_v8: ElasticsearchLogo,
-  fallback: undefined,
+  fallback: LifeBuoy,
   file: File,
-  for_each: undefined,
+  for_each: Repeat,
   gateway: Network,
   gcp_bigquery: GoogleCloudLogo,
   gcp_bigquery_select: GoogleCloudLogo,
@@ -174,7 +203,7 @@ export const componentLogoMap = {
   gcp_spanner_cdc: GoogleCloudLogo,
   gcp_vertex_ai_chat: GoogleCloudLogo,
   gcp_vertex_ai_embeddings: GoogleCloudLogo,
-  generate: undefined,
+  generate: Sparkles,
   git: GitBranch,
   google_drive_download: GoogleDriveLogo,
   google_drive_list_labels: GoogleDriveLogo,
@@ -188,11 +217,11 @@ export const componentLogoMap = {
   http_server: Server,
   iceberg: IcebergLogo,
   influxdb: InfluxDBLogo,
-  inproc: undefined,
-  insert_part: undefined,
+  inproc: Cpu,
+  insert_part: PlusSquare,
   jaeger: SiJaeger,
   javascript: JavaScriptLogo,
-  jmespath: undefined,
+  jmespath: Braces,
   jq: JqLogo,
   json_api: JSONLogo,
   json_array: JSONLogo,
@@ -204,18 +233,18 @@ export const componentLogoMap = {
   local: Folder,
   log: ScrollText,
   logger: ScrollText,
-  lru: undefined,
-  mapping: undefined,
+  lru: HardDrive,
+  mapping: ArrowRightLeft,
   memcached: MemcachedLogo,
-  memory: undefined,
+  memory: MemoryStick,
   metric: BarChart3,
   microsoft_sql_server_cdc: MicrosoftsqlserverLogo,
   mongodb: MongoDBLogo,
   mongodb_cdc: MongoDBLogo,
   mqtt: SiMqtt,
-  msgpack: undefined,
-  multilevel: undefined,
-  mutation: undefined,
+  msgpack: Package,
+  multilevel: Boxes,
+  mutation: Wand2,
   mysql_cdc: MySQLLogo,
   nanomsg: NanomsgLogo,
   nats: NatsLogo,
@@ -241,7 +270,7 @@ export const componentLogoMap = {
   oracledb_cdc: OracleLogo,
   otlp_grpc: OpenTelemetryLogo,
   otlp_http: OpenTelemetryLogo,
-  parallel: undefined,
+  parallel: Columns3,
   parquet: SiApacheparquet,
   parquet_decode: SiApacheparquet,
   parquet_encode: SiApacheparquet,
@@ -256,10 +285,10 @@ export const componentLogoMap = {
   pulsar: SiApachepulsar,
   pusher: PusherLogo,
   qdrant: QdrantLogo,
-  questdb: undefined,
+  questdb: Database,
   rate_limit: Activity,
-  re_match: undefined,
-  read_until: undefined,
+  re_match: Regex,
+  read_until: BookOpen,
   redis: RedisLogo,
   redis_hash: RedisLogo,
   redis_list: RedisLogo,
@@ -273,35 +302,35 @@ export const componentLogoMap = {
   redpanda_migrator: RedpandaLetterLogo,
   redpanda_migrator_bundle: RedpandaLetterLogo,
   redpanda_migrator_offsets: RedpandaLetterLogo,
-  reject: undefined,
-  reject_errored: undefined,
+  reject: Ban,
+  reject_errored: Ban,
   resource: Package,
   retry: RefreshCw,
   ristretto: SiDgraph,
   salesforce: SiSalesforce,
   salesforce_cdc: SiSalesforce,
   salesforce_graphql: SiSalesforce,
   salesforce_sink: SiSalesforce,
-  schema_registry: undefined,
-  schema_registry_decode: undefined,
-  schema_registry_encode: undefined,
-  select_parts: undefined,
+  schema_registry: FileJson,
+  schema_registry_decode: FileJson,
+  schema_registry_encode: FileJson,
+  select_parts: MousePointer,
   sentry_capture: SentryLogo,
-  sequence: undefined,
-  sftp: undefined,
-  skip_bom: undefined,
+  sequence: ListOrdered,
+  sftp: FolderUp,
+  skip_bom: Eraser,
   slack: SlackLogo,
   slack_post: SlackLogo,
   slack_reaction: SlackLogo,
   slack_thread: SlackLogo,
   slack_users: SlackLogo,
-  sleep: undefined,
+  sleep: Moon,
   snowflake_put: SnowflakeLogo,
   snowflake_streaming: SnowflakeLogo,
   socket: Network,
   socket_server: Server,
   spicedb_watch: AuthzedLogo,
-  split: undefined,
+  split: Scissors,
   splunk: SiSplunk,
   splunk_hec: SiSplunk,
   sql: Database,
@@ -319,20 +348,20 @@ export const componentLogoMap = {
   stdin: FileInput,
   stdout: FileOutput,
   subprocess: Terminal,
-  switch: undefined,
-  sync_response: undefined,
+  switch: Replace,
+  sync_response: Reply,
   tcp: Network,
   tcp_server: Server,
   text: Type,
   timeplus: Database,
   tracer: OpenTelemetryLogo,
-  try: undefined,
+  try: Shield,
   unarchive: FolderOpen,
   websocket: WebSocketLogo,
-  while: undefined,
+  while: Repeat,
   workflow: Workflow,
   xml: XmlLogo,
-  zmq4: undefined,
+  zmq4: Radio,
 } as const;
 
 export type ComponentName = keyof typeof componentLogoMap;

frontend/src/components/pages/rp-connect/onboarding/connect-tiles.tsx

@@ -376,7 +376,7 @@ export const ConnectTiles = memo(
 
               <div className="relative">
                 <div
-                  className={cn('max-h-[50vh] min-h-[400px] overflow-y-auto py-4', tileWrapperClassName)}
+                  className={cn('max-h-[50vh] min-h-100 overflow-y-auto py-4', tileWrapperClassName)}
                   onScroll={checkScrollable}
                   ref={scrollContainerRef}
                 >

frontend/src/components/pages/rp-connect/pipeline/list.tsx

@@ -22,7 +22,7 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { type ComponentName, componentLogoMap } from 'assets/connectors/component-logo-map';
+import type { ComponentName } from 'assets/connectors/component-logo-map';
 import { isSystemTag } from 'components/constants';
 import { Badge } from 'components/redpanda-ui/components/badge';
 import { BadgeGroup } from 'components/redpanda-ui/components/badge-group';
@@ -49,7 +49,7 @@ import { cn } from 'components/redpanda-ui/lib/utils';
 import { DeleteResourceAlertDialog, DeleteResourceMenuItem } from 'components/ui/delete-resource-alert-dialog';
 import { PIPELINE_STATE_OPTIONS, STARTABLE_STATES, STOPPABLE_STATES } from 'components/ui/pipeline/constants';
 import { isEmbedded, isFeatureFlagEnabled } from 'config';
-import { AlertCircle, MoreHorizontal } from 'lucide-react';
+import { AlertCircle, Box, MoreHorizontal } from 'lucide-react';
 import {
   DeletePipelineRequestSchema,
   StartPipelineRequestSchema,
@@ -318,14 +318,12 @@ type CreateColumnsOptions = {
   isDeletingPipeline: boolean;
 };
 
-// Renders a connector-name badge with its service logo when one is registered
-// in `componentLogoMap`. Names without a mapping (custom processors, niche
-// connectors) just show the text — the badge layout stays identical.
+// Renders a connector-name badge with its service logo; falls back to a
+// generic Box icon when no specific logo is registered so badge layout is
+// consistent across all components.
 const ComponentBadge = ({ name }: { name: string }) => (
   <Badge variant="neutral-inverted">
-    {componentLogoMap[name as ComponentName] ? (
-      <ConnectorLogo className="size-3.5 shrink-0" name={name as ComponentName} />
-    ) : null}
+    <ConnectorLogo className="size-3.5" fallback={Box} name={name as ComponentName} />
     {name}
   </Badge>
 );