Update EUI to v108.0.0

package.json

@@ -129,8 +129,8 @@
     "@elastic/ecs": "^9.0.0",
     "@elastic/elasticsearch": "9.1.1",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "107.0.1",
-    "@elastic/eui-theme-borealis": "3.6.0",
+    "@elastic/eui": "108.0.0",
+    "@elastic/eui-theme-borealis": "4.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "@elastic/monaco-esql": "^3.1.11",

packages/kbn-optimizer/README.mdx

@@ -51,16 +51,16 @@ Any import in a bundle which resolves into another bundles "context" directory,
 
 ## Themes
 
-SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `v8light` and `v8dark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
+SASS imports in bundles are automatically converted to CSS for one or more themes. In development we build the `borealislight` and `borealisdark` themes by default to improve build performance. When producing distributable bundles the default shifts to `*` so that the distributable bundles will include all themes, preventing the bundles from needing to be rebuilt when users change the active theme in Kibana's advanced settings.
 
 To customize the themes that are built for development you can specify the `KBN_OPTIMIZER_THEMES` environment variable to one or more theme tags, or use `*` to build styles for all themes. Unfortunately building more than one theme significantly impacts build performance, so try to be strategic about which themes you build.
 
-Currently supported theme tags: `v8light`, `v8dark`
+Currently supported theme tags: `borealislight`, `borealisdark`
 
 Examples:
 ```sh
 # start Kibana with only a single theme
-KBN_OPTIMIZER_THEMES=v8light yarn start
+KBN_OPTIMIZER_THEMES=borealislight yarn start
 
 # start Kibana with all the themes
 KBN_OPTIMIZER_THEMES=* yarn start

src/core/packages/injected-metadata/browser-mocks/src/injected_metadata_service.mock.ts

@@ -43,7 +43,7 @@ const createSetupContractMock = () => {
     } as any),
     getTheme: jest.fn().mockReturnValue({
       darkMode: false,
-      name: 'amsterdam',
+      name: 'borealis',
       version: 'v8',
       stylesheetPaths: {
         default: ['light-1.css'],

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.test.ts

@@ -395,15 +395,15 @@ describe('bootstrapRenderer', () => {
       })
     );
 
-    themeName$.next('amsterdam');
+    themeName$.next('borealis');
     await renderer({
       request,
       uiSettingsClient,
     });
 
     expect(renderTemplateMock).toHaveBeenCalledWith(
       expect.objectContaining({
-        themeTagName: 'v8',
+        themeTagName: 'borealis',
       })
     );
   });

src/core/packages/rendering/server-internal/src/bootstrap/bootstrap_renderer.ts

@@ -83,9 +83,7 @@ export const bootstrapRendererFactory: BootstrapRendererFactory = ({
     }
 
     const colorMode = darkMode === false ? 'light' : darkMode === true ? 'dark' : 'system';
-    // Amsterdam theme is called `v8` internally
-    // and should be kept this way for compatibility reasons.
-    const themeTagName = themeName === 'amsterdam' ? 'v8' : themeName;
+    const themeTagName = themeName;
     const bundlesHref = getBundlesHref(baseHref);
 
     const bundlePaths = getPluginsBundlePaths({

src/core/packages/rendering/server-internal/src/bootstrap/render_template.test.ts

@@ -11,7 +11,7 @@ import { renderTemplate } from './render_template';
 
 function mockParams() {
   return {
-    themeTagName: 'v8',
+    themeTagName: 'borealis',
     colorMode: 'light',
     jsDependencyPaths: ['/js-1', '/js-2'],
     styleSheetPaths: ['/style-1', '/style-2'],

src/core/packages/rendering/server-internal/src/render_utils.ts

@@ -42,11 +42,7 @@ export const getScriptPaths = ({
   themeName: ThemeName;
 }) => {
   if (darkMode === 'system') {
-    return [
-      `${baseHref}/ui/bootstrap_system_theme_${
-        themeName === 'borealis' ? 'borealis' : 'amsterdam'
-      }.js`,
-    ];
+    return [`${baseHref}/ui/bootstrap_system_theme_borealis.js`];
   } else {
     return [];
   }

src/core/packages/rendering/server-internal/src/rendering_service.test.ts

@@ -605,7 +605,7 @@ describe('RenderingService', () => {
   });
 
   describe('start()', () => {
-    it('subscribes to the featureFlags.setStringValue$ observable and updates theme name accordingly', async () => {
+    it('subscribes to the featureFlags.setStringValue$', async () => {
       // setup and render added to assert the current theme name
       const { render } = await service.setup(mockRenderingSetupDeps);
       const themeName$ = new BehaviorSubject<ThemeName>(DEFAULT_THEME_NAME);
@@ -631,15 +631,11 @@ describe('RenderingService', () => {
         globalClient: uiSettingsServiceMock.createClient(),
       };
 
-      getIsThemeBundledMock.mockImplementation((name) => ['borealis', 'amsterdam'].includes(name));
+      getIsThemeBundledMock.mockImplementation((name) => name === 'borealis');
 
-      let renderResult = await render(createKibanaRequest(), uiSettings);
+      const renderResult = await render(createKibanaRequest(), uiSettings);
       expect(getIsThemeBundledMock).toHaveBeenCalledWith('borealis');
       expect(renderResult).toContain(',&quot;name&quot;:&quot;borealis&quot;');
-
-      themeName$.next('amsterdam');
-      renderResult = await render(createKibanaRequest(), uiSettings);
-      expect(renderResult).toContain(',&quot;name&quot;:&quot;amsterdam&quot;');
     });
 
     it('falls back to the default theme if theme is not bundled', async () => {

src/core/packages/rendering/server-internal/src/theme.test.ts

@@ -10,24 +10,6 @@
 import { getThemeTag, isThemeBundled } from './theme';
 
 describe('getThemeTag', () => {
-  it('returns the correct value for name:amsterdam and darkMode:false', () => {
-    expect(
-      getThemeTag({
-        name: 'v8',
-        darkMode: false,
-      })
-    ).toEqual('v8light');
-  });
-
-  it('returns the correct value for name:amsterdam and darkMode:true', () => {
-    expect(
-      getThemeTag({
-        name: 'v8',
-        darkMode: true,
-      })
-    ).toEqual('v8dark');
-  });
-
   it('returns the correct value for other other theme names and darkMode:false', () => {
     expect(
       getThemeTag({
@@ -59,14 +41,12 @@ describe('isThemeBundled', () => {
   });
 
   it('returns true when both light and dark mode theme tags are included in KBN_OPTIMIZER_THEMES', () => {
-    process.env.KBN_OPTIMIZER_THEMES = 'v8light,v8dark,borealislight,borealisdark';
-    expect(isThemeBundled('amsterdam')).toEqual(true);
+    process.env.KBN_OPTIMIZER_THEMES = 'borealislight,borealisdark';
     expect(isThemeBundled('borealis')).toEqual(true);
   });
 
   it('returns false when either theme tag is missing in KBN_OPTIMIZER_THEMES for given theme name', () => {
-    process.env.KBN_OPTIMIZER_THEMES = 'v8light,borealisdark,borealisdark';
-    expect(isThemeBundled('amsterdam')).toEqual(false);
+    process.env.KBN_OPTIMIZER_THEMES = 'borealisdark,borealisdark';
     expect(isThemeBundled('borealis')).toEqual(false);
   });
 

src/core/packages/rendering/server-internal/src/theme.ts

@@ -11,12 +11,6 @@ import type { ThemeName, ThemeTag } from '@kbn/core-ui-settings-common';
 import { parseThemeTags } from '@kbn/core-ui-settings-common';
 
 export const getThemeTag = ({ name, darkMode }: { name: string; darkMode: boolean }) => {
-  // Amsterdam theme is called `v8` internally
-  // and should be kept this way for compatibility reasons.
-  if (name === 'amsterdam') {
-    name = 'v8';
-  }
-
   return `${name}${darkMode ? 'dark' : 'light'}`;
 };
 

src/core/packages/rendering/server-internal/src/views/fonts.tsx

@@ -28,7 +28,7 @@ interface FontFace {
 }
 
 /**
- * `Inter` is the latest version of `Inter UI` and used specifically in v8 of Kibana from EUI Amsterdam
+ * `Inter` is the latest version of `Inter UI`
  */
 const getInter = (url: string): FontFace => {
   return {

src/core/packages/theme/browser-internal/src/theme_service.test.ts

@@ -45,7 +45,7 @@ describe('ThemeService', () => {
       beforeEach(() => {
         injectedMetadata.getTheme.mockReturnValue({
           version: 'v8',
-          name: 'amsterdam',
+          name: 'borealis',
           darkMode: false,
           stylesheetPaths: {
             dark: ['dark-1.css'],
@@ -59,13 +59,13 @@ describe('ThemeService', () => {
         const theme = await firstValueFrom(theme$);
         expect(theme).toEqual({
           darkMode: false,
-          name: 'amsterdam',
+          name: 'borealis',
         });
       });
 
       it('sets __kbnThemeTag__ to the correct value', async () => {
         themeService.setup({ injectedMetadata });
-        expect(window.__kbnThemeTag__).toEqual('v8light');
+        expect(window.__kbnThemeTag__).toEqual('borealislight');
       });
 
       it('calls createStyleSheet with the correct parameters', async () => {
@@ -90,7 +90,7 @@ describe('ThemeService', () => {
       beforeEach(() => {
         injectedMetadata.getTheme.mockReturnValue({
           version: 'v8',
-          name: 'amsterdam',
+          name: 'borealis',
           darkMode: true,
           stylesheetPaths: {
             dark: ['dark-1.css'],
@@ -104,13 +104,13 @@ describe('ThemeService', () => {
         const theme = await firstValueFrom(theme$);
         expect(theme).toEqual({
           darkMode: true,
-          name: 'amsterdam',
+          name: 'borealis',
         });
       });
 
       it('sets __kbnThemeTag__ to the correct value', async () => {
         themeService.setup({ injectedMetadata });
-        expect(window.__kbnThemeTag__).toEqual('v8dark');
+        expect(window.__kbnThemeTag__).toEqual('borealisdark');
       });
 
       it('calls createStyleSheet with the correct parameters', async () => {
@@ -135,7 +135,7 @@ describe('ThemeService', () => {
       beforeEach(() => {
         injectedMetadata.getTheme.mockReturnValue({
           version: 'v8',
-          name: 'amsterdam',
+          name: 'borealis',
           darkMode: 'system',
           stylesheetPaths: {
             dark: ['dark-1.css'],
@@ -155,10 +155,10 @@ describe('ThemeService', () => {
 
           expect(theme).toEqual({
             darkMode: false,
-            name: 'amsterdam',
+            name: 'borealis',
           });
 
-          expect(window.__kbnThemeTag__).toEqual('v8light');
+          expect(window.__kbnThemeTag__).toEqual('borealislight');
 
           expect(setDarkModeMock).toHaveBeenCalledTimes(1);
           expect(setDarkModeMock).toHaveBeenCalledWith(false);
@@ -183,10 +183,10 @@ describe('ThemeService', () => {
 
           expect(theme).toEqual({
             darkMode: false,
-            name: 'amsterdam',
+            name: 'borealis',
           });
 
-          expect(window.__kbnThemeTag__).toEqual('v8light');
+          expect(window.__kbnThemeTag__).toEqual('borealislight');
 
           expect(setDarkModeMock).toHaveBeenCalledTimes(1);
           expect(setDarkModeMock).toHaveBeenCalledWith(false);
@@ -203,10 +203,10 @@ describe('ThemeService', () => {
 
           expect(theme).toEqual({
             darkMode: true,
-            name: 'amsterdam',
+            name: 'borealis',
           });
 
-          expect(window.__kbnThemeTag__).toEqual('v8dark');
+          expect(window.__kbnThemeTag__).toEqual('borealisdark');
 
           expect(setDarkModeMock).toHaveBeenCalledTimes(1);
           expect(setDarkModeMock).toHaveBeenCalledWith(true);
@@ -229,14 +229,14 @@ describe('ThemeService', () => {
           expect(await firstValueFrom(theme$)).toEqual({
             darkMode: false,
           });
-          expect(window.__kbnThemeTag__).toEqual('v8light');
+          expect(window.__kbnThemeTag__).toEqual('borealislight');
 
           handler!(true);
 
           expect(await firstValueFrom(theme$)).toEqual({
             darkMode: true,
           });
-          expect(window.__kbnThemeTag__).toEqual('v8dark');
+          expect(window.__kbnThemeTag__).toEqual('borealisdark');
         });
       });
     });
@@ -252,7 +252,7 @@ describe('ThemeService', () => {
     it('exposes a `theme$` observable with the values provided by the injected metadata', async () => {
       injectedMetadata.getTheme.mockReturnValue({
         version: 'v8',
-        name: 'amsterdam',
+        name: 'borealis',
         darkMode: true,
         stylesheetPaths: {
           dark: [],
@@ -264,7 +264,7 @@ describe('ThemeService', () => {
       const theme = await firstValueFrom(theme$);
       expect(theme).toEqual({
         darkMode: true,
-        name: 'amsterdam',
+        name: 'borealis',
       });
     });
   });

src/core/packages/theme/browser-internal/src/theme_service.ts

@@ -83,8 +83,6 @@ export class ThemeService {
 }
 
 const updateKbnThemeTag = (theme: CoreTheme) => {
-  const name = theme.name === 'amsterdam' ? 'v8' : theme.name;
-
   const globals: any = typeof window === 'undefined' ? {} : window;
-  globals.__kbnThemeTag__ = `${name}${theme.darkMode ? 'dark' : 'light'}`;
+  globals.__kbnThemeTag__ = `${theme.name}${theme.darkMode ? 'dark' : 'light'}`;
 };

src/core/packages/ui-settings/common/src/theme.ts

@@ -8,15 +8,10 @@
  */
 
 export const DEFAULT_THEME_NAME = 'borealis';
-export const SUPPORTED_THEME_NAMES = ['amsterdam', 'borealis'] as const;
+export const SUPPORTED_THEME_NAMES = ['borealis'] as const;
 
 export type ThemeName = (typeof SUPPORTED_THEME_NAMES)[number];
 
-/**
- * Theme tags of the Amsterdam theme
- */
-export const ThemeAmsterdamTags = ['v8light', 'v8dark'] as const;
-
 /**
  * Theme tags of the experimental Borealis theme
  */
@@ -26,7 +21,7 @@ export const ThemeBorealisTags = ['borealislight', 'borealisdark'] as const;
  * An array of all theme tags supported by Kibana. Note that this list doesn't
  * reflect what theme tags are available in a Kibana build.
  */
-export const SUPPORTED_THEME_TAGS = [...ThemeAmsterdamTags, ...ThemeBorealisTags] as const;
+export const SUPPORTED_THEME_TAGS = [...ThemeBorealisTags] as const;
 
 export type ThemeTag = (typeof SUPPORTED_THEME_TAGS)[number];
 export type ThemeTags = readonly ThemeTag[];