Mark Bastian
authored
* Enabling dragging of long-named TabButtons The primary change needed to support rearranging of tabs with super long names is the to shorten the names only when dragging. This was achieved by exposing the `isDragging` prop of the `useSortable` hook in the `RenameableTabButtonStyled` component. The label of this component is dynamically shortened if it is very long on a drag operation by the following logic and function: ``` // Update the label prop when dragging label={isDragging ? dragLabel(label) : label} ``` The `dragLabel` function is as follows: ``` const dragLabel = (s: string) => { if (s.length < 20) { return s; } else { return `${s.slice(0, 17)}...`; } }; ``` The other change needed to support e2e testing for this operation was the addition of the `MouseSensor` hook to the DnDContext. See [this issue comment](https://github.com/clauderic/dnd-kit/issues/208#issuecomment-824469766) for explanation. Once that change was in place it was possible to do a drag and drop rearrange test in the "should allow me to rearrange long tabs (#34970)" spec. This test: - Creates a dashboard with 3 tabs - Ensures their order - Gives the last tab a super long name that would not be rearrangeable before fix - Drags that tab to the first position - Saves the dashboard - Asserts the new tab order is saved Fixes #34970 * Fixing type from T to unknown to satisfy the type of the render function in TabButton.unit.spec.ts * Fixing type from T to any to satisfy the type of the render function in TabButton.unit.spec.ts * Fixing divergent tests The tests to ensure DnD works required the addition of the `mouseSensor` in TabRow.tsx. This, in turn, broke the tests in DashboardTabs.unit.spec.tsx. Adding in the `activationConstraint: { distance: 10 }` prop to the mouseSensor fixed the DashboardTabs.unit.spec.tsx tests, but broke the DnD tests. Based on the docs [here](https://docs.dndkit.com/api-documentation/sensors/mouse) it looks like you need to move a "distance, in pixels, by which the mouse needs to be moved before a drag start event is emitted." So, the DnD test in tabs.cy.spec.js added an addtional mousemove trigger of 11 pixels to activate the mouseSensor. Yeah, it totally makes sense.* prettier
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
Name | Last commit | Last update |
---|---|---|
.. | ||
runner | ||
snapshot-creators | ||
support | ||
test | ||
.eslintrc | ||
tsconfig.json | ||
validate-e2e-test-files.js |