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

feat: create Integrations/IntegrationDetail page (#4574)

Browse Source 
* feat: create Integrations/IntegrationDetail page

Closes #4546

* docs: add Settings/Integrations/Integration Detail page stories

* docs: add Settings/Billing page stories

* refactor: move some Settings components to @/settings

* refactor: move some Settings integrations components to @/settings/integrations
This commit is contained in:
Thaïs
2024-03-25 18:06:46 +01:00
committed by GitHub
parent e126c5c7f3
commit 6ab43c608f
31 changed files with 335 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/twenty-front/src/pages/settings/__stories__/SettingsBilling.stories.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Meta, StoryObj } from '@storybook/react';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { SettingsBilling } from '../SettingsBilling';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/SettingsBilling',
component: SettingsBilling,
decorators: [PageDecorator],
args: { routePath: getSettingsPagePath(SettingsPath.Billing) },
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsBilling>;
export const Default: Story = {};

19
packages/twenty-front/src/pages/settings/accounts/SettingsAccountLoader.tsx
View File

@ -1,19 +0,0 @@
import { Loader } from '@/ui/feedback/loader/components/Loader';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,
AnimatedPlaceholderEmptyTextContainer,
AnimatedPlaceholderEmptyTitle,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
export const SettingsAccountLoader = () => (
<AnimatedPlaceholderEmptyContainer>
<AnimatedPlaceholder type="loadingAccounts" />
<AnimatedPlaceholderEmptyTextContainer>
<AnimatedPlaceholderEmptyTitle>
Loading account(s)
</AnimatedPlaceholderEmptyTitle>
<Loader />
</AnimatedPlaceholderEmptyTextContainer>
</AnimatedPlaceholderEmptyContainer>
);

2
packages/twenty-front/src/pages/settings/accounts/SettingsAccounts.tsx
View File

@ -3,6 +3,7 @@ import { useRecoilValue } from 'recoil';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsAccountLoader } from '@/settings/accounts/components/SettingsAccountLoader';
import { SettingsAccountsConnectedAccountsSection } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsSection';
import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection';
import { SettingsAccountsSettingsSection } from '@/settings/accounts/components/SettingsAccountsSettingsSection';
@ -11,7 +12,6 @@ import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { SettingsAccountLoader } from '~/pages/settings/accounts/SettingsAccountLoader';
export const SettingsAccounts = () => {
const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);

61
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -1,23 +1,70 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { SettingsHeaderContainer } from '@/settings/components/SettingsHeaderContainer';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { IconSettings } from '@/ui/display/icon';
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
import { SettingsReadDocumentationButton } from '@/settings/developers/components/SettingsReadDocumentationButton';
import { SettingsWebhooksTable } from '@/settings/developers/components/SettingsWebhooksTable';
import { IconPlus, IconSettings } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
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 { SettingsDevelopersApiKeys } from '~/pages/settings/developers/api-keys/SettingsDevelopersApiKeys';
import { SettingsDevelopersWebhooks } from '~/pages/settings/developers/webhooks/SettingsDevelopersWebhooks';
import { ReadDocumentationButton } from './components/ReadDocumentationButton';
const StyledButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsDevelopers = () => {
const navigate = useNavigate();
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<SettingsHeaderContainer>
<Breadcrumb links={[{ children: 'Developers' }]} />
<ReadDocumentationButton />
<SettingsReadDocumentationButton />
</SettingsHeaderContainer>
<SettingsDevelopersApiKeys />
<SettingsDevelopersWebhooks />
<Section>
<H2Title
title="API keys"
description="Active APIs keys created by you or your team."
/>
<SettingsApiKeysTable />
<StyledButtonContainer>
<Button
Icon={IconPlus}
title="Create API key"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/api-keys/new');
}}
/>
</StyledButtonContainer>
</Section>
<Section>
<H2Title
title="Webhooks"
description="Establish Webhook endpoints for notifications on asynchronous events."
/>
<SettingsWebhooksTable />
<StyledButtonContainer>
<Button
Icon={IconPlus}
title="Create Webhook"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/webhooks/new');
}}
/>
</StyledButtonContainer>
</Section>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);

0
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysDetail.stories.tsx → packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysDetail.stories.tsx
View File

0
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersApiKeysNew.stories.tsx → packages/twenty-front/src/pages/settings/developers/__stories__/api-keys/SettingsDevelopersApiKeysNew.stories.tsx
View File

2
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksDetail.stories.tsx → packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksDetail.stories.tsx
View File

@ -10,7 +10,7 @@ import {
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksDetail',
title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksDetail',
component: SettingsDevelopersWebhooksDetail,
decorators: [PageDecorator],
args: {

2
packages/twenty-front/src/pages/settings/developers/__stories__/SettingsDevelopersWebhooksNew.stories.tsx → packages/twenty-front/src/pages/settings/developers/__stories__/webhooks/SettingsDevelopersWebhooksNew.stories.tsx
View File

@ -9,7 +9,7 @@ import {
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Developers/SettingsDevelopersWebhooksNew',
title: 'Pages/Settings/Developers/Webhooks/SettingsDevelopersWebhooksNew',
component: SettingsDevelopersWebhooksNew,
decorators: [PageDecorator],
args: { routePath: '/settings/developers' },

80
packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeys.tsx
View File

@ -1,80 +0,0 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
import { ApiKey } from '@/settings/developers/types/api-key/ApiKey';
import { formatExpirations } from '@/settings/developers/utils/format-expiration';
import { IconPlus } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
const StyledDiv = styled.div`
display: flex;
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px 132px 68px;
`;
const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`;
export const SettingsDevelopersApiKeys = () => {
const navigate = useNavigate();
const { records: apiKeys } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.ApiKey,
filter: { revokedAt: { is: 'NULL' } },
});
return (
<Section>
<H2Title
title="API keys"
description="Active APIs keys created by you or your team."
/>
<Table>
<StyledTableRow>
<TableHeader>Name</TableHeader>
<TableHeader>Expiration</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
{!!apiKeys.length && (
<StyledTableBody>
{formatExpirations(apiKeys as ApiKey[]).map((fieldItem) => (
<SettingsApiKeysFieldItemTableRow
key={fieldItem.id}
fieldItem={fieldItem as ApiFieldItem}
onClick={() => {
navigate(`/settings/developers/api-keys/${fieldItem.id}`);
}}
/>
))}
</StyledTableBody>
)}
</Table>
<StyledDiv>
<Button
Icon={IconPlus}
title="Create API key"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/api-keys/new');
}}
/>
</StyledDiv>
</Section>
);
};

17
packages/twenty-front/src/pages/settings/developers/components/ReadDocumentationButton.tsx
View File

@ -1,17 +0,0 @@
import { IconBook2 } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
export const ReadDocumentationButton = () => {
return (
<Button
title="Read documentation"
variant="primary"
accent="default"
size="small"
Icon={IconBook2}
onClick={() => {
window.open('https://docs.twenty.com');
}}
></Button>
);
};

76
packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhooks.tsx
View File

@ -1,76 +0,0 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsDevelopersWebhookTableRow } from '@/settings/developers/components/SettingsDevelopersWebhookTableRow';
import { WebhookFieldItem } from '@/settings/developers/types/webhook/WebhookFieldItem';
import { IconPlus } from '@/ui/display/icon';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Button } from '@/ui/input/button/components/Button';
import { Section } from '@/ui/layout/section/components/Section';
import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
const StyledDiv = styled.div`
display: flex;
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
`;
const StyledTableRow = styled(TableRow)`
grid-template-columns: 444px 68px;
`;
const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
`;
export const SettingsDevelopersWebhooks = () => {
const navigate = useNavigate();
const { records: webhooks } = useFindManyRecords({
objectNameSingular: CoreObjectNameSingular.Webhook,
});
return (
<Section>
<H2Title
title="Webhooks"
description="Establish Webhook endpoints for notifications on asynchronous events."
/>
<Table>
<StyledTableRow>
<TableHeader>Url</TableHeader>
<TableHeader></TableHeader>
</StyledTableRow>
{!!webhooks.length && (
<StyledTableBody>
{webhooks.map((fieldItem) => (
<SettingsDevelopersWebhookTableRow
key={fieldItem.id}
fieldItem={fieldItem as WebhookFieldItem}
onClick={() => {
navigate(`/settings/developers/webhooks/${fieldItem.id}`);
}}
/>
))}
</StyledTableBody>
)}
</Table>
<StyledDiv>
<Button
Icon={IconPlus}
title="Create Webhook"
size="small"
variant="secondary"
onClick={() => {
navigate('/settings/developers/webhooks/new');
}}
/>
</StyledDiv>
</Section>
);
};

83
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
View File

@ -1,83 +0,0 @@
import styled from '@emotion/styled';
import { Pill } from 'twenty-ui';
import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
import { Button } from '@/ui/input/button/components/Button';
import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
interface SettingsIntegrationComponentProps {
integration: SettingsIntegration;
}
const StyledContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
font-size: ${({ theme }) => theme.font.size.md};
display: flex;
flex-direction: row;
justify-content: space-between;
padding: ${({ theme }) => theme.spacing(3)};
`;
const StyledSection = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(3)};
`;
const StyledIntegrationLogo = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
color: ${({ theme }) => theme.border.color.strong};
`;
const StyledSoonPill = styled(Pill)`
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
`;
const StyledLogo = styled.img`
height: 24px;
width: 24px;
`;
export const SettingsIntegrationComponent = ({
integration,
}: SettingsIntegrationComponentProps) => {
const openLinkInTab = (link: string) => {
window.open(link);
};
return (
<StyledContainer>
<StyledSection>
<StyledIntegrationLogo>
<StyledLogo src={integration.from.image} alt={integration.from.key} />
{integration.to ? (
<>
<div>→</div>
<StyledLogo src={integration.to.image} alt={integration.to.key} />
</>
) : (
<></>
)}
</StyledIntegrationLogo>
{integration.text}
</StyledSection>
{integration.type === 'Soon' ? (
<StyledSoonPill label="Soon" />
) : (
<Button
onClick={() => openLinkInTab(integration.link)}
Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
title={integration.type === 'Goto' ? integration.linkText : 'Use'}
size="small"
/>
)}
</StyledContainer>
);
};

56
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx Normal file
View File

@ -0,0 +1,56 @@
import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { AppPath } from '@/types/AppPath';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
export const SettingsIntegrationDetail = () => {
const { integrationKey = '' } = useParams();
const navigate = useNavigate();
const integrationLabel = SETTINGS_INTEGRATION_ALL_CATEGORY.integrations.find(
({ from: { key } }) => key === integrationKey,
)?.text;
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
'IS_AIRTABLE_INTEGRATION_ENABLED',
);
const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
'IS_POSTGRESQL_INTEGRATION_ENABLED',
);
const isIntegrationAvailable =
(integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
(integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled);
useEffect(() => {
if (!integrationLabel || !isIntegrationAvailable) {
return navigate(AppPath.NotFound);
}
}, [
integrationLabel,
integrationKey,
isAirtableIntegrationEnabled,
isIntegrationAvailable,
isPostgresqlIntegrationEnabled,
navigate,
]);
if (!integrationLabel || !isIntegrationAvailable) return null;
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb
links={[
{ children: 'Integrations', href: '/settings/integrations' },
{ children: integrationLabel },
]}
/>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);
};

60
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationGroup.tsx
View File

@ -1,60 +0,0 @@
import styled from '@emotion/styled';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
import { SettingsIntegrationComponent } from '~/pages/settings/integrations/SettingsIntegrationComponent';
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
interface SettingsIntegrationGroupProps {
integrationGroup: SettingsIntegrationCategory;
}
const StyledIntegrationGroupHeader = styled.div`
align-items: start;
display: flex;
flex-direction: row;
justify-content: space-between;
`;
const StyledGroupLink = styled.div`
align-items: start;
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(1)};
cursor: pointer;
`;
const StyledIntegrationsSection = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(4)};
`;
export const SettingsIntegrationGroup = ({
integrationGroup,
}: SettingsIntegrationGroupProps) => {
const openLinkInTab = (link: string) => {
window.open(link);
};
return (
<Section>
<StyledIntegrationGroupHeader>
<H2Title title={integrationGroup.title} />
{integrationGroup.hyperlink && (
<StyledGroupLink
onClick={() => openLinkInTab(integrationGroup.hyperlink ?? '')}
>
<div>{integrationGroup.hyperlinkText}</div>
<div>→</div>
</StyledGroupLink>
)}
</StyledIntegrationGroupHeader>
<StyledIntegrationsSection>
{integrationGroup.integrations.map((integration) => {
return <SettingsIntegrationComponent integration={integration} />;
})}
</StyledIntegrationsSection>
</Section>
);
};

2
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
View File

@ -1,9 +1,9 @@
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsIntegrationGroup } from '@/settings/integrations/components/SettingsIntegrationGroup';
import { IconSettings } from '@/ui/display/icon';
import { SubMenuTopBarContainer } from '@/ui/layout/page/SubMenuTopBarContainer';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { SETTINGS_INTEGRATION_CATEGORIES } from '~/pages/settings/integrations/constants/SettingsIntegrationCategories';
import { SettingsIntegrationGroup } from '~/pages/settings/integrations/SettingsIntegrationGroup';
export const SettingsIntegrations = () => {
return (

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

@ -0,0 +1,29 @@
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 {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrationDetail',
component: SettingsIntegrationDetail,
decorators: [PageDecorator],
args: {
routePath: getSettingsPagePath(SettingsPath.IntegrationDetail),
routeParams: { ':integrationKey': 'postgresql' },
},
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsIntegrationDetail>;
export const Default: Story = {};

4
packages/twenty-front/src/pages/settings/integrations/__stories__/SettingsIntegrations.stories.tsx
View File

@ -1,6 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
import {
PageDecorator,
@ -13,7 +15,7 @@ const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrations',
component: SettingsIntegrations,
decorators: [PageDecorator],
args: { routePath: '/settings/integrations' },
args: { routePath: getSettingsPagePath(SettingsPath.Integrations) },
parameters: {
msw: graphqlMocks,
},

26
packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts Normal file
View File

@ -0,0 +1,26 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_ALL_CATEGORY: SettingsIntegrationCategory = {
key: 'all',
title: 'All',
integrations: [
{
from: {
key: 'airtable',
image: '/images/integrations/airtable-logo.png',
},
type: 'Soon',
text: 'Airtable',
link: '/settings/integrations/airtable',
},
{
from: {
key: 'postgresql',
image: '/images/integrations/postgresql-logo.png',
},
type: 'Soon',
text: 'PostgreSQL',
link: '/settings/integrations/postgresql',
},
],
};

2
packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts
View File

@ -1,9 +1,11 @@
import { SETTINGS_INTEGRATION_ALL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationAll';
import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationRequest';
import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationWindmill';
import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '~/pages/settings/integrations/constants/SettingsIntegrationZapier';
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_CATEGORIES: SettingsIntegrationCategory[] = [
SETTINGS_INTEGRATION_ALL_CATEGORY,
SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
SETTINGS_INTEGRATION_REQUEST_CATEGORY,

2
packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts
View File

@ -2,7 +2,7 @@ export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
export type SettingsIntegration = {
from: { key: string; image: string };
to: { key: string; image: string } | null;
to?: { key: string; image: string } | null;
type: SettingsIntegrationType;
linkText?: string;
link: string;

2
packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts
View File

@ -4,6 +4,6 @@ export type SettingsIntegrationCategory = {
key: string;
title: string;
hyperlinkText?: string;
hyperlink: string | null;
hyperlink?: string | null;
integrations: SettingsIntegration[];
};