pulp / pulp/pulp-ui

feat: Update PulpUI to React 19

Open
#338 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
29
Forks
22
Avg merge
2d 6h
Merged PRs (30d)
19

Description

Summary

React 19 released on 25 April 2024, bringing a fleet of new features to the framework, whilst also deprecated a variety of functions. As PulpUI has already been upgraded to React@18.3.1, this allows the deprecated functions to be make visible for refactor. With the JavaScript eco-system rapidly changing and the introduction of PatternFly 6, migrating to the latest React version will provide a range of performance & security benefits, avoiding future issues when support drops for React 18.

Tasks

  1. Understand current dependency requirements for React and peer dependencies.
  2. Update Package Files: Bump react, react-dom, @types/react and @types/react-dom to 19.2.8
  3. Deploy react/19/migration-recipe codemod to convert deprecated functions to new standards.
  4. Deploy types-react-codemod to convert deprecated types to new standards.
  5. Run Cypress tests & run UI build steps
  6. Document minor issues found for future attention within Github Issues.

Packages to be updated

  1. react-markdown

Packages of concern

  1. file-saver
  2. compare-versions

Found Blockers (To be updated throughout work)

  1. @patternfly packages require upgrade to 6.6.0 to support React 19.

References

  1. https://react.dev/blog/2024/04/25/react-19-upgrade-guide
  2. https://github.com/pulp/pulp-ui/pull/178
  3. https://www.npmjs.com/package/react
  4. https://www.npmjs.com/package/react-dom
  5. https://www.npmjs.com/package/@types/react
  6. https://www.npmjs.com/package/@types/react-dom

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the current React and peer-dependency requirements in the package files, then read the React 19 upgrade guide and inspect the referenced migration codemods. Check the PatternFly 6.6.0 blocker and the packages of concern before running the codemods. Done means dependencies and types are updated, Cypress and UI build steps pass, and minor issues are documented in GitHub Issues.

Written by the indexing model from the issue text.

Assessment

Tech stack
cypress, react, typescript
Domain
build-system, frontend, testing-qa
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.