feat: create Integrations/IntegrationDetail page (#4574)

* 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
2024-03-25 18:06:46 +01:00
parent e126c5c7f3
commit 6ab43c608f
31 changed files with 335 additions and 174 deletions
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationComponent.tsx
@ -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>
-  );
-};
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@ -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>
+  );
+};
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationGroup.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationGroup.tsx
@ -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>
-  );
-};
--- a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrations.tsx
@ -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 (
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationDetail.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrationDetail.stories.tsx
@ -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 = {};
--- a/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrations.stories.tsx
+++ b/packages/twenty-front/src/pages/settings/integrations/stories/SettingsIntegrations.stories.tsx
@ -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,
  },
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts
+++ b/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationAll.ts
@ -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',
+    },
+  ],
+};
--- a/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts
+++ b/packages/twenty-front/src/pages/settings/integrations/constants/SettingsIntegrationCategories.ts
@ -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,
--- a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts
+++ b/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegration.ts
@ -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;
--- a/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts
+++ b/packages/twenty-front/src/pages/settings/integrations/types/SettingsIntegrationCategory.ts
@ -4,6 +4,6 @@ export type SettingsIntegrationCategory = {
  key: string;
  title: string;
  hyperlinkText?: string;
-  hyperlink: string | null;
+  hyperlink?: string | null;
  integrations: SettingsIntegration[];
 };