[9.0] Add conditional switching between EUI releases (#219818) (#221917)

# Backport This will backport the following commits from `main` to `9.0`: - [Add conditional switching between EUI releases (#219818)](https://github.com/elastic/kibana/pull/219818)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-06-27 18:51:07 -04:00 · 2025-05-30 20:33:19 +02:00 · 2025-05-30 20:33:19 +02:00 · 26dc21021d
commit 26dc21021d
parent 8da7114436
11 changed files with 102 additions and 11 deletions
--- a/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs
+++ b/kbn_pm/src/commands/bootstrap/bootstrap_command.mjs
@ -55,6 +55,7 @@ export const command = {
    const validate = args.getBooleanValue('validate') ?? true;
    const quiet = args.getBooleanValue('quiet') ?? false;
    const reactVersion = process.env.REACT_18 ? '18' : '17';
+    const euiAmsterdam = process.env.EUI_AMSTERDAM === 'true';
    const vscodeConfig =
      args.getBooleanValue('vscode') ?? (process.env.KBN_BOOTSTRAP_NO_VSCODE ? false : true);

@ -115,7 +116,7 @@ export const command = {
    }

    await time('pre-build webpack bundles for packages', async () => {
-      await Bazel.buildWebpackBundles(log, { offline, quiet, reactVersion });
+      await Bazel.buildWebpackBundles(log, { offline, quiet, reactVersion, euiAmsterdam });
    });

    await Promise.all([
--- a/kbn_pm/src/commands/watch_command.mjs
+++ b/kbn_pm/src/commands/watch_command.mjs
@ -28,6 +28,7 @@ export const command = {
    await Bazel.watch(log, {
      offline: args.getBooleanValue('offline') ?? true,
      reactVersion: process.env.REACT_18 ? '18' : '17',
+      euiAmsterdam: process.env.EUI_AMSTERDAM === 'true',
    });
  },
 };
--- a/kbn_pm/src/lib/bazel.mjs
+++ b/kbn_pm/src/lib/bazel.mjs
@ -58,7 +58,7 @@ function throwBazelError(log, name, code, output) {
 /**
 * @param {import('./log.mjs').Log} log
 * @param {string[]} inputArgs
- * @param {{ quiet?: boolean; offline?: boolean, reactVersion?: string, env?: Record<string, string> } | undefined} opts
+ * @param {{ quiet?: boolean; offline?: boolean, reactVersion?: string, euiAmsterdam?: boolean, env?: Record<string, string> } | undefined} opts
 */
 async function runBazel(log, inputArgs, opts = undefined) {
  const bazel = (await getBazelRunner()).runBazel;
@ -66,11 +66,16 @@ async function runBazel(log, inputArgs, opts = undefined) {
  const args = [
    ...inputArgs,
    `--define=REACT_18=${opts?.reactVersion === '18' ? 'true' : 'false'}`,
+    `--define=EUI_AMSTERDAM=${opts?.euiAmsterdam ? 'true' : 'false'}`,
    ...(opts?.offline ? ['--config=offline'] : []),
  ];
  log.debug(`> bazel ${args.join(' ')}`);
  await bazel(args, {
-    env: { ...opts?.env, REACT_18: opts?.reactVersion === '18' ? 'true' : 'false' },
+    env: {
+      ...opts?.env,
+      REACT_18: opts?.reactVersion === '18' ? 'true' : 'false',
+      EUI_AMSTERDAM: opts?.euiAmsterdam ? 'true' : 'false',
+    },
    cwd: REPO_ROOT,
    quiet: opts?.quiet,
    logPrefix: Color.info('[bazel]'),
@ -83,7 +88,7 @@ async function runBazel(log, inputArgs, opts = undefined) {
 /**
 *
 * @param {import('./log.mjs').Log} log
- * @param {{ offline: boolean, reactVersion?: string } | undefined} opts
+ * @param {{ offline: boolean, reactVersion?: string, euiAmsterdam?: boolean } | undefined} opts
 */
 export async function watch(log, opts = undefined) {
  const ibazel = (await getBazelRunner()).runIBazel;
@ -98,11 +103,16 @@ export async function watch(log, opts = undefined) {
    '--show_result=1',
    ...(opts?.offline ? ['--config=offline'] : []),
    `--define=REACT_18=${opts?.reactVersion === '18' ? 'true' : 'false'}`,
+    `--define=EUI_AMSTERDAM=${opts?.euiAmsterdam ? 'true' : 'false'}`,
  ];
  log.debug(`> ibazel ${args.join(' ')}`);
  await ibazel(args, {
    cwd: REPO_ROOT,
-    env: { ...process.env, REACT_18: opts?.reactVersion === '18' ? 'true' : 'false' },
+    env: {
+      ...process.env,
+      REACT_18: opts?.reactVersion === '18' ? 'true' : 'false',
+      EUI_AMSTERDAM: opts?.euiAmsterdam ? 'true' : 'false',
+    },
    logPrefix: Color.info('[ibazel]'),
    onErrorExit(code, output) {
      throwBazelError(log, 'ibazel', code, output);
@ -167,13 +177,14 @@ export async function installYarnDeps(log, opts = undefined) {

 /**
 * @param {import('./log.mjs').Log} log
- * @param {{ offline?: boolean, quiet?: boolean, reactVersion?: string } | undefined} opts
+ * @param {{ offline?: boolean, quiet?: boolean, reactVersion?: string, euiAmsterdam?: boolean } | 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,
+    euiAmsterdam: opts?.euiAmsterdam,
  });

  log.success('shared bundles built');
--- a/package.json
+++ b/package.json
@ -124,6 +124,7 @@
    "@elastic/elasticsearch": "^8.17.0",
    "@elastic/ems-client": "8.6.3",
    "@elastic/eui": "102.2.0",
+    "@elastic/eui-amsterdam": "npm:@elastic/eui@102.2.0-amsterdam.0",
    "@elastic/eui-theme-borealis": "1.0.0",
    "@elastic/filesaver": "1.1.2",
    "@elastic/node-crypto": "^1.2.3",
--- a/packages/kbn-dependency-ownership/src/rule.ts
+++ b/packages/kbn-dependency-ownership/src/rule.ts
@ -41,6 +41,7 @@ export function packageFilter(pkg: string) {
    !pkg.startsWith('@kbn/') &&
    // The EUI team owns the EUI packages, and are not covered by renovate
    pkg !== '@elastic/eui' &&
+    pkg !== '@elastic/eui-amsterdam' &&
    pkg !== '@elastic/eui-theme-borealis' &&
    // Operations owns node, and is not covered by renovate
    pkg !== '@types/node'
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@ -89,6 +89,9 @@ export const LICENSE_OVERRIDES = {
  '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
  '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
  '@elastic/eui@102.2.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-amsterdam@102.2.0-amsterdam.0': [
+    'Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0',
+  ],
  '@elastic/eui-theme-borealis@1.0.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
  'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
  'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
--- a/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
+++ b/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
@ -40,6 +40,7 @@ RUNTIME_DEPS = [
  "@npm//@elastic/apm-rum-core",
  "@npm//@elastic/charts",
  "@npm//@elastic/eui",
+  "@npm//@elastic/eui-amsterdam",
  "@npm//@elastic/numeral",
  "@npm//@emotion/cache",
  "@npm//@emotion/react",
@ -101,6 +102,7 @@ webpack_cli(
    "//conditions:default": {
      "NODE_ENV": "development",
      "REACT_18": "$(REACT_18)",
+      "EUI_AMSTERDAM": "$(EUI_AMSTERDAM)",
    },
  })
 )
--- a/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
+++ b/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
@ -20,6 +20,8 @@ const WEBPACK_SRC = require.resolve('webpack');

 const REPO_ROOT = Path.resolve(__dirname, '..', '..', '..', '..', '..');

+const useEuiAmsterdamRelease = process.env.EUI_AMSTERDAM === 'true';
+
 /** @returns {import('webpack').Configuration} */
 module.exports = (_, argv) => {
  const outputPath = argv.outputPath ? Path.resolve(argv.outputPath) : UiSharedDepsNpm.distDir;
@ -138,7 +140,21 @@ module.exports = (_, argv) => {

    resolve: {
      alias: {
-        '@elastic/eui$': '@elastic/eui/optimize/es',
+        // @elastic/eui-amsterdam is a package alias defined in Kibana's package.json
+        // that points to special EUI releases bundled with Amsterdam set as the default theme
+        // and meant to be used with Kibana 8.x. Kibana 9.0 and later use the Borealis theme
+        // and should import from the regular @elastic/eui package.
+        // TODO: Remove when Kibana 8.19 is EOL and Amsterdam backports aren't needed anymore
+        // https://github.com/elastic/kibana/issues/221593
+        '@elastic/eui$': useEuiAmsterdamRelease
+          ? '@elastic/eui-amsterdam/optimize/es'
+          : '@elastic/eui/optimize/es',
+        '@elastic/eui/optimize/es/components/provider/nested$': useEuiAmsterdamRelease
+          ? '@elastic/eui-amsterdam/optimize/es/components/provider/nested'
+          : '@elastic/eui/optimize/es/components/provider/nested',
+        '@elastic/eui/optimize/es/services/theme/warning$': useEuiAmsterdamRelease
+          ? '@elastic/eui-amsterdam/optimize/es/services/theme/warning'
+          : '@elastic/eui/optimize/es/services/theme/warning',
        moment: MOMENT_SRC,
        // NOTE: Used to include react profiling on bundles
        // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
--- a/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
+++ b/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
@ -60,6 +60,7 @@ webpack_cli(
    "//conditions:default": {
      "NODE_ENV": "development",
      "REACT_18": "$(REACT_18)",
+      "EUI_AMSTERDAM": "$(EUI_AMSTERDAM)",
    },
  }),
  visibility = ["//visibility:public"],
--- a/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
+++ b/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
@ -23,6 +23,8 @@ const MOMENT_SRC = require.resolve('moment/min/moment-with-locales.js');

 const REPO_ROOT = Path.resolve(__dirname, '..', '..', '..', '..', '..');

+const useEuiAmsterdamRelease = process.env.EUI_AMSTERDAM === 'true';
+
 /** @returns {import('webpack').Configuration} */
 module.exports = {
  externals: {
@ -111,10 +113,21 @@ module.exports = {
    mainFields: ['browser', 'module', 'main'],
    conditionNames: ['browser', 'module', 'import', 'require', 'default'],
    alias: {
-      '@elastic/eui$': '@elastic/eui/optimize/es',
-      '@elastic/eui/lib/components/provider/nested$':
-        '@elastic/eui/optimize/es/components/provider/nested',
-      '@elastic/eui/lib/services/theme/warning$': '@elastic/eui/optimize/es/services/theme/warning',
+      // @elastic/eui-amsterdam is a package alias defined in Kibana's package.json
+      // that points to special EUI releases bundled with Amsterdam set as the default theme
+      // and meant to be used with Kibana 8.x. Kibana 9.0 and later use the Borealis theme
+      // and should use the regular @elastic/eui package.
+      // TODO: Remove when Kibana 8.19 is EOL and Amsterdam backports aren't needed anymore
+      // https://github.com/elastic/kibana/issues/221593
+      '@elastic/eui$': useEuiAmsterdamRelease
+        ? '@elastic/eui-amsterdam/optimize/es'
+        : '@elastic/eui/optimize/es',
+      '@elastic/eui/lib/components/provider/nested$': useEuiAmsterdamRelease
+        ? '@elastic/eui-amsterdam/optimize/es/components/provider/nested'
+        : '@elastic/eui/optimize/es/components/provider/nested',
+      '@elastic/eui/lib/services/theme/warning$': useEuiAmsterdamRelease
+        ? '@elastic/eui-amsterdam/optimize/es/services/theme/warning'
+        : '@elastic/eui/optimize/es/services/theme/warning',
      moment: MOMENT_SRC,
      // NOTE: Used to include react profiling on bundles
      // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
--- a/yarn.lock
+++ b/yarn.lock
@ -2165,6 +2165,47 @@
  resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
  integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==

+"@elastic/eui-amsterdam@npm:@elastic/eui@102.2.0-amsterdam.0":
+  version "102.2.0-amsterdam.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-102.2.0-amsterdam.0.tgz#f520caecd95e1054de6b8e21d67f76768ae0b345"
+  integrity sha512-VqZAac9KHMaPS8yFaibSvD/j2+5/F2/smXrVXIOoTZb7EfK7Fg0UVJOzRdlLon+4W0gHaHvijbe2q8lmym7q6A==
+  dependencies:
+    "@elastic/eui-theme-common" "1.0.0"
+    "@elastic/prismjs-esql" "^1.1.0"
+    "@hello-pangea/dnd" "^16.6.0"
+    "@types/lodash" "^4.14.202"
+    "@types/numeral" "^2.0.5"
+    "@types/react-window" "^1.8.8"
+    "@types/refractor" "^3.4.0"
+    chroma-js "^2.4.2"
+    classnames "^2.5.1"
+    lodash "^4.17.21"
+    mdast-util-to-hast "^10.2.0"
+    numeral "^2.0.6"
+    prop-types "^15.8.1"
+    react-dropzone "^11.7.1"
+    react-element-to-jsx-string "^15.0.0"
+    react-focus-on "^3.9.1"
+    react-is "^17.0.2"
+    react-remove-scroll-bar "^2.3.4"
+    react-virtualized-auto-sizer "^1.0.24"
+    react-window "^1.8.10"
+    refractor "^3.6.0"
+    rehype-raw "^5.1.0"
+    rehype-react "^6.2.1"
+    rehype-stringify "^8.0.0"
+    remark-breaks "^2.0.2"
+    remark-emoji "^2.1.0"
+    remark-parse-no-trim "^8.0.4"
+    remark-rehype "^8.1.0"
+    tabbable "^5.3.3"
+    text-diff "^1.0.1"
+    unified "^9.2.2"
+    unist-util-visit "^2.0.3"
+    url-parse "^1.5.10"
+    uuid "^8.3.0"
+    vfile "^4.2.1"
+
 "@elastic/eui-theme-borealis@1.0.0":
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/@elastic/eui-theme-borealis/-/eui-theme-borealis-1.0.0.tgz#f85679d2d72dfc43a620241cbf4161d4e4e81841"