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

feat: create Settings/Integrations/Database/Connection page (#4785)

Browse Source 
Closes #4556

- Renames some pages and components after discussion about terminology
with @thomtrp.
- Creates the Settings/Integrations/Database/Connection page.
This commit is contained in:
Thaïs
2024-04-03 17:15:02 +02:00
committed by GitHub
parent 7a34dc4910
commit 5c3e5a0d8a
10 changed files with 164 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx → packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabase.tsx
View File

@ -3,7 +3,7 @@ import { useNavigate, useParams } from 'react-router-dom';
import { IconSettings } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationDatabasesListCard } from '@/settings/integrations/components/SettingsIntegrationDatabasesListCard';
import { SettingsIntegrationDatabaseConnectionsListCard } from '@/settings/integrations/components/SettingsIntegrationDatabaseConnectionsListCard';
import { SettingsIntegrationPreview } from '@/settings/integrations/components/SettingsIntegrationPreview';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
@ -16,13 +16,13 @@ import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
export const SettingsIntegrationDetail = () => {
const { integrationKey = '' } = useParams();
export const SettingsIntegrationDatabase = () => {
const { databaseKey = '' } = useParams();
const navigate = useNavigate();
const [integrationCategoryAll] = useSettingsIntegrationCategories();
const integration = integrationCategoryAll.integrations.find(
({ from: { key } }) => key === integrationKey,
({ from: { key } }) => key === databaseKey,
);
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
@ -33,21 +33,21 @@ export const SettingsIntegrationDetail = () => {
);
const isIntegrationAvailable =
!!integration &&
((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
(integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
(databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
useEffect(() => {
if (!isIntegrationAvailable) {
navigate(AppPath.NotFound);
}
}, [integration, integrationKey, navigate, isIntegrationAvailable]);
}, [integration, databaseKey, navigate, isIntegrationAvailable]);
if (!isIntegrationAvailable) return null;
const databases =
const connections =
mockedRemoteObjectIntegrations.find(
({ key }) => key === integration.from.key,
)?.databases || [];
)?.connections || [];
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -69,9 +69,9 @@ export const SettingsIntegrationDetail = () => {
title={`${integration.text} database`}
description={`Connect or access your ${integration.text} data`}
/>
<SettingsIntegrationDatabasesListCard
integrationLogoUrl={integration.from.image}
databases={databases}
<SettingsIntegrationDatabaseConnectionsListCard
databaseLogoUrl={integration.from.image}
connections={connections}
/>
</Section>
</SettingsPageContainer>

68
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDatabaseConnection.tsx Normal file
View File

@ -0,0 +1,68 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { IconSettings } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { mockedRemoteObjectIntegrations } from '~/testing/mock-data/remoteObjectDatabases';
export const SettingsIntegrationDatabaseConnection = () => {
const { databaseKey = '', connectionKey = '' } = useParams();
const navigate = useNavigate();
const [integrationCategoryAll] = useSettingsIntegrationCategories();
const integration = integrationCategoryAll.integrations.find(
({ 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 connections =
mockedRemoteObjectIntegrations.find(
({ key }) => key === integration?.from.key,
)?.connections || [];
const connection = connections.find(({ key }) => key === connectionKey);
useEffect(() => {
if (!isIntegrationAvailable || !connection) {
navigate(AppPath.NotFound);
}
}, [integration, databaseKey, navigate, isIntegrationAvailable, connection]);
if (!isIntegrationAvailable || !connection) return null;
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{
children: 'Integrations',
href: getSettingsPagePath(SettingsPath.Integrations),
},
{
children: integration.text,
href: `/settings/integrations/${databaseKey}`,
},
{ children: connection.name },
]}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

14
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabase.tsx → packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection.tsx
View File

@ -9,13 +9,13 @@ import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer'
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
export const SettingsIntegrationNewDatabase = () => {
const { integrationKey = '' } = useParams();
export const SettingsIntegrationNewDatabaseConnection = () => {
const { databaseKey = '' } = useParams();
const navigate = useNavigate();
const [integrationCategoryAll] = useSettingsIntegrationCategories();
const integration = integrationCategoryAll.integrations.find(
({ from: { key } }) => key === integrationKey,
({ from: { key } }) => key === databaseKey,
);
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
@ -26,14 +26,14 @@ export const SettingsIntegrationNewDatabase = () => {
);
const isIntegrationAvailable =
!!integration &&
((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
(integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
((databaseKey === 'airtable' && isAirtableIntegrationEnabled) ||
(databaseKey === 'postgresql' && isPostgresqlIntegrationEnabled));
useEffect(() => {
if (!isIntegrationAvailable) {
navigate(AppPath.NotFound);
}
}, [integration, integrationKey, navigate, isIntegrationAvailable]);
}, [integration, databaseKey, navigate, isIntegrationAvailable]);
if (!isIntegrationAvailable) return null;
@ -45,7 +45,7 @@ export const SettingsIntegrationNewDatabase = () => {
{ children: 'Integrations', href: '/settings/integrations' },
{
children: integration.text,
href: `/settings/integrations/${integrationKey}`,
href: `/settings/integrations/${databaseKey}`,
},
{ children: 'New' },
]}

12
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDetail.stories.tsx → packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabase.stories.tsx
View File

@ -2,7 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SettingsIntegrationDetail } from '~/pages/settings/integrations/SettingsIntegrationDetail';
import { SettingsIntegrationDatabase } from '~/pages/settings/integrations/SettingsIntegrationDatabase';
import {
PageDecorator,
PageDecoratorArgs,
@ -10,12 +10,12 @@ import {
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationDetail',
component: SettingsIntegrationDetail,
title: 'Pages/Settings/Integrations/SettingsIntegrationDatabase',
component: SettingsIntegrationDatabase,
decorators: [PageDecorator],
args: {
routePath: getSettingsPagePath(SettingsPath.IntegrationDetail),
routeParams: { ':integrationKey': 'postgresql' },
routePath: getSettingsPagePath(SettingsPath.IntegrationDatabase),
routeParams: { ':databaseKey': 'postgresql' },
},
parameters: {
msw: graphqlMocks,
@ -24,6 +24,6 @@ const meta: Meta<PageDecoratorArgs> = {
export default meta;
export type Story = StoryObj<typeof SettingsIntegrationDetail>;
export type Story = StoryObj<typeof SettingsIntegrationDatabase>;
export const Default: Story = {};

32
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationDatabaseConnection.stories.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Meta, StoryObj } from '@storybook/react';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SettingsIntegrationDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationDatabaseConnection';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationDatabaseConnection',
component: SettingsIntegrationDatabaseConnection,
decorators: [PageDecorator],
args: {
routePath: getSettingsPagePath(SettingsPath.IntegrationDatabaseConnection),
routeParams: {
':databaseKey': 'postgresql',
':connectionKey': 'twenty_postgres',
},
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsIntegrationDatabaseConnection>;
export const Default: Story = {};

12
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabase.stories.tsx → packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrationNewDatabaseConnection.stories.tsx
View File

@ -1,6 +1,6 @@
import { Meta, StoryObj } from '@storybook/react';
import { SettingsIntegrationNewDatabase } from '~/pages/settings/integrations/SettingsIntegrationNewDatabase';
import { SettingsIntegrationNewDatabaseConnection } from '~/pages/settings/integrations/SettingsIntegrationNewDatabaseConnection';
import {
PageDecorator,
PageDecoratorArgs,
@ -8,12 +8,12 @@ import {
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabase',
component: SettingsIntegrationNewDatabase,
title: 'Pages/Settings/Integrations/SettingsIntegrationNewDatabaseConnection',
component: SettingsIntegrationNewDatabaseConnection,
decorators: [PageDecorator],
args: {
routePath: '/settings/integrations/:integrationKey/new',
routeParams: { ':integrationKey': 'postgresql' },
routePath: '/settings/integrations/:databaseKey/new',
routeParams: { ':databaseKey': 'postgresql' },
},
parameters: {
msw: graphqlMocks,
@ -22,6 +22,6 @@ const meta: Meta<PageDecoratorArgs> = {
export default meta;
export type Story = StoryObj<typeof SettingsIntegrationNewDatabase>;
export type Story = StoryObj<typeof SettingsIntegrationNewDatabaseConnection>;
export const Default: Story = {};