cleanup UI, add missing parts

PeerDB-io · Mar 11, 2024 · 0416134 · 0416134
1 parent deb7189
commit 0416134
Show file tree

Hide file tree

Showing 6 changed files with 148 additions and 72 deletions.
diff --git a/ui/app/api/peers/route.ts b/ui/app/api/peers/route.ts
@@ -10,6 +10,7 @@ import {
   BigqueryConfig,
   ClickhouseConfig,
   DBType,
+  KafkaConfig,
   Peer,
   PostgresConfig,
   S3Config,
@@ -63,6 +64,12 @@ const constructPeer = (
         type: DBType.S3,
         s3Config: config as S3Config,
       };
+    case 'KAFKA':
+      return {
+        name,
+        type: DBType.KAFKA,
+        kafkaConfig: config as KafkaConfig,
+      };
     default:
       return;
   }

diff --git a/ui/app/dto/PeersDTO.ts b/ui/app/dto/PeersDTO.ts
@@ -1,6 +1,7 @@
 import {
   BigqueryConfig,
   ClickhouseConfig,
+  KafkaConfig,
   PostgresConfig,
   S3Config,
   SnowflakeConfig,
@@ -43,7 +44,8 @@ export type PeerConfig =
   | SnowflakeConfig
   | BigqueryConfig
   | ClickhouseConfig
-  | S3Config;
+  | S3Config
+  | KafkaConfig;
 export type CatalogPeer = {
   id: number;
   name: string;

diff --git a/ui/app/peers/create/[peerType]/helpers/ka.ts b/ui/app/peers/create/[peerType]/helpers/ka.ts
@@ -1,30 +1,44 @@
 import { KafkaConfig } from '@/grpc_generated/peers';
-import {PeerSetting } from './common';
+import { PeerSetting } from './common';
 
 export const kaSetting: PeerSetting[] = [
   {
     label: 'Servers',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, servers: value.split(',') })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, servers: (value as string).split(',') })),
     tips: 'Brokers',
-    helpfulLink: 'https://pkg.go.dev/github.com/twmb/franz-go/pkg/kgo#SeedBrokers',
+    helpfulLink:
+      'https://pkg.go.dev/github.com/twmb/franz-go/pkg/kgo#SeedBrokers',
   },
   {
     label: 'Username',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, username: value })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, username: value as string })),
   },
   {
     label: 'Password',
     type: 'password',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, password: value })),
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, password: value as string })),
   },
   {
     label: 'SASL Mechanism',
-    stateHandler: (value, setter) => setter((curr) => ({...cur, sasl: value })),
-    helpfulLink: 'https://docs.redpanda.com/current/manage/security/authentication/#scram',
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, sasl: value as string })),
+    type: 'select',
+    helpfulLink:
+      'https://docs.redpanda.com/current/manage/security/authentication/#scram',
+  },
+  {
+    label: 'Disable TLS?',
+    stateHandler: (value, setter) =>
+      setter((curr) => ({ ...curr, disableTls: value as boolean })),
+    type: 'switch',
+    tips: 'If you are using a non-TLS connection for Kafka server, check this box.',
   },
 ];
 
-export const blankKaSetting: S3Config = {
+export const blankKaSetting: KafkaConfig = {
   servers: [],
   username: '',
   password: '',

diff --git a/ui/app/peers/create/[peerType]/page.tsx b/ui/app/peers/create/[peerType]/page.tsx
@@ -3,7 +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 KafkaForm from '@/components/PeerForms/KafkaConfig';
 import PostgresForm from '@/components/PeerForms/PostgresForm';
 import S3Form from '@/components/PeerForms/S3Form';
 import SnowflakeForm from '@/components/PeerForms/SnowflakeForm';

diff --git a/ui/app/peers/create/[peerType]/schema.ts b/ui/app/peers/create/[peerType]/schema.ts
@@ -282,13 +282,21 @@ export const chSchema = z.object({
 });
 
 export const kaSchema = z.object({
-  servers: z.array(z.string()),
-  username: z.string(),
-  password: z.string(),
+  servers: z.array(z.string()).min(1, { message: 'Atleast 1 server required' }),
+  username: z
+    .string({ required_error: 'Username is required' })
+    .min(1, { message: 'Username cannot be empty' }),
+  password: z
+    .string({ required_error: 'Password is required' })
+    .min(1, { message: 'Password cannot be empty' }),
   sasl: z
-    .union([z.literal('SCRAM-SHA-256'), z.literal('SCRAM-SHA-512')])
+    .union([z.literal('SCRAM-SHA-256'), z.literal('SCRAM-SHA-512')], {
+      errorMap: () => ({
+        message: 'Either SCRAM-SHA-256 or SCRAM-SHA-512 is required.',
+      }),
+    })
     .optional(),
-  disableTls: z.boolean(),
+  disableTls: z.boolean().optional(),
 });
 
 const urlSchema = z

diff --git a/ui/components/PeerForms/KafkaConfig.tsx b/ui/components/PeerForms/KafkaConfig.tsx
@@ -1,74 +1,119 @@
 'use client';
 import { PeerSetter } from '@/app/dto/PeersDTO';
 import { kaSetting } from '@/app/peers/create/[peerType]/helpers/ka';
+import SelectTheme from '@/app/styles/select';
 import { Label } from '@/lib/Label';
-import { RowWithRadiobutton, RowWithTextField } from '@/lib/Layout';
-import { RadioButton, RadioButtonGroup } from '@/lib/RadioButtonGroup';
+import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
+import { Switch } from '@/lib/Switch/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
-import { useEffect, useState } from 'react';
+import ReactSelect from 'react-select';
 import { InfoPopover } from '../InfoPopover';
-
 interface KafkaProps {
   setter: PeerSetter;
 }
+
+const saslOptions = [
+  { value: 'SCRAM-SHA-256', label: 'SCRAM-SHA-256' },
+  { value: 'SCRAM-SHA-512', label: 'SCRAM-SHA-512' },
+];
+
 const KafkaForm = ({ setter }: KafkaProps) => {
   return (
     <div>
-      <Label>
-      TODO TEXT
-      </Label>
+      <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>
-              }
-            />
-          );
+        return setting.type === 'switch' ? (
+          <RowWithSwitch
+            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', alignItems: 'center' }}>
+                <Switch
+                  onCheckedChange={(state: boolean) =>
+                    setting.stateHandler(state, setter)
+                  }
+                />
+                {setting.tips && (
+                  <InfoPopover tips={setting.tips} link={setting.helpfulLink} />
+                )}
+              </div>
+            }
+          />
+        ) : setting.type === 'select' ? (
+          <RowWithSelect
+            label={<Label>SASL Mechanism</Label>}
+            action={
+              <ReactSelect
+                key={index}
+                placeholder='Select a mechanism'
+                onChange={(val) =>
+                  val && setting.stateHandler(val.value, setter)
+                }
+                options={saslOptions}
+                theme={SelectTheme}
+              />
+            }
+          />
+        ) : (
+          <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>
   );