From e3eca4f26da87c6c74203d84dd1b6e5a7feb7041 Mon Sep 17 00:00:00 2001
From: Evis Drenova <80707987+evisdrenova@users.noreply.github.com>
Date: Thu, 16 Nov 2023 17:55:12 -0800
Subject: [PATCH] NEOS-337: postgres connection name validation (#603)

---
 .../is-connection-name-available/route.ts     |  21 ++
 .../[id]/components/PostgresForm.tsx          | 150 +++++++++++---
 .../new/connection/postgres/PostgresForm.tsx  | 184 +++++++++++++++---
 frontend/app/new/connection/postgres/page.tsx |   4 +-
 frontend/components/FormError.tsx             |   9 +
 frontend/components/ui/alert.tsx              |   3 +-
 frontend/yup-validations/connections.ts       |  10 -
 7 files changed, 319 insertions(+), 62 deletions(-)
 create mode 100644 frontend/app/api/connections/is-connection-name-available/route.ts
 create mode 100644 frontend/components/FormError.tsx

diff --git a/frontend/app/api/connections/is-connection-name-available/route.ts b/frontend/app/api/connections/is-connection-name-available/route.ts
new file mode 100644
index 0000000000..b385682ddf
--- /dev/null
+++ b/frontend/app/api/connections/is-connection-name-available/route.ts
@@ -0,0 +1,21 @@
+import { withNeosyncContext } from '@/api-only/neosync-context';
+import { IsConnectionNameAvailableRequest } from '@/neosync-api-client/mgmt/v1alpha1/connection_pb';
+import { RequestContext } from '@/shared';
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function GET(
+  req: NextRequest,
+  _: RequestContext
+): Promise<NextResponse> {
+  const { searchParams } = new URL(req.url);
+  const name = searchParams.get('connectionName') ?? '';
+  const accountId = searchParams.get('accountId') ?? '';
+  return withNeosyncContext(async (ctx) => {
+    return ctx.connectionClient.isConnectionNameAvailable(
+      new IsConnectionNameAvailableRequest({
+        connectionName: name,
+        accountId: accountId,
+      })
+    );
+  })(req);
+}
diff --git a/frontend/app/connections/[id]/components/PostgresForm.tsx b/frontend/app/connections/[id]/components/PostgresForm.tsx
index 3c2de823ad..c96a1ca1cc 100644
--- a/frontend/app/connections/[id]/components/PostgresForm.tsx
+++ b/frontend/app/connections/[id]/components/PostgresForm.tsx
@@ -1,4 +1,10 @@
 'use client';
+import { isConnectionNameAvailable } from '@/app/new/connection/postgres/PostgresForm';
+import ButtonText from '@/components/ButtonText';
+import FormError from '@/components/FormError';
+import Spinner from '@/components/Spinner';
+import RequiredLabel from '@/components/labels/RequiredLabel';
+import { getAccount } from '@/components/providers/account-provider';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {
@@ -30,12 +36,47 @@ import { SSL_MODES } from '@/yup-validations/connections';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { ExclamationTriangleIcon, RocketIcon } from '@radix-ui/react-icons';
 import { ReactElement, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
 const FORM_SCHEMA = Yup.object({
-  connectionName: Yup.string().required(),
+  connectionName: Yup.string()
+    .required('Connection Name is a required field')
+    .test(
+      'validConnectionName',
+      'Connection Name must be at least 3 characters long and can only include lowercase letters, numbers, and hyphens.',
+      async (value, context) => {
+        if (!value || value.length < 3) {
+          return false;
+        }
+        const regex = /^[a-z0-9-]+$/;
+        if (!regex.test(value)) {
+          return context.createError({
+            message:
+              'Connection Name can only include lowercase letters, numbers, and hyphens.',
+          });
+        }
 
+        const account = getAccount();
+        if (!account) {
+          return false;
+        }
+
+        try {
+          const res = await isConnectionNameAvailable(value, account.id);
+          if (!res.isAvailable) {
+            return context.createError({
+              message: 'This Connection Name is already taken.',
+            });
+          }
+          return true;
+        } catch (error) {
+          return context.createError({
+            message: 'Error validating name availability.',
+          });
+        }
+      }
+    ),
   db: Yup.object({
     host: Yup.string().required(),
     name: Yup.string().required(),
@@ -45,7 +86,6 @@ const FORM_SCHEMA = Yup.object({
     sslMode: Yup.string().optional(),
   }).required(),
 });
-
 type FormValues = Yup.InferType<typeof FORM_SCHEMA>;
 
 interface Props {
@@ -61,7 +101,14 @@ export default function PostgresForm(props: Props) {
     resolver: yupResolver(FORM_SCHEMA),
     defaultValues: {
       connectionName: '',
-      db: {},
+      db: {
+        host: '',
+        name: '',
+        user: '',
+        pass: '',
+        port: 0,
+        sslMode: '',
+      },
     },
     values: defaultValues,
   });
@@ -69,8 +116,16 @@ export default function PostgresForm(props: Props) {
     CheckConnectionConfigResponse | undefined
   >();
 
+  const [isTesting, setIsTesting] = useState<boolean>(false);
+
   async function onSubmit(values: FormValues) {
     try {
+      const checkResp = await checkPostgresConnection(values.db);
+      setCheckResp(checkResp);
+
+      if (!checkResp.isConnected) {
+        return;
+      }
       const connectionResp = await updatePostgresConnection(
         connectionId,
         values.db
@@ -81,21 +136,37 @@ export default function PostgresForm(props: Props) {
       onSaveFailed(err);
     }
   }
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
+        <Controller
           control={form.control}
           name="connectionName"
-          render={({ field }) => (
+          render={({ field: { onChange, ...field } }) => (
             <FormItem>
-              <FormLabel>Connection Name</FormLabel>
+              <FormLabel>
+                <RequiredLabel />
+                Connection Name
+              </FormLabel>
               <FormDescription>
-                The unique name of the connection.
+                The unique name of the connection
               </FormDescription>
               <FormControl>
-                <Input disabled placeholder="Connection Name" {...field} />
+                <Input
+                  placeholder="Connection Name"
+                  {...field}
+                  onChange={async ({ target: { value } }) => {
+                    onChange(value);
+                    await form.trigger('connectionName');
+                  }}
+                />
               </FormControl>
+              <FormError
+                errorMessage={
+                  form.formState.errors.connectionName?.message ?? ''
+                }
+              />
               <FormMessage />
             </FormItem>
           )}
@@ -106,7 +177,10 @@ export default function PostgresForm(props: Props) {
           name="db.host"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Host Name</FormLabel>
+              <FormLabel>
+                <RequiredLabel />
+                Host Name
+              </FormLabel>
               <FormDescription>The host name</FormDescription>
               <FormControl>
                 <Input placeholder="Host" {...field} />
@@ -121,8 +195,11 @@ export default function PostgresForm(props: Props) {
           name="db.port"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Port</FormLabel>
-              <FormDescription>The port of the database</FormDescription>
+              <FormLabel>
+                <RequiredLabel />
+                Database Port
+              </FormLabel>
+              <FormDescription>The database port.</FormDescription>
               <FormControl>
                 <Input placeholder="5432" {...field} />
               </FormControl>
@@ -136,8 +213,11 @@ export default function PostgresForm(props: Props) {
           name="db.name"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Database Name</FormLabel>
-              <FormDescription>The name of the database</FormDescription>
+              <FormLabel>
+                <RequiredLabel />
+                Database Name
+              </FormLabel>
+              <FormDescription>The database name</FormDescription>
               <FormControl>
                 <Input placeholder="postgres" {...field} />
               </FormControl>
@@ -151,8 +231,11 @@ export default function PostgresForm(props: Props) {
           name="db.user"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Database Username</FormLabel>
-              <FormDescription>The username</FormDescription>
+              <FormLabel>
+                <RequiredLabel />
+                Database Username
+              </FormLabel>
+              <FormDescription>The database username</FormDescription>
               <FormControl>
                 <Input placeholder="postgres" {...field} />
               </FormControl>
@@ -166,8 +249,11 @@ export default function PostgresForm(props: Props) {
           name="db.pass"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Database Password</FormLabel>
-              <FormDescription>Password</FormDescription>
+              <FormLabel>
+                <RequiredLabel />
+                Database Password
+              </FormLabel>
+              <FormDescription>The database password</FormDescription>
               <FormControl>
                 <Input placeholder="postgres" {...field} />
               </FormControl>
@@ -175,20 +261,22 @@ export default function PostgresForm(props: Props) {
             </FormItem>
           )}
         />
-
         <FormField
           control={form.control}
           name="db.sslMode"
           render={({ field }) => (
             <FormItem>
-              <FormLabel>SSL Mode</FormLabel>
+              <FormLabel>
+                <RequiredLabel />
+                SSL Mode
+              </FormLabel>
               <FormDescription>
                 Turn on SSL Mode to use TLS for client/server encryption.
               </FormDescription>
               <FormControl>
                 <Select onValueChange={field.onChange} value={field.value}>
                   <SelectTrigger>
-                    <SelectValue placeholder="Source" />
+                    <SelectValue placeholder={defaultValues.db.sslMode ?? ''} />
                   </SelectTrigger>
                   <SelectContent>
                     {SSL_MODES.map((mode) => (
@@ -210,10 +298,14 @@ export default function PostgresForm(props: Props) {
         <TestConnectionResult resp={checkResp} />
         <div className="flex flex-row gap-3 justify-between">
           <Button
+            variant="outline"
+            disabled={!form.formState.isValid}
             onClick={async () => {
+              setIsTesting(true);
               try {
                 const resp = await checkPostgresConnection(form.getValues().db);
                 setCheckResp(resp);
+                setIsTesting(false);
               } catch (err) {
                 setCheckResp(
                   new CheckConnectionConfigResponse({
@@ -222,15 +314,25 @@ export default function PostgresForm(props: Props) {
                       err instanceof Error ? err.message : 'unknown error',
                   })
                 );
+                setIsTesting(false);
               }
             }}
             type="button"
-            variant="secondary"
           >
-            Test Connection
+            <ButtonText
+              leftIcon={
+                isTesting ? <Spinner className="text-black" /> : <div></div>
+              }
+              text="Test Connection"
+            />
           </Button>
 
-          <Button type="submit">Submit</Button>
+          <Button type="submit" disabled={!form.formState.isValid}>
+            <ButtonText
+              leftIcon={form.formState.isSubmitting ? <Spinner /> : <div></div>}
+              text="submit"
+            />
+          </Button>
         </div>
       </form>
     </Form>
diff --git a/frontend/app/new/connection/postgres/PostgresForm.tsx b/frontend/app/new/connection/postgres/PostgresForm.tsx
index 4f3fd93e62..7b855cadc7 100644
--- a/frontend/app/new/connection/postgres/PostgresForm.tsx
+++ b/frontend/app/new/connection/postgres/PostgresForm.tsx
@@ -1,5 +1,12 @@
 'use client';
-import { useAccount } from '@/components/providers/account-provider';
+import ButtonText from '@/components/ButtonText';
+import FormError from '@/components/FormError';
+import Spinner from '@/components/Spinner';
+import RequiredLabel from '@/components/labels/RequiredLabel';
+import {
+  getAccount,
+  useAccount,
+} from '@/components/providers/account-provider';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import {
@@ -24,20 +31,59 @@ import {
   ConnectionConfig,
   CreateConnectionRequest,
   CreateConnectionResponse,
+  IsConnectionNameAvailableResponse,
   PostgresConnection,
   PostgresConnectionConfig,
 } from '@/neosync-api-client/mgmt/v1alpha1/connection_pb';
 import { SSL_MODES } from '@/yup-validations/connections';
 import { yupResolver } from '@hookform/resolvers/yup';
-import { ExclamationTriangleIcon, RocketIcon } from '@radix-ui/react-icons';
+import {
+  CheckCircledIcon,
+  ExclamationTriangleIcon,
+} from '@radix-ui/react-icons';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { ReactElement, useState } from 'react';
-import { useForm } from 'react-hook-form';
+import { Controller, useForm } from 'react-hook-form';
 import * as Yup from 'yup';
 
 const FORM_SCHEMA = Yup.object({
-  connectionName: Yup.string().required(),
+  connectionName: Yup.string()
+    .required('Connection Name is a required field')
+    .test(
+      'validConnectionName',
+      'Connection Name must be at least 3 characters long and can only include lowercase letters, numbers, and hyphens.',
+      async (value, context) => {
+        if (!value || value.length < 3) {
+          return false;
+        }
+        const regex = /^[a-z0-9-]+$/;
+        if (!regex.test(value)) {
+          return context.createError({
+            message:
+              'Connection Name can only include lowercase letters, numbers, and hyphens.',
+          });
+        }
 
+        const account = getAccount();
+        if (!account) {
+          return false;
+        }
+
+        try {
+          const res = await isConnectionNameAvailable(value, account.id);
+          if (!res.isAvailable) {
+            return context.createError({
+              message: 'This Connection Name is already taken.',
+            });
+          }
+          return true;
+        } catch (error) {
+          return context.createError({
+            message: 'Error validating name availability.',
+          });
+        }
+      }
+    ),
   db: Yup.object({
     host: Yup.string().required(),
     name: Yup.string().required(),
@@ -72,11 +118,21 @@ export default function PostgresForm() {
     CheckConnectionConfigResponse | undefined
   >();
 
+  const [isTesting, setIsTesting] = useState<boolean>(false);
+
   async function onSubmit(values: FormValues) {
     if (!account) {
       return;
     }
+
     try {
+      const checkResp = await checkPostgresConnection(values.db);
+      setCheckResp(checkResp);
+
+      if (!checkResp.isConnected) {
+        return;
+      }
+
       const connection = await createPostgresConnection(
         values.db,
         values.connectionName,
@@ -92,25 +148,41 @@ export default function PostgresForm() {
         router.push(`/connections`);
       }
     } catch (err) {
-      console.error(err);
+      console.error('Error in form submission:', err);
     }
   }
+
   return (
     <div className="mx-64">
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-          <FormField
+          <Controller
             control={form.control}
             name="connectionName"
-            render={({ field }) => (
+            render={({ field: { onChange, ...field } }) => (
               <FormItem>
-                <FormLabel>Connection Name</FormLabel>
+                <FormLabel>
+                  <RequiredLabel />
+                  Connection Name
+                </FormLabel>
                 <FormDescription>
-                  The unique name of the connection.
+                  The unique name of the connection
                 </FormDescription>
                 <FormControl>
-                  <Input placeholder="Connection Name" {...field} />
+                  <Input
+                    placeholder="Connection Name"
+                    {...field}
+                    onChange={async ({ target: { value } }) => {
+                      onChange(value);
+                      await form.trigger('connectionName');
+                    }}
+                  />
                 </FormControl>
+                <FormError
+                  errorMessage={
+                    form.formState.errors.connectionName?.message ?? ''
+                  }
+                />
                 <FormMessage />
               </FormItem>
             )}
@@ -121,7 +193,10 @@ export default function PostgresForm() {
             name="db.host"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Host Name</FormLabel>
+                <FormLabel>
+                  <RequiredLabel />
+                  Host Name
+                </FormLabel>
                 <FormDescription>The host name</FormDescription>
                 <FormControl>
                   <Input placeholder="Host" {...field} />
@@ -136,8 +211,11 @@ export default function PostgresForm() {
             name="db.port"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Port</FormLabel>
-                <FormDescription>The port of the database</FormDescription>
+                <FormLabel>
+                  <RequiredLabel />
+                  Database Port
+                </FormLabel>
+                <FormDescription>The database port.</FormDescription>
                 <FormControl>
                   <Input placeholder="5432" {...field} />
                 </FormControl>
@@ -151,8 +229,12 @@ export default function PostgresForm() {
             name="db.name"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Database Name</FormLabel>
-                <FormDescription>The name of the database</FormDescription>
+                <FormLabel>
+                  {' '}
+                  <RequiredLabel />
+                  Database Name
+                </FormLabel>
+                <FormDescription>The database name</FormDescription>
                 <FormControl>
                   <Input placeholder="postgres" {...field} />
                 </FormControl>
@@ -166,8 +248,12 @@ export default function PostgresForm() {
             name="db.user"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Database Username</FormLabel>
-                <FormDescription>The username</FormDescription>
+                <FormLabel>
+                  {' '}
+                  <RequiredLabel />
+                  Database Username
+                </FormLabel>
+                <FormDescription>The database username</FormDescription>
                 <FormControl>
                   <Input placeholder="postgres" {...field} />
                 </FormControl>
@@ -181,8 +267,12 @@ export default function PostgresForm() {
             name="db.pass"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>Database Password</FormLabel>
-                <FormDescription>Password</FormDescription>
+                <FormLabel>
+                  {' '}
+                  <RequiredLabel />
+                  Database Password
+                </FormLabel>
+                <FormDescription>The database password</FormDescription>
                 <FormControl>
                   <Input placeholder="postgres" {...field} />
                 </FormControl>
@@ -196,14 +286,18 @@ export default function PostgresForm() {
             name="db.sslMode"
             render={({ field }) => (
               <FormItem>
-                <FormLabel>SSL Mode</FormLabel>
+                <FormLabel>
+                  {' '}
+                  <RequiredLabel />
+                  SSL Mode
+                </FormLabel>
                 <FormDescription>
                   Turn on SSL Mode to use TLS for client/server encryption.
                 </FormDescription>
                 <FormControl>
                   <Select onValueChange={field.onChange} value={field.value}>
                     <SelectTrigger>
-                      <SelectValue placeholder="Source" />
+                      <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
                       {SSL_MODES.map((mode) => (
@@ -225,12 +319,16 @@ export default function PostgresForm() {
           <TestConnectionResult resp={checkResp} />
           <div className="flex flex-row gap-3 justify-between">
             <Button
+              variant="outline"
+              disabled={!form.formState.isValid}
               onClick={async () => {
+                setIsTesting(true);
                 try {
                   const resp = await checkPostgresConnection(
                     form.getValues().db
                   );
                   setCheckResp(resp);
+                  setIsTesting(false);
                 } catch (err) {
                   setCheckResp(
                     new CheckConnectionConfigResponse({
@@ -239,13 +337,27 @@ export default function PostgresForm() {
                         err instanceof Error ? err.message : 'unknown error',
                     })
                   );
+                  setIsTesting(false);
                 }
               }}
               type="button"
             >
-              Test Connection
+              <ButtonText
+                leftIcon={
+                  isTesting ? <Spinner className="text-black" /> : <div></div>
+                }
+                text="Test Connection"
+              />
+            </Button>
+
+            <Button type="submit" disabled={!form.formState.isValid}>
+              <ButtonText
+                leftIcon={
+                  form.formState.isSubmitting ? <Spinner /> : <div></div>
+                }
+                text="submit"
+              />
             </Button>
-            <Button type="submit">Submit</Button>
           </div>
         </form>
       </Form>
@@ -263,7 +375,7 @@ function TestConnectionResult(props: TestConnectionResultProps): ReactElement {
     if (resp.isConnected) {
       return (
         <SuccessAlert
-          title="Woohoo!"
+          title="Success!"
           description="Successfully connected to database!"
         />
       );
@@ -287,8 +399,8 @@ interface SuccessAlertProps {
 function SuccessAlert(props: SuccessAlertProps): ReactElement {
   const { title, description } = props;
   return (
-    <Alert>
-      <RocketIcon className="h-4 w-4" />
+    <Alert variant="success">
+      <CheckCircledIcon className="h-4 w-4" />
       <AlertTitle>{title}</AlertTitle>
       <AlertDescription>{description}</AlertDescription>
     </Alert>
@@ -368,3 +480,23 @@ async function checkPostgresConnection(
   }
   return CheckConnectionConfigResponse.fromJson(await res.json());
 }
+
+export async function isConnectionNameAvailable(
+  name: string,
+  accountId: string
+): Promise<IsConnectionNameAvailableResponse> {
+  const res = await fetch(
+    `/api/connections/is-connection-name-available?connectionName=${name}&accountId=${accountId}`,
+    {
+      method: 'GET',
+      headers: {
+        'content-type': 'application/json',
+      },
+    }
+  );
+  if (!res.ok) {
+    const body = await res.json();
+    throw new Error(body.message);
+  }
+  return IsConnectionNameAvailableResponse.fromJson(await res.json());
+}
diff --git a/frontend/app/new/connection/postgres/page.tsx b/frontend/app/new/connection/postgres/page.tsx
index 5db69ac346..f8ec9c5fcb 100644
--- a/frontend/app/new/connection/postgres/page.tsx
+++ b/frontend/app/new/connection/postgres/page.tsx
@@ -1,5 +1,6 @@
 import OverviewContainer from '@/components/containers/OverviewContainer';
 import PageHeader from '@/components/headers/PageHeader';
+import { DiPostgresql } from 'react-icons/di';
 import PostgresForm from './PostgresForm';
 
 export default async function Postgres() {
@@ -8,8 +9,9 @@ export default async function Postgres() {
       Header={
         <PageHeader
           header="PostgreSQL"
-          description="Configure a PostgreSQL data connection"
+          description="Configure a PostgreSQL database as a connection"
           pageHeaderContainerClassName="mx-64"
+          leftIcon={<DiPostgresql className="w-[40px] h-[40px]" />}
         />
       }
     >
diff --git a/frontend/components/FormError.tsx b/frontend/components/FormError.tsx
new file mode 100644
index 0000000000..93b5db53a3
--- /dev/null
+++ b/frontend/components/FormError.tsx
@@ -0,0 +1,9 @@
+interface Props {
+  errorMessage: string;
+}
+
+export default function FormError(props: Props) {
+  const { errorMessage } = props;
+
+  return <div className="text-red-400 text-sm">{errorMessage}</div>;
+}
diff --git a/frontend/components/ui/alert.tsx b/frontend/components/ui/alert.tsx
index f18954cd7b..05e0e5555e 100644
--- a/frontend/components/ui/alert.tsx
+++ b/frontend/components/ui/alert.tsx
@@ -9,7 +9,8 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'bg-background text-foreground',
-        success: 'bg-background text-foreground bg-green-200',
+        success:
+          'bg-background text-foreground bg-green-100 border border-green-300',
         destructive:
           'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
         warning: 'border border-blue-300 shadow-sm bg-blue-50',
diff --git a/frontend/yup-validations/connections.ts b/frontend/yup-validations/connections.ts
index 4092d6ac97..ce8abc618b 100644
--- a/frontend/yup-validations/connections.ts
+++ b/frontend/yup-validations/connections.ts
@@ -9,26 +9,16 @@ export const POSTGRES_CONNECTION = Yup.object({
   sslMode: Yup.string().optional(),
 });
 
-// export type YupPostgresConnection = Yup.InferType<typeof POSTGRES_CONNECTION>;
-
 export const NEW_POSTGRES_CONNECTION = Yup.object({
   connectionName: Yup.string().required(),
   connection: POSTGRES_CONNECTION,
 });
 
-// export type YupNewPostgresConnection = Yup.InferType<
-//   typeof NEW_POSTGRES_CONNECTION
-// >;
-
 export const EXISTING_POSTGRES_CONNECTION = Yup.object({
   id: Yup.string().uuid().required(),
   connection: POSTGRES_CONNECTION,
 });
 
-// export type YupExistingPostgresConnection = Yup.InferType<
-//   typeof EXISTING_POSTGRES_CONNECTION
-// >;
-
 export const SSL_MODES = [
   'disable',
   'allow',