From d504a6c437e24b546453d6b95487ddbf32eba21f Mon Sep 17 00:00:00 2001
From: Raul Villarreal <ernesto.villarreal@encora.com>
Date: Thu, 26 Sep 2024 03:19:12 -0600
Subject: [PATCH] Fix: Remove 'Soon' integrations from Settings when disabled
 (#7259)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
This PR addresses issue #7110, where Airtable, Stripe and PostgreSQL
integrations were showing as "Soon" under Settings > Integrations.

## Changes

- Update `getSettingsIntegrationAll` so that when these integrations are
disabled (via feature flags), they are removed from the list instead of
showing as "Soon".
<img width="569" alt="Screenshot 2024-09-25 at 11 21 07 a m"
src="https://github.com/user-attachments/assets/dae34e1f-b231-4e0c-bbd0-7d43a6a2f94a">

- Tweaked `useSettingsIntegrationCategories` to only show the "All"
category if there's at least one integration enabled.
<img width="582" alt="Screenshot 2024-09-25 at 11 21 15 a m"
src="https://github.com/user-attachments/assets/57b87b18-8018-49e5-a507-527f2e6e701b">

## Notes
This is my first contribution to the project, so I'm open to feedback! 😄
Let me know if there's anything I should tweak or improve.
---
 .../hooks/useSettingsIntegrationCategories.ts | 18 +++++++------
 .../utils/getSettingsIntegrationAll.ts        | 27 ++++++-------------
 2 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts b/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
index 38a639127..d70dd9b49 100644
--- a/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/hooks/useSettingsIntegrationCategories.ts
@@ -29,15 +29,17 @@ export const useSettingsIntegrationCategories =
       ({ name }) => name === 'stripe',
     )?.isActive;
 
+    const allIntegrations = getSettingsIntegrationAll({
+      isAirtableIntegrationEnabled,
+      isAirtableIntegrationActive,
+      isPostgresqlIntegrationEnabled,
+      isPostgresqlIntegrationActive,
+      isStripeIntegrationEnabled,
+      isStripeIntegrationActive,
+    });
+
     return [
-      getSettingsIntegrationAll({
-        isAirtableIntegrationEnabled,
-        isAirtableIntegrationActive,
-        isPostgresqlIntegrationEnabled,
-        isPostgresqlIntegrationActive,
-        isStripeIntegrationEnabled,
-        isStripeIntegrationActive,
-      }),
+      ...(allIntegrations.integrations.length > 0 ? [allIntegrations] : []),
       SETTINGS_INTEGRATION_ZAPIER_CATEGORY,
       SETTINGS_INTEGRATION_WINDMILL_CATEGORY,
       SETTINGS_INTEGRATION_REQUEST_CATEGORY,
diff --git a/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
index a61532673..97061ade9 100644
--- a/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
+++ b/packages/twenty-front/src/modules/settings/integrations/utils/getSettingsIntegrationAll.ts
@@ -1,3 +1,4 @@
+import { SettingsIntegration } from '@/settings/integrations/types/SettingsIntegration';
 import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
 
 export const getSettingsIntegrationAll = ({
@@ -18,44 +19,32 @@ export const getSettingsIntegrationAll = ({
   key: 'all',
   title: 'All',
   integrations: [
-    {
+    isAirtableIntegrationEnabled && {
       from: {
         key: 'airtable',
         image: '/images/integrations/airtable-logo.png',
       },
-      type: !isAirtableIntegrationEnabled
-        ? 'Soon'
-        : isAirtableIntegrationActive
-          ? 'Active'
-          : 'Add',
+      type: isAirtableIntegrationActive ? 'Active' : 'Add',
       text: 'Airtable',
       link: '/settings/integrations/airtable',
     },
-    {
+    isPostgresqlIntegrationEnabled && {
       from: {
         key: 'postgresql',
         image: '/images/integrations/postgresql-logo.png',
       },
-      type: !isPostgresqlIntegrationEnabled
-        ? 'Soon'
-        : isPostgresqlIntegrationActive
-          ? 'Active'
-          : 'Add',
+      type: isPostgresqlIntegrationActive ? 'Active' : 'Add',
       text: 'PostgreSQL',
       link: '/settings/integrations/postgresql',
     },
-    {
+    isStripeIntegrationEnabled && {
       from: {
         key: 'stripe',
         image: '/images/integrations/stripe-logo.png',
       },
-      type: !isStripeIntegrationEnabled
-        ? 'Soon'
-        : isStripeIntegrationActive
-          ? 'Active'
-          : 'Add',
+      type: isStripeIntegrationActive ? 'Active' : 'Add',
       text: 'Stripe',
       link: '/settings/integrations/stripe',
     },
-  ],
+  ].filter(Boolean) as SettingsIntegration[],
 });