Optimize table loading (#866)

* wip

* wip

* Ok

* Deleted unused code

* Fixed lint

* Minor fixes

* Minor fixes

* Minor Fixes

* Minor merge fixes

* Ok

* Fix storybook tests

* Removed console.log

* Fix login

* asd

* Fixed storybook

* Added await

* Fixed await

* Added sleep for failing test

* Fix sleep

* Fix test

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -3,9 +3,10 @@ import styled from '@emotion/styled';
 
 import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
 
+import { CellHotkeyScopeContext } from '../../states/CellHotkeyScopeContext';
+import { TableHotkeyScope } from '../../types/TableHotkeyScope';
 import { useCurrentCellEditMode } from '../hooks/useCurrentCellEditMode';
 import { useIsSoftFocusOnCurrentCell } from '../hooks/useIsSoftFocusOnCurrentCell';
-import { useRegisterEditableCell } from '../hooks/useRegisterEditableCell';
 
 import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
@@ -34,6 +35,10 @@ type OwnProps = {
   onCancel?: () => void;
 };
 
+const DEFAULT_CELL_SCOPE: HotkeyScope = {
+  scope: TableHotkeyScope.CellEditMode,
+};
+
 export function EditableCell({
   editModeHorizontalAlign = 'left',
   editModeVerticalPosition = 'over',
@@ -42,35 +47,35 @@ export function EditableCell({
   editHotkeyScope,
   transparent = false,
   maxContentWidth,
-  onSubmit,
-  onCancel,
 }: OwnProps) {
   const { isCurrentCellInEditMode } = useCurrentCellEditMode();
 
   const hasSoftFocus = useIsSoftFocusOnCurrentCell();
 
-  useRegisterEditableCell(editHotkeyScope);
-
   return (
-    <CellBaseContainer>
-      {isCurrentCellInEditMode ? (
-        <EditableCellEditMode
-          maxContentWidth={maxContentWidth}
-          transparent={transparent}
-          editModeHorizontalAlign={editModeHorizontalAlign}
-          editModeVerticalPosition={editModeVerticalPosition}
-          onSubmit={onSubmit}
-          onCancel={onCancel}
-        >
-          {editModeContent}
-        </EditableCellEditMode>
-      ) : hasSoftFocus ? (
-        <EditableCellSoftFocusMode>
-          {nonEditModeContent}
-        </EditableCellSoftFocusMode>
-      ) : (
-        <EditableCellDisplayMode>{nonEditModeContent}</EditableCellDisplayMode>
-      )}
-    </CellBaseContainer>
+    <CellHotkeyScopeContext.Provider
+      value={editHotkeyScope ?? DEFAULT_CELL_SCOPE}
+    >
+      <CellBaseContainer>
+        {isCurrentCellInEditMode ? (
+          <EditableCellEditMode
+            maxContentWidth={maxContentWidth}
+            transparent={transparent}
+            editModeHorizontalAlign={editModeHorizontalAlign}
+            editModeVerticalPosition={editModeVerticalPosition}
+          >
+            {editModeContent}
+          </EditableCellEditMode>
+        ) : hasSoftFocus ? (
+          <EditableCellSoftFocusMode>
+            {nonEditModeContent}
+          </EditableCellSoftFocusMode>
+        ) : (
+          <EditableCellDisplayMode>
+            {nonEditModeContent}
+          </EditableCellDisplayMode>
+        )}
+      </CellBaseContainer>
+    </CellHotkeyScopeContext.Provider>
   );
 }

front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx

@@ -1,10 +1,8 @@
-import { ReactElement, useRef } from 'react';
+import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 import { overlayBackground } from '@/ui/themes/effects';
 
-import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandlers';
-
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
   align-items: center;
   border: ${({ transparent, theme }) =>
@@ -36,30 +34,21 @@ type OwnProps = {
   maxContentWidth?: number;
   editModeHorizontalAlign?: 'left' | 'right';
   editModeVerticalPosition?: 'over' | 'below';
-  onOutsideClick?: () => void;
-  onCancel?: () => void;
-  onSubmit?: () => void;
+  initialValue?: string;
 };
 
 export function EditableCellEditMode({
   editModeHorizontalAlign,
   editModeVerticalPosition,
   children,
-  onCancel,
-  onSubmit,
   transparent = false,
   maxContentWidth,
 }: OwnProps) {
-  const wrapperRef = useRef(null);
-
-  useRegisterCloseCellHandlers(wrapperRef, onSubmit, onCancel);
-
   return (
     <EditableCellEditModeContainer
       maxContentWidth={maxContentWidth}
       transparent={transparent}
       data-testid="editable-cell-edit-mode-container"
-      ref={wrapperRef}
       editModeHorizontalAlign={editModeHorizontalAlign}
       editModeVerticalPosition={editModeVerticalPosition}
     >

front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx

@@ -4,6 +4,7 @@ import { userEvent, within } from '@storybook/testing-library';
 
 import { CellPositionDecorator } from '~/testing/decorators/CellPositionDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { sleep } from '~/testing/sleep';
 
 import { EditableCellText } from '../../types/EditableCellText';
 
@@ -28,13 +29,12 @@ export const SoftFocusMode: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    await step('Click once', () =>
-      userEvent.click(canvas.getByText('Content')),
-    );
+    const content = await canvas.findByText('Content');
 
-    await step('Escape', () => {
-      userEvent.keyboard('{esc}');
-    });
+    await userEvent.click(content);
+    await userEvent.keyboard('{esc}');
+
+    await sleep(10);
 
     await step('Has soft focus mode', () => {
       expect(canvas.getByTestId('editable-cell-soft-focus-mode')).toBeDefined();
@@ -47,7 +47,7 @@ export const EditMode: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
 
-    const click = async () => userEvent.click(canvas.getByText('Content'));
+    const click = () => userEvent.click(canvas.getByText('Content'));
 
     await step('Click once', click);