feat(front): improve SettingsOptionCardContent

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelDetails.tsx

@@ -5,9 +5,14 @@ import { SettingsAccountsEventVisibilitySettingsCard } from '@/settings/accounts
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import styled from '@emotion/styled';
 import { Section } from '@react-email/components';
-import { Card, H2Title } from 'twenty-ui';
+import { useId } from 'react';
+import { Card, H2Title, Toggle } from 'twenty-ui';
 import { CalendarChannelVisibility } from '~/generated-metadata/graphql';
 
+const StyledToggle = styled(Toggle)`
+  margin-left: auto;
+`;
+
 const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -46,6 +51,8 @@ export const SettingsAccountsCalendarChannelDetails = ({
     });
   };
 
+  const labelId = useId();
+
   return (
     <StyledDetailsContainer>
       <Section>
@@ -65,15 +72,20 @@ export const SettingsAccountsCalendarChannelDetails = ({
         />
         <Card>
           <SettingsOptionCardContent
+            labelId={labelId}
             title="Auto-creation"
             description="Automatically create contacts for people."
-            checked={calendarChannel.isContactAutoCreationEnabled}
-            onChange={() => {
-              handleContactAutoCreationToggle(
-                !calendarChannel.isContactAutoCreationEnabled,
-              );
-            }}
-          />
+          >
+            <StyledToggle
+              id={labelId}
+              value={calendarChannel.isContactAutoCreationEnabled}
+              onChange={() =>
+                handleContactAutoCreationToggle(
+                  !calendarChannel.isContactAutoCreationEnabled,
+                )
+              }
+            />
+          </SettingsOptionCardContent>
         </Card>
       </Section>
     </StyledDetailsContainer>

packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelDetails.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Card, H2Title, Section } from 'twenty-ui';
+import { Card, H2Title, Section, Toggle } from 'twenty-ui';
 
 import {
   MessageChannel,
@@ -11,6 +11,7 @@ import { SettingsAccountsMessageAutoCreationCard } from '@/settings/accounts/com
 import { SettingsAccountsMessageVisibilityCard } from '@/settings/accounts/components/SettingsAccountsMessageVisibilityCard';
 import { SettingsOptionCardContent } from '@/settings/components/SettingsOptionCardContent';
 import { MessageChannelVisibility } from '~/generated-metadata/graphql';
+import { useId } from 'react';
 
 type SettingsAccountsMessageChannelDetailsProps = {
   messageChannel: Pick<
@@ -24,6 +25,10 @@ type SettingsAccountsMessageChannelDetailsProps = {
   >;
 };
 
+const StyledToggle = styled(Toggle)`
+  margin-left: auto;
+`;
+
 const StyledDetailsContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -75,6 +80,11 @@ export const SettingsAccountsMessageChannelDetails = ({
     });
   };
 
+  const labels = {
+    excludeNonProfessionalEmails: useId(),
+    excludeGroupEmails: useId(),
+  };
+
   return (
     <StyledDetailsContainer>
       <Section>
@@ -100,26 +110,36 @@ export const SettingsAccountsMessageChannelDetails = ({
       <Section>
         <Card>
           <SettingsOptionCardContent
+            labelId={labels.excludeNonProfessionalEmails}
             title="Exclude non-professional emails"
             description="Don’t create contacts from/to Gmail, Outlook emails"
             divider
-            checked={messageChannel.excludeNonProfessionalEmails}
-            onChange={() => {
-              handleIsNonProfessionalEmailExcludedToggle(
-                !messageChannel.excludeNonProfessionalEmails,
-              );
-            }}
-          />
+          >
+            <StyledToggle
+              id={labels.excludeNonProfessionalEmails}
+              value={messageChannel.excludeNonProfessionalEmails}
+              onChange={() =>
+                handleIsNonProfessionalEmailExcludedToggle(
+                  !messageChannel.excludeNonProfessionalEmails,
+                )
+              }
+            />
+          </SettingsOptionCardContent>
           <SettingsOptionCardContent
+            labelId={labels.excludeGroupEmails}
             title="Exclude group emails"
             description="Don’t sync emails from team@ support@ noreply@..."
-            checked={messageChannel.excludeGroupEmails}
-            onChange={() =>
-              handleIsGroupEmailExcludedToggle(
-                !messageChannel.excludeGroupEmails,
-              )
-            }
-          />
+          >
+            <StyledToggle
+              id={labels.excludeGroupEmails}
+              value={messageChannel.excludeGroupEmails}
+              onChange={() =>
+                handleIsGroupEmailExcludedToggle(
+                  !messageChannel.excludeGroupEmails,
+                )
+              }
+            />
+          </SettingsOptionCardContent>
         </Card>
       </Section>
     </StyledDetailsContainer>

packages/twenty-front/src/modules/settings/components/SettingsOptionCardContent.tsx

@@ -1,16 +1,15 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import { useId } from 'react';
 import { CardContent, IconComponent, Toggle } from 'twenty-ui';
 
 type SettingsOptionCardContentProps = {
   Icon?: IconComponent;
   title: React.ReactNode;
   description: string;
   divider?: boolean;
-  checked: boolean;
-  onChange: (checked: boolean) => void;
+  children?: React.ReactNode;
+  labelId?: string;
 };
 
 const StyledCardContent = styled(CardContent)`
@@ -72,13 +71,11 @@ export const SettingsOptionCardContent = ({
   title,
   description,
   divider,
-  checked,
-  onChange,
+  children,
+  labelId,
 }: SettingsOptionCardContentProps) => {
   const theme = useTheme();
 
-  const toggleId = useId();
-
   return (
     <StyledCardContent divider={divider}>
       {Icon && (
@@ -89,16 +86,15 @@ export const SettingsOptionCardContent = ({
 
       <div>
         <StyledTitle>
-          <label htmlFor={toggleId}>
+          <label htmlFor={labelId}>
             {title}
 
             <StyledCover />
           </label>
         </StyledTitle>
         <StyledDescription>{description}</StyledDescription>
       </div>
-
-      <StyledToggle id={toggleId} value={checked} onChange={onChange} />
+      {children}
     </StyledCardContent>
   );
 };

packages/twenty-front/src/modules/settings/security/components/SettingsSecurityOptionsList.tsx

@@ -19,6 +19,7 @@ import { AuthProviders } from '~/generated-metadata/graphql';
 import { capitalize } from '~/utils/string/capitalize';
 import { isAdvancedModeEnabledState } from '@/ui/navigation/navigation-drawer/states/isAdvancedModeEnabledState';
 import { SSOIdentitiesProvidersState } from '@/settings/security/states/SSOIdentitiesProviders.state';
+import { useId } from 'react';
 
 const StyledToggle = styled(Toggle)`
   margin-left: auto;
@@ -128,53 +129,71 @@ export const SettingsSecurityOptionsList = () => {
     }
   };
 
+  const labels = {
+    google: useId(),
+    microsoft: useId(),
+    password: useId(),
+    invitePublicLink: useId(),
+  };
+
   return (
     <StyledSettingsSecurityOptionsList>
       <Card>
         <SettingsOptionCardContent
+          labelId={labels.google}
           Icon={IconGoogle}
           title="Google"
           description="Allow logins through Google's single sign-on functionality."
-          onClick={() => toggleAuthMethod('google')}
         >
           <StyledToggle
+            id={labels.google}
             value={currentWorkspace?.isGoogleAuthEnabled}
             color={toggleColor}
+            onChange={() => toggleAuthMethod('google')}
           />
         </SettingsOptionCardContent>
         <SettingsOptionCardContent
+          labelId={labels.microsoft}
           Icon={IconMicrosoft}
           title="Microsoft"
           description="Allow logins through Microsoft's single sign-on functionality."
-          onClick={() => toggleAuthMethod('microsoft')}
         >
           <StyledToggle
+            id={labels.microsoft}
             value={currentWorkspace?.isMicrosoftAuthEnabled}
             color={toggleColor}
+            onChange={() => toggleAuthMethod('microsoft')}
           />
         </SettingsOptionCardContent>
         <SettingsOptionCardContent
+          labelId={labels.password}
           Icon={IconPassword}
           title="Password"
           description="Allow users to sign in with an email and password."
-          onClick={() => toggleAuthMethod('password')}
         >
           <StyledToggle
+            id={labels.password}
             value={currentWorkspace?.isPasswordAuthEnabled}
             color={toggleColor}
+            onChange={() => toggleAuthMethod('password')}
           />
         </SettingsOptionCardContent>
       </Card>
       <Card>
         <SettingsOptionCardContent
+          labelId={labels.invitePublicLink}
           Icon={IconLink}
           title="Invite by Link"
           description="Allow the invitation of new users by sharing an invite link."
-          checked={currentWorkspace.isPublicInviteLinkEnabled}
-          onChange={() =>
-            handleChange(!currentWorkspace.isPublicInviteLinkEnabled)
-          }
-        />
+        >
+          <StyledToggle
+            id={labels.invitePublicLink}
+            value={currentWorkspace.isPublicInviteLinkEnabled}
+            onChange={() =>
+              handleChange(!currentWorkspace.isPublicInviteLinkEnabled)
+            }
+          />
+        </SettingsOptionCardContent>
       </Card>
     </StyledSettingsSecurityOptionsList>
   );

packages/twenty-front/src/testing/mock-data/users.ts

@@ -47,7 +47,6 @@ export const mockDefaultWorkspace: Workspace = {
   activationStatus: WorkspaceActivationStatus.Active,
   hasValidEntrepriseKey: false,
   isGoogleAuthEnabled: true,
-  isSSOAuthEnabled: false,
   isPasswordAuthEnabled: true,
   isMicrosoftAuthEnabled: false,
   featureFlags: [

packages/twenty-server/src/database/commands/database-command.module.ts

@@ -25,7 +25,6 @@ import { WorkspaceCacheStorageModule } from 'src/engine/workspace-cache-storage/
 import { WorkspaceDataSourceModule } from 'src/engine/workspace-datasource/workspace-datasource.module';
 import { WorkspaceManagerModule } from 'src/engine/workspace-manager/workspace-manager.module';
 import { WorkspaceSyncMetadataModule } from 'src/engine/workspace-manager/workspace-sync-metadata/workspace-sync-metadata.module';
-import { UpgradeTo0_33CommandModule } from 'src/database/commands/upgrade-version/0-33/0-33-upgrade-version.module';
 
 @Module({
   imports: [