Félix Malfait
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>
100 lines
2.9 KiB
JavaScript
100 lines
2.9 KiB
JavaScript
import { readFileSync } from 'fs';
|
|
import { dirname, resolve } from 'path';
|
|
import { pathsToModuleNameMapper } from 'ts-jest';
|
|
import { fileURLToPath } from 'url';
|
|
|
|
const __filename = fileURLToPath(import.meta.url);
|
|
const __dirname = dirname(__filename);
|
|
|
|
const tsConfigPath = resolve(__dirname, './tsconfig.json');
|
|
const tsConfig = JSON.parse(readFileSync(tsConfigPath, 'utf8'));
|
|
|
|
const isCI = process.env.CI === 'true';
|
|
|
|
// oxlint-disable-next-line no-undef
|
|
process.env.TZ = 'GMT';
|
|
// oxlint-disable-next-line no-undef
|
|
process.env.LC_ALL = 'en_US.UTF-8';
|
|
const jestConfig = {
|
|
// For more information please have a look to official docs https://jestjs.io/docs/configuration/#prettierpath-string
|
|
// Prettier v3 will should be supported in jest v30 https://github.com/jestjs/jest/releases/tag/v30.0.0-alpha.1
|
|
prettierPath: null,
|
|
...(isCI && { reporters: ['./jest-failures-only-reporter.cjs'] }),
|
|
displayName: 'twenty-front',
|
|
preset: '../../jest.preset.js',
|
|
setupFilesAfterEnv: ['./setupTests.ts'],
|
|
testEnvironment: 'jsdom',
|
|
testEnvironmentOptions: {},
|
|
|
|
transformIgnorePatterns: [
|
|
'/node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj|@preact/signals-core)/.*)',
|
|
'../../node_modules/(?!(twenty-ui|apollo-upload-client|extract-files|is-plain-obj|@preact/signals-core)/.*)',
|
|
'../../twenty-ui/',
|
|
],
|
|
transform: {
|
|
'^.+\\.(ts|js|tsx|jsx|mjs)$': [
|
|
'@swc/jest',
|
|
{
|
|
jsc: {
|
|
parser: {
|
|
syntax: 'typescript',
|
|
tsx: true,
|
|
},
|
|
transform: {
|
|
react: {
|
|
runtime: 'automatic',
|
|
},
|
|
},
|
|
experimental: {
|
|
plugins: [['@lingui/swc-plugin', {}]],
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
moduleNameMapper: {
|
|
'\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$':
|
|
'<rootDir>/__mocks__/imageMockFront.js',
|
|
'\\.css$': '<rootDir>/__mocks__/styleMock.js',
|
|
'\\?worker$': '<rootDir>/__mocks__/workerMock.js',
|
|
...pathsToModuleNameMapper(tsConfig.compilerOptions.paths, {
|
|
prefix: '<rootDir>/',
|
|
}),
|
|
},
|
|
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
|
|
extensionsToTreatAsEsm: ['.ts', '.tsx'],
|
|
coverageThreshold: {
|
|
global: {
|
|
statements: 47.3,
|
|
lines: 45.9,
|
|
functions: 39.5,
|
|
},
|
|
},
|
|
collectCoverageFrom: ['<rootDir>/src/**/*.ts'],
|
|
coveragePathIgnorePatterns: [
|
|
'states/.+State.ts$',
|
|
'states/selectors/*',
|
|
'contexts/.+Context.ts',
|
|
'testing/*',
|
|
'tests/*',
|
|
'config/*',
|
|
'graphql/queries/*',
|
|
'graphql/mutations/*',
|
|
'graphql/subscriptions/*',
|
|
'graphql/fragments/*',
|
|
'types/*',
|
|
'constants/*',
|
|
'generated-metadata/*',
|
|
'generated/*',
|
|
'__stories__/*',
|
|
'display/icon/index.ts',
|
|
],
|
|
coverageDirectory: './coverage',
|
|
maxWorkers: 3,
|
|
workerIdleMemoryLimit: '512MB',
|
|
errorOnDeprecated: true,
|
|
testTimeout: 30000,
|
|
};
|
|
|
|
export default jestConfig;
|