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

CHANGELOG.md

@@ -31,6 +31,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - 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))
 - Add `color-scheme` to the root styling ([#4477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4477))
+- 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))
 - Enable plugins to augment visualizations with additional data and context ([#4361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4361))
 - Dashboard De-Angularization ([#4502](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4502))

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",

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",
     ]
   `);
 });

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 {

packages/osd-optimizer/src/integration_tests/basic_optimization.test.ts

@@ -176,7 +176,7 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
   bar.cache.refresh();
   expect(bar.cache.getModuleCount()).toBe(
     // code + styles + style/css-loader runtimes + public path updater
-    17
+    25
   );
 
   expect(bar.cache.getReferencedFiles()?.map(absolutePathSerializer.serialize).sort())
@@ -193,6 +193,8 @@ it('builds expected bundles, saves bundle counts to metadata', async () => {
       "<absolute path>/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/lib.ts",
       "<absolute path>/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v7dark.scss",
       "<absolute path>/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v7light.scss",
+      "<absolute path>/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8dark.scss",
+      "<absolute path>/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8light.scss",
       "<absolute path>/packages/osd-optimizer/target/worker/entry_point_creator.js",
       "<absolute path>/packages/osd-ui-shared-deps/public_path_module_creator.js",
     ]

packages/osd-optimizer/src/optimizer/cache_keys.test.ts

@@ -101,6 +101,8 @@ describe('getOptimizerCacheKey()', () => {
                 "themeTags": Array [
                   "v7dark",
                   "v7light",
+                  "v8dark",
+                  "v8light",
                 ],
               },
             }

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",

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",

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');
 }
 
 /**

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,

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";

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";

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)]"
 `);
     });
   });

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)')]),
     },
   };
 };

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 () => {

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' })),

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;

test/functional/services/combo_box.ts

@@ -188,9 +188,12 @@ export function ComboBoxProvider({ getService, getPageObjects }: FtrProviderCont
       log.debug(`comboBox.getOptionsList, comboBoxSelector: ${comboBoxSelector}`);
       const comboBox = await testSubjects.find(comboBoxSelector);
       const menu = await retry.try(async () => {
-        await testSubjects.click(comboBoxSelector);
+        let isOptionsListOpen = await testSubjects.exists('~comboBoxOptionsList');
+        if (!isOptionsListOpen) {
+          await testSubjects.click('comboBoxToggleListButton', undefined, comboBoxSelector);
+        }
         await this.waitForOptionsListLoading(comboBox);
-        const isOptionsListOpen = await testSubjects.exists('~comboBoxOptionsList');
+        isOptionsListOpen = await testSubjects.exists('~comboBoxOptionsList');
         if (!isOptionsListOpen) {
           throw new Error('Combo box options list did not open on click');
         }

test/functional/services/common/find.ts

@@ -435,11 +435,19 @@ export async function FindProvider({ getService }: FtrProviderContext) {
 
     public async clickByCssSelector(
       selector: string,
-      timeout: number = defaultFindTimeout
+      timeout: number = defaultFindTimeout,
+      parentSelector?: string
     ): Promise<void> {
       log.debug(`Find.clickByCssSelector('${selector}') with timeout=${timeout}`);
       await retry.try(async () => {
-        const element = await this.byCssSelector(selector, timeout);
+        let element;
+        if (parentSelector) {
+          const parent = await this.byCssSelector(parentSelector, timeout);
+          const child = await parent._webElement.findElement(By.css(selector));
+          element = wrap(child, By.css(selector));
+        } else {
+          element = await this.byCssSelector(selector, timeout);
+        }
         if (element) {
           // await element.moveMouseTo();
           await element.click();

test/functional/services/common/test_subjects.ts

@@ -122,9 +122,17 @@ export function TestSubjectsProvider({ getService }: FtrProviderContext) {
       await find.clickByCssSelectorWhenNotDisabled(testSubjSelector(selector), { timeout });
     }
 
-    public async click(selector: string, timeout: number = FIND_TIME): Promise<void> {
+    public async click(
+      selector: string,
+      timeout: number = FIND_TIME,
+      parentSelector?: string
+    ): Promise<void> {
       log.debug(`TestSubjects.click(${selector})`);
-      await find.clickByCssSelector(testSubjSelector(selector), timeout);
+      await find.clickByCssSelector(
+        testSubjSelector(selector),
+        timeout,
+        parentSelector && testSubjSelector(parentSelector)
+      );
     }
 
     public async doubleClick(selector: string, timeout: number = FIND_TIME): Promise<void> {

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",

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"
   }

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"

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"