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 * Use the latest preview of OUI Signed-off-by: Miki <[email protected]>
opensearch-project · Jul 1, 2023 · edb73a4 · edb73a4
1 parent bbf8dfb
commit edb73a4
Show file tree

Hide file tree

Showing 21 changed files with 70 additions and 53 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-optimizer/src/common/theme_tags.test.ts b/packages/osd-optimizer/src/common/theme_tags.test.ts
@@ -35,6 +35,8 @@ it('returns default tags when passed undefined', () => {
     Array [
       "v7dark",
       "v7light",
+      "v8dark",
+      "v8light",
     ]
   `);
 });

diff --git a/packages/osd-optimizer/src/common/theme_tags.ts b/packages/osd-optimizer/src/common/theme_tags.ts
@@ -39,7 +39,7 @@ const isArrayOfStrings = (input: unknown): input is string[] =>
 
 export type ThemeTags = readonly ThemeTag[];
 export type ThemeTag = 'v7light' | 'v7dark' | 'v8light' | 'v8dark';
-export const DEFAULT_THEMES = tags('v7light', 'v7dark');
+export const DEFAULT_THEMES = tags('v7light', 'v7dark', 'v8light', 'v8dark');
 export const ALL_THEMES = tags('v7light', 'v7dark', 'v8light', 'v8dark');
 
 export function parseThemeTags(input?: any): ThemeTags {

diff --git a/packages/osd-optimizer/src/optimizer/cache_keys.test.ts b/packages/osd-optimizer/src/optimizer/cache_keys.test.ts
@@ -101,6 +101,8 @@ describe('getOptimizerCacheKey()', () => {
                 "themeTags": Array [
                   "v7dark",
                   "v7light",
+                  "v8dark",
+                  "v8light",
                 ],
               },
             }

diff --git a/packages/osd-ui-framework/package.json b/packages/osd-ui-framework/package.json
@@ -23,7 +23,7 @@
     "enzyme-adapter-react-16": "^1.9.1"
   },
   "devDependencies": {
-    "@elastic/eui": "npm:@opensearch-project/oui@1.1.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
     "@osd/babel-preset": "1.0.0",
     "@osd/optimizer": "1.0.0",
     "grunt": "^1.5.2",

diff --git a/packages/osd-ui-shared-deps/package.json b/packages/osd-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "31.1.0",
-    "@elastic/eui": "npm:@opensearch-project/oui@1.1.2",
+    "@elastic/eui": "npm:@opensearch-project/oui@1.3.0-alpha.2",
     "@elastic/numeral": "^2.5.0",
     "@osd/i18n": "1.0.0",
     "@osd/monaco": "1.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/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
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"