RPCN adjustments

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

@@ -21,18 +21,19 @@ import { PageComponent, PageInitHelper } from '../Page';
 import { ConnectorClass, ConnectorsColumn, errIcon, mr05, NotConfigured, OverviewStatisticsCard, TasksColumn, TaskState } from './helper';
 import Section from '../../misc/Section';
 import PageContent from '../../misc/PageContent';
-import { Box, DataTable, Stack, Text, Tooltip } from '@redpanda-data/ui';
+import { Badge, Box, Button, DataTable, Link, Stack, Text, Tooltip } from '@redpanda-data/ui';
 import SearchBar from '../../misc/SearchBar';
 import RpConnectPipelinesList from '../rp-connect/Pipelines.List';
 import { RedpandaConnectIntro } from '../rp-connect/RedpandaConnectIntro';
 import { Features } from '../../../state/supportedFeatures';
 import {isServerless} from '../../../config';
+import { Link as ReactRouterLink } from 'react-router-dom';
 
 @observer
 class KafkaConnectOverview extends PageComponent {
     initPage(p: PageInitHelper): void {
         p.title = 'Overview';
-        p.addBreadcrumb('Connectors', '/connect-clusters');
+        p.addBreadcrumb('Connect', '/connect-clusters');
 
         this.refreshData(true);
         appGlobal.onRefresh = () => this.refreshData(true);
@@ -55,13 +56,24 @@ class KafkaConnectOverview extends PageComponent {
         const tabs = [
             {
                 key: 'redpandaConnect',
-                title: <Box minWidth="180px">Redpanda Connect</Box>,
-                content: <TabRedpandaConnect />,
+                title: <Box minWidth="180px">Redpanda Connect <Badge ml={2}>Recommended</Badge></Box>,
+                content:
+                    <Box>
+                        <Text mb={4}>
+                            Redpanda Connect is an alternative to Kafka Connect. Choose from a growing ecosystem of readily available connectors. <Link href="https://docs.redpanda.com/redpanda-cloud/develop/connect/about/" target="_blank">Learn more.</Link>
+                        </Text>
+                        <TabRedpandaConnect />
+                    </Box>,
             },
             {
                 key: 'kafkaConnect',
                 title: <Box minWidth="180px">Kafka Connect</Box>,
-                content: <TabKafkaConnect />
+                content:
+                <Box>
+                    <Text mb={4}>
+                        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/" target="_blank">Learn more.</Link></Text>
+                    <TabKafkaConnect />
+                </Box>
             },
         ] as Tab[];
 
@@ -70,6 +82,9 @@ class KafkaConnectOverview extends PageComponent {
 
         return (
             <PageContent>
+                <Text>
+                    There are two ways to integrate your Redpanda data with data from external systems: Redpanda Connect and Kafka Connect.
+                </Text>
                 {tabs.length == 1
                     ? (typeof tabs[0].content == 'function'
                             ? tabs[0].content()

frontend/src/components/pages/rp-connect/Pipelines.Create.tsx

@@ -15,7 +15,7 @@ import { observer } from 'mobx-react';
 import { appGlobal } from '../../../state/appGlobal';
 import PageContent from '../../misc/PageContent';
 import { PageComponent, PageInitHelper } from '../Page';
-import { Box, Button, createStandaloneToast, Flex, FormField, Input } from '@redpanda-data/ui';
+import { Alert, AlertIcon, Box, Button, Text, createStandaloneToast, Flex, FormField, Input } from '@redpanda-data/ui';
 import PipelinesYamlEditor from '../../misc/PipelinesYamlEditor';
 import { pipelinesApi } from '../../../state/backendApi';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
@@ -174,6 +174,11 @@ export const PipelineEditor = observer((p: {
                         language="yaml"
                     />
                 </Flex>
+                {isKafkaConnectPipeline(p.yaml) && <Alert status="error" my={2}>
+                    <AlertIcon />
+                    <Text>
+                        This looks like a Kafka Connect configuration. For help with Redpanda Connect configurations, <ChLink target="_blank" href="https://docs.redpanda.com/redpanda-cloud/develop/connect/connect-quickstart/">see our quickstart documentation</ChLink>.</Text>
+                </Alert>}
             </Box>
         },
         {
@@ -183,3 +188,55 @@ export const PipelineEditor = observer((p: {
         },
     ]} />
 });
+
+
+
+/**
+ * Determines whether a given string represents a Kafka Connect configuration.
+ *
+ * This function first attempts to parse the input as JSON. If the parsing is successful,
+ * it checks for the presence of specific Kafka Connect-related keys commonly found in
+ * configurations, such as "connector.class", "key.converter", and "value.converter".
+ *
+ * @param {string | undefined} value - The input string to evaluate as a potential Kafka Connect configuration.
+ * @returns {boolean} - Returns `true` if the string is a valid JSON object containing
+ *                      at least a subset of Kafka Connect configuration keys; otherwise, returns `false`.
+ *
+ * @example
+ * ```typescript
+ * const configString = `{
+ *     "connector.class": "com.ibm.eventstreams.connect.mqsink.MQSinkConnector",
+ *     "key.converter": "org.apache.kafka.connect.converters.ByteArrayConverter",
+ *     "value.converter": "org.apache.kafka.connect.converters.ByteArrayConverter"
+ * }`;
+ *
+ * const result = isKafkaConnectPipeline(configString);
+ * console.log(result); // Output: true
+ * ```
+ */
+const isKafkaConnectPipeline = (value: string | undefined): boolean => {
+    if (value === undefined) {
+        return false;
+    }
+    // Attempt to parse the input string as JSON
+    let json: object;
+    try {
+        json = JSON.parse(value);
+    } catch (e) {
+        // If parsing fails, it's not a valid JSON and hence not a Kafka Connect config
+        return false;
+    }
+
+    const kafkaConfigKeys = [
+        'connector.class',
+        'key.converter',
+        'value.converter',
+        'header.converter',
+        'tasks.max.enforce',
+        'errors.log.enable',
+    ];
+
+    const matchCount = kafkaConfigKeys.filter(key => key in json).length;
+
+    return matchCount > 0;
+};

frontend/src/components/routes.tsx

@@ -280,7 +280,7 @@ export const APP_ROUTES: IRouteEntry[] = [
         routeVisibility(true, [Feature.GetQuotas], ['canListQuotas'])
     ),
 
-    MakeRoute<{}>('/connect-clusters', KafkaConnectOverview, 'Connectors', LinkIcon, true,
+    MakeRoute<{}>('/connect-clusters', KafkaConnectOverview, 'Connect', LinkIcon, true,
         () => {
             if (isServerless()) {
                 console.log('Connect clusters inside serverless checks.')