diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a9eb35ce529..27a4037719f2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,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)) diff --git a/package.json b/package.json index ec99d6b134a6..decb8f5f37b5 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-optimizer/src/common/theme_tags.test.ts b/packages/osd-optimizer/src/common/theme_tags.test.ts index 2b34dee08628..791734e9cfb6 100644 --- 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 index 3e62228ddaf9..8170c6bcab69 100644 --- 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/integration_tests/__snapshots__/basic_optimization.test.ts.snap b/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap index 63b7e44fea07..a13a8178b6ca 100644 --- a/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap +++ b/packages/osd-optimizer/src/integration_tests/__snapshots__/basic_optimization.test.ts.snap @@ -69,6 +69,8 @@ OptimizerConfig { "themeTags": Array [ "v7dark", "v7light", + "v8dark", + "v8light", ], "watch": false, } diff --git a/packages/osd-optimizer/src/integration_tests/basic_optimization.test.ts b/packages/osd-optimizer/src/integration_tests/basic_optimization.test.ts index 8c1b1e820e56..9b32e4efe6b0 100644 --- a/packages/osd-optimizer/src/integration_tests/basic_optimization.test.ts +++ b/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 () => { "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/plugins/bar/public/lib.ts", "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v7dark.scss", "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v7light.scss", + "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8dark.scss", + "/packages/osd-optimizer/src/__fixtures__/__tmp__/mock_repo/src/core/public/core_app/styles/_globals_v8light.scss", "/packages/osd-optimizer/target/worker/entry_point_creator.js", "/packages/osd-ui-shared-deps/public_path_module_creator.js", ] diff --git a/packages/osd-optimizer/src/optimizer/cache_keys.test.ts b/packages/osd-optimizer/src/optimizer/cache_keys.test.ts index b01228a09574..5ca5c76a566f 100644 --- 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 index f1e68897b2e1..6d2cd0ac6f1b 100644 --- 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 index 76ae3e97d185..b4ddd5b7a63a 100644 --- 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 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/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index f1ed5f38f073..806e99821270 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3650,16 +3650,24 @@ exports[`Header handles visibility and lock changes 1`] = ` className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate" data-test-subj="breadcrumbs" > - - +
- test - - + + + test + + +
+ @@ -8893,16 +8901,24 @@ exports[`Header renders condensed header 1`] = ` className="euiBreadcrumbs euiHeaderBreadcrumbs osdHeaderBreadcrumbs euiBreadcrumbs--truncate" data-test-subj="breadcrumbs" > - - +
- test - - + + + test + + +
+ 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/functional/services/combo_box.ts b/test/functional/services/combo_box.ts index 8e1f9fd07a1c..3cd2fb250bf6 100644 --- a/test/functional/services/combo_box.ts +++ b/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'); } diff --git a/test/functional/services/common/find.ts b/test/functional/services/common/find.ts index ee28fa02cc52..c80401ed0517 100644 --- a/test/functional/services/common/find.ts +++ b/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 { 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(); diff --git a/test/functional/services/common/test_subjects.ts b/test/functional/services/common/test_subjects.ts index 2c96b61c66da..242a37151500 100644 --- a/test/functional/services/common/test_subjects.ts +++ b/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 { + public async click( + selector: string, + timeout: number = FIND_TIME, + parentSelector?: string + ): Promise { 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 { 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 2403202a1433..93f11b3f56b7 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"