From 43327060c2195f3502216757dbc33296e09fcb97 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Wed, 8 May 2024 18:20:32 +0530
Subject: [PATCH 1/2] add a doc and placeholder

---
 ui/app/peers/create/[peerType]/helpers/ch.ts | 1 +
 ui/components/PeerForms/ClickhouseConfig.tsx | 6 ++++++
 2 files changed, 7 insertions(+)

diff --git a/ui/app/peers/create/[peerType]/helpers/ch.ts b/ui/app/peers/create/[peerType]/helpers/ch.ts
index d45029a4e3..bfbd199eef 100644
--- a/ui/app/peers/create/[peerType]/helpers/ch.ts
+++ b/ui/app/peers/create/[peerType]/helpers/ch.ts
@@ -52,6 +52,7 @@ export const clickhouseSetting: PeerSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr) => ({ ...curr, s3Path: value as string })),
     tips: `This is an S3 bucket/object URL field. This bucket will be used as our intermediate stage for CDC`,
+    placeholder:'s3://<bucket-name>',
   },
   {
     label: 'Access Key ID',
diff --git a/ui/components/PeerForms/ClickhouseConfig.tsx b/ui/components/PeerForms/ClickhouseConfig.tsx
index f2ea31eb0c..8f85118520 100644
--- a/ui/components/PeerForms/ClickhouseConfig.tsx
+++ b/ui/components/PeerForms/ClickhouseConfig.tsx
@@ -10,6 +10,7 @@ import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import { useState } from 'react';
 import { InfoPopover } from '../InfoPopover';
+import Link from 'next/link';
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;
@@ -122,6 +123,10 @@ export default function ClickhouseForm({ settings, setter }: ConfigProps) {
         <br></br>
         If you want this stage to belong to you, you can configure a bucket
         below.
+        <br></br>
+        <Link style={{color:'teal', cursor:'pointer'}} target='_blank' href='https://docs.peerdb.io/connect/s3'>
+          Setting up an S3 bucket
+        </Link>
       </Label>
       <Button
         className='IconButton'
@@ -164,6 +169,7 @@ export default function ClickhouseForm({ settings, setter }: ConfigProps) {
                       handleChange(e.target.value, setting)
                     }
                     type={setting.type}
+                    placeholder={setting.placeholder}
                   />
                   {setting.tips && <InfoPopover tips={setting.tips} />}
                 </div>

From 8fed7670d4bb4c96c87a3655441189270b43a4c0 Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Wed, 8 May 2024 18:21:18 +0530
Subject: [PATCH 2/2] formatting

---
 ui/app/peers/create/[peerType]/helpers/ch.ts | 2 +-
 ui/components/PeerForms/ClickhouseConfig.tsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/ui/app/peers/create/[peerType]/helpers/ch.ts b/ui/app/peers/create/[peerType]/helpers/ch.ts
index bfbd199eef..09626d73c0 100644
--- a/ui/app/peers/create/[peerType]/helpers/ch.ts
+++ b/ui/app/peers/create/[peerType]/helpers/ch.ts
@@ -52,7 +52,7 @@ export const clickhouseSetting: PeerSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr) => ({ ...curr, s3Path: value as string })),
     tips: `This is an S3 bucket/object URL field. This bucket will be used as our intermediate stage for CDC`,
-    placeholder:'s3://<bucket-name>',
+    placeholder: 's3://<bucket-name>',
   },
   {
     label: 'Access Key ID',
diff --git a/ui/components/PeerForms/ClickhouseConfig.tsx b/ui/components/PeerForms/ClickhouseConfig.tsx
index 8f85118520..405dd9af77 100644
--- a/ui/components/PeerForms/ClickhouseConfig.tsx
+++ b/ui/components/PeerForms/ClickhouseConfig.tsx
@@ -8,9 +8,9 @@ import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
 import { Switch } from '@/lib/Switch';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
+import Link from 'next/link';
 import { useState } from 'react';
 import { InfoPopover } from '../InfoPopover';
-import Link from 'next/link';
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;
@@ -124,7 +124,11 @@ export default function ClickhouseForm({ settings, setter }: ConfigProps) {
         If you want this stage to belong to you, you can configure a bucket
         below.
         <br></br>
-        <Link style={{color:'teal', cursor:'pointer'}} target='_blank' href='https://docs.peerdb.io/connect/s3'>
+        <Link
+          style={{ color: 'teal', cursor: 'pointer' }}
+          target='_blank'
+          href='https://docs.peerdb.io/connect/s3'
+        >
           Setting up an S3 bucket
         </Link>
       </Label>