[React@18] Env variable to use React@18 (#193113)

Part of
https://github.com/elastic/kibana-team/issues/1016#issuecomment-2454845292

Our plan for React@18 packages upgrade is to let kibana contributors now
that we're going to bump React packages couple weeks in advance. In
addtion to the final PR with green tests and Kibana deployed, we want to
give simple instructions on how to run React@18 locally easilly:

This PR allows to quickly toggle between version of React locally
without having to do anything beyond an environment variable.

`REACT_18=true yarn bootstrap` will alias `react` and `react-dom` to v18
in the build.

I check that this works as expected when starting from: 

- local dev server `yarn start` 
- local ftr `node scripts/functional_tests_server.js`
- local unit tests `REACT_18=true yarn test:jest ...`

Please note: 
- **This PR doesn't implement this switch for dist build, as I don't
think we need this for our purposes.**
- The plan is that we remove this switch soon after we merge React@18
upgrade to main.

In addition to the switch this PR mutes a very noisy warning from
React@18 about legacy root `Warning: ReactDOM.render is no longer
supported in React 18. Use createRoot instead. Until you switch to the
new API, your app will behave as if it's running React 17.`. This
warning is expected as after we upgrade to React@18 packages (Phase 1)
we will be in the process of migrating to the new createRoot API (Phase
2). However, it is very noisy and we want to mute it for now.


Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

kbn_pm/src/commands/bootstrap/bootstrap_command.mjs

@@ -54,6 +54,7 @@ export const command = {
     const offline = args.getBooleanValue('offline') ?? false;
     const validate = args.getBooleanValue('validate') ?? true;
     const quiet = args.getBooleanValue('quiet') ?? false;
+    const reactVersion = process.env.REACT_18 ? '18' : '17';
     const vscodeConfig =
       args.getBooleanValue('vscode') ?? (process.env.KBN_BOOTSTRAP_NO_VSCODE ? false : true);
 
@@ -114,7 +115,7 @@ export const command = {
     }
 
     await time('pre-build webpack bundles for packages', async () => {
-      await Bazel.buildWebpackBundles(log, { offline, quiet });
+      await Bazel.buildWebpackBundles(log, { offline, quiet, reactVersion });
     });
 
     await Promise.all([

kbn_pm/src/lib/bazel.mjs

@@ -58,15 +58,19 @@ function throwBazelError(log, name, code, output) {
 /**
  * @param {import('./log.mjs').Log} log
  * @param {string[]} inputArgs
- * @param {{ quiet?: boolean; offline?: boolean, env?: Record<string, string> } | undefined} opts
+ * @param {{ quiet?: boolean; offline?: boolean, reactVersion?: string, env?: Record<string, string> } | undefined} opts
  */
 async function runBazel(log, inputArgs, opts = undefined) {
   const bazel = (await getBazelRunner()).runBazel;
 
-  const args = [...inputArgs, ...(opts?.offline ? ['--config=offline'] : [])];
+  const args = [
+    ...inputArgs,
+    `--define=REACT_18=${opts?.reactVersion === '18' ? 'true' : 'false'}`,
+    ...(opts?.offline ? ['--config=offline'] : []),
+  ];
   log.debug(`> bazel ${args.join(' ')}`);
   await bazel(args, {
-    env: opts?.env,
+    env: { ...opts?.env, REACT_18: opts?.reactVersion === '18' ? 'true' : 'false' },
     cwd: REPO_ROOT,
     quiet: opts?.quiet,
     logPrefix: Color.info('[bazel]'),
@@ -161,12 +165,13 @@ export async function installYarnDeps(log, opts = undefined) {
 
 /**
  * @param {import('./log.mjs').Log} log
- * @param {{ offline?: boolean, quiet?: boolean } | undefined} opts
+ * @param {{ offline?: boolean, quiet?: boolean, reactVersion?: string } | undefined} opts
  */
 export async function buildWebpackBundles(log, opts = undefined) {
   await runBazel(log, ['build', ...BAZEL_TARGETS, '--show_result=1'], {
     offline: opts?.offline,
     quiet: opts?.quiet,
+    reactVersion: opts?.reactVersion,
   });
 
   log.success('shared bundles built');