Make token update synchronous on FE (#11486)

1. Removing tokenPair internal variable of ApolloFactory. We will relay
on cookieStorage
2. setting the cookie explicitely instead of only relaying on recoil
cookieEffect which is too late

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/EmailsFieldDisplay.tsx

@@ -1,8 +1,8 @@
-import { useEmailsField } from '@/object-record/record-field/meta-types/hooks/useEmailsField';
+import { useEmailsFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useEmailsFieldDisplay';
 import { EmailsDisplay } from '@/ui/field/display/components/EmailsDisplay';
 
 export const EmailsFieldDisplay = () => {
-  const { fieldValue } = useEmailsField();
+  const { fieldValue } = useEmailsFieldDisplay();
 
   return <EmailsDisplay value={fieldValue} />;
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx

@@ -2,9 +2,7 @@ import { Theme, withTheme } from '@emotion/react';
 import { styled } from '@linaria/react';
 import { Ref } from 'react';
 
-const StyledOuterContainer = styled.div<{
-  hasSoftFocus?: boolean;
-}>`
+const StyledOuterContainer = styled.div`
   align-items: center;
   display: flex;
   height: 100%;
@@ -50,7 +48,6 @@ export const RecordTableCellDisplayContainer = ({
     }
     onClick={onClick}
     ref={scrollRef}
-    hasSoftFocus={softFocus}
     onContextMenu={onContextMenu}
   >
     {placeholderForEmptyCell ? (

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellWrapper.tsx

@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
 import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
@@ -9,6 +7,7 @@ import { isTableCellInEditModeComponentFamilyState } from '@/object-record/recor
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 import { TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
 import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
+import { useMemo } from 'react';
 
 export const RecordTableCellWrapper = ({
   children,

packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableTd.tsx

@@ -18,25 +18,19 @@ const StyledTd = styled.td<{
   width?: number;
 }>`
   border-bottom: 1px solid
-    ${({ borderColor, hasBottomBorder }) =>
-      hasBottomBorder ? borderColor : 'transparent'};
+    ${({ borderColor, hasBottomBorder, isDragging }) =>
+      hasBottomBorder && !isDragging ? borderColor : 'transparent'};
   color: ${({ fontColor }) => fontColor};
-  border-right: ${({ borderColor, hasRightBorder }) =>
-    hasRightBorder ? `1px solid ${borderColor}` : 'none'};
+  border-right: ${({ borderColor, hasRightBorder, isDragging }) =>
+    hasRightBorder && !isDragging ? `1px solid ${borderColor}` : 'none'};
 
   padding: 0;
   transition: 0.3s ease;
 
   text-align: left;
 
-  background: ${({ backgroundColor }) => backgroundColor};
-  ${({ isDragging }) =>
-    isDragging
-      ? `
-      background-color: transparent;
-      border-color: transparent;
-    `
-      : ''}
+  background: ${({ backgroundColor, isDragging }) =>
+    isDragging ? 'transparent' : backgroundColor};
 
   ${({ freezeFirstColumns }) =>
     freezeFirstColumns

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableColumnHeadDropdownMenu.tsx

@@ -6,10 +6,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { onToggleColumnFilterComponentState } from '@/object-record/record-table/states/onToggleColumnFilterComponentState';
 import { onToggleColumnSortComponentState } from '@/object-record/record-table/states/onToggleColumnSortComponentState';
 import { visibleTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/visibleTableColumnsComponentSelector';
+import { useToggleScrollWrapper } from '@/ui/utilities/scroll/hooks/useToggleScrollWrapper';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useLingui } from '@lingui/react/macro';
-import { useTableColumns } from '../../hooks/useTableColumns';
-import { ColumnDefinition } from '../../types/ColumnDefinition';
 import {
   IconArrowLeft,
   IconArrowRight,
@@ -18,6 +17,8 @@ import {
   IconSortDescending,
 } from 'twenty-ui/display';
 import { MenuItem } from 'twenty-ui/navigation';
+import { useTableColumns } from '../../hooks/useTableColumns';
+import { ColumnDefinition } from '../../types/ColumnDefinition';
 
 export type RecordTableColumnHeadDropdownMenuProps = {
   column: ColumnDefinition<FieldMetadata>;
@@ -28,6 +29,9 @@ export const RecordTableColumnHeadDropdownMenu = ({
 }: RecordTableColumnHeadDropdownMenuProps) => {
   const { t } = useLingui();
 
+  const { toggleScrollXWrapper, toggleScrollYWrapper } =
+    useToggleScrollWrapper();
+
   const visibleTableColumns = useRecoilComponentValueV2(
     visibleTableColumnsComponentSelector,
   );
@@ -46,16 +50,21 @@ export const RecordTableColumnHeadDropdownMenu = ({
 
   const { closeDropdown } = useDropdown(column.fieldMetadataId + '-header');
 
-  const handleColumnMoveLeft = () => {
+  const closeDropdownAndToggleScroll = () => {
     closeDropdown();
+    toggleScrollXWrapper(true);
+    toggleScrollYWrapper(false);
+  };
 
+  const handleColumnMoveLeft = () => {
+    closeDropdownAndToggleScroll();
     if (!canMoveLeft) return;
 
     handleMoveTableColumn('left', column);
   };
 
   const handleColumnMoveRight = () => {
-    closeDropdown();
+    closeDropdownAndToggleScroll();
 
     if (!canMoveRight) return;
 
@@ -63,7 +72,7 @@ export const RecordTableColumnHeadDropdownMenu = ({
   };
 
   const handleColumnVisibility = () => {
-    closeDropdown();
+    closeDropdownAndToggleScroll();
     handleColumnVisibilityChange(column);
   };
 
@@ -75,13 +84,13 @@ export const RecordTableColumnHeadDropdownMenu = ({
   );
 
   const handleSortClick = () => {
-    closeDropdown();
+    closeDropdownAndToggleScroll();
 
     onToggleColumnSort?.(column.fieldMetadataId);
   };
 
   const handleFilterClick = () => {
-    closeDropdown();
+    closeDropdownAndToggleScroll();
 
     onToggleColumnFilter?.(column.fieldMetadataId);
   };

packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableTrEffect.tsx

@@ -1,4 +1,3 @@
-import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { isRowVisibleComponentFamilyState } from '@/object-record/record-table/record-table-row/states/isRowVisibleComponentFamilyState';
 import { useScrollWrapperElement } from '@/ui/utilities/scroll/hooks/useScrollWrapperElement';
 import { useSetRecoilComponentFamilyStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentFamilyStateV2';
@@ -9,7 +8,6 @@ type RecordTableTrEffectProps = {
 };
 
 export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
-  const { onIndexRecordsLoaded } = useRecordIndexContextOrThrow();
   const { scrollWrapperHTMLElement } = useScrollWrapperElement();
 
   const setIsRowVisible = useSetRecoilComponentFamilyStateV2(
@@ -29,7 +27,6 @@ export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
         const isIntersecting = entry.isIntersecting;
 
         if (isIntersecting) {
-          onIndexRecordsLoaded?.();
           setIsRowVisible(true);
         }
 
@@ -50,12 +47,7 @@ export const RecordTableTrEffect = ({ recordId }: RecordTableTrEffectProps) => {
     return () => {
       observer.disconnect();
     };
-  }, [
-    onIndexRecordsLoaded,
-    recordId,
-    scrollWrapperHTMLElement,
-    setIsRowVisible,
-  ]);
+  }, [recordId, scrollWrapperHTMLElement, setIsRowVisible]);
 
   return <></>;
 };