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.