Feat/rename and color picker (#780)

* WIP

* Add menu for rename/color select

* Add stories

* Remove useless code

* Fix color name, add icon for selected color

* Remove useless comment

* Unify color vocabulary

* Fix rebase

* Rename story

* Improve hotkeys and imports

front/src/modules/pipeline/components/EntityBoardColumn.tsx

@@ -71,7 +71,17 @@ export function EntityBoardColumn({
     updatePipelineStage({
       variables: {
         id: pipelineStageId,
-        name: value,
+        data: { name: value },
+      },
+      refetchQueries: [getOperationName(GET_PIPELINES) || ''],
+    });
+  }
+
+  function handleEditColumnColor(value: string) {
+    updatePipelineStage({
+      variables: {
+        id: pipelineStageId,
+        data: { color: value },
       },
       refetchQueries: [getOperationName(GET_PIPELINES) || ''],
     });
@@ -81,9 +91,10 @@ export function EntityBoardColumn({
     <Droppable droppableId={column.pipelineStageId}>
       {(droppableProvided) => (
         <BoardColumn
+          onColumnColorEdit={handleEditColumnColor}
           onTitleEdit={handleEditColumnTitle}
           title={column.title}
-          colorCode={column.colorCode}
+          color={column.colorCode}
           pipelineStageId={column.pipelineStageId}
           totalAmount={boardColumnTotal}
           isFirstColumn={column.index === 0}

front/src/modules/pipeline/queries/update.ts

@@ -9,10 +9,11 @@ export const DELETE_PIPELINE_PROGRESS = gql`
 `;
 
 export const UPDATE_PIPELINE_STAGE = gql`
-  mutation UpdatePipelineStage($id: String, $name: String) {
-    updateOnePipelineStage(where: { id: $id }, data: { name: $name }) {
+  mutation UpdatePipelineStage($id: String, $data: PipelineStageUpdateInput!) {
+    updateOnePipelineStage(where: { id: $id }, data: $data) {
       id
       name
+      color
     }
   }
 `;