Add redpanda connect secret manager to console

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

@@ -10,14 +10,14 @@
  */
 
 import { observer, useLocalObservable } from 'mobx-react';
-import { Component } from 'react';
+import {Component, FunctionComponent} from 'react';
 import { appGlobal } from '../../../state/appGlobal';
 import { api } from '../../../state/backendApi';
 import { ClusterConnectorInfo, ClusterConnectors, ClusterConnectorTaskInfo } from '../../../state/restInterfaces';
 import { uiSettings } from '../../../state/ui';
 import { Code, DefaultSkeleton } from '../../../utils/tsxUtils';
 import Tabs, { Tab } from '../../misc/tabs/Tabs';
-import { PageComponent, PageInitHelper } from '../Page';
+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';
@@ -27,9 +27,50 @@ import RpConnectPipelinesList from '../rp-connect/Pipelines.List';
 import { RedpandaConnectIntro } from '../rp-connect/RedpandaConnectIntro';
 import { Features } from '../../../state/supportedFeatures';
 import {isServerless} from '../../../config';
+import RpConnectSecretsList from '../rp-connect/secrets/Secrets.List';
+import { useLocation } from 'react-router-dom';
+
+enum ConnectView {
+    KafkaConnect = 'kafka-connect',
+    RedpandaConnect = 'redpanda-connect',
+    RedpandaConnectSecret = 'redpanda-connect-secret',
+}
+
+/**
+ * The Redpanda Connect Secret Manager introduces a new tab in Redpanda Connect.
+ * this logic determines which tab should be opened based on the `defaultTab`
+ * query parameter in the URL.
+ */
+const getDefaultView = (defaultView: string): { initialTab: ConnectView, redpandaConnectTab: ConnectView } => {
+
+    const showPipelines = Features.pipelinesApi
+    const showKafkaTab = {initialTab: ConnectView.KafkaConnect, redpandaConnectTab: ConnectView.RedpandaConnect}
+    const showRedpandaConnectTab = {initialTab: ConnectView.RedpandaConnect, redpandaConnectTab: ConnectView.RedpandaConnect}
+    if (!showPipelines) {
+        return showKafkaTab;
+    }
+
+    switch (defaultView) {
+        case 'kafka-connect':
+            return showKafkaTab;
+        case 'redpanda-connect':
+            return showRedpandaConnectTab;
+        case 'redpanda-connect-secret':
+            return {initialTab: ConnectView.RedpandaConnect, redpandaConnectTab: ConnectView.RedpandaConnectSecret};
+        default:
+            return showRedpandaConnectTab;
+    }
+}
+
+const WrapUseSearchParamsHook: FunctionComponent<{matchedPath: string}> = (props) => {
+    const {search}= useLocation();
+    const searchParams = new URLSearchParams(search);
+    const defaultTab = searchParams.get('defaultTab') || '';
+    return <KafkaConnectOverview defaultView={defaultTab} {...props}/>
+}
 
 @observer
-class KafkaConnectOverview extends PageComponent {
+class KafkaConnectOverview extends PageComponent<{ defaultView: string }> {
     initPage(p: PageInitHelper): void {
         p.title = 'Overview';
         p.addBreadcrumb('Connect', '/connect-clusters');
@@ -50,22 +91,20 @@ class KafkaConnectOverview extends PageComponent {
     }
 
     render() {
-        const showPipelines = Features.pipelinesApi
-
         const tabs = [
             {
-                key: 'redpandaConnect',
+                key: ConnectView.RedpandaConnect,
                 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 />
+                        <TabRedpandaConnect defaultView={getDefaultView(this.props.defaultView).redpandaConnectTab}/>
                     </Box>,
             },
             {
-                key: 'kafkaConnect',
+                key: ConnectView.KafkaConnect,
                 title: <Box minWidth="180px">Kafka Connect</Box>,
                 content:
                 <Box>
@@ -77,7 +116,7 @@ class KafkaConnectOverview extends PageComponent {
         ] as Tab[];
 
         if (isServerless())
-            tabs.removeAll(x => x.key == 'kafkaConnect');
+            tabs.removeAll(x => x.key == ConnectView.KafkaConnect);
 
         return (
             <PageContent>
@@ -89,14 +128,14 @@ class KafkaConnectOverview extends PageComponent {
                             ? tabs[0].content()
                             : tabs[0].content
                     )
-                    : <Tabs tabs={tabs} defaultSelectedTabKey={showPipelines ? 'redpandaConnect' : 'kafkaConnect'} />
+                    : <Tabs tabs={tabs} defaultSelectedTabKey={getDefaultView(this.props.defaultView).initialTab} />
                 }
             </PageContent>
         );
     }
 }
 
-export default KafkaConnectOverview;
+export default WrapUseSearchParamsHook;
 
 @observer
 class TabClusters extends Component {
@@ -326,11 +365,25 @@ const TabKafkaConnect = observer((_p: {}) => {
 })
 
 
-const TabRedpandaConnect = observer((_p: {}) => {
+const TabRedpandaConnect = observer((_p: {defaultView: ConnectView}) => {
     if (!Features.pipelinesApi) // If the backend doesn't support pipelines, show the intro page
-        return <RedpandaConnectIntro />
-
-    return <RpConnectPipelinesList matchedPath="/rp-connect" />
+        return <RedpandaConnectIntro/>
+
+    const tabs = [
+        {
+            key: 'pipelines',
+            title: <Box minWidth="180px">Pipelines</Box>,
+            content: <RpConnectPipelinesList matchedPath="/rp-connect"/>,
+        },
+        {
+            key: 'secrets',
+            title: <Box minWidth="180px">Secrets</Box>,
+            content:
+                <RpConnectSecretsList matchedPath="/rp-connect/secrets"/>
+        },
+    ] as Tab[];
+
+    return <Tabs tabs={tabs} defaultSelectedTabKey={_p.defaultView === ConnectView.RedpandaConnectSecret ? 'secrets' : 'pipelines'}/>
 })
 
 export type ConnectTabKeys = 'clusters' | 'connectors' | 'tasks';

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

@@ -17,7 +17,7 @@ import PageContent from '../../misc/PageContent';
 import { PageComponent, PageInitHelper } from '../Page';
 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 {pipelinesApi, rpcnSecretManagerApi} from '../../../state/backendApi';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
 import { Link } from 'react-router-dom';
 import { Link as ChLink } from '@redpanda-data/ui';
@@ -36,7 +36,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
     @observable description = '';
     @observable editorContent = exampleContent;
     @observable isCreating = false;
-
+    @observable secrets: string[] = []
     constructor(p: any) {
         super(p);
         makeObservable(this, undefined, { autoBind: true });
@@ -48,6 +48,8 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
         p.addBreadcrumb('Create Pipeline', '');
 
         this.refreshData(true);
+        // get secrets
+        rpcnSecretManagerApi.refreshSecrets(true);
         appGlobal.onRefresh = () => this.refreshData(true);
     }
 
@@ -58,7 +60,10 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
 
     render() {
         if (!pipelinesApi.pipelines) return DefaultSkeleton;
-
+        if (rpcnSecretManagerApi.secrets) {
+            // inject secrets to editor
+            this.secrets.updateWith(rpcnSecretManagerApi.secrets.map(value => value.id))
+        }
         const alreadyExists = pipelinesApi.pipelines.any(x => x.id == this.fileName);
         const isNameEmpty = this.fileName.trim().length == 0;
 
@@ -99,7 +104,7 @@ class RpConnectPipelinesCreate extends PageComponent<{}> {
                 </Flex>
 
                 <Box mt="4">
-                    <PipelineEditor yaml={this.editorContent} onChange={x => this.editorContent = x} />
+                    <PipelineEditor yaml={this.editorContent} onChange={x => this.editorContent = x} secrets={this.secrets}/>
                 </Box>
 
                 <Flex alignItems="center" gap="4">
@@ -156,8 +161,8 @@ export default RpConnectPipelinesCreate;
 export const PipelineEditor = observer((p: {
     yaml: string,
     onChange: (newYaml: string) => void
+    secrets?: string[]
 }) => {
-
     return <Tabs tabs={[
         {
             key: 'config', title: 'Configuration',

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

@@ -16,7 +16,7 @@ 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 { pipelinesApi } from '../../../state/backendApi';
+import {pipelinesApi, rpcnSecretManagerApi} from '../../../state/backendApi';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
 import { Link } from 'react-router-dom';
 import { PipelineUpdate } from '../../../protogen/redpanda/api/dataplane/v1alpha2/pipeline_pb';
@@ -33,6 +33,7 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
     @observable description = undefined as unknown as string;
     @observable editorContent = undefined as unknown as string;
     @observable isUpdating = false;
+    @observable secrets: string[] = []
 
     constructor(p: any) {
         super(p);
@@ -47,6 +48,8 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
         p.addBreadcrumb('Edit Pipeline', `/rp-connect/${pipelineId}/edit`);
 
         this.refreshData(true);
+        // get secrets
+        rpcnSecretManagerApi.refreshSecrets(true);
         appGlobal.onRefresh = () => this.refreshData(true);
     }
 
@@ -57,7 +60,10 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
 
     render() {
         if (!pipelinesApi.pipelines) return DefaultSkeleton;
-
+        if (rpcnSecretManagerApi.secrets) {
+            // inject secrets to editor
+            this.secrets.updateWith(rpcnSecretManagerApi.secrets.map(value => value.id))
+        }
         const pipelineId = this.props.pipelineId;
         const pipeline = pipelinesApi.pipelines.first(x => x.id == pipelineId);
         if (!pipeline) return DefaultSkeleton;
@@ -104,7 +110,7 @@ class RpConnectPipelinesEdit extends PageComponent<{ pipelineId: string }> {
                 </FormField>
 
                 <Box mt="4">
-                    <PipelineEditor yaml={this.editorContent} onChange={x => this.editorContent = x} />
+                    <PipelineEditor yaml={this.editorContent} onChange={x => this.editorContent = x} secrets={this.secrets} />
                 </Box>
 
                 <Flex alignItems="center" gap="4">

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

@@ -35,6 +35,19 @@ import { HiX } from 'react-icons/hi';
 
 const { ToastContainer, toast } = createStandaloneToast();
 
+const CreatePipelineButton = () => {
+    return (<Box style={{ display: 'flex', marginBottom: '.5em' }}>
+        <Link to={'/rp-connect/create'}><Button>Create pipeline</Button></Link>
+    </Box>)
+}
+
+const EmptyPlaceholder = () => {
+    return <Flex alignItems="center" justifyContent="center" flexDirection="column" gap="4" mb="4">
+        <Image src={EmptyConnectors} />
+        <Box>You have no Redpanda Connect pipelines.</Box>
+        <CreatePipelineButton/>
+    </Flex>
+};
 
 export const PipelineStatus = observer((p: { status: Pipeline_State }) => {
     switch (p.status) {
@@ -121,17 +134,18 @@ class RpConnectPipelinesList extends PageComponent<{}> {
                     <ToastContainer />
                     {/* Pipeline List */}
 
-                    <div style={{ display: 'flex', marginBottom: '.5em' }}>
-                        <Link to={'/rp-connect/create'}><Button variant="solid" colorScheme="brand">Create pipeline</Button></Link>
-                    </div>
+                    {pipelinesApi.pipelines.length != 0 && (
+                        <Flex my={5} flexDir={'column'} gap={2}>
+                            <CreatePipelineButton/>
+                            <SearchField width="350px"
+                                         searchText={uiSettings.pipelinesList.quickSearch}
+                                         setSearchText={x => uiSettings.pipelinesList.quickSearch = x}
+                                         placeholderText="Enter search term / regex..."
+                            />
+                        </Flex>
+                    )}
+
 
-                    <Box my={5}>
-                        <SearchField width="350px"
-                            searchText={uiSettings.pipelinesList.quickSearch}
-                            setSearchText={x => uiSettings.pipelinesList.quickSearch = x}
-                            placeholderText="Enter search term / regex..."
-                        />
-                    </Box>
 
                     {(pipelinesApi.pipelines ?? []).length == 0
                         ? <EmptyPlaceholder />
@@ -226,13 +240,3 @@ class RpConnectPipelinesList extends PageComponent<{}> {
 }
 
 export default RpConnectPipelinesList;
-
-const EmptyPlaceholder = () => {
-    return <Flex alignItems="center" justifyContent="center" flexDirection="column" gap="4" mb="4">
-        <Image src={EmptyConnectors} />
-        <Box>You have no Redpanda Connect pipelines.</Box>
-        <Link to="/rp-connect/create">
-            <Button variant="solid">Create pipeline</Button>
-        </Link>
-    </Flex>
-};