admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Thaïs
2024-04-04 10:03:40 +02:00
committed by GitHub
parent 306ef1df9c
commit f58d855097
3 changed files with 123 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm.tsx Normal file
View File

@ -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>
);
};

8
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx
View File

@ -46,6 +46,10 @@ export const SettingsIntegrationDatabaseConnection = () => {
if (!isIntegrationAvailable || !connection) return null;
const settingsIntegrationsPagePath = getSettingsPagePath(
SettingsPath.Integrations,
);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
@ -53,11 +57,11 @@ export const SettingsIntegrationDatabaseConnection = () => {
links={[
{
children: 'Integrations',
href: getSettingsPagePath(SettingsPath.Integrations),
href: settingsIntegrationsPagePath,
},
{
children: integration.text,
href: `/settings/integrations/${databaseKey}`,
href: `${settingsIntegrationsPagePath}/${databaseKey}`,
},
{ children: connection.name },
]}

69
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
View File

@ -1,14 +1,31 @@
import { useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { zodResolver } from '@hookform/resolvers/zod';
import { IconSettings } from 'twenty-ui';
import { z } from 'zod';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import {
SettingsIntegrationPostgreSQLConnectionForm,
settingsIntegrationPostgreSQLConnectionFormSchema,
} from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionForm';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Section } from '@/ui/layout/section/components/Section';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
const newConnectionSchema = settingsIntegrationPostgreSQLConnectionFormSchema;
type SettingsIntegrationNewConnectionFormValues = z.infer<
typeof newConnectionSchema
>;
export const SettingsIntegrationNewDatabaseConnection = () => {
const { databaseKey = '' } = useParams();
const navigate = useNavigate();
@ -35,22 +52,46 @@ export const SettingsIntegrationNewDatabaseConnection = () => {
}
}, [integration, databaseKey, navigate, isIntegrationAvailable]);
const formConfig = useForm<SettingsIntegrationNewConnectionFormValues>({
mode: 'onTouched',
resolver: zodResolver(newConnectionSchema),
});
if (!isIntegrationAvailable) return null;
const settingsIntegrationsPagePath = getSettingsPagePath(
SettingsPath.Integrations,
);
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Integrations', href: '/settings/integrations' },
{
children: integration.text,
href: `/settings/integrations/${databaseKey}`,
},
{ children: 'New' },
]}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
// eslint-disable-next-line react/jsx-props-no-spreading
<FormProvider {...formConfig}>
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{
children: 'Integrations',
href: settingsIntegrationsPagePath,
},
{
children: integration.text,
href: `${settingsIntegrationsPagePath}/${databaseKey}`,
},
{ children: 'New' },
]}
/>
{databaseKey === 'postgresql' ? (
<Section>
<H2Title
title="Connect a new database"
description="Provide the information to connect your PostgreSQL database"
/>
<SettingsIntegrationPostgreSQLConnectionForm />
</Section>
) : null}
</SettingsPageContainer>
</SubMenuTopBarContainer>
</FormProvider>
);
};