3a8f086d15
Follow-ups recorded in #23023, done in one pass. ## Shared primitives - Folded `PageLayoutWidgetSortableItem` and `PageLayoutWidgetDropLine` into the shared `DragDropItemSortableCell` / new `DragDropItemDropLine` (new `data`, `dropLine`, `highlightWhileDragging`, `hasTransition` props). - Added generic `DragDropProviderDragStartEvent` (and DragMove/DragOver/DragEnd/DropTarget) helpers and deleted the 7 copied `Parameters<...>` extractions across the dnd hooks. - Replaced the `useMovePageLayoutWidgetUp/Down` implementations (~140 lines) with `moveWidgetWithinTabInDraft`. - Migrated the remaining page-layout test suites onto `pageLayoutDraftFixtures`. ## Tab reordering off Pangea - Tabs are sortable cells on the same provider as widget drags, segregated by dnd type, so widget drops on tab buttons keep working while tabs reorder. - Reordering is ID based (`reorderTabInDraft`: insert before the hovered tab), which keeps the pinned first tab in place without index arithmetic. - Preserved overflow behaviors: the dropdown stays open while a tab drag is in flight, dropping a tab on the "+N More" button appends it and opens the dropdown, and both the visible strip and the overflow list have end drop zones. ## Fields configuration editors off Pangea - Group reorder, field reorder and cross-group field moves now run on the shared cells (same drop line and end-zone patterns). ## DraggableList off Pangea - `DraggableList` / `DraggableItem` keep their consumer-facing API — the ~9 consumers now type their handlers with a local `DraggableListDropResult` instead of pangea's `DropResult` — but run on the shared sortable cells; each list's uuid group doubles as its dnd type so nested lists stay isolated from page-level providers. - Items register their index in a list-scoped registry so the end drop zone can resolve the append index at drop time (with insert-before semantics an item could otherwise never reach the last position). - Deleted three dead files that only existed for pangea plumbing (the side panel navigation placeholder, `getCssCompatibleDraggableProps`, the orphaned `recordGroupPendingDragEndReorderState`). ## Record table row drag off Pangea - Rows register through `useSortable` directly on the row element — no wrapper div, so row CSS, sticky cells and virtualization stay untouched — with the grip cell wired as the drag handle via the shared sortable handle ref context. - Both table modes (virtualized flat list and record groups) share a `DragOverlay` clone that replaces pangea's virtual-mode `renderClone`, and end drop zones per record group (and after the virtualized list) allow dropping after the last row or into an empty group. - The drop handlers keep their pangea-shaped result object, retyped as a local `RecordDragDropResult`, so the position computation logic is untouched. ## Pangea removed `@hello-pangea/dnd` is gone from `package.json` and the lockfile, along with its orphaned transitive entries (`css-box-model`, `raf-schd`, `react-redux`, `redux`). Nothing in the repo imports it anymore. ## Dashboards: cross-tab widget drag for grids react-grid-layout drags never enter dnd-kit, so the bridge hit-tests the pointer against the tab buttons' `data-page-layout-tab-drop-target-id` rects during grid drags, highlights the hovered tab through state, and on drop moves the widget to the destination grid below its existing content (`moveWidgetToGridTabInDraft`, `buildTabWidgetLayouts`). The grid's own post-drag layout commit is suppressed once so it does not overwrite the cross-tab move. ## Fixes found while testing - With `feedback: 'clone'`, the drag source is its own initial drop target and its placeholder is a DOM clone taken at drag start, so the drop line rendered into the source got baked into the placeholder and stuck there for the whole drag. The line is now hidden on the source cell, leaving a single indicator at the actual target. - Reorderable tabs collapsed to text height and sat top-aligned next to "+ New Tab" because the sortable cell wrapper defaults to `display: block; height: auto`, breaking the tab height chain — the tab list now uses the cell's `fill` mode so tabs stretch to the strip height again. ## Testing Playwright against the dev app: - Record page: widget reorder up and down in the pinned column (single blue drop line at the target), drag to another tab via its tab button (highlight + move), drag back into content at a specific position, chained cross-tab moves, tab reorder with vertical drop line, new tab creation. - Overflow (narrow viewport): drop a tab on "+N More" (appends last, dropdown opens), reorder inside the dropdown (stays open), drag a tab from the dropdown back to the visible strip. - Dashboard: grid drag within a tab, cross-tab drag onto a tab button (hover highlight, widget lands below destination content, remaining widgets keep their positions), save and reload persistence in both directions. - Fields editor: field reorder, group reorder, field move across groups, plus the Move Up / Move Down widget actions. Since the pangea-removal commits: - Typecheck, oxlint and oxfmt green over the full front source; unit suites green including the migrated `useStartRecordDrag` test (jest needed a scoped transform exemption for `@preact/signals-core` once dnd-kit reached the side-panel suites). - Storybook visual regression unchanged across ~700 stories — expected, since the migrated surfaces render identical DOM at rest (drop lines and drag overlays only exist mid-drag). - The tab strip fix reverses the exact regression mechanism: the sortable cell wrapper defaulted to `display: block; height: auto`, collapsing the tab height chain next to the full-height "+ New Tab" button; `fill` restores the stretch. --- _Generated by [Claude Code](https://claude.ai/code/session_01XKRCzzu8oGyocXZtFp7VEG)_ <a href="https://cubic.dev/pr/twentyhq/twenty/pull/23211?utm_source=github" rel="nofollow noreferrer noopener" target="_blank">``<img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg">``</a>
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
// allows you to do things like:
|
|
// expect(element).toHaveTextContent(/react/i)
|
|
// learn more: https://github.com/testing-library/jest-dom
|
|
import '@testing-library/jest-dom';
|
|
import {
|
|
ReadableStream as NodeReadableStream,
|
|
TransformStream as NodeTransformStream,
|
|
WritableStream as NodeWritableStream,
|
|
} from 'node:stream/web';
|
|
|
|
import { i18n } from '@lingui/core';
|
|
import { SOURCE_LOCALE } from 'twenty-shared/translations';
|
|
import { messages as enMessages } from '~/locales/generated/en';
|
|
|
|
// Initialize i18n for all tests
|
|
i18n.load({ [SOURCE_LOCALE]: enMessages });
|
|
i18n.activate(SOURCE_LOCALE);
|
|
|
|
const globalWithWebStreams = globalThis as Record<string, unknown>;
|
|
|
|
if (globalWithWebStreams.TransformStream === undefined) {
|
|
globalWithWebStreams.TransformStream = NodeTransformStream;
|
|
}
|
|
|
|
if (globalWithWebStreams.ReadableStream === undefined) {
|
|
globalWithWebStreams.ReadableStream = NodeReadableStream;
|
|
}
|
|
|
|
if (globalWithWebStreams.WritableStream === undefined) {
|
|
globalWithWebStreams.WritableStream = NodeWritableStream;
|
|
}
|
|
|
|
if (typeof window !== 'undefined') {
|
|
Object.defineProperty(window, 'scrollTo', {
|
|
value: () => {},
|
|
writable: true,
|
|
});
|
|
}
|
|
|
|
// jsdom does not implement ResizeObserver; @dnd-kit/dom expects it at import
|
|
// time.
|
|
class ResizeObserverMock {
|
|
observe() {}
|
|
unobserve() {}
|
|
disconnect() {}
|
|
}
|
|
|
|
if (globalThis.ResizeObserver === undefined) {
|
|
globalThis.ResizeObserver =
|
|
ResizeObserverMock as unknown as typeof ResizeObserver;
|
|
}
|
|
|
|
// Add Jest matchers for toThrowError and other missing methods
|
|
declare global {
|
|
namespace jest {
|
|
interface Matchers<R> {
|
|
toThrowError(error?: string | RegExp | Error): R;
|
|
toMatchSnapshot(propertyMatchers?: any): R;
|
|
}
|
|
}
|
|
|
|
namespace Vi {
|
|
interface Assertion {
|
|
toMatchSnapshot(propertyMatchers?: any): void;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* The structuredClone global function is not available in jsdom, it needs to be mocked for now.
|
|
*
|
|
* The most naive way to mock structuredClone is to use JSON.stringify and JSON.parse. This works
|
|
* for arguments with simple types like primitives, arrays and objects, but doesn't work with functions,
|
|
* Map, Set, etc.
|
|
*/
|
|
global.structuredClone = (val) => {
|
|
return JSON.parse(JSON.stringify(val));
|
|
};
|