RPCN - Support for optional fields

frontend/src/components/license/license-utils.tsx

@@ -1,5 +1,6 @@
 import { Link } from '@tanstack/react-router';
 import { Button } from 'components/redpanda-ui/components/button';
+import { docsLinks } from 'utils/docs-links';
 import { prettyMilliseconds } from 'utils/utils';
 
 import {
@@ -381,10 +382,9 @@ export const resolveEnterpriseCTALink = (
 export const getEnterpriseCTALink = (type: EnterpriseLinkType): string =>
   resolveEnterpriseCTALink(type, api.clusterOverview?.kafka?.clusterId, api.isRedpanda);
 
-export const DISABLE_SSO_DOCS_LINK = 'https://docs.redpanda.com/current/console/config/configure-console/';
+export const DISABLE_SSO_DOCS_LINK = docsLinks.selfManaged.consoleConfig;
 
-export const ENTERPRISE_FEATURES_DOCS_LINK =
-  'https://docs.redpanda.com/current/get-started/licenses/#redpanda-enterprise-edition';
+export const ENTERPRISE_FEATURES_DOCS_LINK = docsLinks.selfManaged.enterpriseEdition;
 
 export const SERVERLESS_LINK = 'https://www.redpanda.com/product/serverless';
 

frontend/src/components/pages/admin/upload-license-page.tsx

@@ -14,6 +14,7 @@ import {
 } from '@redpanda-data/ui';
 import type { FC } from 'react';
 import { useState } from 'react';
+import { docsLinks } from 'utils/docs-links';
 
 import type { SetLicenseRequest, SetLicenseResponse } from '../../../protogen/redpanda/api/console/v1alpha1/license_pb';
 import { appGlobal } from '../../../state/app-global';
@@ -167,11 +168,7 @@ const UploadLicensePageContent: FC = () => {
               our support team
             </Link>{' '}
             to request a license. To see a list of what is available with Redpanda Enterprise, check{' '}
-            <Link
-              href="https://docs.redpanda.com/current/get-started/licenses/#redpanda-enterprise-edition"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
+            <Link href={docsLinks.selfManaged.enterpriseEdition} rel="noopener noreferrer" target="_blank">
               our documentation
             </Link>
             .

frontend/src/components/pages/connect/create-connector.tsx

@@ -32,6 +32,7 @@ import {
   useToast,
 } from '@redpanda-data/ui';
 import { useEffect, useState } from 'react';
+import { docsLinks } from 'utils/docs-links';
 
 import { ConnectorBoxCard, type ConnectorPlugin, getConnectorFriendlyName } from './connector-box-card';
 import { ConfigPage } from './dynamic-ui/components';
@@ -143,10 +144,7 @@ const ConnectorType = (p: {
             <Box maxWidth="600px">
               <Text>
                 Select a managed connector. Connectors simplify importing and exporting data between Redpanda and
-                popular data sources.{' '}
-                <Link href="https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/">
-                  Learn more
-                </Link>
+                popular data sources. <Link href={docsLinks.cloud.managedConnectors}>Learn more</Link>
               </Text>
 
               <Box marginBlock="4" marginTop="8">

frontend/src/components/pages/connect/helper.tsx

@@ -34,6 +34,7 @@ import {
 } from '@redpanda-data/ui';
 import { AlertIcon, CheckCircleIcon, HourglassIcon, PauseCircleIcon, WarningIcon } from 'components/icons';
 import { type CSSProperties, type JSX, useRef, useState } from 'react';
+import { docsLinks } from 'utils/docs-links';
 
 import AmazonS3 from '../../../assets/connectors/amazon-s3.png';
 import ApacheLogo from '../../../assets/connectors/apache.svg';
@@ -100,26 +101,23 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Apache Software Foundation',
     friendlyName: 'Kafka cluster topics',
     description: 'Imports messages from another Kafka cluster, using MirrorSourceConnector',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mmaker-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mmaker-source-connector'),
   } as const,
   {
     classNamePrefix: 'org.apache.kafka.connect.mirror.MirrorCheckpointConnector',
     logo: <img alt="Apache Software Foundation logo" className="connectorLogo" src={ApacheLogo} />,
     author: 'Apache Software Foundation',
     friendlyName: 'Kafka cluster offsets',
     description: 'Imports consumer group offsets from another Kafka cluster, using MirrorCheckpointConnector',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mmaker-checkpoint-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mmaker-checkpoint-connector'),
   } as const,
   {
     classNamePrefix: 'org.apache.kafka.connect.mirror.MirrorHeartbeatConnector',
     logo: <img alt="Apache Software Foundation logo" className="connectorLogo" src={ApacheLogo} />,
     author: 'Apache Software Foundation',
     friendlyName: 'Heartbeat',
     description: 'Generates heartbeat messages to local heartbeat topic',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mmaker-heartbeat-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mmaker-heartbeat-connector'),
   } as const,
   // Confluent Connectors
   {
@@ -175,8 +173,7 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Debezium',
     friendlyName: 'MySQL (Debezium)',
     description: 'Imports a stream of changes from MySQL, Amazon RDS and Amazon Aurora',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mysql-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mysql-source-connector'),
   } as const,
   {
     classNamePrefix: 'io.debezium.connector.mongodb.',
@@ -189,17 +186,15 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Debezium',
     friendlyName: 'PostgreSQL (Debezium)',
     description: 'Imports a stream of changes from PostgreSQL',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-postgresql-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-postgresql-connector'),
   } as const,
   {
     classNamePrefix: 'io.debezium.connector.sqlserver.',
     logo: <img alt="Microsoft SQL Server logo" className="connectorLogo" src={MsSqlLogo} />,
     author: 'Debezium',
     friendlyName: 'SQL Server (Debezium)',
     description: 'Imports a stream of changes from Microsoft SQL Server',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-sqlserver-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-sqlserver-connector'),
   } as const,
   {
     classNamePrefix: 'io.debezium.connector.cassandra.',
@@ -219,35 +214,31 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Redpanda',
     friendlyName: 'S3',
     description: 'Exports messages to files in S3 buckets',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-s3-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-s3-sink-connector'),
   } as const,
   {
     classNamePrefix: 'com.redpanda.kafka.connect.gcs.',
     logo: <img alt="Google Cloud Storage logo" className="connectorLogo" src={GoogleCloudStorageLogo} />,
     author: 'Redpanda',
     friendlyName: 'Google Cloud Storage',
     description: 'Exports messages to files in Google Cloud Storage',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-gcs-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-gcs-connector'),
   } as const,
   {
     classNamePrefix: 'com.redpanda.kafka.connect.jdbc.JdbcSourceConnector',
     logo: <img alt="Redpanda logo" className="connectorLogo" src={RedpandaLogo} />,
     author: 'Redpanda',
     friendlyName: 'JDBC',
     description: 'Imports batches of rows from MySQL, PostgreSQL, SQLite and SQL Server',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-jdbc-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-jdbc-source-connector'),
   } as const,
   {
     classNamePrefix: 'com.redpanda.kafka.connect.jdbc.JdbcSinkConnector',
     logo: <img alt="Redpanda logo" className="connectorLogo" src={RedpandaLogo} />,
     author: 'Redpanda',
     friendlyName: 'JDBC',
     description: 'Exports messages to tables in MySQL, PostgreSQL, SQLite and SQL Server',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-jdbc-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-jdbc-sink-connector'),
   } as const,
 
   // Stream Reactor / Lenses
@@ -264,8 +255,7 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'WePay',
     friendlyName: 'Google BigQuery',
     description: 'Exports messages to Google BigQuery tables',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-gcp-bigquery-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-gcp-bigquery-connector'),
   } as const,
 
   // Snowflake Connectors
@@ -275,8 +265,7 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Snowflake',
     friendlyName: 'Snowflake',
     description: 'Exports messages to Snowflake tables',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-snowflake-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-snowflake-connector'),
   } as const,
 
   // MongoDB Connectors
@@ -286,17 +275,15 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'MongoDB',
     friendlyName: 'MongoDB',
     description: 'Imports collections from MongoDB',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mongodb-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mongodb-source-connector'),
   } as const,
   {
     classNamePrefix: 'com.mongodb.kafka.connect.MongoSinkConnector',
     logo: <img alt="MongoDB logo" className="connectorLogo" src={MongoDBLogo} />,
     author: 'MongoDB',
     friendlyName: 'MongoDB',
     description: 'Exports messages to MongoDB collections',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-mongodb-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-mongodb-sink-connector'),
   } as const,
 
   // Iceberg Connectors
@@ -306,8 +293,7 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Tabular',
     friendlyName: 'Iceberg',
     description: 'Exports messages to Iceberg tables',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-iceberg-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectorGuide('create-iceberg-sink-connector'),
   } as const,
 
   // JMS Connectors
@@ -317,17 +303,15 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'MacroNova',
     friendlyName: 'JMS',
     description: 'Exports messages to JMS queue',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-jms-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectors,
   } as const,
   {
     classNamePrefix: 'io.macronova.kafka.connect.jms.JmsSourceConnector',
     logo: <img alt="Redpanda Logo" className="connectorLogo" src={RedpandaLogo} />,
     author: 'MacroNova',
     friendlyName: 'JMS',
     description: 'Imports messages from JMS queue',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-jms-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectors,
   } as const,
 
   // IBM MQ Connectors
@@ -337,17 +321,15 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'IBM Messaging',
     friendlyName: 'IBM MQ',
     description: 'Exports messages to IBM MQ queue',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-ibmmq-sink-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectors,
   } as const,
   {
     classNamePrefix: 'com.ibm.eventstreams.connect.mqsource.MQSourceConnector',
     logo: <img alt="IBM MQ Logo" className="connectorLogo" src={IbmMqLogo} />,
     author: 'IBM Messaging',
     friendlyName: 'IBM MQ',
     description: 'Imports messages from IBM MQ queue',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-ibmmq-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectors,
   } as const,
 
   // Community Connector
@@ -367,8 +349,7 @@ const connectorMetadata: ConnectorMetadata[] = [
     author: 'Cástor Rodríguez',
     friendlyName: 'HTTP',
     description: 'Imports data from HTTP services as batches or increments',
-    learnMoreLink:
-      'https://docs.redpanda.com/docs/deploy/deployment-option/cloud/managed-connectors/create-http-source-connector/',
+    learnMoreLink: docsLinks.cloud.managedConnectors,
   } as const,
 
   // Fallbacks with a very generous classname prefix (usually just the maintainers' logo)
@@ -553,7 +534,7 @@ export function NotConfigured() {
             Setup the connection details to your Kafka Connect cluster in your Redpanda Console config, to view and
             control all your connectors and tasks.
           </Text>
-          <a href="https://docs.redpanda.com/docs/manage/console/" rel="noopener noreferrer" target="_blank">
+          <a href={docsLinks.selfManaged.console} rel="noopener noreferrer" target="_blank">
             <Button variant="solid">Redpanda Console Config Documentation</Button>
           </a>
         </VStack>

frontend/src/components/pages/connect/overview.tsx

@@ -17,6 +17,7 @@ import { Link } from 'components/redpanda-ui/components/typography';
 import { WaitingRedpanda } from 'components/redpanda-ui/components/waiting-redpanda';
 import { Component, type FunctionComponent, useCallback, useMemo, useState } from 'react';
 import { useKafkaConnectConnectorsQuery } from 'react-query/api/kafka-connect';
+import { docsLinks } from 'utils/docs-links';
 
 import {
   ConnectorClass,
@@ -163,7 +164,11 @@ class KafkaConnectOverview extends PageComponent<{
               {this.props.isKafkaConnectEnabled
                 ? 'Redpanda Connect is an alternative to Kafka Connect. Choose from a growing ecosystem of readily available connectors.'
                 : 'Redpanda Connect is a data streaming service for building scalable, high-performance data pipelines that drive real-time analytics and actionable business insights. Integrate data across systems with hundreds of prebuilt connectors, change data capture (CDC) capabilities, and YAML-configurable pipelines.'}{' '}
-              <Link href="https://docs.redpanda.com/redpanda-connect/home/" rel="noopener noreferrer" target="_blank">
+              <Link
+                href={Features.pipelinesApi ? docsLinks.cloud.connectAbout : docsLinks.connect.home}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
                 Learn more
               </Link>
             </div>
@@ -179,11 +184,7 @@ class KafkaConnectOverview extends PageComponent<{
             <div className="text-body">
               Kafka Connect is our set of managed connectors. These provide a way to integrate your Redpanda data with
               different data systems.{' '}
-              <Link
-                href="https://docs.redpanda.com/redpanda-cloud/develop/managed-connectors/"
-                rel="noopener noreferrer"
-                target="_blank"
-              >
+              <Link href={docsLinks.cloud.managedConnectors} rel="noopener noreferrer" target="_blank">
                 Learn more.
               </Link>
             </div>

frontend/src/components/pages/mcp-servers/remote-mcp-component-type-description.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'components/redpanda-ui/components/typography';
 import { ExternalLink } from 'lucide-react';
 import { MCPServer_Tool_ComponentType } from 'protogen/redpanda/api/dataplane/v1alpha3/mcp_pb';
+import { docsLinks } from 'utils/docs-links';
 
 type RemoteMCPComponentTypeDescriptionProps = {
   componentType?: MCPServer_Tool_ComponentType;
@@ -23,7 +24,7 @@ const getComponentTypeDescription = (componentType: MCPServer_Tool_ComponentType
 };
 
 const getComponentTypeDocumentationUrl = (componentType: MCPServer_Tool_ComponentType) => {
-  const url = 'https://docs.redpanda.com/redpanda-connect/components/';
+  const url = docsLinks.cloud.connectComponents;
   switch (componentType) {
     case MCPServer_Tool_ComponentType.PROCESSOR:
       return `${url}/processors/about/`;

frontend/src/components/pages/overview/overview.tsx

@@ -10,6 +10,7 @@
  */
 
 import { isFeatureFlagEnabled } from 'config';
+import { docsLinks } from 'utils/docs-links';
 
 import { appGlobal } from '../../../state/app-global';
 import { api } from '../../../state/backend-api';
@@ -242,9 +243,9 @@ class Overview extends PageComponent {
                 {Boolean(api.clusterOverview?.kafka?.distribution) && <NurturePanel />}
                 <hr />
                 <div className="mt-4 flex flex-row items-center gap-2 font-sm text-gray-600">
-                  <a href="https://docs.redpanda.com/docs/home/">Documentation</a>
+                  <a href={docsLinks.selfManaged.home}>Documentation</a>
                   <span className="mx-2 text-gray-300">|</span>
-                  <a href="https://docs.redpanda.com/docs/get-started/rpk-install/">CLI tools</a>
+                  <a href={docsLinks.selfManaged.rpkInstall}>CLI tools</a>
                 </div>
               </Section>
             </GridItem>

frontend/src/components/pages/quotas/quotas-list.tsx

@@ -39,6 +39,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from 'compon
 import { Link } from 'components/redpanda-ui/components/typography';
 import { ArrowDown, ArrowUp, ChevronsUpDown, InfoIcon, TriangleAlertIcon } from 'lucide-react';
 import { useMemo } from 'react';
+import { docsLinks } from 'utils/docs-links';
 
 import {
   clampPageIndex,
@@ -258,7 +259,7 @@ const QuotasList = () => {
               </EmptyDescription>
             </EmptyHeader>
             <EmptyContent>
-              <Link href="https://docs.redpanda.com/docs/manage/console/" rel="noopener noreferrer" target="_blank">
+              <Link href={docsLinks.selfManaged.console} rel="noopener noreferrer" target="_blank">
                 <Button variant="primary">Redpanda Console documentation for roles and permissions</Button>
               </Link>
             </EmptyContent>

frontend/src/components/pages/rp-connect/onboarding/add-topic-step.tsx

@@ -291,8 +291,15 @@ export const AddTopicStep = forwardRef<BaseStepRef<AddTopicFormData>, AddTopicSt
         <div className={inline ? 'flex flex-col gap-5' : 'mt-4 max-w-2xl space-y-6'}>
           <div className="flex flex-col gap-2">
             <FormLabel>Topic name</FormLabel>
+            {/* Only offer what the mode can actually do — "create a new topic" with no input reads as broken. */}
             <FormDescription>
-              Choose an existing topic to read or write data from, or create a new topic.
+              {
+                {
+                  new: 'Enter a name for the new topic.',
+                  existing: 'Choose an existing topic to read or write data from.',
+                  both: 'Choose an existing topic to read or write data from, or create a new topic.',
+                }[selectionMode]
+              }
             </FormDescription>
             <div className="flex flex-col items-start gap-2">
               {selectionMode === 'both' && (