Add ability to associate a new company to pipeline (#350)

* Add ability to associate a new company to pipeline

* Fix tests

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

@@ -5,37 +5,33 @@ export const StyledBoard = styled.div`
   border-radius: ${({ theme }) => theme.spacing(2)};
   display: flex;
   flex-direction: row;
-  height: 100%;
+  height: calc(100%);
   overflow-x: auto;
   width: 100%;
 `;
 
-export type BoardItemKey = string;
-export type Item = any & { id: string };
-export interface Items {
-  [key: string]: Item;
-}
 export interface Column {
   id: string;
   title: string;
   colorCode?: string;
-  itemKeys: BoardItemKey[];
+  itemKeys: string[];
 }
 
-export const getOptimisticlyUpdatedBoard = (
+export function getOptimisticlyUpdatedBoard(
   board: Column[],
   result: DropResult,
-) => {
+) {
+  const newBoard = JSON.parse(JSON.stringify(board));
   const { destination, source } = result;
   if (!destination) return;
-  const sourceColumnIndex = board.findIndex(
-    (column) => column.id === source.droppableId,
+  const sourceColumnIndex = newBoard.findIndex(
+    (column: Column) => column.id === source.droppableId,
   );
-  const sourceColumn = board[sourceColumnIndex];
-  const destinationColumnIndex = board.findIndex(
-    (column) => column.id === destination.droppableId,
+  const sourceColumn = newBoard[sourceColumnIndex];
+  const destinationColumnIndex = newBoard.findIndex(
+    (column: Column) => column.id === destination.droppableId,
   );
-  const destinationColumn = board[destinationColumnIndex];
+  const destinationColumn = newBoard[destinationColumnIndex];
   if (!destinationColumn || !sourceColumn) return;
   const sourceItems = sourceColumn.itemKeys;
   const destinationItems = destinationColumn.itemKeys;
@@ -53,8 +49,7 @@ export const getOptimisticlyUpdatedBoard = (
     itemKeys: destinationItems,
   };
 
-  const newBoard = [...board];
   newBoard.splice(sourceColumnIndex, 1, newSourceColumn);
   newBoard.splice(destinationColumnIndex, 1, newDestinationColumn);
   return newBoard;
-};
+}

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

@@ -1,20 +1,14 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { DroppableProvided } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
 
 export const StyledColumn = styled.div`
   background-color: ${({ theme }) => theme.primaryBackground};
   display: flex;
   flex-direction: column;
-  min-width: 300px;
+  min-width: 200px;
   padding: ${({ theme }) => theme.spacing(2)};
 `;
 
-export const ScrollableColumn = styled.div`
-  max-height: calc(100vh - 120px);
-  overflow-y: auto;
-`;
-
 export const StyledColumnTitle = styled.h3`
   color: ${({ color }) => color};
   font-family: 'Inter';
@@ -26,26 +20,17 @@ export const StyledColumnTitle = styled.h3`
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
 
-const StyledPlaceholder = styled.div`
-  min-height: 1px;
-`;
-
-export const StyledItemContainer = styled.div``;
-
-export const ItemsContainer = ({
-  children,
-  droppableProvided,
-}: {
+type OwnProps = {
+  colorCode?: string;
+  title: string;
   children: React.ReactNode;
-  droppableProvided: DroppableProvided;
-}) => {
-  return (
-    <StyledItemContainer
-      ref={droppableProvided?.innerRef}
-      {...droppableProvided?.droppableProps}
-    >
-      {children}
-      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
-    </StyledItemContainer>
-  );
 };
+
+export function BoardColumn({ colorCode, title, children }: OwnProps) {
+  return (
+    <StyledColumn>
+      <StyledColumnTitle color={colorCode}>• {title}</StyledColumnTitle>
+      {children}
+    </StyledColumn>
+  );
+}

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

@@ -1,28 +0,0 @@
-import styled from '@emotion/styled';
-import { DraggableProvided } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
-
-const StyledCard = styled.div`
-  background-color: ${({ theme }) => theme.secondaryBackground};
-  border: 1px solid ${({ theme }) => theme.quaternaryBackground};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  box-shadow: ${({ theme }) => theme.boxShadow};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
-  max-width: 300px;
-`;
-
-type BoardCardProps = {
-  children: React.ReactNode;
-  draggableProvided?: DraggableProvided;
-};
-
-export const BoardItem = ({ children, draggableProvided }: BoardCardProps) => {
-  return (
-    <StyledCard
-      ref={draggableProvided?.innerRef}
-      {...draggableProvided?.dragHandleProps}
-      {...draggableProvided?.draggableProps}
-    >
-      {children}
-    </StyledCard>
-  );
-};

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

@@ -1,4 +1,3 @@
-import { useCallback } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -22,19 +21,17 @@ const StyledButton = styled.button`
   }
 `;
 
-export const NewButton = ({
-  onClick,
-}: {
-  onClick?: (...args: any[]) => void;
-}) => {
+type OwnProps = {
+  onClick: () => void;
+};
+
+export function NewButton({ onClick }: OwnProps) {
   const theme = useTheme();
-  const onInnerClick = useCallback(() => {
-    onClick && onClick({ id: 'twenty-aaffcfbd-f86b-419f-b794-02319abe8637' });
-  }, [onClick]);
+
   return (
-    <StyledButton onClick={onInnerClick}>
+    <StyledButton onClick={onClick}>
       <IconPlus size={theme.iconSizeMedium} />
       New
     </StyledButton>
   );
-};
+}