messaging: gmail folder backfill (#21753)

demo


https://github.com/user-attachments/assets/a157cee1-a8fa-4050-af1b-c31a83fb75da

/closes #17095


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21753?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->

packages/twenty-front/src/modules/settings/accounts/components/message-folders/SettingsMessageFoldersTreeItem.tsx

@@ -8,6 +8,8 @@ import { isFolderTreePartiallySelected } from '@/settings/accounts/components/me
 import { styled } from '@linaria/react';
 import { useLingui } from '@lingui/react/macro';
 import { useState } from 'react';
+import { MessageFolderPendingSyncAction } from 'twenty-shared/types';
+import { Status } from 'twenty-ui/data-display';
 import { IconChevronDown, IconChevronUp } from 'twenty-ui/icon';
 import { Checkbox, CheckboxSize } from 'twenty-ui/input';
 import { themeCssVariables } from 'twenty-ui/theme-constants';
@@ -176,6 +178,11 @@ export const SettingsMessageFoldersTreeItem = ({
           </StyledFolderInfo>
 
           <StyledRightSection>
+            {folder.pendingSyncAction ===
+              MessageFolderPendingSyncAction.FOLDER_IMPORT && (
+              <Status color="turquoise" text={t`Importing`} isLoaderVisible />
+            )}
+
             {hasChildren && (
               <>
                 <StyledChildCount>{childCount}</StyledChildCount>

packages/twenty-front/src/modules/settings/accounts/components/message-folders/utils/__tests__/computeFolderIdsForSyncToggle.test.ts

@@ -1,5 +1,6 @@
 import { type MessageFolder } from '@/accounts/types/MessageFolder';
 import { computeFolderIdsForSyncToggle } from '@/settings/accounts/components/message-folders/utils/computeFolderIdsForSyncToggle';
+import { MessageFolderPendingSyncAction } from 'twenty-shared/types';
 
 describe('computeFolderIdsForSyncToggle', () => {
   const createFolder = ({
@@ -22,6 +23,7 @@ describe('computeFolderIdsForSyncToggle', () => {
     externalId: externalId || id,
     isSentFolder: false,
     isSynced,
+    pendingSyncAction: MessageFolderPendingSyncAction.NONE,
     messageChannelId: 'channel-1',
     createdAt: '2026-01-01T00:00:00Z',
     updatedAt: '2026-01-01T00:00:00Z',

packages/twenty-front/src/modules/settings/accounts/components/message-folders/utils/__tests__/computeMessageFolderTree.test.ts

@@ -1,5 +1,6 @@
 import { type MessageFolder } from '@/accounts/types/MessageFolder';
 import { computeMessageFolderTree } from '@/settings/accounts/components/message-folders/utils/computeMessageFolderTree';
+import { MessageFolderPendingSyncAction } from 'twenty-shared/types';
 
 describe('computeMessageFolderTree', () => {
   const createFolder = (
@@ -15,6 +16,7 @@ describe('computeMessageFolderTree', () => {
     externalId: externalId || id,
     isSentFolder: false,
     isSynced: false,
+    pendingSyncAction: MessageFolderPendingSyncAction.NONE,
     messageChannelId: '20202020-1c25-4d02-bf25-6aeccf7ea419',
     createdAt: '2026-01-01T00:00:00Z',
     updatedAt: '2026-01-01T00:00:00Z',

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

@@ -5,6 +5,7 @@ export const UPDATE_MESSAGE_FOLDERS = gql`
     updateMessageFolders(input: $input) {
       id
       isSynced
+      pendingSyncAction
     }
   }
 `;

packages/twenty-front/src/modules/settings/accounts/graphql/queries/getMyMessageFolders.ts

@@ -9,6 +9,7 @@ export const GET_MY_MESSAGE_FOLDERS = gql`
       isSentFolder
       parentFolderId
       externalId
+      pendingSyncAction
       messageChannelId
       createdAt
       updatedAt

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

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 
 import { UPDATE_MESSAGE_FOLDERS } from '@/settings/accounts/graphql/mutations/updateMessageFolders';
 import { useApolloClient } from '@apollo/client/react';
+import { MessageFolderPendingSyncAction } from 'twenty-shared/types';
 
 type UpdateMessageFoldersSyncStatusArgs = {
   messageFolderIds: string[];
@@ -33,6 +34,7 @@ export const useUpdateMessageFoldersSyncStatus = () => {
             __typename: 'MessageFolder',
             id,
             isSynced,
+            pendingSyncAction: MessageFolderPendingSyncAction.NONE,
           })),
         },
       });