From 4316dd32a9b582c7ea7aa0c2e38f93b03d766350 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Mon, 11 Mar 2024 14:18:22 +0530
Subject: [PATCH] ui: add missing parts

---
 ui/app/peers/create/[peerType]/helpers/ka.ts |  8 +++
 ui/app/peers/create/[peerType]/schema.ts     | 18 ++++--
 ui/components/PeerForms/KafkaConfig.tsx      | 59 +++++++++++++++++++-
 3 files changed, 77 insertions(+), 8 deletions(-)

diff --git a/ui/app/peers/create/[peerType]/helpers/ka.ts b/ui/app/peers/create/[peerType]/helpers/ka.ts
index 051ef2e226..8f542a9f9b 100644
--- a/ui/app/peers/create/[peerType]/helpers/ka.ts
+++ b/ui/app/peers/create/[peerType]/helpers/ka.ts
@@ -25,9 +25,17 @@ export const kaSetting: PeerSetting[] = [
     label: 'SASL Mechanism',
     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: KafkaConfig = {
diff --git a/ui/app/peers/create/[peerType]/schema.ts b/ui/app/peers/create/[peerType]/schema.ts
index 447cd2d6fe..440a718cdb 100644
--- 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
index b318b19b09..e9acc40337 100644
--- a/ui/components/PeerForms/KafkaConfig.tsx
+++ b/ui/components/PeerForms/KafkaConfig.tsx
@@ -1,21 +1,74 @@
 '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 { RowWithTextField } from '@/lib/Layout';
+import { RowWithSelect, RowWithSwitch, RowWithTextField } from '@/lib/Layout';
+import { Switch } from '@/lib/Switch/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
+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>
       {kaSetting.map((setting, index) => {
-        return (
+        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={