feat: add Settings/Integrations/Database/New Connection form (#4787)

Closes #4554

<img width="556" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/56738254-aa43-4bfd-b7c5-29a9e1b7258f">

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>

packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm.tsx

@@ -0,0 +1,62 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { z } from 'zod';
+
+import { TextInput } from '@/ui/input/components/TextInput';
+
+export const settingsIntegrationPostgreSQLConnectionFormSchema = z.object({
+  dbname: z.string().min(1),
+  host: z.string().min(1),
+  port: z.number().positive(),
+  username: z.string().min(1),
+  password: z.string().min(1),
+});
+
+type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
+  typeof settingsIntegrationPostgreSQLConnectionFormSchema
+>;
+
+const StyledInputsContainer = styled.div`
+  display: grid;
+  gap: ${({ theme }) => theme.spacing(2, 4)};
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    'input-1 input-1'
+    'input-2 input-3'
+    'input-4 input-5';
+
+  & :first-child {
+    grid-area: input-1;
+  }
+`;
+
+export const SettingsIntegrationPostgreSQLConnectionForm = () => {
+  const { control } =
+    useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
+
+  return (
+    <StyledInputsContainer>
+      {[
+        { name: 'dbname' as const, label: 'Database Name' },
+        { name: 'host' as const, label: 'Host' },
+        { name: 'port' as const, label: 'Port' },
+        { name: 'username' as const, label: 'Username' },
+        { name: 'password' as const, label: 'Password' },
+      ].map(({ name, label }) => (
+        <Controller
+          key={name}
+          name={name}
+          control={control}
+          render={({ field: { onChange, value } }) => (
+            <TextInput
+              label={label}
+              value={value}
+              onChange={onChange}
+              fullWidth
+            />
+          )}
+        />
+      ))}
+    </StyledInputsContainer>
+  );
+};