338 on opportunities page when i associate a new company to a pipelinestage its persisted in db (#339)

* feature: add navigation for opportunities

* chore: add companies in pipeline seed

* feature: make the board scrollable

* feature: make the board scrollable vertically

* feature: remove board container

* feature: fix newButton style

* feature: add onClickNew method on board

* feature: call backend with hardcoded id for new pipeline progressable

* feature: refetch board on click on new

* feature: use pipelineProgressId instead of entityId to ensure unicity of itemKey

* feature: avoid rerender of columns when refetching

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

@@ -2,9 +2,12 @@ import styled from '@emotion/styled';
 import { DropResult } 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 StyledBoard = styled.div`
+  border-radius: ${({ theme }) => theme.spacing(2)};
   display: flex;
   flex-direction: row;
   height: 100%;
+  overflow-x: auto;
+  width: 100%;
 `;
 
 export type BoardItemKey = string;

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

@@ -6,8 +6,13 @@ export const StyledColumn = styled.div`
   background-color: ${({ theme }) => theme.primaryBackground};
   display: flex;
   flex-direction: column;
+  min-width: 300px;
   padding: ${({ theme }) => theme.spacing(2)};
-  width: 300px;
+`;
+
+export const ScrollableColumn = styled.div`
+  max-height: calc(100vh - 120px);
+  overflow-y: auto;
 `;
 
 export const StyledColumnTitle = styled.h3`
@@ -21,6 +26,10 @@ 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 = ({
@@ -36,7 +45,7 @@ export const ItemsContainer = ({
       {...droppableProvided?.droppableProps}
     >
       {children}
-      {droppableProvided?.placeholder}
+      <StyledPlaceholder>{droppableProvided?.placeholder}</StyledPlaceholder>
     </StyledItemContainer>
   );
 };

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

@@ -1,3 +1,4 @@
+import { useCallback } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 
@@ -14,17 +15,24 @@ const StyledButton = styled.button`
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   justify-content: center;
-  transition: background-color 0.2s ease-in-out;
+  padding: ${(props) => props.theme.spacing(1)};
 
   &:hover {
     background-color: ${({ theme }) => theme.secondaryBackground};
   }
 `;
 
-export const NewButton = () => {
+export const NewButton = ({
+  onClick,
+}: {
+  onClick?: (...args: any[]) => void;
+}) => {
   const theme = useTheme();
+  const onInnerClick = useCallback(() => {
+    onClick && onClick({ id: 'twenty-aaffcfbd-f86b-419f-b794-02319abe8637' });
+  }, [onClick]);
   return (
-    <StyledButton>
+    <StyledButton onClick={onInnerClick}>
       <IconPlus size={theme.iconSizeMedium} />
       New
     </StyledButton>