feat: IMAP Driver Integration (#12576)

### Added IMAP integration This PR adds support for connecting email accounts via IMAP protocol, allowing users to sync their emails without OAuth. #### DB Changes: - Added customConnectionParams and connectionType fields to ConnectedAccountWorkspaceEntity #### UI: - Added settings pages for creating and editing IMAP connections with proper validation and connection testing. - Implemented reconnection flows for handling permission issues. #### Backend: - Built ImapConnectionModule with corresponding resolver and service for managing IMAP connections. - Created MessagingIMAPDriverModule to handle IMAP client operations, message fetching/parsing, and error handling. #### Dependencies: Integrated `imapflow` and `mailparser` libraries with their type definitions to handle the IMAP protocol communication. --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com> Co-authored-by: Félix Malfait <felix@twenty.com>
2025-06-30 01:02:15 +05:30
parent 3c5595e4ff
commit 7c8d362772
80 changed files with 3588 additions and 113 deletions
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@ -3,14 +3,20 @@ import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/componen
 import { SettingsPath } from '@/types/SettingsPath';

 import { SettingsAccountsConnectedAccountsRowRightContainer } from '@/settings/accounts/components/SettingsAccountsConnectedAccountsRowRightContainer';
+import { useLingui } from '@lingui/react/macro';
+import {
+  IconComponent,
+  IconGoogle,
+  IconMail,
+  IconMicrosoft,
+} from 'twenty-ui/display';
 import { useNavigateSettings } from '~/hooks/useNavigateSettings';
 import { SettingsListCard } from '../../components/SettingsListCard';
-import { useLingui } from '@lingui/react/macro';
-import { IconComponent, IconGoogle, IconMicrosoft } from 'twenty-ui/display';

 const ProviderIcons: { [k: string]: IconComponent } = {
  google: IconGoogle,
  microsoft: IconMicrosoft,
+  imap: IconMail,
 };

 export const SettingsAccountsConnectedAccountsListCard = ({
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEditImapConnection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsEditImapConnection.tsx
@ -0,0 +1,93 @@
+import { FormProvider } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+
+import { SetttingsAccountsImapConnectionForm } from '@/settings/accounts/components/SetttingsAccountsImapConnectionForm';
+import { useConnectedImapSmtpCaldavAccount } from '@/settings/accounts/hooks/useConnectedImapSmtpCaldavAccount';
+import { useImapConnectionForm } from '@/settings/accounts/hooks/useImapConnectionForm';
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { Loader } from 'twenty-ui/feedback';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+
+const StyledLoadingContainer = styled.div`
+  align-items: center;
+  display: flex;
+  height: 200px;
+  justify-content: center;
+  width: 100%;
+`;
+
+export const SettingsAccountsEditImapConnection = () => {
+  const { t } = useLingui();
+  const navigate = useNavigateSettings();
+  const { connectedAccountId } = useParams<{ connectedAccountId: string }>();
+
+  const { connectedAccount, loading: accountLoading } =
+    useConnectedImapSmtpCaldavAccount(connectedAccountId);
+
+  const initialData = {
+    handle: connectedAccount?.handle || '',
+    host: connectedAccount?.connectionParameters?.IMAP?.host || '',
+    port: connectedAccount?.connectionParameters?.IMAP?.port || 993,
+    secure: connectedAccount?.connectionParameters?.IMAP?.secure ?? true,
+    password: connectedAccount?.connectionParameters?.IMAP?.password || '',
+  };
+
+  const { formMethods, handleSave, handleSubmit, canSave, isSubmitting } =
+    useImapConnectionForm({
+      initialData,
+      isEditing: true,
+      connectedAccountId,
+    });
+
+  const { control } = formMethods;
+
+  const renderLoadingState = () => (
+    <StyledLoadingContainer>
+      <Loader />
+    </StyledLoadingContainer>
+  );
+
+  const renderForm = () => (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formMethods}>
+      <SubMenuTopBarContainer
+        title={t`Edit IMAP Connection`}
+        links={[
+          {
+            children: t`Settings`,
+            href: getSettingsPath(SettingsPath.Workspace),
+          },
+          {
+            children: t`Email Connections`,
+            href: getSettingsPath(SettingsPath.Accounts),
+          },
+          { children: t`Edit IMAP Connection` },
+        ]}
+        actionButton={
+          <SaveAndCancelButtons
+            isSaveDisabled={!canSave}
+            isCancelDisabled={isSubmitting}
+            onCancel={() => navigate(SettingsPath.Accounts)}
+            onSave={handleSubmit(handleSave)}
+          />
+        }
+      >
+        <SettingsPageContainer>
+          <SetttingsAccountsImapConnectionForm control={control} isEditing />
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </FormProvider>
+  );
+
+  if (accountLoading === true) {
+    return renderLoadingState();
+  }
+
+  return renderForm();
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@ -3,13 +3,17 @@ import { isGoogleMessagingEnabledState } from '@/client-config/states/isGoogleMe
 import { isMicrosoftCalendarEnabledState } from '@/client-config/states/isMicrosoftCalendarEnabledState';
 import { isMicrosoftMessagingEnabledState } from '@/client-config/states/isMicrosoftMessagingEnabledState';
 import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
+import { IconGoogle, IconMail, IconMicrosoft } from 'twenty-ui/display';
 import { Button } from 'twenty-ui/input';
 import { Card, CardContent, CardHeader } from 'twenty-ui/layout';
-import { IconGoogle, IconMicrosoft } from 'twenty-ui/display';
+import { FeatureFlagKey } from '~/generated-metadata/graphql';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';

 const StyledHeader = styled(CardHeader)`
  align-items: center;
@ -47,6 +51,8 @@ export const SettingsAccountsListEmptyStateCard = ({
    isMicrosoftCalendarEnabledState,
  );

+  const isImapEnabled = useIsFeatureEnabled(FeatureFlagKey.IS_IMAP_ENABLED);
+
  return (
    <Card>
      <StyledHeader>{label || t`No connected account`}</StyledHeader>
@ -68,6 +74,15 @@ export const SettingsAccountsListEmptyStateCard = ({
            onClick={() => triggerApisOAuth(ConnectedAccountProvider.MICROSOFT)}
          />
        )}
+
+        {isImapEnabled && (
+          <Button
+            Icon={IconMail}
+            title={t`Connect with IMAP`}
+            variant="secondary"
+            to={getSettingsPath(SettingsPath.NewImapConnection)}
+          />
+        )}
      </StyledBody>
    </Card>
  );
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewImapConnection.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsNewImapConnection.tsx
@ -0,0 +1,56 @@
+import { FormProvider } from 'react-hook-form';
+
+import { SetttingsAccountsImapConnectionForm } from '@/settings/accounts/components/SetttingsAccountsImapConnectionForm';
+import { useImapConnectionForm } from '@/settings/accounts/hooks/useImapConnectionForm';
+import { SaveAndCancelButtons } from '@/settings/components/SaveAndCancelButtons/SaveAndCancelButtons';
+import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
+import { SettingsPath } from '@/types/SettingsPath';
+import { SubMenuTopBarContainer } from '@/ui/layout/page/components/SubMenuTopBarContainer';
+import { useLingui } from '@lingui/react/macro';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { getSettingsPath } from '~/utils/navigation/getSettingsPath';
+
+export const SettingsAccountsNewImapConnection = () => {
+  const { t } = useLingui();
+  const navigate = useNavigateSettings();
+
+  const { formMethods, handleSave, handleSubmit, canSave, isSubmitting } =
+    useImapConnectionForm();
+
+  const { control } = formMethods;
+
+  return (
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    <FormProvider {...formMethods}>
+      <SubMenuTopBarContainer
+        title={t`New IMAP Connection`}
+        links={[
+          {
+            children: t`Settings`,
+            href: getSettingsPath(SettingsPath.Workspace),
+          },
+          {
+            children: t`Email Connections`,
+            href: getSettingsPath(SettingsPath.Accounts),
+          },
+          { children: t`New IMAP Connection` },
+        ]}
+        actionButton={
+          <SaveAndCancelButtons
+            isSaveDisabled={!canSave}
+            isCancelDisabled={isSubmitting}
+            onCancel={() => navigate(SettingsPath.Accounts)}
+            onSave={handleSubmit(handleSave)}
+          />
+        }
+      >
+        <SettingsPageContainer>
+          <SetttingsAccountsImapConnectionForm
+            control={control}
+            isEditing={false}
+          />
+        </SettingsPageContainer>
+      </SubMenuTopBarContainer>
+    </FormProvider>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@ -1,7 +1,7 @@
 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
-import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
+import { useTriggerProviderReconnect } from '@/settings/accounts/hooks/useTriggerProviderReconnect';
 import { SettingsPath } from '@/types/SettingsPath';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
@ -40,7 +40,7 @@ export const SettingsAccountsRowDropdownMenu = ({
  const { destroyOneRecord } = useDestroyOneRecord({
    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
  });
-  const { triggerApisOAuth } = useTriggerApisOAuth();
+  const { triggerProviderReconnect } = useTriggerProviderReconnect();

  const deleteAccount = async () => {
    await destroyOneRecord(account.id);
@ -78,7 +78,7 @@ export const SettingsAccountsRowDropdownMenu = ({
                  LeftIcon={IconRefresh}
                  text={t`Reconnect`}
                  onClick={() => {
-                    triggerApisOAuth(account.provider);
+                    triggerProviderReconnect(account.provider, account.id);
                    closeDropdown();
                  }}
                />
--- a/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SetttingsAccountsImapConnectionForm.tsx
@ -0,0 +1,119 @@
+import { Control, Controller } from 'react-hook-form';
+
+import { Select } from '@/ui/input/components/Select';
+import { TextInput } from '@/ui/input/components/TextInput';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { H2Title } from 'twenty-ui/display';
+import { Section } from 'twenty-ui/layout';
+import { ConnectionParameters } from '~/generated/graphql';
+
+const StyledFormContainer = styled.form`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(4)};
+`;
+
+type SetttingsAccountsImapConnectionFormProps = {
+  control: Control<ConnectionParameters & { handle: string }>;
+  isEditing: boolean;
+  defaultValues?: Partial<ConnectionParameters & { handle: string }>;
+};
+
+export const SetttingsAccountsImapConnectionForm = ({
+  control,
+  isEditing,
+  defaultValues,
+}: SetttingsAccountsImapConnectionFormProps) => {
+  const { t } = useLingui();
+
+  return (
+    <Section>
+      <H2Title
+        title={t`IMAP Connection Details`}
+        description={
+          isEditing
+            ? t`Update your IMAP email account configuration`
+            : t`Configure your IMAP email account`
+        }
+      />
+      <StyledFormContainer>
+        <Controller
+          name="handle"
+          control={control}
+          defaultValue={defaultValues?.handle}
+          render={({ field, fieldState }) => (
+            <TextInput
+              label={t`Email Address`}
+              placeholder={t`john.doe@example.com`}
+              value={field.value}
+              onChange={field.onChange}
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          name="host"
+          control={control}
+          defaultValue={defaultValues?.host}
+          render={({ field, fieldState }) => (
+            <TextInput
+              label={t`IMAP Server`}
+              placeholder={t`imap.example.com`}
+              value={field.value}
+              onChange={field.onChange}
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          name="port"
+          control={control}
+          defaultValue={defaultValues?.port ?? 993}
+          render={({ field, fieldState }) => (
+            <TextInput
+              label={t`IMAP Port`}
+              type="number"
+              placeholder={t`993`}
+              value={field.value.toString()}
+              onChange={(value) => field.onChange(Number(value))}
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          name="secure"
+          control={control}
+          defaultValue={defaultValues?.secure}
+          render={({ field }) => (
+            <Select
+              label={t`Encryption`}
+              options={[
+                { label: 'SSL/TLS', value: true },
+                { label: 'None', value: false },
+              ]}
+              value={field.value}
+              onChange={field.onChange}
+              dropdownId="secure-dropdown"
+            />
+          )}
+        />
+        <Controller
+          name="password"
+          control={control}
+          defaultValue={defaultValues?.password}
+          render={({ field, fieldState }) => (
+            <TextInput
+              label={t`Password`}
+              placeholder={t`••••••••`}
+              type="password"
+              value={field.value}
+              onChange={field.onChange}
+              error={fieldState.error?.message}
+            />
+          )}
+        />
+      </StyledFormContainer>
+    </Section>
+  );
+};