feat: reorder kanban columns (#1699)

* kaban header options

* gql codegn

* moveColumn hook refactor

* BoardColumnContext addition

* saved board columns state

* db call hook update

* lint fix

* state change first db call second

* handleMoveTableColumn call

* codegen lint fix

* useMoveViewColumns hook

* useBoardColumns db call addition

* boardColumns state change from BoardHeader

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 
 import { Tag } from '@/ui/tag/components/Tag';
-import { ThemeColor } from '@/ui/theme/constants/colors';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnMenu } from './BoardColumnMenu';
@@ -53,28 +53,24 @@ const StyledNumChildren = styled.div`
 `;
 
 export type BoardColumnProps = {
-  color?: ThemeColor;
-  title: string;
   onDelete?: (id: string) => void;
   onTitleEdit: (title: string, color: string) => void;
   totalAmount?: number;
   children: React.ReactNode;
-  isFirstColumn: boolean;
   numChildren: number;
   stageId: string;
 };
 
 export const BoardColumn = ({
-  color,
-  title,
   onDelete,
   onTitleEdit,
   totalAmount,
   children,
-  isFirstColumn,
   numChildren,
   stageId,
 }: BoardColumnProps) => {
+  const boardColumn = useContext(BoardColumnContext);
+
   const [isBoardColumnMenuOpen, setIsBoardColumnMenuOpen] =
     React.useState(false);
 
@@ -95,10 +91,18 @@ export const BoardColumn = ({
     setIsBoardColumnMenuOpen(false);
   };
 
+  if (!boardColumn) return <></>;
+
+  const { isFirstColumn, columnDefinition } = boardColumn;
+
   return (
     <StyledColumn isFirstColumn={isFirstColumn}>
-      <StyledHeader onClick={handleTitleClick}>
-        <Tag color={color ?? 'gray'} text={title} />
+      <StyledHeader>
+        <Tag
+          onClick={handleTitleClick}
+          color={columnDefinition.colorCode ?? 'gray'}
+          text={columnDefinition.title}
+        />
         {!!totalAmount && <StyledAmount>${totalAmount}</StyledAmount>}
         <StyledNumChildren>{numChildren}</StyledNumChildren>
       </StyledHeader>
@@ -107,8 +111,6 @@ export const BoardColumn = ({
           onClose={handleClose}
           onDelete={onDelete}
           onTitleEdit={onTitleEdit}
-          title={title}
-          color={color ?? 'gray'}
           stageId={stageId}
         />
       )}