fix: fix Pipeline Step title and color update in board (#2849)

Fixes a bug where editing a pipeline step's title or color in the board changes the column's label to the column's uuid and the color to gray.

front/src/modules/ui/object/record-board/components/RecordBoard.tsx

@@ -28,7 +28,11 @@ export type RecordBoardProps = {
   boardOptions: BoardOptions;
   onColumnAdd?: (boardColumn: BoardColumnDefinition) => void;
   onColumnDelete?: (boardColumnId: string) => void;
-  onEditColumnTitle: (columnId: string, title: string, color: string) => void;
+  onEditColumnTitle: (params: {
+    columnId: string;
+    title: string;
+    color: string;
+  }) => void;
 };
 
 const StyledBoard = styled.div`

front/src/modules/ui/object/record-board/components/RecordBoardColumn.tsx

@@ -51,7 +51,11 @@ type RecordBoardColumnProps = {
   recordBoardOptions: BoardOptions;
   recordBoardColumnTotal: number;
   onDelete?: (columnId: string) => void;
-  onTitleEdit: (columnId: string, title: string, color: string) => void;
+  onTitleEdit: (params: {
+    columnId: string;
+    title: string;
+    color: string;
+  }) => void;
 };
 
 const BoardColumnCardsContainer = ({
@@ -82,10 +86,6 @@ export const RecordBoardColumn = ({
     recordBoardCardIdsByColumnIdFamilyState(recordBoardColumnId),
   );
 
-  const handleTitleEdit = (title: string, color: string) => {
-    onTitleEdit(recordBoardColumnId, title, color);
-  };
-
   const isFirstColumn = columnDefinition.position === 0;
 
   return (
@@ -95,6 +95,8 @@ export const RecordBoardColumn = ({
         columnDefinition: columnDefinition,
         isFirstColumn: columnDefinition.position === 0,
         isLastColumn: columnDefinition.position === recordBoardColumnTotal - 1,
+        onTitleEdit: ({ title, color }) =>
+          onTitleEdit({ columnId: recordBoardColumnId, title, color }),
       }}
     >
       <Droppable droppableId={recordBoardColumnId}>
@@ -104,7 +106,6 @@ export const RecordBoardColumn = ({
               recordBoardColumnId={recordBoardColumnId}
               columnDefinition={columnDefinition}
               onDelete={onDelete}
-              onTitleEdit={handleTitleEdit}
             />
             <BoardColumnCardsContainer droppableProvided={droppableProvided}>
               {cardIds.map((cardId, index) => (

front/src/modules/ui/object/record-board/components/RecordBoardColumnDropdownMenu.tsx

@@ -26,7 +26,6 @@ const StyledMenuContainer = styled.div`
 type RecordBoardColumnDropdownMenuProps = {
   onClose: () => void;
   onDelete?: (id: string) => void;
-  onTitleEdit: (title: string, color: string) => void;
   stageId: string;
 };
 
@@ -35,7 +34,6 @@ type Menu = 'actions' | 'add' | 'title';
 export const RecordBoardColumnDropdownMenu = ({
   onClose,
   onDelete,
-  onTitleEdit,
   stageId,
 }: RecordBoardColumnDropdownMenuProps) => {
   const [currentMenu, setCurrentMenu] = useState('actions');
@@ -127,7 +125,6 @@ export const RecordBoardColumnDropdownMenu = ({
           <RecordBoardColumnEditTitleMenu
             color={columnDefinition.colorCode ?? 'gray'}
             onClose={closeMenu}
-            onTitleEdit={onTitleEdit}
             title={columnDefinition.title}
             onDelete={onDelete}
             stageId={stageId}

front/src/modules/ui/object/record-board/components/RecordBoardColumnEditTitleMenu.tsx

@@ -1,4 +1,4 @@
-import { ChangeEvent, useCallback, useState } from 'react';
+import { ChangeEvent, useCallback, useContext, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { IconTrash } from '@/ui/display/icon';
@@ -6,11 +6,13 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
-import { useRecordBoard } from '@/ui/object/record-board/hooks/useRecordBoard';
 import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 import { debounce } from '~/utils/debounce';
 
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
+import { useRecordBoard } from '../hooks/useRecordBoard';
+
 const StyledEditTitleContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
@@ -42,7 +44,6 @@ type RecordBoardColumnEditTitleMenuProps = {
   onClose: () => void;
   onDelete?: (id: string) => void;
   title: string;
-  onTitleEdit: (title: string, color: string) => void;
   color: ThemeColor;
   stageId: string;
 };
@@ -51,16 +52,16 @@ export const RecordBoardColumnEditTitleMenu = ({
   onClose,
   onDelete,
   stageId,
-  onTitleEdit,
   title,
   color,
 }: RecordBoardColumnEditTitleMenuProps) => {
   const [internalValue, setInternalValue] = useState(title);
+  const { onTitleEdit } = useContext(BoardColumnContext) || {};
 
   const { setBoardColumns } = useRecordBoard();
 
   const debouncedOnUpdateTitle = debounce(
-    (newTitle) => onTitleEdit(newTitle, color),
+    (newTitle) => onTitleEdit?.({ title: newTitle, color }),
     200,
   );
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -76,7 +77,7 @@ export const RecordBoardColumnEditTitleMenu = ({
   };
 
   const handleColorChange = (newColor: ThemeColor) => {
-    onTitleEdit(title, newColor);
+    onTitleEdit?.({ title, color: newColor });
     onClose();
     setBoardColumns((previousBoardColumns) =>
       previousBoardColumns.map((column) =>

front/src/modules/ui/object/record-board/components/RecordBoardColumnHeader.tsx

@@ -52,14 +52,12 @@ type RecordBoardColumnHeaderProps = {
   recordBoardColumnId: string;
   columnDefinition: BoardColumnDefinition;
   onDelete?: (columnId: string) => void;
-  onTitleEdit: (columnId: string, title: string, color: string) => void;
 };
 
 export const RecordBoardColumnHeader = ({
   recordBoardColumnId,
   columnDefinition,
   onDelete,
-  onTitleEdit,
 }: RecordBoardColumnHeaderProps) => {
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] = useState(false);
   const [isHeaderHovered, setIsHeaderHovered] = useState(false);
@@ -89,10 +87,6 @@ export const RecordBoardColumnHeader = ({
     recordBoardCardIdsByColumnIdFamilyState(recordBoardColumnId),
   );
 
-  const handleTitleEdit = (title: string, color: string) => {
-    onTitleEdit(recordBoardColumnId, title, color);
-  };
-
   return (
     <>
       <StyledHeader
@@ -127,7 +121,6 @@ export const RecordBoardColumnHeader = ({
         <RecordBoardColumnDropdownMenu
           onClose={handleBoardColumnMenuClose}
           onDelete={onDelete}
-          onTitleEdit={handleTitleEdit}
           stageId={recordBoardColumnId}
         />
       )}

front/src/modules/ui/object/record-board/contexts/BoardColumnContext.ts

@@ -2,11 +2,14 @@ import { createContext } from 'react';
 
 import { BoardColumnDefinition } from '../types/BoardColumnDefinition';
 
-type BoardColumn = {
+type BoardColumnContextProps = {
   id: string;
   columnDefinition: BoardColumnDefinition;
   isFirstColumn: boolean;
   isLastColumn: boolean;
+  onTitleEdit: (params: { title: string; color: string }) => void;
 };
 
-export const BoardColumnContext = createContext<BoardColumn | null>(null);
+export const BoardColumnContext = createContext<BoardColumnContextProps | null>(
+  null,
+);

front/src/pages/opportunities/Opportunities.tsx

@@ -25,17 +25,18 @@ export const Opportunities = () => {
       objectNameSingular: 'pipelineStep',
     });
 
-  const handleEditColumnTitle = (
+  const handleEditColumnTitle = ({
-    boardColumnId: string,
+    columnId,
-    newTitle: string,
+    title,
-    newColor: string,
+    color,
-  ) => {
+  }: {
+    columnId: string;
+    title: string;
+    color: string;
+  }) => {
     updateOnePipelineStep?.({
-      idToUpdate: boardColumnId,
+      idToUpdate: columnId,
-      input: {
+      input: { name: title, color },
-        name: newTitle,
-        color: newColor,
-      },
     });
   };