Yuhsuan/react 18 upgrade

[YuHsuan-Hwang]

Description

Patches golden-layout and upgrades to react 18.

Also

• migrates the dialog workaround to react 18
• migrates blueprint toaster to react 18 (ref)
• upgrades react type definition
• removes react-color type def (somehow does not work with react 18 type def)
• patches react-split-pane type def (ref)
• upgrades react-konva for react 18 compatibility
• adds optional children to react component props type (ref)
• fixes key related warnings
• upgrades konva and react testing library, which were blocked by react 18 upgrade

Note that there is a warning from react-resize-detector. Investigated if it can be fixed by upgrading the package to v11, but found that the child function pattern <ReactResizeDetector/> is removed from v10. Only the useResizeDetector hook is supported, which can only applied with functional components. This can be solved by creating a wrapper component, but requires additional changes because it adds an extra div element which breaks the current structure. I suggest we work on the upgrade in a separate PR (perhaps the next dev cycle) and focus on golden-layout patching and react 18 upgrade in this branch.

Update: we could consider replacing react-resize-detector with blueprint <ResizeSensor/> + throttling.

Let's close #1974 after this PR is merged.

Checklist

For linked issues (if there are):

• assignee and label added
• GitHub Project estimate added

For the pull request:

• reviewers and assignee added
• GitHub Project estimate added
• changelog updated / no changelog update needed
• unit test added (for functions with no dependenies)
• API documentation added (for public variables and methods in stores)

For dependencies:

• e2e test passing / corresponding fix added / new e2e test created
• protobuf version bumped / no protobuf version bumped needed
• protobuf updated to the latest dev commit / no protobuf update needed
• corresponding ICD test fix added (BackendService changed) / no ICD test fix needed (BackendService unchanged)
• user manual prepared (for large new features)

[YuHsuan-Hwang]

Updates:

• Upgraded konva and react testing library, which were blocked by react 18 upgrade.
• Investigated if the warning from react-resize-detector can be fixed by upgrading the package to v11, but found that the child function pattern <ReactResizeDetector/> is removed from v10. Only the useResizeDetector hook is supported, which can only applied with functional components. This can be solved by creating a wrapper component, but requires additional changes because it adds an extra div element which breaks the current structure. I suggest we work on the upgrade in a separate PR (perhaps the next dev cycle) and focus on golden-layout patching and react 18 upgrade in this branch.

Update: we could consider replacing react-resize-detector with blueprint <ResizeSensor/> + throttling.

[veggiesaurus]

nice work @YuHsuan-Hwang 😎 🚀

[YuHsuan-Hwang]

Note: Let's close #1974 after this PR is merged.

[loveluthien]

It looks good on Mac and Ubuntu.

[YuHsuan-Hwang]

Filed #2433 for the react-resize-detector warnings.

[YuHsuan-Hwang]

Update: fixed the issue of auto scrolling not being triggered (found by e2e tests)

[YuHsuan-Hwang]

From React documentation:

React will also call your ref callback whenever you pass a different ref callback. In the above example, (node) => { ... } is a different function on every render. When your component re-renders, the previous function will be called with null as the argument, and the next function will be called with the DOM node.

Therefore, FilterableTableComponent updates the ref whenever the table re-renders because there is an additional arrow function in the ref callback.

Moreover, the ref is set to null and then to the DOM node in the process. Before react 18, we use the ref after the two calls are complete. With react 18, the re-render timing somehow changes and we use the ref between the two calls —— the ref is (temporarily) null and the auto scroll is not triggered.

I remove the additional arrow function to avoid unnecessary reset of the ref, avoiding the entire issue.

[kswang1029]

Overall this looks fine after some manual testing of konva related things. The e2e tests have some failures due to tooltips blocking element to be clicked. The FOV of multi-color blending on load changes due to performance changes while running e2e tests. These issues are addressed in an e2e branch.