Enable optimistic rendering for pipeline stages (#1139)

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

@@ -73,10 +73,9 @@ const StyledNumChildren = styled.div`
 `;
 
 type OwnProps = {
-  color?: string;
+  color: string;
   title: string;
-  onTitleEdit: (title: string) => void;
-  onColumnColorEdit: (color: string) => void;
+  onTitleEdit: (title: string, color: string) => void;
   totalAmount?: number;
   children: React.ReactNode;
   isFirstColumn: boolean;
@@ -87,7 +86,6 @@ export function BoardColumn({
   color,
   title,
   onTitleEdit,
-  onColumnColorEdit,
   totalAmount,
   children,
   isFirstColumn,
@@ -124,7 +122,6 @@ export function BoardColumn({
         <BoardColumnMenu
           onClose={handleClose}
           onTitleEdit={onTitleEdit}
-          onColumnColorEdit={onColumnColorEdit}
           title={title}
           color={color}
         />

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

@@ -31,9 +31,8 @@ const StyledEditModeInput = styled.input`
 type OwnProps = {
   onClose: () => void;
   title: string;
-  onTitleEdit: (title: string) => void;
-  onColumnColorEdit: (color: string) => void;
-  color?: string;
+  onTitleEdit: (title: string, color: string) => void;
+  color: string;
 };
 
 const StyledColorSample = styled.div<{ colorName: string }>`
@@ -61,15 +60,17 @@ export const COLOR_OPTIONS = [
 export function BoardColumnEditTitleMenu({
   onClose,
   onTitleEdit,
-  onColumnColorEdit,
   title,
   color,
 }: OwnProps) {
   const [internalValue, setInternalValue] = useState(title);
-  const debouncedOnUpdate = debounce(onTitleEdit, 200);
+  const debouncedOnUpdateTitle = debounce(
+    (newTitle) => onTitleEdit(newTitle, color),
+    200,
+  );
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setInternalValue(event.target.value);
-    debouncedOnUpdate(event.target.value);
+    debouncedOnUpdateTitle(event.target.value);
   };
   return (
     <DropdownMenuItemsContainer>
@@ -86,7 +87,7 @@ export function BoardColumnEditTitleMenu({
         <DropdownMenuSelectableItem
           key={colorOption.name}
           onClick={() => {
-            onColumnColorEdit(colorOption.id);
+            onTitleEdit(title, colorOption.id);
             onClose();
           }}
           selected={colorOption.id === color}

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

@@ -23,15 +23,13 @@ const StyledMenuContainer = styled.div`
 type OwnProps = {
   onClose: () => void;
   title: string;
-  color?: string;
-  onTitleEdit: (title: string) => void;
-  onColumnColorEdit: (color: string) => void;
+  color: string;
+  onTitleEdit: (title: string, color: string) => void;
 };
 
 export function BoardColumnMenu({
   onClose,
   onTitleEdit,
-  onColumnColorEdit,
   title,
   color,
 }: OwnProps) {
@@ -66,7 +64,6 @@ export function BoardColumnMenu({
             color={color}
             onClose={onClose}
             onTitleEdit={onTitleEdit}
-            onColumnColorEdit={onColumnColorEdit}
             title={title}
           />
         )}

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

@@ -40,14 +40,12 @@ export function EntityBoard({
   boardOptions,
   updateSorts,
   onEditColumnTitle,
-  onEditColumnColor,
 }: {
   boardOptions: BoardOptions;
   updateSorts: (
     sorts: Array<SelectedSortType<PipelineProgressOrderByWithRelationInput>>,
   ) => void;
-  onEditColumnTitle: (columnId: string, title: string) => void;
-  onEditColumnColor: (columnId: string, color: string) => void;
+  onEditColumnTitle: (columnId: string, title: string, color: string) => void;
 }) {
   const [boardColumns] = useRecoilState(boardColumnsState);
 
@@ -138,7 +136,6 @@ export function EntityBoard({
                   boardOptions={boardOptions}
                   column={column}
                   onEditColumnTitle={onEditColumnTitle}
-                  onEditColumnColor={onEditColumnColor}
                 />
               </RecoilScope>
             </BoardColumnIdContext.Provider>

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

@@ -51,12 +51,10 @@ export function EntityBoardColumn({
   column,
   boardOptions,
   onEditColumnTitle,
-  onEditColumnColor,
 }: {
   column: BoardColumnDefinition;
   boardOptions: BoardOptions;
-  onEditColumnTitle: (columnId: string, title: string) => void;
-  onEditColumnColor: (columnId: string, color: string) => void;
+  onEditColumnTitle: (columnId: string, title: string, color: string) => void;
 }) {
   const boardColumnId = useContext(BoardColumnIdContext) ?? '';
 
@@ -68,19 +66,14 @@ export function EntityBoardColumn({
     boardCardIdsByColumnIdFamilyState(boardColumnId ?? ''),
   );
 
-  function handleEditColumnTitle(value: string) {
-    onEditColumnTitle(boardColumnId, value);
-  }
-
-  function handleEditColumnColor(newColor: string) {
-    onEditColumnColor(boardColumnId, newColor);
+  function handleEditColumnTitle(title: string, color: string) {
+    onEditColumnTitle(boardColumnId, title, color);
   }
 
   return (
     <Droppable droppableId={column.id}>
       {(droppableProvided) => (
         <BoardColumn
-          onColumnColorEdit={handleEditColumnColor}
           onTitleEdit={handleEditColumnTitle}
           title={column.title}
           color={column.colorCode}

front/src/modules/ui/board/types/BoardColumnDefinition.ts

@@ -2,5 +2,5 @@ export type BoardColumnDefinition = {
   id: string;
   title: string;
   index: number;
-  colorCode?: string;
+  colorCode: string;
 };

front/src/pages/opportunities/Opportunities.tsx

@@ -45,23 +45,25 @@ export function Opportunities() {
 
   const [updatePipelineStage] = useUpdatePipelineStageMutation();
 
-  function handleEditColumnTitle(boardColumnId: string, newTitle: string) {
+  function handleEditColumnTitle(
+    boardColumnId: string,
+    newTitle: string,
+    newColor: string,
+  ) {
     updatePipelineStage({
       variables: {
         id: boardColumnId,
-        data: { name: newTitle },
+        data: { name: newTitle, color: newColor },
       },
-      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
-    });
-  }
-
-  function handleEditColumnColor(boardColumnId: string, newColor: string) {
-    updatePipelineStage({
-      variables: {
-        id: boardColumnId,
-        data: { color: newColor },
+      optimisticResponse: {
+        __typename: 'Mutation',
+        updateOnePipelineStage: {
+          __typename: 'PipelineStage',
+          id: boardColumnId,
+          name: newTitle,
+          color: newColor,
+        },
       },
-      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
     });
   }
 
@@ -91,7 +93,6 @@ export function Opportunities() {
             <EntityBoard
               boardOptions={opportunitiesBoardOptions}
               updateSorts={updateSorts}
-              onEditColumnColor={handleEditColumnColor}
               onEditColumnTitle={handleEditColumnTitle}
             />
             <EntityBoardActionBar>