better create peer pages

ui/app/mirrors/create/cdc/guide.tsx

@@ -1,29 +1,39 @@
+import TitleCase from '@/app/utils/titlecase';
 import { Label } from '@/lib/Label';
 import Link from 'next/link';
 
 const GuideForDestinationSetup = ({
-  dstPeerType: peerType,
+  createPeerType: peerType,
 }: {
-  dstPeerType: string;
+  createPeerType: string;
 }) => {
   const linkForDst = () => {
-    switch (peerType) {
+    console.log(peerType);
+    switch (peerType.toUpperCase().replace(/%20/g, ' ')) {
       case 'SNOWFLAKE':
         return 'https://docs.peerdb.io/connect/snowflake';
       case 'BIGQUERY':
         return 'https://docs.peerdb.io/connect/bigquery';
+      case 'RDS POSTGRESQL':
+      case 'POSTGRESQL':
+        return 'https://docs.peerdb.io/connect/rds_postgres';
+      case 'AZURE FLEXIBLE POSTGRESQL':
+        return 'https://docs.peerdb.io/connect/azure_flexible_server_postgres';
+      case 'GOOGLE CLOUD POSTGRESQL':
+        return 'https://docs.peerdb.io/connect/cloudsql_postgres';
       default:
-        return 'https://docs.peerdb.io/';
+        return '';
     }
   };
-  if (peerType != 'SNOWFLAKE' && peerType != 'BIGQUERY') {
+  if (linkForDst() == '') {
     return <></>;
   }
   return (
     <Label variant='body' as='label' style={{ marginBottom: '1rem' }}>
       We recommend going through our{' '}
       <Link style={{ color: 'teal' }} href={linkForDst()} target='_blank'>
-        setup guide for {peerType.toLowerCase()} destinations
+        setup guide for {TitleCase(peerType.toUpperCase().replace(/%20/g, ' '))}{' '}
+        destinations
       </Link>
       .
     </Label>

ui/app/peers/create/[peerType]/page.tsx

@@ -7,6 +7,7 @@ import PostgresForm from '@/components/PeerForms/PostgresForm';
 import S3Form from '@/components/PeerForms/S3Form';
 import SnowflakeForm from '@/components/PeerForms/SnowflakeForm';
 
+import TitleCase from '@/app/utils/titlecase';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Label } from '@/lib/Label';
@@ -45,9 +46,17 @@ export default function CreateConfig({
   const [config, setConfig] = useState<PeerConfig>(blankSetting);
   const [loading, setLoading] = useState<boolean>(false);
   const configComponentMap = (dbType: string) => {
+    if (dbType.includes('POSTGRESQL')) {
+      return (
+        <PostgresForm
+          settings={postgresSetting}
+          setter={setConfig}
+          type={dbType}
+        />
+      );
+    }
+
     switch (dbType) {
-      case 'POSTGRES':
-        return <PostgresForm settings={postgresSetting} setter={setConfig} />;
       case 'SNOWFLAKE':
         return <SnowflakeForm settings={snowflakeSetting} setter={setConfig} />;
       case 'BIGQUERY':
@@ -80,11 +89,10 @@ export default function CreateConfig({
     >
       <Panel style={{ rowGap: '0.5rem' }}>
         <Label variant='title3' as='label' style={{ marginBottom: '2rem' }}>
-          Setup a new{' '}
-          {dbType.charAt(0).toUpperCase() + dbType.slice(1).toLowerCase()} peer
+          Setup a {TitleCase(dbType.toUpperCase().replace(/%20/g, ' '))} peer
         </Label>
 
-        <GuideForDestinationSetup dstPeerType={peerType} />
+        <GuideForDestinationSetup createPeerType={peerType} />
 
         <RowWithTextField
           label={

ui/app/utils/titlecase.ts

@@ -0,0 +1,12 @@
+function TitleCase(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/(?:^|\s)\S/g, function (char) {
+      return char.toUpperCase();
+    })
+    .replace(/Postgresql/g, 'PostgreSQL')
+    .replace(/Postgresql/g, 'PostgreSQL')
+    .replace(/Rds/g, 'RDS');
+}
+
+export default TitleCase;

ui/components/PeerComponent.tsx

@@ -8,6 +8,12 @@ import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 export const DBTypeToImageMapping = (peerType: DBType | string) => {
   switch (peerType) {
+    case 'AZURE FLEXIBLE POSTGRESQL':
+      return '/svgs/azurepg.svg';
+    case 'RDS POSTGRESQL':
+      return '/svgs/rds.svg';
+    case 'GOOGLE CLOUD POSTGRESQL':
+      return '/svgs/gcp.svg';
     case DBType.POSTGRES:
     case 'POSTGRES':
       return '/svgs/pg.svg';

ui/components/PeerForms/PostgresForm.tsx

@@ -18,12 +18,12 @@ import { InfoPopover } from '../InfoPopover';
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;
+  type: string;
 }
 
-export default function PostgresForm({ settings, setter }: ConfigProps) {
+export default function PostgresForm({ settings, setter, type }: ConfigProps) {
   const [showSSH, setShowSSH] = useState<boolean>(false);
   const [sshConfig, setSSHConfig] = useState<SSHConfig>(blankSSHConfig);
-
   const handleFile = (
     file: File,
     setFile: (value: string, configSetter: sshSetter) => void

ui/components/SelectSource.tsx

@@ -1,5 +1,6 @@
 'use client';
 import SelectTheme from '@/app/styles/select';
+import TitleCase from '@/app/utils/titlecase';
 import { DBType } from '@/grpc_generated/peers';
 import Image from 'next/image';
 import { Dispatch, SetStateAction } from 'react';
@@ -11,12 +12,12 @@ interface SelectSourceProps {
   setPeerType: Dispatch<SetStateAction<string>>;
 }
 
-function SourceLabel({ value }: { value: string }) {
-  const peerLogo = DBTypeToImageMapping(value);
+function SourceLabel({ value, label }: { value: string; label: string }) {
+  const peerLogo = DBTypeToImageMapping(label);
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <Image src={peerLogo} alt='peer' height={15} width={15} />
-      <div style={{ marginLeft: 10 }}>{value}</div>
+      <div style={{ marginLeft: 10 }}>{TitleCase(label)}</div>
     </div>
   );
 }
@@ -25,25 +26,31 @@ export default function SelectSource({
   peerType,
   setPeerType,
 }: SelectSourceProps) {
-  const dbTypes = Object.values(DBType)
+  let dbTypes = Object.values(DBType)
     .filter(
       (value): value is string =>
         typeof value === 'string' &&
-        (value === 'POSTGRES' ||
+        (value === 'POSTGRESQL' ||
           value === 'SNOWFLAKE' ||
           value === 'BIGQUERY' ||
           value === 'S3' ||
           value === 'CLICKHOUSE')
     )
     .map((value) => ({ label: value, value }));
 
+  dbTypes.push(
+    { value: 'POSTGRESQL', label: 'POSTGRESQL' },
+    { value: 'POSTGRESQL', label: 'RDS POSTGRESQL' },
+    { value: 'POSTGRESQL', label: 'GOOGLE CLOUD POSTGRESQL' },
+    { value: 'POSTGRESQL', label: 'AZURE FLEXIBLE POSTGRESQL' }
+  );
   return (
     <ReactSelect
-      className='w-1/2'
+      className='w-full'
       placeholder='Select a source'
       options={dbTypes}
-      defaultValue={dbTypes.find((opt) => opt.value === peerType)}
-      onChange={(val, _) => val && setPeerType(val.value)}
+      defaultValue={dbTypes.find((opt) => opt.label === peerType)}
+      onChange={(val, _) => val && setPeerType(val.label)}
       formatOptionLabel={SourceLabel}
       theme={SelectTheme}
     />