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/BoardColumnMenu.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useContext, useRef, useState } from 'react';
 import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
@@ -7,50 +7,53 @@ import { useCreateCompanyProgress } from '@/companies/hooks/useCreateCompanyProg
 import { useFilteredSearchCompanyQuery } from '@/companies/hooks/useFilteredSearchCompanyQuery';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
-import { IconPencil, IconPlus, IconTrash } from '@/ui/icon';
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconPencil,
+  IconPlus,
+  IconTrash,
+} from '@/ui/icon';
 import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
 import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
-import { ThemeColor } from '@/ui/theme/constants/colors';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
+import { BoardColumnContext } from '../contexts/BoardColumnContext';
+import { useBoardColumns } from '../hooks/useBoardColumns';
 import { boardColumnsState } from '../states/boardColumnsState';
 import { BoardColumnHotkeyScope } from '../types/BoardColumnHotkeyScope';
 
 import { BoardColumnEditTitleMenu } from './BoardColumnEditTitleMenu';
-
 const StyledMenuContainer = styled.div`
   position: absolute;
   width: 200px;
   z-index: 1;
 `;
 
-type OwnProps = {
-  color: ThemeColor;
+type BoardColumnMenuProps = {
   onClose: () => void;
   onDelete?: (id: string) => void;
   onTitleEdit: (title: string, color: string) => void;
   stageId: string;
-  title: string;
 };
 
 type Menu = 'actions' | 'add' | 'title';
 
 export const BoardColumnMenu = ({
-  color,
   onClose,
   onDelete,
   onTitleEdit,
   stageId,
-  title,
-}: OwnProps) => {
+}: BoardColumnMenuProps) => {
   const [currentMenu, setCurrentMenu] = useState('actions');
+  const column = useContext(BoardColumnContext);
 
   const [, setBoardColumns] = useRecoilState(boardColumnsState);
 
@@ -58,6 +61,7 @@ export const BoardColumnMenu = ({
 
   const { enqueueSnackBar } = useSnackBar();
   const createCompanyProgress = useCreateCompanyProgress();
+  const { handleMoveBoardColumn } = useBoardColumns();
 
   const handleCompanySelected = (
     selectedCompany: EntityForSelect | null | undefined,
@@ -125,6 +129,26 @@ export const BoardColumnMenu = ({
     [],
   );
 
+  if (!column) return <></>;
+
+  const { isFirstColumn, isLastColumn, columnDefinition } = column;
+
+  const handleColumnMoveLeft = () => {
+    closeMenu();
+    if (isFirstColumn) {
+      return;
+    }
+    handleMoveBoardColumn('left', columnDefinition);
+  };
+
+  const handleColumnMoveRight = () => {
+    closeMenu();
+    if (isLastColumn) {
+      return;
+    }
+    handleMoveBoardColumn('right', columnDefinition);
+  };
+
   return (
     <StyledMenuContainer ref={boardColumnMenuRef}>
       <StyledDropdownMenu data-select-disable>
@@ -135,6 +159,16 @@ export const BoardColumnMenu = ({
               LeftIcon={IconPencil}
               text="Rename"
             />
+            <MenuItem
+              LeftIcon={IconArrowLeft}
+              onClick={handleColumnMoveLeft}
+              text="Move left"
+            />
+            <MenuItem
+              LeftIcon={IconArrowRight}
+              onClick={handleColumnMoveRight}
+              text="Move right"
+            />
             <MenuItem
               onClick={handleDelete}
               LeftIcon={IconTrash}
@@ -149,10 +183,10 @@ export const BoardColumnMenu = ({
         )}
         {currentMenu === 'title' && (
           <BoardColumnEditTitleMenu
-            color={color}
+            color={columnDefinition.colorCode ?? 'gray'}
             onClose={closeMenu}
             onTitleEdit={onTitleEdit}
-            title={title}
+            title={columnDefinition.title}
           />
         )}
         {currentMenu === 'add' && (