Skip to content
Snippets Groups Projects
user avatar
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. :stuck_out_tongue_winking_eye::exploding_head::anger::rage::disappointed_relieved:

* prettier
63725479
History
Code owners
Assign users and groups as approvers for specific file changes. Learn more.