Add stripe connection option (#5372)
- Refactor creation and edition form so it handles stripe integration and not only postgres - Add a hook `useIsSettingsIntegrationEnabled` to avoid checking feature flags everywhere - Add zod schema for stripe <img width="250" alt="Capture d’écran 2024-05-13 à 12 41 52" src="https://github.com/twentyhq/twenty/assets/22936103/a77e7278-5d79-4f95-bddb-ae9ddd1426eb"> <img width="250" alt="Capture d’écran 2024-05-13 à 12 41 59" src="https://github.com/twentyhq/twenty/assets/22936103/d617dc6a-31a4-43c8-8192-dbfb7157de1c"> <img width="250" alt="Capture d’écran 2024-05-13 à 12 42 08" src="https://github.com/twentyhq/twenty/assets/22936103/c4e2d0e4-f826-436d-89be-4d1679a27861"> --------- Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Thomas Trompette
@ -17,6 +17,14 @@ type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
|
||||
typeof settingsIntegrationPostgreSQLConnectionFormSchema
|
||||
>;
|
||||
|
||||
export const settingsIntegrationStripeConnectionFormSchema = z.object({
|
||||
api_key: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationStripeConnectionFormValues = z.infer<
|
||||
typeof settingsIntegrationStripeConnectionFormSchema
|
||||
>;
|
||||
|
||||
const StyledInputsContainer = styled.div`
|
||||
display: grid;
|
||||
gap: ${({ theme }) => theme.spacing(2, 4)};
|
||||
@ -31,19 +39,35 @@ const StyledInputsContainer = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
type SettingsIntegrationPostgreSQLConnectionFormProps = {
|
||||
type SettingsIntegrationDatabaseConnectionFormProps = {
|
||||
databaseKey: string;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
export const SettingsIntegrationPostgreSQLConnectionForm = ({
|
||||
disabled,
|
||||
}: SettingsIntegrationPostgreSQLConnectionFormProps) => {
|
||||
const { control } =
|
||||
useFormContext<SettingsIntegrationPostgreSQLConnectionFormValues>();
|
||||
type SettingsIntegrationConnectionFormValues =
|
||||
| SettingsIntegrationPostgreSQLConnectionFormValues
|
||||
| SettingsIntegrationStripeConnectionFormValues;
|
||||
|
||||
return (
|
||||
<StyledInputsContainer>
|
||||
{[
|
||||
const getFormFields = (
|
||||
databaseKey: string,
|
||||
):
|
||||
| {
|
||||
name:
|
||||
| 'dbname'
|
||||
| 'host'
|
||||
| 'port'
|
||||
| 'user'
|
||||
| 'password'
|
||||
| 'schema'
|
||||
| 'api_key';
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder: string;
|
||||
}[]
|
||||
| null => {
|
||||
switch (databaseKey) {
|
||||
case 'postgresql':
|
||||
return [
|
||||
{
|
||||
name: 'dbname' as const,
|
||||
label: 'Database Name',
|
||||
@ -63,7 +87,28 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
|
||||
placeholder: '••••••',
|
||||
},
|
||||
{ name: 'schema' as const, label: 'Schema', placeholder: 'public' },
|
||||
].map(({ name, label, type, placeholder }) => (
|
||||
];
|
||||
case 'stripe':
|
||||
return [
|
||||
{ name: 'api_key' as const, label: 'API Key', placeholder: 'API key' },
|
||||
];
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
export const SettingsIntegrationDatabaseConnectionForm = ({
|
||||
databaseKey,
|
||||
disabled,
|
||||
}: SettingsIntegrationDatabaseConnectionFormProps) => {
|
||||
const { control } = useFormContext<SettingsIntegrationConnectionFormValues>();
|
||||
const formFields = getFormFields(databaseKey);
|
||||
|
||||
if (!formFields) return null;
|
||||
|
||||
return (
|
||||
<StyledInputsContainer>
|
||||
{formFields.map(({ name, label, type, placeholder }) => (
|
||||
<Controller
|
||||
key={name}
|
||||
name={name}
|
||||
@ -71,7 +116,7 @@ export const SettingsIntegrationPostgreSQLConnectionForm = ({
|
||||
render={({ field: { onChange, value } }) => {
|
||||
return (
|
||||
<TextInput
|
||||
autoComplete="new-password"
|
||||
autoComplete="new-password" // Disable autocomplete
|
||||
label={label}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
|
||||
@ -8,7 +8,7 @@ import { z } from 'zod';
|
||||
import { useUpdateOneDatabaseConnection } from '@/databases/hooks/useUpdateOneDatabaseConnection';
|
||||
import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
|
||||
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
|
||||
import { SettingsIntegrationPostgreSQLConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import { SettingsIntegrationDatabaseConnectionForm } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import {
|
||||
formatValuesForUpdate,
|
||||
getEditionSchemaForForm,
|
||||
@ -132,18 +132,17 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
|
||||
accent={'blue'}
|
||||
/>
|
||||
)}
|
||||
{databaseKey === 'postgresql' ? (
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Edit PostgreSQL Connection"
|
||||
description="Edit the information to connect your PostgreSQL database"
|
||||
/>
|
||||
<Section>
|
||||
<H2Title
|
||||
title="Edit Connection"
|
||||
description="Edit the information to connect your database"
|
||||
/>
|
||||
|
||||
<SettingsIntegrationPostgreSQLConnectionForm
|
||||
disabled={hasSyncedTables}
|
||||
/>
|
||||
</Section>
|
||||
) : null}
|
||||
<SettingsIntegrationDatabaseConnectionForm
|
||||
databaseKey={databaseKey}
|
||||
disabled={hasSyncedTables}
|
||||
/>
|
||||
</Section>
|
||||
</FormProvider>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -3,9 +3,9 @@ import { useNavigate, useParams } from 'react-router-dom';
|
||||
|
||||
import { useGetDatabaseConnection } from '@/databases/hooks/useGetDatabaseConnection';
|
||||
import { useGetDatabaseConnectionTables } from '@/databases/hooks/useGetDatabaseConnectionTables';
|
||||
import { useIsSettingsIntegrationEnabled } from '@/settings/integrations/hooks/useIsSettingsIntegrationEnabled';
|
||||
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
|
||||
import { AppPath } from '@/types/AppPath';
|
||||
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
|
||||
|
||||
export const useDatabaseConnection = () => {
|
||||
const { databaseKey = '', connectionId = '' } = useParams();
|
||||
@ -16,16 +16,9 @@ export const useDatabaseConnection = () => {
|
||||
({ from: { key } }) => key === databaseKey,
|
||||
);
|
||||
|
||||
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
|
||||
'IS_AIRTABLE_INTEGRATION_ENABLED',
|
||||
);
|
||||
const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
|
||||
'IS_POSTGRESQL_INTEGRATION_ENABLED',
|
||||
);
|
||||
const isIntegrationAvailable =
|
||||
!!integration &&
|
||||
((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
|
||||
(databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
|
||||
const isIntegrationEnabled = useIsSettingsIntegrationEnabled(databaseKey);
|
||||
|
||||
const isIntegrationAvailable = !!integration && isIntegrationEnabled;
|
||||
|
||||
const { connection, loading } = useGetDatabaseConnection({
|
||||
databaseKey,
|
||||
|
||||
@ -3,7 +3,10 @@ import isEmpty from 'lodash.isempty';
|
||||
import pickBy from 'lodash.pickby';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { settingsIntegrationPostgreSQLConnectionFormSchema } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import {
|
||||
settingsIntegrationPostgreSQLConnectionFormSchema,
|
||||
settingsIntegrationStripeConnectionFormSchema,
|
||||
} from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionForm';
|
||||
import { RemoteServer } from '~/generated-metadata/graphql';
|
||||
|
||||
export const getEditionSchemaForForm = (databaseKey: string) => {
|
||||
@ -12,6 +15,8 @@ export const getEditionSchemaForForm = (databaseKey: string) => {
|
||||
return settingsIntegrationPostgreSQLConnectionFormSchema.extend({
|
||||
password: z.string().optional(),
|
||||
});
|
||||
case 'stripe':
|
||||
return settingsIntegrationStripeConnectionFormSchema;
|
||||
default:
|
||||
throw new Error(`No schema found for database key: ${databaseKey}`);
|
||||
}
|
||||
@ -34,6 +39,10 @@ export const getFormDefaultValuesFromConnection = ({
|
||||
schema: connection.schema || undefined,
|
||||
password: '',
|
||||
};
|
||||
case 'stripe':
|
||||
return {
|
||||
api_key: connection.foreignDataWrapperOptions.api_key,
|
||||
};
|
||||
default:
|
||||
throw new Error(
|
||||
`No default form values for database key: ${databaseKey}`,
|
||||
@ -71,6 +80,12 @@ export const formatValuesForUpdate = ({
|
||||
|
||||
return pickBy(formattedValues, (obj) => !isEmpty(obj));
|
||||
}
|
||||
case 'stripe':
|
||||
return {
|
||||
foreignDataWrapperOptions: {
|
||||
api_key: formValues.api_key,
|
||||
},
|
||||
};
|
||||
default:
|
||||
throw new Error(`Cannot format values for database key: ${databaseKey}`);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user