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.

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))

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
+        {currentWorkspace?.isGoogleAuthEnabled && (
-          Icon={IconGoogle}
+          <Button
-          title="Connect with Google"
+            Icon={IconGoogle}
-          variant="secondary"
+            title="Connect with Google"
-          onClick={() => triggerApisOAuth('google')}
+            variant="secondary"
-        />
+            onClick={() => triggerApisOAuth('google')}
-        {isMicrosoftSyncEnabled && (
+          />
+        )}
+        {isMicrosoftSyncEnabled && currentWorkspace?.isMicrosoftAuthEnabled && (
           <Button
             Icon={IconMicrosoft}
             title="Connect with Microsoft"