Add label to remote server (#5637)
Added label on remote server entity. Also added the possibility to update schema. <img width="688" alt="Capture d’écran 2024-05-28 à 15 36 31" src="https://github.com/twentyhq/twenty/assets/22936103/c9786122-8459-4876-833e-c9a1d7d27829">
This commit is contained in:
Thomas Trompette
@ -11,6 +11,7 @@ export const settingsIntegrationPostgreSQLConnectionFormSchema = z.object({
|
||||
user: z.string().min(1),
|
||||
password: z.string().min(1),
|
||||
schema: z.string().min(1),
|
||||
label: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
|
||||
@ -19,6 +20,7 @@ type SettingsIntegrationPostgreSQLConnectionFormValues = z.infer<
|
||||
|
||||
export const settingsIntegrationStripeConnectionFormSchema = z.object({
|
||||
api_key: z.string().min(1),
|
||||
label: z.string().min(1),
|
||||
});
|
||||
|
||||
type SettingsIntegrationStripeConnectionFormValues = z.infer<
|
||||
@ -59,7 +61,8 @@ const getFormFields = (
|
||||
| 'user'
|
||||
| 'password'
|
||||
| 'schema'
|
||||
| 'api_key';
|
||||
| 'api_key'
|
||||
| 'label';
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder: string;
|
||||
@ -87,10 +90,20 @@ const getFormFields = (
|
||||
placeholder: '••••••',
|
||||
},
|
||||
{ name: 'schema' as const, label: 'Schema', placeholder: 'public' },
|
||||
{
|
||||
name: 'label' as const,
|
||||
label: 'Label',
|
||||
placeholder: 'My database',
|
||||
},
|
||||
];
|
||||
case 'stripe':
|
||||
return [
|
||||
{ name: 'api_key' as const, label: 'API Key', placeholder: 'API key' },
|
||||
{
|
||||
name: 'label' as const,
|
||||
label: 'Label',
|
||||
placeholder: 'My database',
|
||||
},
|
||||
];
|
||||
default:
|
||||
return null;
|
||||
|
||||
@ -6,7 +6,6 @@ import { useDeleteOneDatabaseConnection } from '@/databases/hooks/useDeleteOneDa
|
||||
import { SettingsIntegrationDatabaseConnectionSummaryCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard';
|
||||
import { SettingsIntegrationDatabaseTablesListCard } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseTablesListCard';
|
||||
import { useDatabaseConnection } from '@/settings/integrations/database-connection/hooks/useDatabaseConnection';
|
||||
import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
||||
@ -36,8 +35,6 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
|
||||
SettingsPath.Integrations,
|
||||
);
|
||||
|
||||
const connectionName = getConnectionDbName({ integration, connection });
|
||||
|
||||
return (
|
||||
<>
|
||||
<Breadcrumb
|
||||
@ -50,7 +47,7 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
|
||||
children: integration.text,
|
||||
href: `${settingsIntegrationsPagePath}/${databaseKey}`,
|
||||
},
|
||||
{ children: connectionName },
|
||||
{ children: connection.label },
|
||||
]}
|
||||
/>
|
||||
<Section>
|
||||
@ -58,7 +55,7 @@ export const SettingsIntegrationDatabaseConnectionShowContainer = () => {
|
||||
<SettingsIntegrationDatabaseConnectionSummaryCard
|
||||
databaseLogoUrl={integration.from.image}
|
||||
connectionId={connection.id}
|
||||
connectionName={connectionName}
|
||||
connectionLabel={connection.label}
|
||||
onRemove={deleteConnection}
|
||||
onEdit={onEdit}
|
||||
/>
|
||||
|
||||
@ -12,7 +12,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
|
||||
type SettingsIntegrationDatabaseConnectionSummaryCardProps = {
|
||||
databaseLogoUrl: string;
|
||||
connectionId: string;
|
||||
connectionName: string;
|
||||
connectionLabel: string;
|
||||
onRemove: () => void;
|
||||
onEdit: () => void;
|
||||
};
|
||||
@ -32,7 +32,7 @@ const StyledDatabaseLogo = styled.img`
|
||||
export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
|
||||
databaseLogoUrl,
|
||||
connectionId,
|
||||
connectionName,
|
||||
connectionLabel,
|
||||
onRemove,
|
||||
onEdit,
|
||||
}: SettingsIntegrationDatabaseConnectionSummaryCardProps) => {
|
||||
@ -46,7 +46,7 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
|
||||
<StyledDatabaseLogoContainer>
|
||||
<StyledDatabaseLogo alt="" src={databaseLogoUrl} />
|
||||
</StyledDatabaseLogoContainer>
|
||||
{connectionName}
|
||||
{connectionLabel}
|
||||
</>
|
||||
}
|
||||
rightComponent={
|
||||
|
||||
@ -5,7 +5,6 @@ import { IconChevronRight } from 'twenty-ui';
|
||||
import { SettingsListCard } from '@/settings/components/SettingsListCard';
|
||||
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
|
||||
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
|
||||
import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
|
||||
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
|
||||
import { RemoteServer } from '~/generated-metadata/graphql';
|
||||
|
||||
@ -55,9 +54,7 @@ export const SettingsIntegrationDatabaseConnectionsListCard = ({
|
||||
</StyledRowRightContainer>
|
||||
)}
|
||||
onRowClick={(connection) => navigate(`./${connection.id}`)}
|
||||
getItemLabel={(connection) =>
|
||||
getConnectionDbName({ integration, connection })
|
||||
}
|
||||
getItemLabel={(connection) => connection.label}
|
||||
hasFooter
|
||||
footerButtonLabel="Add connection"
|
||||
onFooterButtonClick={() => navigate('./new')}
|
||||
|
||||
@ -16,7 +16,6 @@ import {
|
||||
getFormDefaultValuesFromConnection,
|
||||
} from '@/settings/integrations/database-connection/utils/editDatabaseConnection';
|
||||
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
|
||||
import { getConnectionDbName } from '@/settings/integrations/utils/getConnectionDbName';
|
||||
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
|
||||
import { SettingsPath } from '@/types/SettingsPath';
|
||||
import { Info } from '@/ui/display/info/components/Info';
|
||||
@ -67,8 +66,6 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
|
||||
(table) => table?.status === RemoteTableStatus.Synced,
|
||||
);
|
||||
|
||||
const connectionName = getConnectionDbName({ integration, connection });
|
||||
|
||||
const { isDirty, isValid } = formConfig.formState;
|
||||
const canSave = isDirty && isValid && !hasSyncedTables; // order matters here
|
||||
|
||||
@ -114,7 +111,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
|
||||
children: integration.text,
|
||||
href: `${settingsIntegrationsPagePath}/${databaseKey}`,
|
||||
},
|
||||
{ children: connectionName },
|
||||
{ children: connection.label },
|
||||
]}
|
||||
/>
|
||||
<SaveAndCancelButtons
|
||||
|
||||
@ -37,11 +37,13 @@ export const getFormDefaultValuesFromConnection = ({
|
||||
port: connection.foreignDataWrapperOptions.port,
|
||||
user: connection.userMappingOptions?.user || undefined,
|
||||
schema: connection.schema || undefined,
|
||||
label: connection.label,
|
||||
password: '',
|
||||
};
|
||||
case 'stripe':
|
||||
return {
|
||||
api_key: connection.foreignDataWrapperOptions.api_key,
|
||||
label: connection.label,
|
||||
};
|
||||
default:
|
||||
throw new Error(
|
||||
@ -76,6 +78,7 @@ export const formatValuesForUpdate = ({
|
||||
identity,
|
||||
),
|
||||
schema: formValues.schema,
|
||||
label: formValues.label,
|
||||
};
|
||||
|
||||
return pickBy(formattedValues, (obj) => !isEmpty(obj));
|
||||
@ -85,6 +88,7 @@ export const formatValuesForUpdate = ({
|
||||
foreignDataWrapperOptions: {
|
||||
api_key: formValues.api_key,
|
||||
},
|
||||
label: formValues.label,
|
||||
};
|
||||
default:
|
||||
throw new Error(`Cannot format values for database key: ${databaseKey}`);
|
||||
|
||||
Reference in New Issue
Block a user