Fix last row disappearing when dragging a row in the table (#12297)

# Fix last row disappearing when dragging a row in the table

Fixes twentyhq/core-team-issues#836

The issue came from the fact that the provided placeholder was not
mounted at the right place (after the footer when it should be mounted
before it).

I created a context to which we can pass the placeholder. We can use
this placeholder anywhere inside the table by using
`RecordTableBodyDroppablePlaceholder`.

## Before


https://github.com/user-attachments/assets/39a2e45b-6d97-4450-bfee-12135a873a1d


## After


https://github.com/user-attachments/assets/ca126819-67f2-4358-b644-85172fef3b8f

Author: bosiraphael

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

@@ -1,4 +1,5 @@
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
+import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
 import { RecordTableBodyFetchMoreLoader } from '@/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader';
 import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
@@ -27,6 +28,7 @@ export const RecordTableNoRecordGroupRows = () => {
         );
       })}
       <RecordTableBodyFetchMoreLoader />
+      <RecordTableBodyDroppablePlaceholder />
       {!isRecordTableInitialLoading && allRecordIds.length > 0 && (
         <RecordTableAggregateFooter />
       )}

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

@@ -1,6 +1,7 @@
 import { useCurrentRecordGroupId } from '@/object-record/record-group/hooks/useCurrentRecordGroupId';
 import { recordIndexRecordIdsByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexRecordIdsByGroupComponentFamilyState';
 import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
+import { RecordTableBodyDroppablePlaceholder } from '@/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder';
 import { RecordTableAggregateFooter } from '@/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter';
 import { RecordTableRow } from '@/object-record/record-table/record-table-row/components/RecordTableRow';
 import { RecordTableRecordGroupSectionAddNew } from '@/object-record/record-table/record-table-section/components/RecordTableRecordGroupSectionAddNew';
@@ -57,6 +58,7 @@ export const RecordTableRecordGroupRows = () => {
       })}
       <RecordTableRecordGroupSectionLoadMore />
       <RecordTableRecordGroupSectionAddNew />
+      <RecordTableBodyDroppablePlaceholder />
       <RecordTableAggregateFooter
         key={currentRecordGroupId}
         currentRecordGroupId={currentRecordGroupId}

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppable.tsx

@@ -1,4 +1,5 @@
 import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
+import { RecordTableBodyDroppableContextProvider } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext';
 import { recordTableHoverPositionComponentState } from '@/object-record/record-table/states/recordTableHoverPositionComponentState';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
 import { Droppable } from '@hello-pangea/dnd';
@@ -36,8 +37,11 @@ export const RecordTableBodyDroppable = ({
           {...provided.droppableProps}
           onMouseLeave={() => setRecordTableHoverPosition(null)}
         >
-          {children}
-          {provided.placeholder}
+          <RecordTableBodyDroppableContextProvider
+            value={{ droppablePlaceholder: provided.placeholder }}
+          >
+            {children}
+          </RecordTableBodyDroppableContextProvider>
         </RecordTableBody>
       )}
     </Droppable>

packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyDroppablePlaceholder.tsx

@@ -0,0 +1,7 @@
+import { useRecordTableBodyDroppableContextOrThrow } from '@/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext';
+
+export const RecordTableBodyDroppablePlaceholder = () => {
+  const { droppablePlaceholder } = useRecordTableBodyDroppableContextOrThrow();
+
+  return droppablePlaceholder;
+};

packages/twenty-front/src/modules/object-record/record-table/record-table-body/contexts/RecordTableBodyDroppableContext.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { createRequiredContext } from '~/utils/createRequiredContext';
+
+export type RecordTableBodyDroppableContextValue = {
+  droppablePlaceholder: ReactNode;
+};
+
+export const [
+  RecordTableBodyDroppableContextProvider,
+  useRecordTableBodyDroppableContextOrThrow,
+] = createRequiredContext<RecordTableBodyDroppableContextValue>(
+  'RecordTableBodyDroppableContext',
+);