feat: Upgrade to React 18 #2527

mattrunyon · 2025-09-02T21:15:21Z

Other than upgrading to React 18, also did the following

Removed prop-types almost everywhere. There is 1 exported prop-types we consume in DHE, so not removing fully yet
Removed defaultProps on functional components. This is deprecated in 18 and removed completely in 19. We already had defaults with ES6 default params and having the component.defaultProps prints errors to the dev console that are annoying
Removed react-test-renderer. This is deprecated in 18 and removed in 19. Mainly had to update Grid and IrisGrid tests, but it was relatively minimal changes, the tests are faster, and better because they test simulated clicks instead of emitting the change events directly
Cleaned up all Jest warnings about act or other issues like throwing without suppressing error logs that are expected. The only output now should be about deprecated defaultProps on a react-beautiful-dnd component and findDOMNode being deprecated for transitions
Removed StyleGuide.test.tsx. We have e2e tests that are better and this unit test was causing issues with act because it has a bunch of lazy loaded components Jest can't resolve without changing the import map
Fixed some types in IrisGrid around props and state that were incorrect
Modified some e2e tests to be a bit more robust with the state batching

@testing-library/react includes new dependencies/internal changes that make use of import attributes. this forces either updating babel or using additional plugins

packages/components/src/spectrum/TabPanels.tsx

mattrunyon · 2025-09-02T22:44:31Z

packages/components/src/XComponent.tsx

+  Component: React.ComponentType<React.PropsWithoutRef<P>>
 ): XComponentType<P> {
  let forwardedRefComponent: XComponentType<P>;
  function XComponent(
-    props: P,
+    props: React.PropsWithoutRef<P>,
    ref: React.ForwardedRef<ComponentType<P>>
  ): JSX.Element {
-    const ReplacementComponent = useXComponent(forwardedRefComponent);
+    const ReplacementComponent = useXComponent<P>(forwardedRefComponent);


I should test these types don't break DHE usages of XComponent

codecov · 2025-09-03T20:01:01Z

Codecov Report

❌ Patch coverage is 24.76636% with 161 lines in your changes missing coverage. Please review.
✅ Project coverage is 43.90%. Comparing base (f7fe8ad) to head (2bd6343).

Files with missing lines	Patch %	Lines
...kages/dashboard-core-plugins/src/ConsolePlugin.tsx	6.06%	31 Missing ⚠️
...sidebar/conditional-formatting/ConditionEditor.tsx	0.00%	15 Missing ⚠️
...ris-grid/src/sidebar/aggregations/Aggregations.tsx	28.57%	10 Missing ⚠️
packages/components/src/popper/Popper.tsx	0.00%	8 Missing ⚠️
...ebar/conditional-formatting/ColumnFormatEditor.tsx	0.00%	6 Missing ⚠️
...sidebar/conditional-formatting/RowFormatEditor.tsx	0.00%	6 Missing ⚠️
packages/components/src/CardFlip.tsx	0.00%	5 Missing ⚠️
packages/iris-grid/src/IrisGrid.tsx	0.00%	5 Missing ⚠️
...src/sidebar/conditional-formatting/StyleEditor.tsx	0.00%	5 Missing ⚠️
packages/code-studio/src/index.tsx	0.00%	4 Missing ⚠️
... and 33 more

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2527      +/-   ##
==========================================
- Coverage   44.95%   43.90%   -1.05%     
==========================================
  Files         765      763       -2     
  Lines       42917    42867      -50     
  Branches    10796    10816      +20     
==========================================
- Hits        19293    18821     -472     
- Misses      23611    24031     +420     
- Partials       13       15       +2

Flag	Coverage Δ
unit	`43.90% <24.76%> (-1.05%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

packages/components/src/popper/Tooltip.tsx

packages/components/src/spectrum/utils/itemUtils.ts

packages/components/src/spectrum/utils/useOnChangeTrackUncontrolled.test.ts

packages/components/src/Checkbox.tsx

mofojed · 2025-09-05T18:19:31Z

packages/components/src/UISwitch.tsx

  'data-testid': dataTestId,
 }: UISwitchProps): JSX.Element {
  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label


Is this actually needed?

The ignore is. The label is not (or I don't think we have a good label here for accessibility on the switch button). I have no idea why this rule is getting applied when it wasn't before. I'm guessing some minor bump when the package-lock had to be regenerated

Okay. I'd say just mark this UISwitch as deprecated, we should just use the Switch component from Spectrum instead anyway.

mofojed · 2025-09-05T18:19:44Z

packages/components/src/XComponent.tsx

+  Component: React.ComponentType<React.PropsWithoutRef<P>>
 ): XComponentType<P> {
  let forwardedRefComponent: XComponentType<P>;
  function XComponent(
-    props: P,
+    props: React.PropsWithoutRef<P>,
    ref: React.ForwardedRef<ComponentType<P>>
  ): JSX.Element {
-    const ReplacementComponent = useXComponent(forwardedRefComponent);
+    const ReplacementComponent = useXComponent<P>(forwardedRefComponent);


mofojed · 2025-09-05T19:24:10Z

packages/dashboard-core-plugins/src/ConsolePlugin.tsx

      log.debug('closeFilePanel', fileMetadata);
      const { id: fileId } = fileMetadata;
+      if (fileId == null) {
+        log.debug('File ID is null, ignore close event');


Probably want to make this a warn.

Suggested change

log.debug('File ID is null, ignore close event');

log.warn('File ID is null, ignore close event');

Ya we can. Although debug matches the same error in a few other spots like just below this if the file is not open it just debug prints it's ignoring the close

Actually why are we even bothering? Change FileMetadata to require id to be a string - it is never null anywhere that I can see... or just throw an assertNotNull(fileId) here instead of quietly failing.

It is null when creating a new notebook or sending text from the history to a new notebook. It looks like we set it to the file name in NotebookPanel#handleSaveSuccess

I don't want to make a change in this PR as it would be a behavior change

packages/iris-grid/src/IrisGrid.tsx

This reverts commit e4525ba.

This reverts commit 86ebd72.

This reverts commit 15e9420.

This reverts commit fd64d75.

mofojed

Just a question about the commented out code in table-operations.spec.ts.

packages/dashboard/src/PanelManager.ts

packages/grid/src/Grid.tsx

tests/table-operations.spec.ts

gzh2003 and others added 11 commits August 22, 2025 13:14

WIP update packages

8eb5648

WIP update hooks

3cceb9f

WIP update jsapi

fe88a3d

WIP update dashboard types

89102f4

WIP update components types

faaecf8

WIP update more types

40c1f9b

WIP update babel

37ff915

@testing-library/react includes new dependencies/internal changes that make use of import attributes. this forces either updating babel or using additional plugins

Remove all function component defaultProps and mostly purge prop-types

bef8b20

All unit tests passing

bb13b80

Remove react-test-renderer and fix lint errors

efe7f77

Fix all act warnings

99ae987

mattrunyon requested a review from mofojed September 2, 2025 21:15

mattrunyon self-assigned this Sep 2, 2025

mattrunyon added 3 commits September 2, 2025 17:13

Remove types from individual package instead of root

7c9446e

Merge remote-tracking branch 'upstream/main' into DH-19098

7834699

Remove unneeded dev deps

9be49a5

mattrunyon commented Sep 3, 2025

View reviewed changes

mattrunyon added 3 commits September 3, 2025 14:00

Updates from self review

7f46b90

Untangle panel props a bit

4cfe09e

Fix lint errors

7d42448

mattrunyon added 2 commits September 4, 2025 01:44

Pin sass to prevent new warning spam

8b02262

Fix some e2e issues

040f553

mofojed requested changes Sep 5, 2025

View reviewed changes

mattrunyon added 6 commits September 9, 2025 12:54

Fix tooltip e2e and address some comments

cff468e

Fix some tests

9d6e029

WIP logging to figure out custom column race condition

e4525ba

Revert "WIP logging to figure out custom column race condition"

1b964a6

This reverts commit e4525ba.

Merge remote-tracking branch 'upstream/main' into DH-19098

5cf11eb

Regenerate snapshots after correcting typo in name

86ebd72

mattrunyon added 3 commits September 15, 2025 23:05

Revert "Regenerate snapshots after correcting typo in name"

3d07287

This reverts commit 86ebd72.

Rename snapshots after fixing typo

3a08e21

Fix remaining e2e tests

4e0d1bb

mattrunyon requested a review from mofojed September 16, 2025 22:18

mattrunyon added 16 commits September 16, 2025 17:44

Maybe fix e2e flakiness for webkit?

15e9420

Revert "Maybe fix e2e flakiness for webkit?"

fe8a9d5

This reverts commit 15e9420.

Remove most flushSync uses?

fd64d75

Revert "Remove most flushSync uses?"

85159b3

This reverts commit fd64d75.

Fix flaky context menu test

83c6968

Learning how to spell

9cdfe38

Maybe 1 at a time will not be flaky

446be3c

1 at a time made other tests flaky

f18ae2c

One more time because I don't believe it

d2b3f4e

Yet another attempt at fixing e2e which passes locally

81697b7

See if we can at least pass twice in a row with only a few flaky

56fcd83

Merge remote-tracking branch 'upstream/main' into DH-19098

c8e0ef4

Fix flaky column reorder test

88549b9

Maybe fix flakiness of more tests?

3124405

Fix for flaky scroll test detection?

8ccf702

await expect.poll

94a3e9d

mofojed requested changes Sep 30, 2025

View reviewed changes

packages/dashboard/src/PanelManager.ts Show resolved Hide resolved

packages/grid/src/Grid.tsx Show resolved Hide resolved

tests/table-operations.spec.ts Outdated Show resolved Hide resolved

mattrunyon added 4 commits September 30, 2025 16:17

Merge remote-tracking branch 'upstream/main' into DH-19098

dab873e

Add comment

523e7cc

Fix type failure

0ce0755

Fix missed merge conflict

2bd6343

mattrunyon requested a review from mofojed September 30, 2025 21:39

mofojed approved these changes Oct 7, 2025

View reviewed changes

mattrunyon merged commit b369a51 into deephaven:main Oct 7, 2025
10 of 11 checks passed

github-actions bot locked and limited conversation to collaborators Oct 7, 2025

	log.debug('File ID is null, ignore close event');
	log.warn('File ID is null, ignore close event');

feat: Upgrade to React 18 #2527

feat: Upgrade to React 18 #2527

Uh oh!

Conversation

mattrunyon commented Sep 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Sep 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mattrunyon Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mofojed left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mattrunyon commented Sep 2, 2025 •

edited

Loading

codecov bot commented Sep 3, 2025 •

edited

Loading

mattrunyon Sep 5, 2025 •

edited

Loading