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

Integrations: design fixes and remove feature flag (#4003)

Browse Source 
* Integrations: design fixes and remove feature flag

* Fix
This commit is contained in:
Charles Bochet
2024-02-16 13:35:45 +01:00
committed by GitHub
parent 8e3723b88e
commit a5ecbf7df5
26 changed files with 165 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
packages/twenty-front/public/images/integrations/Github.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 423 B

0
packages/twenty-front/public/images/integrations/Cal.png → packages/twenty-front/public/images/integrations/cal-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
packages/twenty-front/public/images/integrations/github-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

0
packages/twenty-front/public/images/integrations/MailChimp.png → packages/twenty-front/public/images/integrations/mailchimp-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

0
packages/twenty-front/public/images/integrations/Slack.png → packages/twenty-front/public/images/integrations/slack-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

0
packages/twenty-front/public/images/integrations/Tally.png → packages/twenty-front/public/images/integrations/tally-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

0
packages/twenty-front/public/images/integrations/Twenty.svg → packages/twenty-front/public/images/integrations/twenty-logo.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.4 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

0
packages/twenty-front/public/images/integrations/Windmill.png → packages/twenty-front/public/images/integrations/windmill-logo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

15
packages/twenty-front/src/modules/settings/components/SettingsNavigationDrawerItems.tsx
View File

@ -32,7 +32,6 @@ export const SettingsNavigationDrawerItems = () => {
}, [signOut, navigate]);
const isMessagingEnabled = useIsFeatureEnabled('IS_MESSAGING_ENABLED');
const isIntegrationsEnabled = useIsFeatureEnabled('IS_INTEGRATIONS_ENABLED');
const isIntegrationsItemActive = !!useMatch({
path: useResolvedPath('/settings/integrations').pathname,
end: true,
@ -144,14 +143,12 @@ export const SettingsNavigationDrawerItems = () => {
})
}
/>
{isIntegrationsEnabled && (
<NavigationDrawerItem
label="Integrations"
to="/settings/integrations"
Icon={IconApps}
active={isIntegrationsItemActive}
/>
)}
<NavigationDrawerItem
label="Integrations"
to="/settings/integrations"
Icon={IconApps}
active={isIntegrationsItemActive}
/>
</NavigationDrawerSection>
<NavigationDrawerSection>

1
packages/twenty-front/src/modules/workspace/types/FeatureFlagKey.ts
View File

@ -1,6 +1,5 @@
export type FeatureFlagKey =
| 'IS_MESSAGING_ENABLED'
| 'IS_BLOCKLIST_ENABLED'
| 'IS_INTEGRATIONS_ENABLED'
| 'IS_QUICK_ACTIONS_ENABLED'
| 'IS_NEW_RECORD_BOARD_ENABLED';

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

@ -1,12 +1,12 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { SoonPill } from 'tsup.ui.index';
import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
import { SoonPill } from '@/ui/display/pill/components/SoonPill';
import { Button } from '@/ui/input/button/components/Button';
import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
import { Integration, IntegrationType } from './constants/IntegrationTypes';
interface SettingsIntegrationComponentProps {
integration: Integration;
integration: SettingsIntegration;
}
const StyledContainer = styled.div`
@ -36,20 +36,6 @@ const StyledIntegrationLogo = styled.div`
color: ${({ theme }) => theme.border.color.strong};
`;
const StyledButton = styled.button`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
cursor: pointer;
`;
const StyledSoonPill = styled(SoonPill)`
padding: ${({ theme }) => theme.spacing(1)} ${({ theme }) => theme.spacing(2)};
`;
@ -62,7 +48,6 @@ const StyledLogo = styled.img`
export const SettingsIntegrationComponent = ({
integration,
}: SettingsIntegrationComponentProps) => {
const theme = useTheme();
const openLinkInTab = (link: string) => {
window.open(link);
};
@ -83,21 +68,15 @@ export const SettingsIntegrationComponent = ({
</StyledIntegrationLogo>
{integration.text}
</StyledSection>
{integration.type === IntegrationType.Soon ? (
{integration.type === 'Soon' ? (
<StyledSoonPill />
) : (
<StyledButton onClick={() => openLinkInTab(integration.link)}>
{integration.type === IntegrationType.Use ? (
<IconBolt size={theme.icon.size.md} />
) : (
<IconArrowUpRight size={theme.icon.size.md} />
)}
{integration.type === IntegrationType.Goto ? (
<div>{integration.linkText}</div>
) : (
<div>Use</div>
)}
</StyledButton>
<Button
onClick={() => openLinkInTab(integration.link)}
Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
title={integration.type === 'Goto' ? integration.linkText : 'Use'}
size="small"
/>
)}
</StyledContainer>
);

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

@ -3,11 +3,10 @@ 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 { IntegrationCategory } from './constants/IntegrationTypes';
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
interface SettingsIntegrationGroupProps {
integrationGroup: IntegrationCategory;
integrationGroup: SettingsIntegrationCategory;
}
const StyledIntegrationGroupHeader = styled.div`

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

@ -2,16 +2,15 @@ import { SettingsPageContainer } from '@/settings/components/SettingsPageContain
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';
import integrationCategories from './constants/Integrations';
export const SettingsIntegrations = () => {
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
<SettingsPageContainer>
<Breadcrumb links={[{ children: 'Integrations' }]} />
{integrationCategories.map((group) => {
{SETTINGS_INTEGRATION_CATEGORIES.map((group) => {
return <SettingsIntegrationGroup integrationGroup={group} />;
})}
</SettingsPageContainer>

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

@ -0,0 +1,34 @@
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { SettingsIntegrations } from '~/pages/settings/integrations/SettingsIntegrations';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { sleep } from '~/testing/sleep';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Settings/Integrations/SettingsIntegrations',
component: SettingsIntegrations,
decorators: [PageDecorator],
args: { routePath: '/settings/integrations' },
parameters: {
msw: graphqlMocks,
},
};
export default meta;
export type Story = StoryObj<typeof SettingsIntegrations>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await sleep(1000);
await canvas.findByText('Go to GitHub');
},
};

22
packages/twenty-front/src/pages/settings/integrations/constants/IntegrationTypes.ts
View File

@ -1,22 +0,0 @@
export enum IntegrationType {
Use = 'Use',
Goto = 'Goto',
Soon = 'Soon',
}
export interface Integration {
from: { key: string; image: string };
to: { key: string; image: string } | null;
type: IntegrationType;
linkText?: string;
link: string;
text: string;
}
export interface IntegrationCategory {
key: string;
title: string;
hyperlinkText?: string;
hyperlink: string | null;
integrations: Integration[];
}

12
packages/twenty-front/src/pages/settings/integrations/constants/Integrations.ts
View File

@ -1,12 +0,0 @@
import { IntegrationCategory } from './IntegrationTypes';
import requestIntegrations from './Request';
import windmillIntegrations from './Windmill';
import zapierIntegrations from './Zapier';
const integrationCategories: IntegrationCategory[] = [
zapierIntegrations,
windmillIntegrations,
requestIntegrations,
];
export default integrationCategories;

19
packages/twenty-front/src/pages/settings/integrations/constants/Request.ts
View File

@ -1,19 +0,0 @@
import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
const requestIntegrations: IntegrationCategory = {
key: 'request',
title: 'Request an integration',
hyperlink: null,
integrations: [
{
from: { key: 'github', image: '/images/integrations/Github.png' },
to: null,
type: IntegrationType.Goto,
text: 'Request an integration on Github conversations',
link: 'https://github.com/twentyhq/twenty/issues/new/choose',
linkText: 'Go to GitHub',
},
],
};
export default requestIntegrations;

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

@ -0,0 +1,10 @@
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_ZAPIER_CATEGORY,
SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
SETTINGS_INTEGRATION_REQUEST_CATEGORY,
];

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

@ -0,0 +1,18 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
{
key: 'request',
title: 'Request an integration',
hyperlink: null,
integrations: [
{
from: { key: 'github', image: '/images/integrations/github-logo.png' },
to: null,
type: 'Goto',
text: 'Request an integration on Github conversations',
link: 'https://github.com/twentyhq/twenty/discussions/categories/ideas',
linkText: 'Go to GitHub',
},
],
};

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

@ -0,0 +1,21 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
{
key: 'windmill',
title: 'With Windmill',
hyperlink: null,
integrations: [
{
from: {
key: 'windmill',
image: '/images/integrations/windmill-logo.png',
},
to: null,
type: 'Goto',
text: 'Create a workflow with Windmill',
link: 'https://www.windmill.dev',
linkText: 'Go to Windmill',
},
],
};

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

@ -0,0 +1,42 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
{
key: 'zapier',
title: 'With Zapier',
hyperlinkText: 'See all zaps',
hyperlink: 'https://zapier.com/apps/twenty/integrations',
integrations: [
{
from: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
to: { key: 'slack', image: '/images/integrations/slack-logo.png' },
type: 'Use',
text: 'Post to Slack when a company is updated',
link: 'https://zapier.com/apps/twenty/integrations/slack',
},
{
from: { key: 'cal', image: '/images/integrations/cal-logo.png' },
to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
type: 'Use',
text: 'Create a person when Cal.com event is created',
link: 'https://zapier.com/apps/twenty/integrations/calcom',
},
{
from: {
key: 'mailchimp',
image: '/images/integrations/mailchimp-logo.png',
},
to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
type: 'Use',
text: 'Create a person when a MailChimp sub is created',
link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
},
{
from: { key: 'tally', image: '/images/integrations/tally-logo.png' },
to: { key: 'twenty', image: '/images/integrations/twenty-logo.svg' },
type: 'Use',
text: 'Create a company when a Tally form is sent',
link: 'https://zapier.com/apps/twenty/integrations/tally',
},
],
};

19
packages/twenty-front/src/pages/settings/integrations/constants/Windmill.ts
View File

@ -1,19 +0,0 @@
import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
const windmillIntegrations: IntegrationCategory = {
key: 'windmill',
title: 'With Windmill',
hyperlink: null,
integrations: [
{
from: { key: 'windmill', image: '/images/integrations/Windmill.png' },
to: null,
type: IntegrationType.Goto,
text: 'Create a workflow with Windmill',
link: 'https://www.windmill.dev',
linkText: 'Go to Windmill',
},
],
};
export default windmillIntegrations;

40
packages/twenty-front/src/pages/settings/integrations/constants/Zapier.ts
View File

@ -1,40 +0,0 @@
import { IntegrationCategory, IntegrationType } from './IntegrationTypes';
const zapierIntegrations: IntegrationCategory = {
key: 'zapier',
title: 'With Zapier',
hyperlinkText: 'See all zaps',
hyperlink: 'https://zapier.com/apps/twenty/integrations',
integrations: [
{
from: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
to: { key: 'slack', image: '/images/integrations/Slack.png' },
type: IntegrationType.Use,
text: 'Post to Slack when a company is updated',
link: 'https://zapier.com/apps/twenty/integrations/slack',
},
{
from: { key: 'cal', image: '/images/integrations/Cal.png' },
to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
type: IntegrationType.Use,
text: 'Create a person when Cal.com event is created',
link: 'https://zapier.com/apps/twenty/integrations/calcom',
},
{
from: { key: 'mailchimp', image: '/images/integrations/MailChimp.png' },
to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
type: IntegrationType.Use,
text: 'Create a person when a MailChimp sub is created',
link: 'https://zapier.com/apps/twenty/integrations/mailchimp',
},
{
from: { key: 'tally', image: '/images/integrations/Tally.png' },
to: { key: 'twenty', image: '/images/integrations/Twenty.svg' },
type: IntegrationType.Use,
text: 'Create a company when a Tally form is sent',
link: 'https://zapier.com/apps/twenty/integrations/tally',
},
],
};
export default zapierIntegrations;

10
packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts Normal file
View File

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

9
packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts Normal file
View File

@ -0,0 +1,9 @@
import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
export type SettingsIntegrationCategory = {
key: string;
title: string;
hyperlinkText?: string;
hyperlink: string | null;
integrations: SettingsIntegration[];
};

1
packages/twenty-server/src/core/feature-flag/feature-flag.entity.ts
View File

@ -14,7 +14,6 @@ import { IDField } from '@ptc-org/nestjs-query-graphql';
import { Workspace } from 'src/core/workspace/workspace.entity';
export enum FeatureFlagKeys {
IsIntegrationsEnabled = 'IS_INTEGRATIONS_ENABLED',
IsMessagingEnabled = 'IS_MESSAGING_ENABLED',
IsBlocklistEnabled = 'IS_BLOCKLIST_ENABLED',
IsWorkspaceCleanable = 'IS_WORKSPACE_CLEANABLE',