From 33b028658ed7a6f33456c04e37dc85c9407288bd Mon Sep 17 00:00:00 2001
From: Antoine Moreaux <moreaux.antoine@gmail.com>
Date: Mon, 16 Dec 2024 18:44:30 +0100
Subject: [PATCH] fix(twenty-front): allow to connect available provider only
 (#9080)

Fix #8710

## Summary
The Pull Request updates components related to the settings account
management feature. The changes ensure the behavior of buttons and the
UI dynamically adapts based on the availability of authentication
providers retrieved from the current workspace state.

- Added checks for Google and Microsoft authentication enablement and
used these conditions to display buttons dynamically in both components.
- Updated `SettingsAccountsConnectedAccountsListCard` to dynamically
enable the footer button based on workspace authentication settings.
- Revised `SettingsAccountsListEmptyStateCard` to conditionally render
account connection buttons depending on the availability of enabled
authentication providers in the current workspace state.
---
 ...tingsAccountsConnectedAccountsListCard.tsx | 11 ++++++++++-
 .../SettingsAccountsListEmptyStateCard.tsx    | 19 ++++++++++++-------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
index 6000afa1f..c1f9090ad 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@@ -8,6 +8,9 @@ import { SettingsPath } from '@/types/SettingsPath';
 
 import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
 import { SettingsListCard } from '../../components/SettingsListCard';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValue } from 'recoil';
+import { isDefined } from '~/utils/isDefined';
 
 const ProviderIcons: { [k: string]: IconComponent } = {
   google: IconGoogle,
@@ -22,11 +25,17 @@ export const SettingsAccountsConnectedAccountsListCard = ({
   loading?: boolean;
 }) => {
   const navigate = useNavigate();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   if (!accounts.length) {
     return <SettingsAccountsListEmptyStateCard />;
   }
 
+  const atLeastOneProviderAvailable =
+    isDefined(currentWorkspace) &&
+    (currentWorkspace?.isGoogleAuthEnabled ||
+      currentWorkspace?.isMicrosoftAuthEnabled);
+
   return (
     <SettingsListCard
       items={accounts}
@@ -36,7 +45,7 @@ export const SettingsAccountsConnectedAccountsListCard = ({
       RowRightComponent={({ item: account }) => (
         <SettingsAccountsConnectedAccountsRowRightContainer account={account} />
       )}
-      hasFooter
+      hasFooter={atLeastOneProviderAvailable}
       footerButtonLabel="Add account"
       onFooterButtonClick={() =>
         navigate(getSettingsPagePath(SettingsPath.NewAccount))
diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
index d532691fc..7c875b606 100644
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@@ -9,6 +9,8 @@ import {
   IconGoogle,
   IconMicrosoft,
 } from 'twenty-ui';
+import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
+import { useRecoilValue } from 'recoil';
 
 const StyledHeader = styled(CardHeader)`
   align-items: center;
@@ -30,6 +32,7 @@ export const SettingsAccountsListEmptyStateCard = ({
   label,
 }: SettingsAccountsListEmptyStateCardProps) => {
   const { triggerApisOAuth } = useTriggerApisOAuth();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
   const isMicrosoftSyncEnabled = useIsFeatureEnabled(
     'IS_MICROSOFT_SYNC_ENABLED',
   );
@@ -38,13 +41,15 @@ export const SettingsAccountsListEmptyStateCard = ({
     <Card>
       <StyledHeader>{label || 'No connected account'}</StyledHeader>
       <StyledBody>
-        <Button
-          Icon={IconGoogle}
-          title="Connect with Google"
-          variant="secondary"
-          onClick={() => triggerApisOAuth('google')}
-        />
-        {isMicrosoftSyncEnabled && (
+        {currentWorkspace?.isGoogleAuthEnabled && (
+          <Button
+            Icon={IconGoogle}
+            title="Connect with Google"
+            variant="secondary"
+            onClick={() => triggerApisOAuth('google')}
+          />
+        )}
+        {isMicrosoftSyncEnabled && currentWorkspace?.isMicrosoftAuthEnabled && (
           <Button
             Icon={IconMicrosoft}
             title="Connect with Microsoft"