Add message import granulary on non-pro emails, group emails and received contact creation (#6156)

1) Remove featureFlag
2) Base contactCreation on messageChannel.autoContactCreationPolicy
4) add excludeProfessionalEmails + excludeGroupEmails logic

packages/twenty-front/src/modules/onboarding/components/OnboardingSyncEmailsSettingsCard.tsx

@@ -12,6 +12,7 @@ export const OnboardingSyncEmailsSettingsCard = ({
   value = MessageChannelVisibility.ShareEverything,
 }: OnboardingSyncEmailsSettingsCardProps) => (
   <SettingsAccountsRadioSettingsCard
+    name="sync-emails-visiblity"
     options={onboardingSyncEmailsOptions}
     value={value}
     onChange={onChange}

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

@@ -33,6 +33,7 @@ export const SettingsAccountsEventVisibilitySettingsCard = ({
   value = CalendarChannelVisibility.ShareEverything,
 }: SettingsAccountsEventVisibilitySettingsCardProps) => (
   <SettingsAccountsRadioSettingsCard
+    name="event-visibility"
     options={eventSettingsVisibilityOptions}
     value={value}
     onChange={onChange}

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

@@ -40,6 +40,7 @@ export const SettingsAccountsMessageAutoCreationCard = ({
   value = MessageChannelContactAutoCreationPolicy.SENT_AND_RECEIVED,
 }: SettingsAccountsMessageAutoCreationCardProps) => (
   <SettingsAccountsRadioSettingsCard
+    name="message-auto-creation"
     options={autoCreationOptions}
     value={value}
     onChange={onChange}

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

@@ -51,6 +51,7 @@ export const SettingsAccountsMessageVisibilityCard = ({
   value = MessageChannelVisibility.ShareEverything,
 }: SettingsAccountsMessageVisibilityCardProps) => (
   <SettingsAccountsRadioSettingsCard
+    name="message-visibility"
     options={inboxSettingsVisibilityOptions}
     value={value}
     onChange={onChange}

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

@@ -10,6 +10,7 @@ type SettingsAccountsRadioSettingsCardProps<Option extends { value: string }> =
     onChange: (nextValue: Option['value']) => void;
     options: Option[];
     value: Option['value'];
+    name: string;
   };
 
 const StyledCardContent = styled(CardContent)`
@@ -49,6 +50,7 @@ export const SettingsAccountsRadioSettingsCard = <
   onChange,
   options,
   value,
+  name,
 }: SettingsAccountsRadioSettingsCardProps<Option>) => (
   <Card rounded>
     {options.map((option, index) => (
@@ -63,6 +65,7 @@ export const SettingsAccountsRadioSettingsCard = <
           <StyledDescription>{option.description}</StyledDescription>
         </div>
         <StyledRadio
+          name={name}
           value={option.value}
           onCheckedChange={() => onChange(option.value)}
           checked={value === option.value}

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

@@ -54,9 +54,7 @@ export const SettingsAccountsRowDropdownMenu = ({
               LeftIcon={IconMail}
               text="Emails settings"
               onClick={() => {
-                navigate(
-                  `/settings/accounts/emails/${account.messageChannels[0].id}`,
-                );
+                navigate(`/settings/accounts/emails`);
                 closeDropdown();
               }}
             />
@@ -64,9 +62,7 @@ export const SettingsAccountsRowDropdownMenu = ({
               LeftIcon={IconCalendarEvent}
               text="Calendar settings"
               onClick={() => {
-                navigate(
-                  `/settings/accounts/calendars/${account.calendarChannels[0].id}`,
-                );
+                navigate(`/settings/accounts/calendars`);
                 closeDropdown();
               }}
             />

packages/twenty-front/src/modules/ui/input/components/Radio.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
+import * as React from 'react';
 import { RGBA } from 'twenty-ui';
 
+import { v4 } from 'uuid';
 import { RadioGroup } from './RadioGroup';
 
 export enum RadioSize {
@@ -105,6 +106,7 @@ const StyledLabel = styled.label<LabelProps>`
 export type RadioProps = {
   checked?: boolean;
   className?: string;
+  name?: string;
   disabled?: boolean;
   label?: string;
   labelPosition?: LabelPosition;
@@ -118,6 +120,7 @@ export type RadioProps = {
 export const Radio = ({
   checked,
   className,
+  name = 'input-radio',
   disabled = false,
   label,
   labelPosition = LabelPosition.Right,
@@ -131,12 +134,14 @@ export const Radio = ({
     onCheckedChange?.(event.target.checked);
   };
 
+  const optionId = v4();
+
   return (
     <StyledContainer className={className} labelPosition={labelPosition}>
       <StyledRadioInput
         type="radio"
-        id="input-radio"
-        name="input-radio"
+        id={optionId}
+        name={name}
         data-testid="input-radio"
         checked={checked}
         value={value || label}
@@ -149,7 +154,7 @@ export const Radio = ({
       />
       {label && (
         <StyledLabel
-          htmlFor="input-radio"
+          htmlFor={optionId}
           labelPosition={labelPosition}
           disabled={disabled}
         >

packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent, Pill } from 'twenty-ui';
@@ -41,6 +40,7 @@ const StyledHover = styled.span`
   padding: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
   padding-right: ${({ theme }) => theme.spacing(2)};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
 
   &:hover {
     background: ${({ theme }) => theme.background.tertiary};