From d9bdb107a7d13da1474e7d05c63495ed4af1d1f3 Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Wed, 8 May 2024 19:04:51 +0530
Subject: [PATCH] CH UI: Help for user bucket setup (#1691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adds placeholder for s3 path field
- Link to doc for setting up s3 bucket

<img width="813" alt="Screenshot 2024-05-08 at 6 20 46 PM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/b0878491-0905-4473-8471-bd77c973fe7f">
---
 ui/app/peers/create/[peerType]/helpers/ch.ts |  1 +
 ui/components/PeerForms/ClickhouseConfig.tsx | 10 ++++++++++
 2 files changed, 11 insertions(+)

diff --git a/ui/app/peers/create/[peerType]/helpers/ch.ts b/ui/app/peers/create/[peerType]/helpers/ch.ts
index d45029a4e3..09626d73c0 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..405dd9af77 100644
--- a/ui/components/PeerForms/ClickhouseConfig.tsx
+++ b/ui/components/PeerForms/ClickhouseConfig.tsx
@@ -8,6 +8,7 @@ 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';
 interface ConfigProps {
@@ -122,6 +123,14 @@ 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 +173,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>