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>
+  );
+};
--- a/packages/twenty-front/src/modules/settings/accounts/graphql/mutations/saveImapSmtpCaldavConnection.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/graphql/mutations/saveImapSmtpCaldavConnection.ts
@ -0,0 +1,21 @@
+import gql from 'graphql-tag';
+
+export const SAVE_IMAP_SMTP_CALDAV_CONNECTION = gql`
+  mutation SaveImapSmtpCaldav(
+    $accountOwnerId: String!
+    $handle: String!
+    $accountType: AccountType!
+    $connectionParameters: ConnectionParameters!
+    $id: String
+  ) {
+    saveImapSmtpCaldav(
+      accountOwnerId: $accountOwnerId
+      handle: $handle
+      accountType: $accountType
+      connectionParameters: $connectionParameters
+      id: $id
+    ) {
+      success
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/settings/accounts/graphql/queries/getConnectedImapSmtpCaldavAccount.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/graphql/queries/getConnectedImapSmtpCaldavAccount.ts
@ -0,0 +1,35 @@
+import gql from 'graphql-tag';
+
+export const GET_CONNECTED_IMAP_SMTP_CALDAV_ACCOUNT = gql`
+  query GetConnectedImapSmtpCaldavAccount($id: String!) {
+    getConnectedImapSmtpCaldavAccount(id: $id) {
+      id
+      handle
+      provider
+      accountOwnerId
+      connectionParameters {
+        IMAP {
+          host
+          port
+          secure
+          username
+          password
+        }
+        SMTP {
+          host
+          port
+          secure
+          username
+          password
+        }
+        CALDAV {
+          host
+          port
+          secure
+          username
+          password
+        }
+      }
+    }
+  }
+`;
--- a/packages/twenty-front/src/modules/settings/accounts/hooks/useConnectedImapSmtpCaldavAccount.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/hooks/useConnectedImapSmtpCaldavAccount.ts
@ -0,0 +1,16 @@
+import { useGetConnectedImapSmtpCaldavAccountQuery } from '~/generated/graphql';
+
+export const useConnectedImapSmtpCaldavAccount = (
+  connectedAccountId: string | undefined,
+) => {
+  const { data, loading, error } = useGetConnectedImapSmtpCaldavAccountQuery({
+    variables: { id: connectedAccountId ?? '' },
+    skip: !connectedAccountId,
+  });
+
+  return {
+    connectedAccount: data?.getConnectedImapSmtpCaldavAccount,
+    loading,
+    error,
+  };
+};
--- a/packages/twenty-front/src/modules/settings/accounts/hooks/useImapConnectionForm.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/hooks/useImapConnectionForm.ts
@ -0,0 +1,140 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useRecoilValue } from 'recoil';
+import { z } from 'zod';
+
+import { SettingsPath } from '@/types/SettingsPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { useLingui } from '@lingui/react/macro';
+import {
+  ConnectionParameters,
+  useSaveImapSmtpCaldavMutation,
+} from '~/generated/graphql';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+import { currentWorkspaceMemberState } from '~/modules/auth/states/currentWorkspaceMemberState';
+import { currentWorkspaceState } from '~/modules/auth/states/currentWorkspaceState';
+
+const imapConnectionFormSchema = z.object({
+  handle: z.string().email('Invalid email address'),
+  host: z.string().min(1, 'IMAP server is required'),
+  port: z.number().int().positive('Port must be a positive number'),
+  secure: z.boolean(),
+  password: z.string().min(1, 'Password is required'),
+});
+
+type ImapConnectionFormValues = z.infer<typeof imapConnectionFormSchema>;
+
+type UseImapConnectionFormProps = {
+  initialData?: ImapConnectionFormValues;
+  isEditing?: boolean;
+  connectedAccountId?: string;
+};
+
+export const useImapConnectionForm = ({
+  initialData,
+  isEditing = false,
+  connectedAccountId,
+}: UseImapConnectionFormProps = {}) => {
+  const { t } = useLingui();
+  const navigate = useNavigateSettings();
+  const { enqueueSnackBar } = useSnackBar();
+  const currentWorkspace = useRecoilValue(currentWorkspaceState);
+  const currentWorkspaceMember = useRecoilValue(currentWorkspaceMemberState);
+
+  const [saveImapConnection, { loading: saveLoading }] =
+    useSaveImapSmtpCaldavMutation();
+
+  const resolver = zodResolver(imapConnectionFormSchema);
+
+  const defaultValues = {
+    handle: initialData?.handle || '',
+    host: initialData?.host || '',
+    port: initialData?.port || 993,
+    secure: initialData?.secure ?? true,
+    password: initialData?.password || '',
+  };
+
+  const formMethods = useForm<ConnectionParameters & { handle: string }>({
+    mode: 'onSubmit',
+    resolver,
+    defaultValues,
+  });
+
+  const { handleSubmit, formState } = formMethods;
+  const { isValid, isSubmitting } = formState;
+  const canSave = isValid && !isSubmitting;
+  const loading = saveLoading;
+
+  const handleSave = async (
+    formValues: ConnectionParameters & { handle: string },
+  ) => {
+    if (!currentWorkspace?.id) {
+      enqueueSnackBar('Workspace ID is missing', {
+        variant: SnackBarVariant.Error,
+      });
+      return;
+    }
+
+    if (!currentWorkspaceMember?.id) {
+      enqueueSnackBar('Workspace member ID is missing', {
+        variant: SnackBarVariant.Error,
+      });
+      return;
+    }
+
+    try {
+      const variables = {
+        ...(isEditing && connectedAccountId ? { id: connectedAccountId } : {}),
+        accountOwnerId: currentWorkspaceMember.id,
+        handle: formValues.handle,
+        host: formValues.host,
+        port: formValues.port,
+        secure: formValues.secure,
+        password: formValues.password,
+      };
+
+      await saveImapConnection({
+        variables: {
+          accountOwnerId: variables.accountOwnerId,
+          handle: variables.handle,
+          accountType: {
+            type: 'IMAP',
+          },
+          connectionParameters: {
+            host: variables.host,
+            port: variables.port,
+            secure: variables.secure,
+            password: variables.password,
+            username: variables.handle,
+          },
+          ...(variables.id ? { id: variables.id } : {}),
+        },
+      });
+
+      enqueueSnackBar(
+        connectedAccountId
+          ? t`IMAP connection successfully updated`
+          : t`IMAP connection successfully created`,
+        {
+          variant: SnackBarVariant.Success,
+        },
+      );
+
+      navigate(SettingsPath.Accounts);
+    } catch (error) {
+      enqueueSnackBar((error as Error).message, {
+        variant: SnackBarVariant.Error,
+      });
+    }
+  };
+
+  return {
+    formMethods,
+    handleSave,
+    handleSubmit,
+    canSave,
+    isSubmitting,
+    loading,
+  };
+};
--- a/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerProviderReconnect.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerProviderReconnect.ts
@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { ConnectedAccountProvider } from 'twenty-shared/types';
+
+import { useTriggerApisOAuth } from '@/settings/accounts/hooks/useTriggerApiOAuth';
+import { SettingsPath } from '@/types/SettingsPath';
+import { useNavigateSettings } from '~/hooks/useNavigateSettings';
+
+export const useTriggerProviderReconnect = () => {
+  const { triggerApisOAuth } = useTriggerApisOAuth();
+  const navigate = useNavigateSettings();
+
+  const triggerProviderReconnect = useCallback(
+    async (
+      provider: ConnectedAccountProvider,
+      accountId?: string,
+      options?: Parameters<typeof triggerApisOAuth>[1],
+    ) => {
+      if (provider === ConnectedAccountProvider.IMAP_SMTP_CALDAV) {
+        if (!accountId) {
+          navigate(SettingsPath.NewImapConnection);
+          return;
+        }
+
+        navigate(SettingsPath.EditImapConnection, {
+          connectedAccountId: accountId,
+        });
+        return;
+      }
+
+      await triggerApisOAuth(provider, options);
+    },
+    [triggerApisOAuth, navigate],
+  );
+
+  return { triggerProviderReconnect };
+};