[Twenty-front]: Record table Header drag and drop functionality

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeader.tsx

@@ -5,6 +5,7 @@ import { RecordTableHeaderAddColumnButton } from '@/object-record/record-table/r
 import { RecordTableHeaderCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCell';
 import { RecordTableHeaderCheckboxColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn';
 import { RecordTableHeaderDragDropColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn';
+import { RecordTableHeaderDragDropContext } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropContext';
 import { RecordTableHeaderEmptyLastColumn } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderEmptyLastColumn';
 import { RecordTableHeaderFirstCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell';
 import { RecordTableHeaderFirstScrollableCell } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderFirstScrollableCell';
@@ -16,6 +17,7 @@ import { isRecordTableDragColumnHiddenComponentState } from '@/object-record/rec
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
 import { styled } from '@linaria/react';
 import { filterOutByProperty } from 'twenty-shared/utils';
+import { Droppable } from '@hello-pangea/dnd';
 
 const StyledHeaderContainer = styled.div`
   display: flex;
@@ -53,28 +55,46 @@ export const RecordTableHeader = () => {
   useResizeTableHeader();
 
   return (
-    <StyledHeaderContainer>
-      {!isRecordTableDragColumnHidden && <RecordTableHeaderDragDropColumn />}
-      {!isRecordTableCheckboxColumnHidden && (
-        <RecordTableHeaderCheckboxColumn />
-      )}
-      <RecordTableHeaderFirstCell />
-      <RecordTableHeaderFirstScrollableCell />
-      {recordFieldsWithoutLabelIdentifierAndFirstOne.map(
-        (recordField, index) => (
-          <RecordTableHeaderCell
-            key={recordField.fieldMetadataItemId}
-            recordField={recordField}
-            recordFieldIndex={index + 2}
-          />
-        ),
-      )}
-      {isRecordTableColumnHeadersReadOnly ? (
-        <RecordTableHeaderEmptyLastColumn />
-      ) : (
-        <RecordTableHeaderAddColumnButton />
-      )}
-      <RecordTableHeaderLastEmptyColumn />
-    </StyledHeaderContainer>
+    <RecordTableHeaderDragDropContext>
+      <Droppable
+        droppableId="droppable-header"
+        direction="horizontal"
+        ignoreContainerClipping
+      >
+        {(droppableProvided) => (
+          <StyledHeaderContainer
+            ref={droppableProvided.innerRef}
+            // oxlint-disable-next-line react/jsx-props-no-spreading
+            {...droppableProvided.droppableProps}
+          >
+            {!isRecordTableDragColumnHidden && (
+              <RecordTableHeaderDragDropColumn />
+            )}
+            {!isRecordTableCheckboxColumnHidden && (
+              <RecordTableHeaderCheckboxColumn />
+            )}
+            <RecordTableHeaderFirstCell />
+            <RecordTableHeaderFirstScrollableCell />
+            {recordFieldsWithoutLabelIdentifierAndFirstOne.map(
+              (recordField, index) => (
+                <RecordTableHeaderCell
+                  key={recordField.fieldMetadataItemId}
+                  recordField={recordField}
+                  draggableIndex={index + 1}
+                  recordFieldIndex={index + 2}
+                />
+              ),
+            )}
+            {isRecordTableColumnHeadersReadOnly ? (
+              <RecordTableHeaderEmptyLastColumn />
+            ) : (
+              <RecordTableHeaderAddColumnButton />
+            )}
+            <RecordTableHeaderLastEmptyColumn />
+            {droppableProvided.placeholder}
+          </StyledHeaderContainer>
+        )}
+      </Droppable>
+    </RecordTableHeaderDragDropContext>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCell.tsx

@@ -6,6 +6,7 @@ import { RecordTableColumnHead } from '@/object-record/record-table/record-table
 import { RecordTableColumnHeadWithDropdown } from '@/object-record/record-table/record-table-header/components/RecordTableColumnHeadWithDropdown';
 import { RecordTableHeaderCellContainer } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer';
 import { RecordTableHeaderResizeHandler } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler';
+import { isRecordTableHeaderDropProcessingComponentState } from '@/object-record/record-table/record-table-header/states/isRecordTableHeaderDropProcessingComponentState';
 import { isRecordTableColumnHeadersReadOnlyComponentState } from '@/object-record/record-table/states/isRecordTableColumnHeadersReadOnlyComponentState';
 import { isRecordTableColumnResizableComponentState } from '@/object-record/record-table/states/isRecordTableColumnResizableComponentState';
 import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
@@ -14,23 +15,36 @@ import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/rec
 import { isRecordTableScrolledVerticallyComponentState } from '@/object-record/record-table/states/isRecordTableScrolledVerticallyComponentState';
 import { resizedFieldMetadataIdComponentState } from '@/object-record/record-table/states/resizedFieldMetadataIdComponentState';
 import { getRecordTableColumnFieldWidthClassName } from '@/object-record/record-table/utils/getRecordTableColumnFieldWidthClassName';
+import { useDragSelect } from '@/ui/utilities/drag-select/hooks/useDragSelect';
 import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
 import { useAtomComponentSelectorValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentSelectorValue';
 import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
+import { Draggable } from '@hello-pangea/dnd';
 import { cx } from '@linaria/core';
+import { styled } from '@linaria/react';
+import { useCallback } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
+const StyledDragHandle = styled.div`
+  height: 100%;
+  width: 100%;
+`;
+
 type RecordTableHeaderCellProps = {
   recordField: RecordField;
+  draggableIndex: number;
   recordFieldIndex: number;
 };
 
 export const RecordTableHeaderCell = ({
   recordField,
+  draggableIndex,
   recordFieldIndex,
 }: RecordTableHeaderCellProps) => {
   const { objectMetadataItem } = useRecordTableContextOrThrow();
 
+  const { setDragSelectionStartEnabled } = useDragSelect();
+
   const isRecordTableColumnHeadersReadOnly = useAtomComponentStateValue(
     isRecordTableColumnHeadersReadOnlyComponentState,
   );
@@ -69,44 +83,78 @@ export const RecordTableHeaderCell = ({
     resizedFieldMetadataIdComponentState,
   );
 
+  const isRecordTableHeaderDropProcessing = useAtomComponentStateValue(
+    isRecordTableHeaderDropProcessingComponentState,
+  );
+
   const isResizingAnyColumn = isDefined(resizedFieldMetadataId);
 
   const shouldDisplayBorderBottom =
     hasRecordGroups ||
     !isFirstRowActiveOrFocused ||
     isRecordTableScrolledVertically;
 
+  const handlePointerDown = useCallback(() => {
+    setDragSelectionStartEnabled(false);
+  }, [setDragSelectionStartEnabled]);
+
+  const handlePointerUp = useCallback(() => {
+    setDragSelectionStartEnabled(true);
+  }, [setDragSelectionStartEnabled]);
+
   return (
-    <RecordTableHeaderCellContainer
-      className={cx(
-        'header-cell',
-        getRecordTableColumnFieldWidthClassName(recordFieldIndex),
-      )}
+    <Draggable
       key={recordField.fieldMetadataItemId}
-      shouldDisplayBorderBottom={shouldDisplayBorderBottom}
-      isResizing={isResizingAnyColumn}
-      isReadOnly={isRecordTableColumnHeadersReadOnly}
+      draggableId={recordField.fieldMetadataItemId}
+      index={draggableIndex}
+      isDragDisabled={
+        isRecordTableHeaderDropProcessing || isRecordTableColumnHeadersReadOnly
+      }
     >
-      {isRecordTableColumnResizable && (
-        <RecordTableHeaderResizeHandler
-          recordFieldIndex={recordFieldIndex}
-          position="left"
-        />
-      )}
-      {isRecordTableColumnHeadersReadOnly ? (
-        <RecordTableColumnHead recordField={recordField} />
-      ) : (
-        <RecordTableColumnHeadWithDropdown
-          recordField={recordField}
-          objectMetadataId={objectMetadataItem.id}
-        />
-      )}
-      {isRecordTableColumnResizable && (
-        <RecordTableHeaderResizeHandler
-          recordFieldIndex={recordFieldIndex}
-          position="right"
-        />
+      {(draggableProvided) => (
+        <RecordTableHeaderCellContainer
+          id={`record-table-head-${recordFieldIndex}`}
+          ref={draggableProvided.innerRef}
+          className={cx(
+            'header-cell',
+            getRecordTableColumnFieldWidthClassName(recordFieldIndex),
+          )}
+          key={recordField.fieldMetadataItemId}
+          shouldDisplayBorderBottom={shouldDisplayBorderBottom}
+          isResizing={isResizingAnyColumn}
+          isReadOnly={isRecordTableColumnHeadersReadOnly}
+          onPointerDown={handlePointerDown}
+          onPointerUp={handlePointerUp}
+          // oxlint-disable-next-line react/jsx-props-no-spreading
+          {...draggableProvided.draggableProps}
+        >
+          {isRecordTableColumnResizable && (
+            <RecordTableHeaderResizeHandler
+              recordFieldIndex={recordFieldIndex}
+              position="left"
+            />
+          )}
+          <StyledDragHandle
+            // oxlint-disable-next-line react/jsx-props-no-spreading
+            {...draggableProvided.dragHandleProps}
+          >
+            {isRecordTableColumnHeadersReadOnly ? (
+              <RecordTableColumnHead recordField={recordField} />
+            ) : (
+              <RecordTableColumnHeadWithDropdown
+                recordField={recordField}
+                objectMetadataId={objectMetadataItem.id}
+              />
+            )}
+          </StyledDragHandle>
+          {isRecordTableColumnResizable && (
+            <RecordTableHeaderResizeHandler
+              recordFieldIndex={recordFieldIndex}
+              position="right"
+            />
+          )}
+        </RecordTableHeaderCellContainer>
       )}
-    </RecordTableHeaderCellContainer>
+    </Draggable>
   );
 };

packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropContext.tsx

@@ -0,0 +1,50 @@
+import { useProcessTableColumnDrop } from '@/object-record/record-table/record-table-header/hooks/useProcessTableColumnDrop';
+import { useResetRecordTableHeaderDragStates } from '@/object-record/record-table/record-table-header/hooks/useResetRecordTableHeaderDragState';
+import { isRecordTableHeaderDropProcessingComponentState } from '@/object-record/record-table/record-table-header/states/isRecordTableHeaderDropProcessingComponentState';
+import { useAtomComponentStateCallbackState } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateCallbackState';
+import { DragDropContext, type OnDragEndResponder } from '@hello-pangea/dnd';
+import { useStore } from 'jotai';
+import { useCallback } from 'react';
+
+export const RecordTableHeaderDragDropContext = ({
+  children,
+}: React.PropsWithChildren) => {
+  const store = useStore();
+
+  const isRecordTableHeaderDropProcessingCallbackState =
+    useAtomComponentStateCallbackState(
+      isRecordTableHeaderDropProcessingComponentState,
+    );
+
+  const { processTableColumnDrop } = useProcessTableColumnDrop();
+
+  const { resetRecordTableHeaderDragStates } =
+    useResetRecordTableHeaderDragStates();
+
+  const handleDragStart = useCallback(() => {
+    store.set(isRecordTableHeaderDropProcessingCallbackState, true);
+  }, [store, isRecordTableHeaderDropProcessingCallbackState]);
+
+  const handleDragEnd: OnDragEndResponder = useCallback(
+    (result) => {
+      if (!result.destination) {
+        resetRecordTableHeaderDragStates();
+        return;
+      }
+
+      try {
+        processTableColumnDrop(result);
+      } catch (error) {
+        resetRecordTableHeaderDragStates();
+        throw error;
+      }
+    },
+    [processTableColumnDrop, resetRecordTableHeaderDragStates],
+  );
+
+  return (
+    <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+      {children}
+    </DragDropContext>
+  );
+};