There is way too many pieces in the ui to copy/paste right now when a…

…dding a connector
PeerDB-io · Mar 11, 2024 · 31da5ee · 31da5ee
1 parent 5844ad0
commit 31da5ee
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 0 deletions.
diff --git a/ui/app/peers/create/[peerType]/handlers.ts b/ui/app/peers/create/[peerType]/handlers.ts
@@ -8,6 +8,7 @@ import { Dispatch, SetStateAction } from 'react';
 import {
   bqSchema,
   chSchema,
+  kaSchema,
   peerNameSchema,
   pgSchema,
   s3Schema,
@@ -57,6 +58,10 @@ const validateFields = (
       const s3Config = s3Schema.safeParse(config);
       if (!s3Config.success) validationErr = s3Config.error.issues[0].message;
       break;
+    case 'KAFKA':
+      const kaConfig = kaSchema.safeParse(config);
+      if (!kaConfig.success) validationErr = kaConfig.error.issues[0].message;
+      break;
     default:
       validationErr = 'Unsupported peer type ' + type;
   }

diff --git a/ui/app/peers/create/[peerType]/helpers/ka.ts b/ui/app/peers/create/[peerType]/helpers/ka.ts
@@ -0,0 +1,33 @@
+import { KafkaConfig } from '@/grpc_generated/peers';
+import {PeerSetting } from './common';
+
+export const kaSetting: PeerSetting[] = [
+  {
+    label: 'Servers',
+    stateHandler: (value, setter) => setter((curr) => ({...cur, servers: value.split(',') })),
+    tips: 'Brokers',
+    helpfulLink: 'https://pkg.go.dev/github.com/twmb/franz-go/pkg/kgo#SeedBrokers',
+  },
+  {
+    label: 'Username',
+    stateHandler: (value, setter) => setter((curr) => ({...cur, username: value })),
+  },
+  {
+    label: 'Password',
+    type: 'password',
+    stateHandler: (value, setter) => setter((curr) => ({...cur, password: value })),
+  },
+  {
+    label: 'SASL Mechanism',
+    stateHandler: (value, setter) => setter((curr) => ({...cur, sasl: value })),
+    helpfulLink: 'https://docs.redpanda.com/current/manage/security/authentication/#scram',
+  },
+];
+
+export const blankKaSetting: S3Config = {
+  servers: [],
+  username: '',
+  password: '',
+  sasl: 'SCRAM-SHA-512',
+  disableTls: false,
+};
diff --git a/ui/app/peers/create/[peerType]/page.tsx b/ui/app/peers/create/[peerType]/page.tsx
@@ -3,6 +3,7 @@ import { PeerConfig } from '@/app/dto/PeersDTO';
 import GuideForDestinationSetup from '@/app/mirrors/create/cdc/guide';
 import BigqueryForm from '@/components/PeerForms/BigqueryConfig';
 import ClickhouseForm from '@/components/PeerForms/ClickhouseConfig';
+import KafkaForm from '@/components/PeerForms/KafkaForm';
 import PostgresForm from '@/components/PeerForms/PostgresForm';
 import S3Form from '@/components/PeerForms/S3Form';
 import SnowflakeForm from '@/components/PeerForms/SnowflakeForm';
@@ -54,6 +55,8 @@ export default function CreateConfig({
         );
       case 'S3':
         return <S3Form setter={setConfig} />;
+      case 'KAFKA':
+        return <KafkaForm setter={setConfig} />;
       default:
         return <></>;
     }

diff --git a/ui/app/peers/create/[peerType]/schema.ts b/ui/app/peers/create/[peerType]/schema.ts
@@ -278,6 +278,17 @@ export const chSchema = z.object({
   region: z
     .string({ invalid_type_error: 'Region must be a string' })
     .optional(),
+  disableTls: z.boolean(),
+});
+
+export const kaSchema = z.object({
+  servers: z.array(z.string()),
+  username: z.string(),
+  password: z.string(),
+  sasl: z
+    .union([z.literal('SCRAM-SHA-256'), z.literal('SCRAM-SHA-512')])
+    .optional(),
+  disableTls: z.boolean(),
 });
 
 const urlSchema = z

diff --git a/ui/components/PeerForms/KafkaConfig.tsx b/ui/components/PeerForms/KafkaConfig.tsx
@@ -0,0 +1,77 @@
+'use client';
+import { PeerSetter } from '@/app/dto/PeersDTO';
+import { kaSetting } from '@/app/peers/create/[peerType]/helpers/ka';
+import { Label } from '@/lib/Label';
+import { RowWithRadiobutton, RowWithTextField } from '@/lib/Layout';
+import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
+import { TextField } from '@/lib/TextField';
+import { Tooltip } from '@/lib/Tooltip';
+import { useEffect, useState } from 'react';
+import { InfoPopover } from '../InfoPopover';
+
+interface KafkaProps {
+  setter: PeerSetter;
+}
+const KafkaForm = ({ setter }: KafkaProps) => {
+  return (
+    <div>
+      <Label>
+      TODO TEXT
+      </Label>
+      {kaSetting.map((setting, index) => {
+        if (displayCondition(setting.label))
+          return (
+            <RowWithTextField
+              key={index}
+              label={
+                <Label>
+                  {setting.label}{' '}
+                  {!setting.optional && (
+                    <Tooltip
+                      style={{ width: '100%' }}
+                      content={'This is a required field.'}
+                    >
+                      <Label colorName='lowContrast' colorSet='destructive'>
+                        *
+                      </Label>
+                    </Tooltip>
+                  )}
+                </Label>
+              }
+              action={
+                <div
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                  }}
+                >
+                  <TextField
+                    variant='simple'
+                    style={
+                      setting.type === 'file'
+                        ? { border: 'none', height: 'auto' }
+                        : { border: 'auto' }
+                    }
+                    type={setting.type}
+                    defaultValue={setting.default}
+                    onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                      setting.stateHandler(e.target.value, setter)
+                    }
+                  />
+                  {setting.tips && (
+                    <InfoPopover
+                      tips={setting.tips}
+                      link={setting.helpfulLink}
+                    />
+                  )}
+                </div>
+              }
+            />
+          );
+      })}
+    </div>
+  );
+};
+
+export default KafkaForm;