Enable theme-switching via Advanced Settings to preview the Next theme

Also: * Remove the unused "v8 (beta)" theme * Remove the overrides that locked in the light default theme * Correct theme version selection logic in the legacy UI renderer Signed-off-by: Miki <miki@amazon.com>
AMoo-Miki · Jul 1, 2023 · ab158de · ab158de
1 parent bbf8dfb
commit ab158de
Show file tree

Hide file tree

Showing 15 changed files with 29 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Add configurable defaults and overrides to uiSettings ([#4344](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4344))
 - Introduce new fonts for the Next theme ([#4381](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4381))
 - Bump OUI to `1.1.2` to make `anomalyDetection` icon available ([#4408](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4408))
+- Enable theme-switching via Advanced Settings to preview the Next theme ([#4475](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4475))
 - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412))
 
 ### 🐛 Bug Fixes

diff --git 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
@@ -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('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
@@ -51,13 +51,12 @@ export const getThemeSettings = (): Record<string, UiSettingsParams> => {
  }),
  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"