Refacto board (#661)

* Refacto pipeline progress board to be entity agnostic

* Abstract hooks as well

* Move files

* Pass specific components as props

* Move board hook to the generic component

* Make dnd and update logic part of the board

* Remove useless call and getch pipelineProgress from hook

* Minot

* improve typing

* Revert "improve typing"

This reverts commit 49bf7929b6231747cc460cbb98f68c3c10424659.

* wip

* Get board from initial component

* Move files again

* Lint

* Fix story

* Lint

* Mock pipeline progress

* Fix storybook

* WIP refactor recoil

* Checkpoint: compilation

* Fix dnd

* Fix unselect card

* Checkpoint: compilation

* Checkpoint: New card OK

* Checkpoint: feature complete

* Fix latency for delete

* Linter

* Fix rebase

* Move files

* lint

* Update Stories tests

* lint

* Fix test

* Refactor hook for company progress indexing

* Remove useless type

* Move boardState

* remove gardcoded Id

* Nit

* Fix

* Rename state

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

@@ -10,43 +10,46 @@ export const StyledBoard = styled.div`
   width: 100%;
 `;
 
-export type Column = {
-  id: string;
+export type BoardPipelineStageColumn = {
+  pipelineStageId: string;
   title: string;
   colorCode?: string;
-  itemKeys: string[];
+  pipelineProgressIds: string[];
 };
 
 export function getOptimisticlyUpdatedBoard(
-  board: Column[],
+  board: BoardPipelineStageColumn[],
   result: DropResult,
 ) {
+  // TODO: review any types
   const newBoard = JSON.parse(JSON.stringify(board));
   const { destination, source } = result;
   if (!destination) return;
   const sourceColumnIndex = newBoard.findIndex(
-    (column: Column) => column.id === source.droppableId,
+    (column: BoardPipelineStageColumn) =>
+      column.pipelineStageId === source.droppableId,
   );
   const sourceColumn = newBoard[sourceColumnIndex];
   const destinationColumnIndex = newBoard.findIndex(
-    (column: Column) => column.id === destination.droppableId,
+    (column: BoardPipelineStageColumn) =>
+      column.pipelineStageId === destination.droppableId,
   );
   const destinationColumn = newBoard[destinationColumnIndex];
   if (!destinationColumn || !sourceColumn) return;
-  const sourceItems = sourceColumn.itemKeys;
-  const destinationItems = destinationColumn.itemKeys;
+  const sourceItems = sourceColumn.pipelineProgressIds;
+  const destinationItems = destinationColumn.pipelineProgressIds;
 
   const [removed] = sourceItems.splice(source.index, 1);
   destinationItems.splice(destination.index, 0, removed);
 
-  const newSourceColumn = {
+  const newSourceColumn: BoardPipelineStageColumn = {
     ...sourceColumn,
-    itemKeys: sourceItems,
+    pipelineProgressIds: sourceItems,
   };
 
   const newDestinationColumn = {
     ...destinationColumn,
-    itemKeys: destinationItems,
+    pipelineProgressIds: destinationItems,
   };
 
   newBoard.splice(sourceColumnIndex, 1, newSourceColumn);

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

@@ -33,16 +33,14 @@ export const StyledAmount = styled.div`
 type OwnProps = {
   colorCode?: string;
   title: string;
-  amount: number;
   children: React.ReactNode;
 };
 
-export function BoardColumn({ colorCode, title, amount, children }: OwnProps) {
+export function BoardColumn({ colorCode, title, children }: OwnProps) {
   return (
     <StyledColumn>
       <StyledHeader>
         <StyledColumnTitle color={colorCode}>• {title}</StyledColumnTitle>
-        {!!amount && <StyledAmount>${amount}</StyledAmount>}
       </StyledHeader>
       {children}
     </StyledColumn>

front/src/modules/ui/board/components/__tests__/Board.test.ts

@@ -25,12 +25,14 @@ describe('getOptimisticlyUpdatedBoard', () => {
       {
         id: 'column-1',
         title: 'My Column',
-        itemKeys: initialColumn1,
+        pipelineStageId: 'column-1',
+        pipelineProgressIds: initialColumn1,
       },
       {
         id: 'column-2',
         title: 'My Column',
-        itemKeys: initialColumn2,
+        pipelineStageId: 'column-2',
+        pipelineProgressIds: initialColumn2,
       },
     ];
 
@@ -40,12 +42,14 @@ describe('getOptimisticlyUpdatedBoard', () => {
       {
         id: 'column-1',
         title: 'My Column',
-        itemKeys: finalColumn1,
+        pipelineStageId: 'column-1',
+        pipelineProgressIds: finalColumn1,
       },
       {
         id: 'column-2',
         title: 'My Column',
-        itemKeys: finalColumn2,
+        pipelineStageId: 'column-2',
+        pipelineProgressIds: finalColumn2,
       },
     ];