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

feat: add Active and Add integration card displays (#4591)

Browse Source 
* feat: add Active and Add integration card displays

Closes #4541

* docs: add PaymentSuccess page stories

* refactor: move page components
This commit is contained in:
Thaïs
2024-03-25 18:53:30 +01:00
committed by GitHub
parent 6ab43c608f
commit 8baa59b6f4
19 changed files with 242 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
packages/twenty-front/src/App.tsx
View File

@ -1,11 +1,12 @@
import { Route, Routes } from 'react-router-dom';
import { Route, Routes, useLocation } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { VerifyEffect } from '@/auth/components/VerifyEffect';
import { billingState } from '@/client-config/states/billingState.ts';
import { AppPath } from '@/types/AppPath';
import { SettingsPath } from '@/types/SettingsPath';
import { DefaultLayout } from '@/ui/layout/page/DefaultLayout';
import { DefaultPageTitle } from '~/DefaultPageTitle';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
import { CommandMenuEffect } from '~/effect-components/CommandMenuEffect';
import { GotoHotkeysEffect } from '~/effect-components/GotoHotkeysEffect';
import { ChooseYourPlan } from '~/pages/auth/ChooseYourPlan.tsx';
@ -14,7 +15,6 @@ import { CreateWorkspace } from '~/pages/auth/CreateWorkspace';
import { PasswordReset } from '~/pages/auth/PasswordReset';
import { PaymentSuccess } from '~/pages/auth/PaymentSuccess.tsx';
import { SignInUp } from '~/pages/auth/SignInUp';
import { VerifyEffect } from '~/pages/auth/VerifyEffect';
import { DefaultHomePage } from '~/pages/DefaultHomePage';
import { ImpersonateEffect } from '~/pages/impersonate/ImpersonateEffect';
import { NotFound } from '~/pages/not-found/NotFound';
@ -46,13 +46,16 @@ import { SettingsProfile } from '~/pages/settings/SettingsProfile';
import { SettingsWorkspace } from '~/pages/settings/SettingsWorkspace';
import { SettingsWorkspaceMembers } from '~/pages/settings/SettingsWorkspaceMembers';
import { Tasks } from '~/pages/tasks/Tasks';
import { getPageTitleFromPath } from '~/utils/title-utils';
export const App = () => {
const billing = useRecoilValue(billingState);
const { pathname } = useLocation();
const pageTitle = getPageTitleFromPath(pathname);
return (
<>
<DefaultPageTitle />
<PageTitle title={pageTitle} />
<GotoHotkeysEffect />
<CommandMenuEffect />
<DefaultLayout>

11
packages/twenty-front/src/DefaultPageTitle.tsx
View File

@ -1,11 +0,0 @@
import { useLocation } from 'react-router-dom';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
import { getPageTitleFromPath } from '~/utils/title-utils';
export const DefaultPageTitle = () => {
const { pathname } = useLocation();
const pageTitle = getPageTitleFromPath(pathname);
return <PageTitle title={pageTitle} />;
};

0
packages/twenty-front/src/pages/auth/VerifyEffect.tsx → packages/twenty-front/src/modules/auth/components/VerifyEffect.tsx
View File

53
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationComponent.tsx
View File

@ -1,9 +1,13 @@
import { useNavigate } from 'react-router-dom';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Pill } from 'twenty-ui';
import { IconArrowUpRight, IconBolt } from '@/ui/display/icon';
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
import { IconArrowUpRight, IconBolt, IconPlus } from '@/ui/display/icon';
import { Status } from '@/ui/display/status/components/Status';
import { Button } from '@/ui/input/button/components/Button';
import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
import { isDefined } from '~/utils/isDefined';
interface SettingsIntegrationComponentProps {
integration: SettingsIntegration;
@ -19,6 +23,12 @@ const StyledContainer = styled.div`
flex-direction: row;
justify-content: space-between;
padding: ${({ theme }) => theme.spacing(3)};
${({ onClick }) =>
isDefined(onClick) &&
css`
cursor: pointer;
`}
`;
const StyledSection = styled.div`
@ -48,33 +58,52 @@ const StyledLogo = styled.img`
export const SettingsIntegrationComponent = ({
integration,
}: SettingsIntegrationComponentProps) => {
const openLinkInTab = (link: string) => {
window.open(link);
};
const navigate = useNavigate();
const navigateToIntegrationPage = () => navigate(integration.link);
const openExternalLink = () => window.open(integration.link);
return (
<StyledContainer>
<StyledContainer
onClick={
integration.type === 'Active' ? navigateToIntegrationPage : undefined
}
>
<StyledSection>
<StyledIntegrationLogo>
<StyledLogo src={integration.from.image} alt={integration.from.key} />
{integration.to ? (
{isDefined(integration.to) && (
<>
<div>→</div>
<StyledLogo src={integration.to.image} alt={integration.to.key} />
</>
) : (
<></>
)}
</StyledIntegrationLogo>
{integration.text}
</StyledSection>
{integration.type === 'Soon' ? (
<StyledSoonPill label="Soon" />
) : integration.type === 'Active' ? (
<Status color="green" text="Active" />
) : integration.type === 'Add' ? (
<Button
onClick={navigateToIntegrationPage}
Icon={IconPlus}
title="Add"
size="small"
/>
) : integration.type === 'Use' ? (
<Button
onClick={openExternalLink}
Icon={IconBolt}
title="Use"
size="small"
/>
) : (
<Button
onClick={() => openLinkInTab(integration.link)}
Icon={integration.type === 'Goto' ? IconArrowUpRight : IconBolt}
title={integration.type === 'Goto' ? integration.linkText : 'Use'}
onClick={openExternalLink}
Icon={IconArrowUpRight}
title={integration.linkText}
size="small"
/>
)}

54
packages/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
View File

@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { Section } from '@/ui/layout/section/components/Section';
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
interface SettingsIntegrationGroupProps {
integrationGroup: SettingsIntegrationCategory;
@ -33,28 +33,30 @@ const StyledIntegrationsSection = styled.div`
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>
);
};
}: SettingsIntegrationGroupProps) => (
<Section>
<StyledIntegrationGroupHeader>
<H2Title title={integrationGroup.title} />
{integrationGroup.hyperlink && (
<StyledGroupLink
onClick={() => window.open(integrationGroup.hyperlink ?? '')}
>
<div>{integrationGroup.hyperlinkText}</div>
<div>→</div>
</StyledGroupLink>
)}
</StyledIntegrationGroupHeader>
<StyledIntegrationsSection>
{integrationGroup.integrations.map((integration) => (
<SettingsIntegrationComponent
key={[
integrationGroup.key,
integration.from.key,
integration.to?.key,
].join('-')}
integration={integration}
/>
))}
</StyledIntegrationsSection>
</Section>
);

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

@ -0,0 +1,10 @@
export const MOCK_REMOTE_DATABASES = [
{
name: 'airtable',
isActive: false,
},
{
name: 'postgresql',
isActive: true,
},
];

2
packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationRequest.ts → packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationRequest.ts
View File

@ -1,4 +1,4 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_REQUEST_CATEGORY: SettingsIntegrationCategory =
{

2
packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationWindmill.ts → packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationWindmill.ts
View File

@ -1,4 +1,4 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_WINDMILL_CATEGORY: SettingsIntegrationCategory =
{

2
packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationZapier.ts → packages/twenty-front/src/modules/settings/integrations/constants/SettingsIntegrationZapier.ts
View File

@ -1,4 +1,4 @@
import { SettingsIntegrationCategory } from '~/pages/settings/integrations/types/SettingsIntegrationCategory';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
export const SETTINGS_INTEGRATION_ZAPIER_CATEGORY: SettingsIntegrationCategory =
{

35
packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts Normal file
View File

@ -0,0 +1,35 @@
import { MOCK_REMOTE_DATABASES } from '@/settings/integrations/constants/MockRemoteDatabases';
import { SETTINGS_INTEGRATION_REQUEST_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationRequest';
import { SETTINGS_INTEGRATION_WINDMILL_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationWindmill';
import { SETTINGS_INTEGRATION_ZAPIER_CATEGORY } from '@/settings/integrations/constants/SettingsIntegrationZapier';
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
import { getSettingsIntegrationAll } from '@/settings/integrations/utils/getSettingsIntegrationAll';
import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
export const useSettingsIntegrationCategories =
(): SettingsIntegrationCategory[] => {
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
'IS_AIRTABLE_INTEGRATION_ENABLED',
);
const isAirtableIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
({ name }) => name === 'airtable',
)?.isActive;
const isPostgresqlIntegrationEnabled = useIsFeatureEnabled(
'IS_POSTGRESQL_INTEGRATION_ENABLED',
);
const isPostgresqlIntegrationActive = !!MOCK_REMOTE_DATABASES.find(
({ name }) => name === 'postgresql',
)?.isActive;
return [
getSettingsIntegrationAll({
isAirtableIntegrationEnabled,
isAirtableIntegrationActive,
isPostgresqlIntegrationEnabled,
isPostgresqlIntegrationActive,
}),
SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
SETTINGS_INTEGRATION_REQUEST_CATEGORY,
];
};

7
packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts → packages/twenty-front/src/modules/settings/integrations/types/SettingsIntegration.ts
View File

@ -1,4 +1,9 @@
export type SettingsIntegrationType = 'Use' | 'Goto' | 'Soon';
export type SettingsIntegrationType =
| 'Active'
| 'Add'
| 'Goto'
| 'Soon'
| 'Use';
export type SettingsIntegration = {
from: { key: string; image: string };

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

@ -1,4 +1,4 @@
import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
export type SettingsIntegrationCategory = {
key: string;

44
packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts Normal file
View File

@ -0,0 +1,44 @@
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
export const getSettingsIntegrationAll = ({
isAirtableIntegrationEnabled,
isAirtableIntegrationActive,
isPostgresqlIntegrationEnabled,
isPostgresqlIntegrationActive,
}: {
isAirtableIntegrationEnabled: boolean;
isAirtableIntegrationActive: boolean;
isPostgresqlIntegrationEnabled: boolean;
isPostgresqlIntegrationActive: boolean;
}): SettingsIntegrationCategory => ({
key: 'all',
title: 'All',
integrations: [
{
from: {
key: 'airtable',
image: '/images/integrations/airtable-logo.png',
},
type: !isAirtableIntegrationEnabled
? 'Soon'
: isAirtableIntegrationActive
? 'Active'
: 'Add',
text: 'Airtable',
link: '/settings/integrations/airtable',
},
{
from: {
key: 'postgresql',
image: '/images/integrations/postgresql-logo.png',
},
type: !isPostgresqlIntegrationEnabled
? 'Soon'
: isPostgresqlIntegrationActive
? 'Active'
: 'Add',
text: 'PostgreSQL',
link: '/settings/integrations/postgresql',
},
],
});

0
packages/twenty-front/src/pages/auth/__stories__/PasswordResert.stories.tsx → packages/twenty-front/src/pages/auth/__stories__/PasswordReset.stories.tsx
View File

48
packages/twenty-front/src/pages/auth/__stories__/PaymentSuccess.stories.tsx Normal file
View File

@ -0,0 +1,48 @@
import { getOperationName } from '@apollo/client/utilities';
import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/testing-library';
import { graphql, HttpResponse } from 'msw';
import { AppPath } from '@/types/AppPath';
import { GET_CURRENT_USER } from '@/users/graphql/queries/getCurrentUser';
import {
PageDecorator,
PageDecoratorArgs,
} from '~/testing/decorators/PageDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { mockedOnboardingUsersData } from '~/testing/mock-data/users';
import { PaymentSuccess } from '../PaymentSuccess';
const meta: Meta<PageDecoratorArgs> = {
title: 'Pages/Auth/PaymentSuccess',
component: PaymentSuccess,
decorators: [PageDecorator],
args: { routePath: AppPath.PlanRequiredSuccess },
parameters: {
msw: {
handlers: [
graphql.query(getOperationName(GET_CURRENT_USER) ?? '', () => {
return HttpResponse.json({
data: {
currentUser: mockedOnboardingUsersData[0],
},
});
}),
graphqlMocks.handlers,
],
},
},
};
export default meta;
export type Story = StoryObj<typeof PaymentSuccess>;
export const Default: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await canvas.findByText('Start');
},
};

30
packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
View File

@ -2,19 +2,21 @@ import { useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { useSettingsIntegrationCategories } from '@/settings/integrations/hooks/useSettingsIntegrationCategories';
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(
const [integrationCategoryAll] = useSettingsIntegrationCategories();
const integration = integrationCategoryAll.integrations.find(
({ from: { key } }) => key === integrationKey,
)?.text;
);
const isAirtableIntegrationEnabled = useIsFeatureEnabled(
'IS_AIRTABLE_INTEGRATION_ENABLED',
@ -23,23 +25,17 @@ export const SettingsIntegrationDetail = () => {
'IS_POSTGRESQL_INTEGRATION_ENABLED',
);
const isIntegrationAvailable =
(integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
(integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled);
!!integration &&
((integrationKey === 'airtable' && isAirtableIntegrationEnabled) ||
(integrationKey === 'postgresql' && isPostgresqlIntegrationEnabled));
useEffect(() => {
if (!integrationLabel || !isIntegrationAvailable) {
return navigate(AppPath.NotFound);
if (!isIntegrationAvailable) {
navigate(AppPath.NotFound);
}
}, [
integrationLabel,
integrationKey,
isAirtableIntegrationEnabled,
isIntegrationAvailable,
isPostgresqlIntegrationEnabled,
navigate,
]);
}, [integration, integrationKey, navigate, isIntegrationAvailable]);
if (!integrationLabel || !isIntegrationAvailable) return null;
if (!isIntegrationAvailable) return null;
return (
<SubMenuTopBarContainer Icon={IconSettings} title="Settings">
@ -47,7 +43,7 @@ export const SettingsIntegrationDetail = () => {
<Breadcrumb
links={[
{ children: 'Integrations', href: '/settings/integrations' },
{ children: integrationLabel },
{ children: integration.text },
]}
/>
</SettingsPageContainer>

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

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

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

@ -1,26 +0,0 @@
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',
},
],
};

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

@ -1,12 +0,0 @@
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,
];