Add theme switching to enable preview of the new look and feel

Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jun 20, 2023 · 93f270d · 93f270d
1 parent 7644717
commit 93f270d
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 23 deletions.
diff --git a/packages/osd-ui-shared-deps/theme.ts b/packages/osd-ui-shared-deps/theme.ts
@@ -46,8 +46,8 @@ if (version === 7) {
  euiLightVars = require('@elastic/eui/dist/eui_theme_light.json');
  euiDarkVars = require('@elastic/eui/dist/eui_theme_dark.json');
 } else {
- euiLightVars = require('@elastic/eui/dist/eui_theme_amsterdam_light.json');
- euiDarkVars = require('@elastic/eui/dist/eui_theme_amsterdam_dark.json');
+ euiLightVars = require('@elastic/eui/dist/eui_theme_next_light.json');
+ euiDarkVars = require('@elastic/eui/dist/eui_theme_next_dark.json');
 }
 
 /**

diff --git a/packages/osd-ui-shared-deps/webpack.config.js b/packages/osd-ui-shared-deps/webpack.config.js
@@ -45,8 +45,8 @@ exports.getWebpackConfig = ({ dev = false } = {}) => ({
  'osd-ui-shared-deps': './entry.js',
  'osd-ui-shared-deps.v7.dark': ['@elastic/eui/dist/eui_theme_dark.css'],
  'osd-ui-shared-deps.v7.light': ['@elastic/eui/dist/eui_theme_light.css'],
- 'osd-ui-shared-deps.v8.dark': ['@elastic/eui/dist/eui_theme_amsterdam_dark.css'],
- 'osd-ui-shared-deps.v8.light': ['@elastic/eui/dist/eui_theme_amsterdam_light.css'],
+ 'osd-ui-shared-deps.v8.dark': ['@elastic/eui/dist/eui_theme_next_dark.css'],
+ 'osd-ui-shared-deps.v8.light': ['@elastic/eui/dist/eui_theme_next_light.css'],
  },
  context: __dirname,
  devtool: dev ? '#cheap-source-map' : false,

diff --git a/src/core/public/core_app/styles/_globals_v8dark.scss b/src/core/public/core_app/styles/_globals_v8dark.scss
@@ -2,6 +2,6 @@
 // ---
 // prepended to all .scss imports (from JS, when v8dark theme selected)
 
-@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_dark";
-@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals";
+@import "@elastic/eui/src/themes/eui-next/eui_next_colors_dark";
+@import "@elastic/eui/src/themes/eui-next/eui_next_globals";
 @import "./mixins";
diff --git a/src/core/public/core_app/styles/_globals_v8light.scss b/src/core/public/core_app/styles/_globals_v8light.scss
@@ -2,6 +2,6 @@
 // ---
 // prepended to all .scss imports (from JS, when v8light theme selected)
 
-@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_colors_light";
-@import "@elastic/eui/src/themes/eui-amsterdam/eui_amsterdam_globals";
+@import "@elastic/eui/src/themes/eui-next/eui_next_colors_light";
+@import "@elastic/eui/src/themes/eui-next/eui_next_globals";
 @import "./mixins";
diff --git a/src/core/server/ui_settings/settings/theme.test.ts b/src/core/server/ui_settings/settings/theme.test.ts
@@ -57,11 +57,11 @@ describe('theme settings', () => {
 
  it('should only accept valid values', () => {
  expect(() => validate('v7')).not.toThrow();
- expect(() => validate('v8 (beta)')).not.toThrow();
+ expect(() => validate('Cascadia (preview.1)')).not.toThrow();
  expect(() => validate('v12')).toThrowErrorMatchingInlineSnapshot(`
 "types that failed validation:
 - [0]: expected value to equal [v7]
-- [1]: expected value to equal [v8 (beta)]"
+- [1]: expected value to equal [Cascadia (preview.1)]"
 `);
  });
  });

diff --git a/src/core/server/ui_settings/settings/theme.ts b/src/core/server/ui_settings/settings/theme.ts
@@ -51,13 +51,12 @@ export const getThemeSettings = (): Record<string, UiSettingsParams> => {
  }),
  value: 'v7',
  type: 'select',
- options: ['v7', 'v8 (beta)'],
+ options: ['v7', 'Cascadia (preview.1)'],
  description: i18n.translate('core.ui_settings.params.themeVersionText', {
  defaultMessage: `Switch between the theme used for the current and next version of OpenSearch Dashboards, A page refresh is required for the setting to be applied.`,
  }),
  requiresPageReload: true,
- schema: schema.oneOf([schema.literal('v7'), schema.literal('v8 (beta)')]),
- readonly: true,
+ schema: schema.oneOf([schema.literal('v7'), schema.literal('Cascadia (preview.1)')]),
  },
  };
 };
diff --git a/src/core/server/ui_settings/ui_settings_client.test.ts b/src/core/server/ui_settings/ui_settings_client.test.ts
@@ -635,7 +635,7 @@ describe('ui settings', () => {
  });
 
  it('returns the overridden value for key theme:version', async () => {
- const opensearchDocSource = { 'theme:version': 'v8 (beta)' };
+ const opensearchDocSource = { 'theme:version': 'Cascadia (preview.1)' };
  const overrides = { 'theme:version': 'v7' };
  const { uiSettings } = setup({ opensearchDocSource, overrides });
 
@@ -651,10 +651,10 @@ describe('ui settings', () => {
  });
 
  it('rewrites the key theme:version value without override', async () => {
- const opensearchDocSource = { 'theme:version': 'v8 (beta)' };
+ const opensearchDocSource = { 'theme:version': 'Cascadia (preview.1)' };
  const { uiSettings } = setup({ opensearchDocSource });
 
- expect(await uiSettings.get('theme:version')).toBe('v8 (beta)');
+ expect(await uiSettings.get('theme:version')).toBe('Cascadia (preview.1)');
  });
 
  it('returns the default value for an override with value null', async () => {

diff --git a/src/core/server/ui_settings/ui_settings_config.ts b/src/core/server/ui_settings/ui_settings_config.ts
@@ -38,13 +38,8 @@ const deprecations: ConfigDeprecationProvider = ({ unused, renameFromRoot }) =>
 ];
 
 const configSchema = schema.object({
- overrides: schema.object(
- {
- 'theme:darkMode': schema.maybe(schema.boolean({ defaultValue: true })),
- 'theme:version': schema.string({ defaultValue: 'v7' }),
- },
- { unknowns: 'allow' }
- ),
+ overrides: schema.object({}, { unknowns: 'allow' }),
+ // We don't explicitly need to limit to these 2; the code is written to handle all
  defaults: schema.object({
  'theme:darkMode': schema.maybe(schema.boolean({ defaultValue: false })),
  'theme:version': schema.maybe(schema.string({ defaultValue: 'v7' })),