CH UI: Help for user bucket setup (#1691)

- 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

@@ -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',

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>