Fix front end (#1678)

* Fix front

Co-authored-by: v1b3m <vibenjamin6@gmail.com>

* Fix according to PR

* Fix tests

---------

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

front/.storybook/test-runner-jest.js

@@ -9,5 +9,5 @@ module.exports = {
   /** Add your own overrides below
    * @see https://jestjs.io/docs/configuration
    */
-  testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 30000 : 15000,
+  testTimeout: process.env.STORYBOOK_STORIES_FOLDER === 'pages' ? 60000 : 15000,
 };

front/src/modules/ui/dropdown/hooks/useDropdownButton.ts

@@ -25,6 +25,7 @@ export const useDropdownButton = ({ dropdownId }: { dropdownId: string }) => {
   );
 
   const closeDropdownButton = () => {
+    console.log('closeDropdownButton', dropdownId);
     goBackToPreviousHotkeyScope();
     setIsDropdownButtonOpen(false);
   };

front/src/modules/ui/table/components/ColumnHead.tsx

@@ -4,7 +4,6 @@ import styled from '@emotion/styled';
 import { useDropdownButton } from '@/ui/dropdown/hooks/useDropdownButton';
 import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 
-import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
 import { EntityTableHeaderOptions } from './EntityTableHeaderOptions';
@@ -49,7 +48,7 @@ export const ColumnHead = ({
   const theme = useTheme();
 
   const { openDropdownButton } = useDropdownButton({
-    dropdownId: ColumnHeadDropdownId,
+    dropdownId: column.key + '-header',
   });
 
   return (

front/src/modules/ui/table/components/EntityTableHeader.tsx

@@ -164,18 +164,17 @@ export const EntityTableHeader = () => {
         >
           <SelectAllCheckbox />
         </th>
-
-        {visibleTableColumns.map((column, index) => (
-          <StyledColumnHeaderCell
-            key={column.key}
-            isResizing={resizedFieldKey === column.key}
-            columnWidth={Math.max(
-              tableColumnsByKey[column.key].size +
-                (resizedFieldKey === column.key ? resizeFieldOffset : 0),
-              COLUMN_MIN_WIDTH,
-            )}
-          >
-            <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
+        <RecoilScope CustomRecoilScopeContext={DropdownRecoilScopeContext}>
+          {visibleTableColumns.map((column, index) => (
+            <StyledColumnHeaderCell
+              key={column.key}
+              isResizing={resizedFieldKey === column.key}
+              columnWidth={Math.max(
+                tableColumnsByKey[column.key].size +
+                  (resizedFieldKey === column.key ? resizeFieldOffset : 0),
+                COLUMN_MIN_WIDTH,
+              )}
+            >
               <ColumnHead
                 column={column}
                 isFirstColumn={index === 0}
@@ -189,9 +188,10 @@ export const EntityTableHeader = () => {
                   setResizedFieldKey(column.key);
                 }}
               />
-            </RecoilScope>
-          </StyledColumnHeaderCell>
-        ))}
+            </StyledColumnHeaderCell>
+          ))}
+        </RecoilScope>
+
         <th>
           {hiddenTableColumns.length > 0 && (
             <StyledAddIconButtonWrapper>

front/src/modules/ui/table/components/EntityTableHeaderOptions.tsx

@@ -8,7 +8,6 @@ import { ViewFieldMetadata } from '@/ui/editable-field/types/ViewField';
 import { IconArrowLeft, IconArrowRight, IconEyeOff } from '@/ui/icon';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 
-import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId';
 import { useTableColumns } from '../hooks/useTableColumns';
 import { ColumnDefinition } from '../types/ColumnDefinition';
 
@@ -35,7 +34,7 @@ export const EntityTableHeaderOptions = ({
   } = useTableColumns();
 
   const { closeDropdownButton } = useDropdownButton({
-    dropdownId: ColumnHeadDropdownId,
+    dropdownId: column.key + '-header',
   });
 
   const handleColumnMoveLeft = () => {
@@ -61,7 +60,7 @@ export const EntityTableHeaderOptions = ({
   return (
     <StyledDropdownContainer>
       <DropdownButton
-        dropdownId={ColumnHeadDropdownId}
+        dropdownId={column.key + '-header'}
         dropdownComponents={
           <StyledDropdownMenu>
             <StyledDropdownMenuItemsContainer>
@@ -83,6 +82,7 @@ export const EntityTableHeaderOptions = ({
             </StyledDropdownMenuItemsContainer>
           </StyledDropdownMenu>
         }
+        dropdownHotkeyScope={{ scope: column.key + '-header' }}
       />
     </StyledDropdownContainer>
   );

front/src/modules/ui/table/options/components/__stories__/TableOptionsDropdown.stories.tsx

@@ -34,6 +34,9 @@ export default meta;
 type Story = StoryObj<typeof TableOptionsDropdown>;
 
 export const Default: Story = {
+  args: {
+    customHotkeyScope: { scope: 'options' },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);