Skip to content

Conversation

@tkajtoch
Copy link
Member

@tkajtoch tkajtoch commented Jun 22, 2023

Summary

react-beautiful-dnd is in maintenance mode and doesn't support React 18 or StrictMode. This PR fixes #6187 and switches to using a forked and maintained version of RBD - @hello-pangea/dnd. Both packages share the same API and are cross-compatible as long as EUI consumers aren't importing DND elements from both EUI and react-beautiful-dnd.

QA

  1. Pull the changes, run yarn and yarn start
  2. Open http://localhost:8030/
  3. Open drag and drop examples
  4. Ensure they're working the same as on main

This code doesn't pass type checking because of differences in types between @types/react@17 and @types/react@18. This will be fixed when #6827 is merged to feature/react-18 and/or in following PRs.

General checklist

  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Added documentation
  • Checked Code Sandbox works for any docs examples
  • Added or updated jest and cypress tests
  • Checked for breaking changes and labeled appropriately
  • Checked for accessibility including keyboard-only and screenreader modes

@tkajtoch tkajtoch self-assigned this Jun 22, 2023
@tkajtoch tkajtoch requested a review from a team June 22, 2023 14:13
@tkajtoch
Copy link
Member Author

jenkins test it please

);

expect(takeSnapshot(appDiv)).toMatchSnapshot();
expect(screen.getByTestSubject('draggable')).toBeVisible();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Really love how much the new fork cleaned up our tests!

I think I'd like to leave in just one it renders snapshot here to get a sense of the DOM output. What do you think?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah that makes sense. I added it :)

Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leaving my above comment as optional - if you're good with one it renders snapshot, feel free to make the change and merge it in. If not, merge away :)

@tkajtoch tkajtoch merged commit 774798f into elastic:feature/react-18 Jun 23, 2023
tkajtoch added a commit that referenced this pull request Jul 11, 2023
…-pangea/dnd (#6868)

* feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

* test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
tkajtoch added a commit that referenced this pull request Jul 24, 2023
…-pangea/dnd (#6868)

* feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

* test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
tkajtoch added a commit that referenced this pull request Jul 26, 2023
…-pangea/dnd (#6868)

* feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

* test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
tkajtoch added a commit that referenced this pull request Jul 28, 2023
…-pangea/dnd (#6868)

* feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

* test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
tkajtoch added a commit that referenced this pull request Jul 31, 2023
…-pangea/dnd (#6868)

* feat(DragAndDrop): Switch from react-beautiful-dnd to its fork @hello-pangea/dnd

* test(EuiDraggable): add snapshot test for the basic render assertion and rename test cases
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants