feat: add Active and Add integration card displays

Closes #4541
twentyhq · Mar 21, 2024 · 7e28378 · 7e28378
1 parent 89e0690
commit 7e28378
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 137 deletions.
diff --git a/...grations/SettingsIntegrationComponent.tsx → ...mponents/SettingsIntegrationComponent.tsx b/...grations/SettingsIntegrationComponent.tsx → ...mponents/SettingsIntegrationComponent.tsx
@@ -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"
         />
       )}

diff --git a/...es/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx b/...es/twenty-front/src/modules/settings/integrations/components/SettingsIntegrationGroup.tsx
@@ -0,0 +1,62 @@
+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';
+
+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) => (
+  <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>
+);
diff --git a/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts b/packages/twenty-front/src/modules/settings/integrations/constants/MockRemoteDatabases.ts
@@ -0,0 +1,10 @@
+export const MOCK_REMOTE_DATABASES = [
+  {
+    name: 'airtable',
+    isActive: false,
+  },
+  {
+    name: 'postgresql',
+    isActive: true,
+  },
+];
diff --git a/...s/constants/SettingsIntegrationRequest.ts → ...s/constants/SettingsIntegrationRequest.ts b/...s/constants/SettingsIntegrationRequest.ts → ...s/constants/SettingsIntegrationRequest.ts
@@ -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 =
   {

diff --git a/.../constants/SettingsIntegrationWindmill.ts → .../constants/SettingsIntegrationWindmill.ts b/.../constants/SettingsIntegrationWindmill.ts → .../constants/SettingsIntegrationWindmill.ts
@@ -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 =
   {

diff --git a/...ns/constants/SettingsIntegrationZapier.ts → ...ns/constants/SettingsIntegrationZapier.ts b/...ns/constants/SettingsIntegrationZapier.ts → ...ns/constants/SettingsIntegrationZapier.ts
@@ -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 =
   {

diff --git a/.../twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts b/.../twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
@@ -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,
+    ];
+  };
diff --git a/...integrations/types/SettingsIntegration.ts → ...integrations/types/SettingsIntegration.ts b/...integrations/types/SettingsIntegration.ts → ...integrations/types/SettingsIntegration.ts
@@ -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 };

diff --git a/...ions/types/SettingsIntegrationCategory.ts → ...ions/types/SettingsIntegrationCategory.ts b/...ions/types/SettingsIntegrationCategory.ts → ...ions/types/SettingsIntegrationCategory.ts
@@ -1,4 +1,4 @@
-import { SettingsIntegration } from '~/pages/settings/integrations/types/SettingsIntegration';
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 
 export type SettingsIntegrationCategory = {
   key: string;

diff --git a/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
@@ -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',
+    },
+  ],
+});
diff --git a/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx b/packages/twenty-front/src/pages/settings/integrations/SettingsIntegrationDetail.tsx
@@ -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,31 +25,25 @@ 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">
       <SettingsPageContainer>
         <Breadcrumb
           links={[
             { children: 'Integrations', href: '/settings/integrations' },
-            { children: integrationLabel },
+            { children: integration.text },
           ]}
         />
       </SettingsPageContainer>