Skip to content

Commit f7fa6dd

Browse files
Dosantelasticmachineszwarckonrad
authored
Upgrade to React@18 (#209337)
## Summary This PR upgrades React packages to version 18, while keeping Kibana running in Legacy mode (`ReactDOM.render`). This is the first phase of the React@18 upgrade; the second phase will gradually migrate Kibana to Concurrent mode (`createRoot`) (exact plan is tbd). Upgrade is intended to be non-breaking and behave just like React@17, but it still requires thorough testing from all teams that own UI to discover any potential critical UI issues. The testing was done in #203114. Most of the breaking work was completed in previous PRs and this PR only includes minor breaking jest tests tweaks / snapshots updates ### Backports: - This won't be backported to 9.0 - We will discuss if we should backport this to 8.x ### Risks Kibana’s UI functional tests coverage and significant manual testing that was done by a lot of teams in #203114 gives us a lot of confidence. However, since this was a large internal change for React they still could be issues hidden in "remote" parts of UIs, think of blank screens, error splash screens, unresponsive pages, new errors in the console, unpredictable UI behavior (like laggy text inputs that skip letters when typing fast). --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> Co-authored-by: Konrad Szwarc <konrad.szwarc@elastic.co>
1 parent 9a6b4ec commit f7fa6dd

File tree

10 files changed

+33
-44
lines changed

10 files changed

+33
-44
lines changed

package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1224,10 +1224,10 @@
12241224
"rbush": "^3.0.1",
12251225
"re-resizable": "^6.9.9",
12261226
"re2js": "0.4.3",
1227-
"react": "^17.0.2",
1227+
"react": "~18.2.0",
12281228
"react-18": "npm:react@~18.2.0",
12291229
"react-diff-view": "^3.2.1",
1230-
"react-dom": "^17.0.2",
1230+
"react-dom": "~18.2.0",
12311231
"react-dom-18": "npm:react-dom@~18.2.0",
12321232
"react-dropzone": "^11.7.1",
12331233
"react-fast-compare": "^2.0.4",
@@ -1662,7 +1662,7 @@
16621662
"@types/react-router": "^5.1.20",
16631663
"@types/react-router-config": "^5.0.7",
16641664
"@types/react-router-dom": "^5.3.3",
1665-
"@types/react-test-renderer": "^17.0.2",
1665+
"@types/react-test-renderer": "~18.0.0",
16661666
"@types/react-virtualized": "^9.21.30",
16671667
"@types/react-window": "^1.8.8",
16681668
"@types/react-window-infinite-loader": "^1.0.9",
@@ -1832,7 +1832,7 @@
18321832
"prettier": "^2.8.8",
18331833
"proxy": "^2.1.1",
18341834
"react-is": "~18.2.0",
1835-
"react-test-renderer": "^17.0.2",
1835+
"react-test-renderer": "~18.2.0",
18361836
"recast": "^0.23.9",
18371837
"regenerate": "^1.4.0",
18381838
"resolve": "^1.22.0",

src/platform/packages/shared/kbn-test/src/jest/setup/react_testing_library.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,8 +80,5 @@ console.error = (...args) => {
8080
* Tracking issue to clean this up https://github.com/elastic/kibana/issues/199100
8181
*/
8282
if (REACT_VERSION.startsWith('18.')) {
83-
if (!process.env.CI) {
84-
console.warn('Running with React@18 and muting the legacy ReactDOM.render warning');
85-
}
8683
muteLegacyRootWarning();
8784
}

src/platform/packages/shared/shared-ux/error_boundary/src/ui/error_boundary.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ describe('<KibanaErrorBoundary>', () => {
118118
).toBe(true);
119119
expect(
120120
mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack.startsWith(
121-
'Error: This is an error to show the test user!'
121+
'FatalReactError: This is an error to show the test user!'
122122
)
123123
).toBe(true);
124124
});

src/platform/packages/shared/shared-ux/error_boundary/src/ui/section_error_boundary.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ describe('<KibanaSectionErrorBoundary>', () => {
114114
).toBe(true);
115115
expect(
116116
mockDeps.analytics.reportEvent.mock.calls[0][1].error_stack.startsWith(
117-
'Error: This is an error to show the test user!'
117+
'FatalReactError: This is an error to show the test user!'
118118
)
119119
).toBe(true);
120120
});

x-pack/solutions/observability/plugins/apm/public/context/apm_plugin/mock_apm_plugin_context.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,7 @@ export function MockApmPluginContextWrapper({
209209
}
210210

211211
performance.mark = jest.fn();
212+
performance.clearMeasures = jest.fn();
212213

213214
const contextHistory = useHistory();
214215

x-pack/solutions/observability/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metric_explorer_state.test.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ describe('useMetricsExplorerState', () => {
8888
pathname,
8989
}));
9090
performance.mark = jest.fn();
91+
performance.clearMeasures = jest.fn();
9192
});
9293

9394
afterEach(() => {

x-pack/solutions/security/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/conditions/entry_content/__snapshots__/entry_content.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

x-pack/solutions/security/plugins/security_solution/public/explore/network/components/arrows/__snapshots__/index.test.tsx.snap

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

x-pack/solutions/security/plugins/session_view/public/components/process_tree_alert/__snapshots__/index.test.tsx.snap

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

yarn.lock

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -12487,12 +12487,12 @@
1248712487
"@types/history" "^4.7.11"
1248812488
"@types/react" "*"
1248912489

12490-
"@types/react-test-renderer@^17.0.2":
12491-
version "17.0.2"
12492-
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.2.tgz#5f800a39b12ac8d2a2149e7e1885215bcf4edbbf"
12493-
integrity sha512-+F1KONQTBHDBBhbHuT2GNydeMpPuviduXIVJRB7Y4nma4NR5DrTJfMMZ+jbhEHbpwL+Uqhs1WXh4KHiyrtYTPg==
12490+
"@types/react-test-renderer@~18.0.0":
12491+
version "18.0.7"
12492+
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.7.tgz#2cfe657adb3688cdf543995eceb2e062b5a68728"
12493+
integrity sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==
1249412494
dependencies:
12495-
"@types/react" "^17"
12495+
"@types/react" "*"
1249612496

1249712497
"@types/react-transition-group@^4.4.0":
1249812498
version "4.4.5"
@@ -12524,7 +12524,7 @@
1252412524
dependencies:
1252512525
"@types/react" "*"
1252612526

12527-
"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@^17", "@types/react@~18.2.0":
12527+
"@types/react@*", "@types/react@16 || 17 || 18", "@types/react@~18.2.0":
1252812528
version "18.2.79"
1252912529
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.79.tgz#c40efb4f255711f554d47b449f796d1c7756d865"
1253012530
integrity sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==
@@ -27963,7 +27963,7 @@ re2js@0.4.3:
2796327963
resolved "https://registry.yarnpkg.com/re2js/-/re2js-0.4.3.tgz#1318cd0c12aa6ed3ba56d5e012311ffbfb2aef35"
2796427964
integrity sha512-EuNmh7jurhHEE8Ge/lBo9JuMLb3qf866Xjjfyovw3wPc7+hlqDkZq4LwhrCQMEI+ARWfrKrHozEndzlpNT0WDg==
2796527965

27966-
"react-18@npm:react@~18.2.0":
27966+
"react-18@npm:react@~18.2.0", react@~18.2.0:
2796727967
version "18.2.0"
2796827968
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
2796927969
integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
@@ -28013,7 +28013,7 @@ react-docgen@^5.0.0:
2801328013
node-dir "^0.1.10"
2801428014
strip-indent "^3.0.0"
2801528015

28016-
"react-dom-18@npm:react-dom@~18.2.0":
28016+
"react-dom-18@npm:react-dom@~18.2.0", react-dom@~18.2.0:
2801728017
version "18.2.0"
2801828018
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
2801928019
integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
@@ -28028,15 +28028,6 @@ react-docgen@^5.0.0:
2802828028
dependencies:
2802928029
scheduler "^0.25.0"
2803028030

28031-
react-dom@^17.0.2:
28032-
version "17.0.2"
28033-
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
28034-
integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
28035-
dependencies:
28036-
loose-envify "^1.1.0"
28037-
object-assign "^4.1.1"
28038-
scheduler "^0.20.2"
28039-
2804028031
react-dropzone@^11.7.1:
2804128032
version "11.7.1"
2804228033
resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
@@ -28158,7 +28149,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-
2815828149
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
2815928150
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
2816028151

28161-
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
28152+
"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
2816228153
version "18.3.1"
2816328154
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
2816428155
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
@@ -28350,7 +28341,7 @@ react-select@^5.0.0:
2835028341
prop-types "^15.6.0"
2835128342
react-transition-group "^4.3.0"
2835228343

28353-
react-shallow-renderer@^16.13.1:
28344+
react-shallow-renderer@^16.13.1, react-shallow-renderer@^16.15.0:
2835428345
version "16.15.0"
2835528346
resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
2835628347
integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
@@ -28397,7 +28388,7 @@ react-tabs@^6.0.2:
2839728388
clsx "^2.0.0"
2839828389
prop-types "^15.5.0"
2839928390

28400-
"react-test-renderer@^16.8.0 || ^17.0.0", react-test-renderer@^17.0.0, react-test-renderer@^17.0.2:
28391+
"react-test-renderer@^16.8.0 || ^17.0.0", react-test-renderer@^17.0.0:
2840128392
version "17.0.2"
2840228393
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"
2840328394
integrity sha512-yaQ9cB89c17PUb0x6UfWRs7kQCorVdHlutU1boVPEsB8IDZH6n9tHxMacc3y0JoXOJUsZb/t/Mb8FUWMKaM7iQ==
@@ -28407,6 +28398,15 @@ react-tabs@^6.0.2:
2840728398
react-shallow-renderer "^16.13.1"
2840828399
scheduler "^0.20.2"
2840928400

28401+
react-test-renderer@~18.2.0:
28402+
version "18.2.0"
28403+
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.2.0.tgz#1dd912bd908ff26da5b9fca4fd1c489b9523d37e"
28404+
integrity sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==
28405+
dependencies:
28406+
react-is "^18.2.0"
28407+
react-shallow-renderer "^16.15.0"
28408+
scheduler "^0.23.0"
28409+
2841028410
react-transition-group@^4.3.0:
2841128411
version "4.4.1"
2841228412
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
@@ -28477,14 +28477,6 @@ react-window@^1.8.10:
2847728477
resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
2847828478
integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
2847928479

28480-
react@^17.0.2:
28481-
version "17.0.2"
28482-
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
28483-
integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
28484-
dependencies:
28485-
loose-envify "^1.1.0"
28486-
object-assign "^4.1.1"
28487-
2848828480
read-installed@~4.0.3:
2848928481
version "4.0.3"
2849028482
resolved "https://registry.yarnpkg.com/read-installed/-/read-installed-4.0.3.tgz#ff9b8b67f187d1e4c29b9feb31f6b223acd19067"

0 commit comments

Comments
 (0)