Message channel change 1 (#14942)

packages/twenty-front/src/modules/accounts/types/CalendarChannel.ts

@@ -9,6 +9,7 @@ export enum CalendarChannelSyncStatus {
 }
 
 export enum CalendarChannelSyncStage {
+  PENDING_CONFIGURATION = 'PENDING_CONFIGURATION',
   FULL_CALENDAR_EVENT_LIST_FETCH_PENDING = 'FULL_CALENDAR_EVENT_LIST_FETCH_PENDING', // WILL BE DEPRECATED
   PARTIAL_CALENDAR_EVENT_LIST_FETCH_PENDING = 'PARTIAL_CALENDAR_EVENT_LIST_FETCH_PENDING', // DEPRECATED
   CALENDAR_EVENT_LIST_FETCH_PENDING = 'CALENDAR_EVENT_LIST_FETCH_PENDING',

packages/twenty-front/src/modules/accounts/types/MessageChannel.ts

@@ -23,6 +23,7 @@ export enum MessageChannelSyncStatus {
 }
 
 export enum MessageChannelSyncStage {
+  PENDING_CONFIGURATION = 'PENDING_CONFIGURATION',
   FULL_MESSAGE_LIST_FETCH_PENDING = 'FULL_MESSAGE_LIST_FETCH_PENDING', // WILL BE DEPRECATED
   PARTIAL_MESSAGE_LIST_FETCH_PENDING = 'PARTIAL_MESSAGE_LIST_FETCH_PENDING', // DEPRECATED
   MESSAGE_LIST_FETCH_PENDING = 'MESSAGE_LIST_FETCH_PENDING',

packages/twenty-front/src/modules/app/components/SettingsRoutes.tsx

@@ -37,6 +37,14 @@ const SettingsAccountsEmails = lazy(() =>
   })),
 );
 
+const SettingsAccountsConfiguration = lazy(() =>
+  import('~/pages/settings/accounts/SettingsAccountsConfiguration').then(
+    (module) => ({
+      default: module.SettingsAccountsConfiguration,
+    }),
+  ),
+);
+
 const SettingsNewAccount = lazy(() =>
   import('~/pages/settings/accounts/SettingsNewAccount').then((module) => ({
     default: module.SettingsNewAccount,
@@ -405,6 +413,10 @@ export const SettingsRoutes = ({
       <Route path={SettingsPath.Experience} element={<SettingsExperience />} />
       <Route path={SettingsPath.Accounts} element={<SettingsAccounts />} />
       <Route path={SettingsPath.NewAccount} element={<SettingsNewAccount />} />
+      <Route
+        path={SettingsPath.AccountsConfiguration}
+        element={<SettingsAccountsConfiguration />}
+      />
       <Route
         path={SettingsPath.AccountsCalendars}
         element={<SettingsAccountsCalendars />}

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

@@ -1,7 +1,10 @@
 import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 
-import { type CalendarChannel } from '@/accounts/types/CalendarChannel';
+import {
+  type CalendarChannel,
+  CalendarChannelSyncStage,
+} from '@/accounts/types/CalendarChannel';
 import { type ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
@@ -44,6 +47,9 @@ export const SettingsAccountsCalendarChannelsContainer = () => {
       connectedAccountId: {
         in: accounts.map((account) => account.id),
       },
+      syncStage: {
+        neq: CalendarChannelSyncStage.PENDING_CONFIGURATION,
+      },
     },
     skip: !accounts.length,
   });

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

@@ -2,7 +2,10 @@ import styled from '@emotion/styled';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { type ConnectedAccount } from '@/accounts/types/ConnectedAccount';
-import { type MessageChannel } from '@/accounts/types/MessageChannel';
+import {
+  type MessageChannel,
+  MessageChannelSyncStage,
+} from '@/accounts/types/MessageChannel';
 import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useGenerateDepthRecordGqlFieldsFromObject } from '@/object-record/graphql/record-gql-fields/hooks/useGenerateDepthRecordGqlFieldsFromObject';
@@ -58,6 +61,9 @@ export const SettingsAccountsMessageChannelsContainer = () => {
       isSyncEnabled: {
         eq: true,
       },
+      syncStage: {
+        neq: MessageChannelSyncStage.PENDING_CONFIGURATION,
+      },
     },
     recordGqlFields,
     onCompleted: (data) => {

packages/twenty-front/src/modules/settings/accounts/graphql/mutations/saveImapSmtpCaldavConnection.ts

@@ -14,6 +14,7 @@ export const SAVE_IMAP_SMTP_CALDAV_ACCOUNT = gql`
       id: $id
     ) {
       success
+      connectedAccountId
     }
   }
 `;

packages/twenty-front/src/modules/settings/accounts/graphql/mutations/startChannelSync.ts

@@ -0,0 +1,9 @@
+import gql from 'graphql-tag';
+
+export const START_CHANNEL_SYNC = gql`
+  mutation StartChannelSync($connectedAccountId: UUID!) {
+    startChannelSync(connectedAccountId: $connectedAccountId) {
+      success
+    }
+  }
+`;

packages/twenty-front/src/modules/settings/accounts/hooks/useImapSmtpCaldavConnectionForm.ts

@@ -132,7 +132,7 @@ export const useImapSmtpCaldavConnectionForm = ({
       });
 
       try {
-        await saveConnection({
+        const { data } = await saveConnection({
           variables: {
             ...(isEditing && connectedAccountId
               ? { id: connectedAccountId }
@@ -142,13 +142,20 @@ export const useImapSmtpCaldavConnectionForm = ({
             connectionParameters,
           },
         });
+        if (!isDefined(data)) return;
 
         const successMessage = isEditing
           ? t`Connection successfully updated`
           : t`Connection successfully created`;
 
         enqueueSuccessSnackBar({ message: successMessage });
-        navigate(SettingsPath.Accounts);
+
+        const { connectedAccountId: returnedConnectedAccountId } =
+          data?.saveImapSmtpCaldavAccount || {};
+
+        navigate(SettingsPath.AccountsConfiguration, {
+          connectedAccountId: returnedConnectedAccountId,
+        });
       } catch (error) {
         enqueueErrorSnackBar({
           apolloError: error instanceof ApolloError ? error : undefined,