Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

React 18 Upgrade #7142

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from
Open

React 18 Upgrade #7142

wants to merge 15 commits into from

Conversation

ggdouglas
Copy link
Contributor

@ggdouglas ggdouglas commented Jan 9, 2025 •
edited
Loading

This feature branch PR serves as the central hub for upgrading Blueprint's documentation and internal dependencies to React 18. The initial changes in this PR involve updating dependencies relevant to the React 18 upgrade. Subsequent changes will be made in separate PRs that will be be merged into develop and rebased into this feature branch.

Tracking progress in the list below:

Fixes type, lint, and compile breaks:
Fixes/skips test breaks
Related issues:

@palantir palantir deleted a comment from changelog-app bot Jan 9, 2025
@ggdouglas ggdouglas mentioned this pull request Jan 9, 2025
Merged
@svc-palantir-github
Copy link

Remove deprecated ReactDOM methods from demo-app

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Replace deprecated ReactDOM methods for docs-app

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Replace deprecated ReactDOM methods for docs-app

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Replace ResizeHandle with React.JSX.Element in resizableTest

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

This was referenced Jan 10, 2025
Merged
Merged
Open
Merged
@ggdouglas ggdouglas added Status: work in progress dependencies Pull requests that update a dependency file labels Jan 10, 2025
@ggdouglas ggdouglas self-assigned this Jan 10, 2025
@ggdouglas ggdouglas mentioned this pull request Jan 10, 2025
Merged
@svc-palantir-github
Copy link

Replace ResizeHandle with React.JSX.Element in resizableTest

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Disable ReactDOM API lint deprecations in contextMenuSingleton

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

(temp) Skip failing tests to check for stability/test flake

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

(temp) Skip more tests that are now failing in CI

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Ignore deprecated ReactDOM methods in OverlayToaster

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Skip additional test flake

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@svc-palantir-github
Copy link

Skip flaky tests

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

This was referenced Jan 14, 2025
Merged
Merged
Merged
Merged
Open
Open
@ggdouglas ggdouglas mentioned this pull request Jan 14, 2025
Open
@ggdouglas ggdouglas mentioned this pull request Jan 14, 2025
Open
@svc-palantir-github
Copy link

Skip failing tests resulting from React 18 upgrade

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

ggdouglas
ggdouglas commented Jan 14, 2025
View reviewed changes
packages/core/test/controls/numericInputTests.tsx
@@ -1098,7 +1097,7 @@ describe("<NumericInput>", () => {
incrementButton.simulate("mousedown", { shiftKey: true });
expect(component.find("input").prop("value")).to.equal("1.101");

TestUtils.act(() => {
Copy link
Contributor Author

@ggdouglas ggdouglas Jan 14, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Fixes a deprecation in React 18. Act is now exported from React as of v18.3.1.

Screenshot 2025-01-14 at 17 12 11@2x

https://react.dev/warnings/react-dom-test-utils#reactdomtestutilsact-warning

act from react-dom/test-utils has been deprecated in favor of act from react.

ggdouglas
ggdouglas commented Jan 14, 2025
View reviewed changes
packages/core/src/components/icon/icon.tsx
@@ -101,7 +101,7 @@ export interface DefaultIconProps extends IntentProps, Props, DefaultSVGIconProp
* @see https://stackoverflow.com/a/73795494/7406866
*/
export interface IconComponent extends React.FC<IconProps<Element>> {
<T extends Element = Element>(props: IconProps<T>): React.ReactElement | null;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Attempted to cherry-pick this type change into develop, but unfortunately encountered errors. This type fix is valid in React 18, but fails with React 16 types.

See type failures on branch based off of develop: https://github.com/palantir/blueprint/compare/gdouglas/test-Icon-compile-break

ggdouglas
ggdouglas commented Jan 14, 2025
View reviewed changes
packages/icons/src/svgIconContainer.tsx
@@ -42,7 +42,7 @@ export type SVGIconContainerProps<T extends Element> = Omit<SVGIconProps<T>, "ch
* @see https://stackoverflow.com/a/73795494/7406866
*/
export interface SVGIconContainerComponent extends React.FC<SVGIconContainerProps<Element>> {
<T extends Element = Element>(props: SVGIconContainerProps<T>): React.ReactElement | null;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Similar to type compile issue with Icon, this fix compiles in React 18, but not 16.

See: https://github.com/palantir/blueprint/compare/gdouglas/test-SVGIconContainer-compile-break

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@ggdouglas ggdouglas

Labels
dependencies Pull requests that update a dependency file Status: work in progress
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ggdouglas @svc-palantir-github