From e0c1f75be1a067bf2a7a52d16d9118b038beda9d Mon Sep 17 00:00:00 2001 From: Miki Date: Sat, 17 Jun 2023 00:53:32 -0700 Subject: [PATCH] Enable theme-switching via Advanced Settings to preview the Next theme Signed-off-by: Miki --- package.json | 2 +- 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 | 8 +------- src/legacy/ui/ui_render/ui_render_mixin.js | 5 ++++- .../plugins/osd_tp_run_pipeline/package.json | 2 +- .../plugins/osd_sample_panel_action/package.json | 2 +- .../plugins/osd_tp_custom_visualizations/package.json | 2 +- yarn.lock | 8 ++++---- 14 files changed, 28 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 0ba377a55566..7ae0e0dcdd36 100644 --- a/package.json +++ b/package.json @@ -122,7 +122,7 @@ "dependencies": { "@aws-crypto/client-node": "^3.1.1", "@elastic/datemath": "5.0.3", - "@elastic/eui": "npm:@opensearch-project/oui@1.1.2", + "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2", "@elastic/good": "^9.0.1-kibana3", "@elastic/numeral": "^2.5.0", "@elastic/request-crypto": "2.0.0", 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..0f0d8915833e 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('Next (preview)')).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 [Next (preview)]" `); }); }); diff --git a/src/core/server/ui_settings/settings/theme.ts b/src/core/server/ui_settings/settings/theme.ts index 75c1431f2d74..c09106f9676d 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', 'Next (preview)'], 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('Next (preview)')]), }, }; }; 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 f40b7a173587..f78d77e61848 100644 --- a/src/core/server/ui_settings/ui_settings_client.test.ts +++ b/src/core/server/ui_settings/ui_settings_client.test.ts @@ -644,7 +644,7 @@ describe('ui settings', () => { }); it('returns the overridden value for key theme:version', async () => { - const opensearchDocSource = { 'theme:version': 'v8 (beta)' }; + const opensearchDocSource = { 'theme:version': 'Next (preview)' }; const overrides = { 'theme:version': 'v7' }; const { uiSettings } = setup({ opensearchDocSource, overrides }); @@ -660,10 +660,10 @@ describe('ui settings', () => { }); it('rewrites the key theme:version value without override', async () => { - const opensearchDocSource = { 'theme:version': 'v8 (beta)' }; + const opensearchDocSource = { 'theme:version': 'Next (preview)' }; const { uiSettings } = setup({ opensearchDocSource }); - expect(await uiSettings.get('theme:version')).toBe('v8 (beta)'); + expect(await uiSettings.get('theme:version')).toBe('Next (preview)'); }); 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 19e79008845d..1f71e58bd7ec 100644 --- a/src/core/server/ui_settings/ui_settings_config.ts +++ b/src/core/server/ui_settings/ui_settings_config.ts @@ -53,13 +53,7 @@ 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' }), defaults: schema.object({ 'theme:darkMode': schema.maybe(schema.boolean({ defaultValue: false })), 'theme:version': schema.maybe(schema.string({ defaultValue: 'v7' })), diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js index e6591ad72d92..400408c39c8f 100644 --- a/src/legacy/ui/ui_render/ui_render_mixin.js +++ b/src/legacy/ui/ui_render/ui_render_mixin.js @@ -98,8 +98,11 @@ export function uiRenderMixin(osdServer, server, config) { : uiSettings.getOverrideOrDefault('theme:darkMode'); const themeVersion = - !authEnabled || request.auth.isAuthenticated ? await uiSettings.get('theme:version') : 'v7'; + !authEnabled || request.auth.isAuthenticated + ? await uiSettings.get('theme:version') + : uiSettings.getOverrideOrDefault('theme:version'); + // Next (preview) label is mapped to v8 here const themeTag = `${themeVersion === 'v7' ? 'v7' : 'v8'}${darkMode ? 'dark' : 'light'}`; const buildHash = server.newPlatform.env.packageInfo.buildNum; diff --git a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json index d85a256726e3..326ca8753a76 100644 --- a/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json +++ b/test/interpreter_functional/plugins/osd_tp_run_pipeline/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.2", + "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2", "@osd/plugin-helpers": "1.0.0", "react": "^16.14.0", "react-dom": "^16.12.0", diff --git a/test/plugin_functional/plugins/osd_sample_panel_action/package.json b/test/plugin_functional/plugins/osd_sample_panel_action/package.json index 0d6f29b00b37..16579e3f07e6 100644 --- a/test/plugin_functional/plugins/osd_sample_panel_action/package.json +++ b/test/plugin_functional/plugins/osd_sample_panel_action/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.2", + "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2", "react": "^16.14.0", "typescript": "4.0.2" } diff --git a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json index 72d384e7fb4f..b74231619c98 100644 --- a/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json +++ b/test/plugin_functional/plugins/osd_tp_custom_visualizations/package.json @@ -12,7 +12,7 @@ "build": "../../../../scripts/use_node ../../../../scripts/remove.js './target' && tsc" }, "devDependencies": { - "@elastic/eui": "npm:@opensearch-project/oui@1.1.2", + "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2", "@osd/plugin-helpers": "1.0.0", "react": "^16.14.0", "typescript": "4.0.2" diff --git a/yarn.lock b/yarn.lock index 6966b1f83da0..0984c2d4fd83 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1273,10 +1273,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@npm:@opensearch-project/oui@1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.1.2.tgz#38ebe687d856715f3a5d8662505e67966e1e3617" - integrity sha512-+gLzltuSjhR2Uz0DGaqYOysoh7WG9I+LvAZnYeyFsYxeAhvDmd5mLggyBWciqwj0h5yDJUV6uEuf9k88WiyAGA== +"@elastic/eui@npm:@opensearch-project/oui@1.3.0-alpha.2": + version "1.3.0-alpha.2" + resolved "https://registry.yarnpkg.com/@opensearch-project/oui/-/oui-1.3.0-alpha.2.tgz#90060e68ba9809239b7ee22a4f12c65e94e80028" + integrity sha512-RZ+23jgnz2vYgfipd++gNT9zsSNbqm8XEyE9vr6jMMGiwL/XCUJ/7Vli5Z3BpQb1XPQVklRQscMoG2UT9xEpxQ== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160"