Feat/generic editable board card (#1089)

* Fixed BoardColumnMenu

* Fixed naming

* Optimized board loading

* Added GenericEditableField

* Introduce GenericEditableField for BoardCards

* remove logs

* delete unused files

* fix stories

---------

Co-authored-by: corentin <corentin@twenty.com>

front/src/modules/ui/board/components/BoardColumn.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { Key } from 'ts-key-enum';
 
 import { Tag } from '@/ui/tag/components/Tag';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
@@ -77,7 +75,6 @@ const StyledNumChildren = styled.div`
 type OwnProps = {
   color?: string;
   title: string;
-  pipelineStageId?: string;
   onTitleEdit: (title: string) => void;
   onColumnColorEdit: (color: string) => void;
   totalAmount?: number;
@@ -104,13 +101,6 @@ export function BoardColumn({
     goBackToPreviousHotkeyScope,
   } = usePreviousHotkeyScope();
 
-  useScopedHotkeys(
-    [Key.Escape, Key.Enter],
-    handleClose,
-    BoardColumnHotkeyScope.BoardColumn,
-    [],
-  );
-
   function handleTitleClick() {
     setIsBoardColumnMenuOpen(true);
     setHotkeyScopeAndMemorizePreviousScope(BoardColumnHotkeyScope.BoardColumn, {
@@ -132,7 +122,7 @@ export function BoardColumn({
       </StyledHeader>
       {isBoardColumnMenuOpen && (
         <BoardColumnMenu
-          onClose={() => setIsBoardColumnMenuOpen(false)}
+          onClose={handleClose}
           onTitleEdit={onTitleEdit}
           onColumnColorEdit={onColumnColorEdit}
           title={title}

front/src/modules/ui/board/components/BoardColumnMenu.tsx

@@ -1,13 +1,17 @@
 import { useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { IconPencil } from '@tabler/icons-react';
+import { Key } from 'ts-key-enum';
 
 import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
 import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { icon } from '@/ui/theme/constants/icon';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
+import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
+
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
 
 const StyledMenuContainer = styled.div`
@@ -39,6 +43,13 @@ export function BoardColumnMenu({
     callback: onClose,
   });
 
+  useScopedHotkeys(
+    [Key.Escape, Key.Enter],
+    onClose,
+    BoardColumnHotkeyScope.BoardColumn,
+    [],
+  );
+
   return (
     <StyledMenuContainer ref={boardColumnMenuRef}>
       <DropdownMenu>

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -48,6 +48,7 @@ export function EntityBoard({
   onEditColumnColor: (columnId: string, color: string) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
+
   const theme = useTheme();
   const [updatePipelineProgressStage] =
     useUpdateOnePipelineProgressStageMutation();

front/src/modules/ui/board/components/EntityBoardCard.tsx

@@ -4,19 +4,15 @@ import { BoardOptions } from '../types/BoardOptions';
 
 export function EntityBoardCard({
   boardOptions,
-  pipelineProgressId,
+  cardId,
   index,
 }: {
   boardOptions: BoardOptions;
-  pipelineProgressId: string;
+  cardId: string;
   index: number;
 }) {
   return (
-    <Draggable
-      key={pipelineProgressId}
-      draggableId={pipelineProgressId}
-      index={index}
-    >
+    <Draggable key={cardId} draggableId={cardId} index={index}>
       {(draggableProvided) => (
         <div
           ref={draggableProvided?.innerRef}

front/src/modules/ui/board/components/EntityBoardColumn.tsx

@@ -84,7 +84,6 @@ export function EntityBoardColumn({
           onTitleEdit={handleEditColumnTitle}
           title={column.title}
           color={column.colorCode}
-          pipelineStageId={column.id}
           totalAmount={boardColumnTotal}
           isFirstColumn={column.index === 0}
           numChildren={cardIds.length}
@@ -94,7 +93,7 @@ export function EntityBoardColumn({
               <BoardCardIdContext.Provider value={cardId} key={cardId}>
                 <EntityBoardCard
                   index={index}
-                  pipelineProgressId={cardId}
+                  cardId={cardId}
                   boardOptions={boardOptions}
                 />
               </BoardCardIdContext.Provider>