UX-1275 - RPCN template gallery (#2474)

* starting template connect work

* Allow local overrides of feature flags

* More progress

* hover states

* More over states

* Latest registry dialog component

* More tempalte work

* lots more progress

* Some dialog consistency improvements

* Fixing some grammar

* consistency

* Better tab buttons

* Improving another dialogs consistency

* Adding iceberg logo

* Latest registry tooltip

* Iceberg logo

* Dialog dont close on backdrop

* comment branch cleanup pass

* improving the config step more

* slot polish

* Secret select after creation

* Lots of topic improvements

* Bring in latest dialog improvements

* More consistency improvements

* Adding a few more logos

* latest dialog

* Updated registry components

* Use schemas for pipeline templates

* Icon improvements

* Dialog info improvements

* Dev debugger

* Improve noisy logs

* Debug menu progress

* Improve debug dialog example

* More progress on debug menu

* Improving debug dialog a bit

* Fixing connect config change

* Improve pipeline cache invalidation

* Pipeline visualizer icon sizing

* More icon usage in connect visualize panel

* Some visualization improvements

* Quick add secret improvements

* More icons

* better empty detection

* More connect page enhancements

* scroll fix

* cleanup pass

* SOme polishing

* secret and user dialog improvement

* Code cleanup pass

* Test improvements

* route tree

* Comment reduction pass

* Some more cleanup

* More polishing

* Lots more meta pipeline improvements

* Moving edit button

* more pipeline page polish

* Cleanup pass

* frontend: remove dev debugger dialog

Moved to the pz/dev-debugger-dialog-tool branch to keep this PR smaller
and more focused. Reverts the debug-helper component, connect-config
fixtures, feature-flag overrides, and their wiring in __root.tsx and
app.tsx.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Using fewer classnames

* updates from registry

* undo one registry update

* Some polishing

* Narrow some logo props

* reduce a test flake

* improving inline edit name

* reducing some lines

* confirm on pipeline stop

* confirmation dialogs improved

* lint fix

* lint fix 2

* Adjustmets from the feedback meeting 2

* lint format

* test fix

* Some of the PR feedback

* More comments from PR

* a few more comments

* Small pipeline header adjustment

* moving bang

* using label

* lint fix

* some comment reduction

* icon consistency

* test fix on icon

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: SpicyPete

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

@@ -10,38 +10,71 @@ import {
   SiNeo4j,
   SiOllama,
   SiOpenai,
+  SiSalesforce,
   SiSplunk,
   SiTrino,
 } from '@icons-pack/react-simple-icons';
 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,
   RefreshCw,
+  Regex,
+  Repeat,
+  Replace,
+  Reply,
+  Ruler,
+  Scissors,
   ScrollText,
   Server,
   Settings,
+  Share2,
+  Shield,
+  Sparkles,
   Terminal,
   Type,
+  Wand2,
   Workflow,
+  Zap,
 } from 'lucide-react';
 import type { SVGProps } from 'react';
 
@@ -68,6 +101,7 @@ import {
   GoogleDriveLogo,
   GoogleProtocolBuffersLogo,
   HadoopLogo,
+  IcebergLogo,
   InfluxDBLogo,
   JavaScriptLogo,
   JqLogo,
@@ -105,13 +139,16 @@ export const componentLogoMap = {
   custom: Settings,
   amqp_0_9: RabbitMQLogo,
   amqp_1: ApacheactivemqLogo,
+  arc: BarChart3,
   archive: Archive,
   avro: ApacheavroLogo,
   awk: GnuLogo,
   aws_bedrock_chat: AmazonWebServicesLogo,
   aws_bedrock_embeddings: AmazonWebServicesLogo,
   aws_cloudwatch: AWSCloudWatchLogo,
+  aws_cloudwatch_logs: AWSCloudWatchLogo,
   aws_dynamodb: AWSDynamoDbLogo,
+  aws_dynamodb_cdc: AWSDynamoDbLogo,
   aws_dynamodb_partiql: AWSDynamoDbLogo,
   aws_kinesis: AWSKinesisLogo,
   aws_kinesis_firehose: AWSKinesisLogo,
@@ -128,35 +165,35 @@ export const componentLogoMap = {
   beanstalkd: BeanstalkdLogo,
   benchmark: Activity,
   bloblang: RedpandaLetterLogo,
-  bounds_check: undefined,
-  branch: undefined,
-  broker: 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: undefined,
+  cyborgdb: Database,
   cypher: SiNeo4j,
   decompress: FolderOpen,
-  dedupe: undefined,
+  dedupe: Filter,
   discord: DiscordLogo,
-  drop: undefined,
-  drop_on: undefined,
-  dynamic: undefined,
+  drop: Ban,
+  drop_on: Ban,
+  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,
@@ -166,24 +203,25 @@ 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,
   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,
   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,
@@ -195,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,
@@ -229,24 +267,28 @@ export const componentLogoMap = {
   openai_transcription: SiOpenai,
   openai_translation: SiOpenai,
   opensearch: OpenSearchLogo,
-  parallel: undefined,
+  oracledb_cdc: OracleLogo,
+  otlp_grpc: OpenTelemetryLogo,
+  otlp_http: OpenTelemetryLogo,
+  parallel: Columns3,
   parquet: SiApacheparquet,
   parquet_decode: SiApacheparquet,
   parquet_encode: SiApacheparquet,
   parse_log: FileSearch,
   pg_stream: PostgreSQLLogo,
   pinecone: PineconeLogo,
+  postgres: PostgreSQLLogo,
   postgres_cdc: PostgreSQLLogo,
   processors: Cpu,
   prometheus: PrometheusLogo,
   protobuf: GoogleProtocolBuffersLogo,
   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,
@@ -260,31 +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,
-  schema_registry: undefined,
-  schema_registry_decode: undefined,
-  schema_registry_encode: undefined,
-  select_parts: undefined,
+  salesforce: SiSalesforce,
+  salesforce_cdc: SiSalesforce,
+  salesforce_graphql: SiSalesforce,
+  salesforce_sink: SiSalesforce,
+  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,
@@ -297,21 +343,25 @@ export const componentLogoMap = {
   sql_driver_snowflake: SnowflakeLogo,
   sql_driver_sqlite: MySQLLogo,
   sql_driver_trino: SiTrino,
+  sql_raw: Database,
+  sql_select: Database,
   stdin: FileInput,
   stdout: FileOutput,
   subprocess: Terminal,
-  switch: undefined,
-  sync_response: undefined,
+  switch: Replace,
+  sync_response: Reply,
   tcp: Network,
   tcp_server: Server,
   text: Type,
-  try: undefined,
+  timeplus: Database,
+  tracer: OpenTelemetryLogo,
+  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/assets/connectors/logos/iceberg-logo.tsx

@@ -0,0 +1,15 @@
+import type { CSSProperties, SVGProps } from 'react';
+
+import IcebergMark from '../iceberg.png';
+
+// Wraps the bundled raster mark with the same prop shape as the inline-SVG
+// logos so it drops into componentLogoMap unchanged. Swap for a real SVG once
+// the official brand-kit vector is available.
+export const IcebergLogo = ({ className, style }: Pick<SVGProps<SVGSVGElement>, 'className' | 'style'>) => (
+  <img
+    alt="Apache Iceberg"
+    className={className}
+    src={IcebergMark}
+    style={{ objectFit: 'contain', ...(style as CSSProperties) }}
+  />
+);

frontend/src/assets/connectors/logos/index.ts

@@ -21,6 +21,7 @@ export { GoogleCloudLogo } from './google-cloud-logo';
 export { GoogleDriveLogo } from './google-drive-logo';
 export { GoogleProtocolBuffersLogo } from './google-protocol-buffers-logo';
 export { HadoopLogo } from './hadoop-logo';
+export { IcebergLogo } from './iceberg-logo';
 export { InfluxDBLogo } from './influx-db-logo';
 export { JavaScriptLogo } from './java-script-logo';
 export { JqLogo } from './jq-logo';

frontend/src/components/constants.ts

@@ -9,6 +9,7 @@ export const FEATURE_FLAGS = {
   enableKnowledgeBaseInConsoleUi: false,
   enableRemoteMcpInConsole: false,
   enableRpcnTiles: false,
+  enableRpcnTemplateGallery: false,
   enableServerlessOnboardingWizard: false,
   enableApiKeyConfigurationAgent: false,
   enableDataplaneObservabilityServerless: false,
@@ -29,11 +30,16 @@ export const CLOUD_MANAGED_TAG_KEYS = {
   SECRET_ID: 'rp_cloud_secret_id',
 } as const;
 
-// Helper function to check if a tag key is cloud-managed
 export const isCloudManagedTagKey = (key: string): boolean =>
   Object.values(CLOUD_MANAGED_TAG_KEYS).includes(
     key as (typeof CLOUD_MANAGED_TAG_KEYS)[keyof typeof CLOUD_MANAGED_TAG_KEYS]
   );
 
 /** Returns true if the tag key is a system tag that should be hidden from users. */
 export const isSystemTag = (key: string): boolean => key.startsWith('__') || isCloudManagedTagKey(key);
+
+/** User-visible tags (system tags filtered out) as `{ key, value }` entries. */
+export const getUserTagEntries = (tags: Record<string, string>): { key: string; value: string }[] =>
+  Object.entries(tags)
+    .filter(([k]) => !isSystemTag(k))
+    .map(([key, value]) => ({ key, value }));

frontend/src/components/misc/user-preferences.tsx

@@ -60,7 +60,7 @@ export const UserPreferencesDialog: FC<{ isOpen: boolean; onClose: () => void }>
         <DialogHeader>
           <DialogTitle>User Preferences</DialogTitle>
         </DialogHeader>
-        <DialogBody>
+        <DialogBody padding="none">
           <Tabs onValueChange={(value) => setActiveTab(value as SettingsTabKeys)} value={activeTab}>
             <TabsList variant="underline">
               {tabEntries.map(([key, { name }]) => (
@@ -70,7 +70,7 @@ export const UserPreferencesDialog: FC<{ isOpen: boolean; onClose: () => void }>
               ))}
             </TabsList>
             {tabEntries.map(([key, { component: TabComponent }]) => (
-              <TabsContent key={key} value={key}>
+              <TabsContent className="p-4" key={key} value={key}>
                 <TabComponent />
               </TabsContent>
             ))}

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

@@ -62,7 +62,7 @@ export const AddConnectorDialog = ({
         </DialogHeader>
         <DialogBody>
           <ConnectTiles
-            className="px-0 pt-0"
+            className="px-0 py-0"
             components={components}
             componentTypeFilter={typeFilter}
             gridCols={3}