From 93f270d2d6873cb400539362b3d2aeaaab8b4021 Mon Sep 17 00:00:00 2001 From: Miki Date: Sat, 17 Jun 2023 00:53:32 -0700 Subject: [PATCH] Add theme switching to enable preview of the new look and feel Signed-off-by: Miki --- packages/osd-ui-shared-deps/theme.ts | 4 ++-- packages/osd-ui-shared-deps/webpack.config.js | 4 ++-- src/core/public/core_app/styles/_globals_v8dark.scss | 4 ++-- src/core/public/core_app/styles/_globals_v8light.scss | 4 ++-- src/core/server/ui_settings/settings/theme.test.ts | 4 ++-- src/core/server/ui_settings/settings/theme.ts | 5 ++--- src/core/server/ui_settings/ui_settings_client.test.ts | 6 +++--- src/core/server/ui_settings/ui_settings_config.ts | 9 ++------- 8 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/osd-ui-shared-deps/theme.ts b/packages/osd-ui-shared-deps/theme.ts index 1f7f70b85c5e..45a4f68cfd4b 100644 --- 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 index 397fbe12cd4b..8acc43fb1793 100644 --- 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 index 2b92b49bcbfa..2100e9762cac 100644 --- 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 index 914dbb3e3831..ccc07e14e637 100644 --- 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 index 2cba8dff962c..54ed0c129071 100644 --- 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 index 75c1431f2d74..cca7c218a845 100644 --- 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 => { }), 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 index a586d1d31eba..0f2804fd9322 100644 --- 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 index 619481437631..7c3d75b0b746 100644 --- 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' })),