=> {
name: i18n.translate('core.ui_settings.params.themeVersionTitle', {
defaultMessage: 'Theme version',
}),
- value: 'Next (preview)',
+ value: themeVersionLabelMap[DEFAULT_THEME_VERSION],
type: 'select',
- options: ['v7', 'Next (preview)'],
+ options: Object.values(themeVersionLabelMap),
description: i18n.translate('core.ui_settings.params.themeVersionText', {
defaultMessage: `Switch between the themes used for the current and next versions of OpenSearch Dashboards. A page refresh is required for the setting to be applied.
{linkText}
`,
values: {
@@ -62,7 +65,11 @@ export const getThemeSettings = (): Record => {
}),
requiresPageReload: true,
category: ['appearance'],
- schema: schema.oneOf([schema.literal('v7'), schema.literal('Next (preview)')]),
+ schema: schema.oneOf(
+ Object.keys(themeVersionLabelMap).map((v) => schema.literal(themeVersionLabelMap[v])) as [
+ Type
+ ]
+ ),
},
};
};
diff --git a/src/core/server/ui_settings/types.ts b/src/core/server/ui_settings/types.ts
index 60510882755a..399349f33f9e 100644
--- a/src/core/server/ui_settings/types.ts
+++ b/src/core/server/ui_settings/types.ts
@@ -59,6 +59,10 @@ export interface IUiSettingsClient {
* Returns the overridden uiSettings value if one exists, or the registered default if one exists {@link UiSettingsParams}
*/
getOverrideOrDefault: (key: string) => unknown;
+ /**
+ * Returns the registered default if one exists {@link UiSettingsParams}
+ */
+ getDefault: (key: string) => unknown;
/**
* Retrieves uiSettings values set by the user with fallbacks to default values if not specified.
*/
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 f78d77e61848..e30ff651e91b 100644
--- a/src/core/server/ui_settings/ui_settings_client.test.ts
+++ b/src/core/server/ui_settings/ui_settings_client.test.ts
@@ -601,6 +601,25 @@ describe('ui settings', () => {
});
});
+ describe('#getDefault()', () => {
+ it(`returns the promised value for a key`, async () => {
+ const opensearchDocSource = {};
+ const defaults = { dateFormat: { value: chance.word() } };
+ const { uiSettings } = setup({ opensearchDocSource, defaults });
+ const result = uiSettings.getDefault('dateFormat');
+
+ expect(result).toBe(defaults.dateFormat.value);
+ });
+
+ it(`returns undefined for undefined defaults`, async () => {
+ const opensearchDocSource = { custom: 'value' };
+ const { uiSettings } = setup({ opensearchDocSource });
+ const result = uiSettings.getDefault('custom');
+
+ expect(result).toBe(undefined);
+ });
+ });
+
describe('#get()', () => {
it('pulls user configuration from OpenSearch', async () => {
const opensearchDocSource = {};
diff --git a/src/core/server/ui_settings/ui_settings_client.ts b/src/core/server/ui_settings/ui_settings_client.ts
index 066efa34cafd..8744cb3b80da 100644
--- a/src/core/server/ui_settings/ui_settings_client.ts
+++ b/src/core/server/ui_settings/ui_settings_client.ts
@@ -95,6 +95,10 @@ export class UiSettingsClient implements IUiSettingsClient {
return this.isOverridden(key) ? this.overrides[key].value : this.defaults[key]?.value;
}
+ getDefault(key: string): unknown {
+ return this.defaults[key]?.value;
+ }
+
async get(key: string): Promise {
const all = await this.getAll();
return all[key];
diff --git a/src/core/server/ui_settings/ui_settings_config.ts b/src/core/server/ui_settings/ui_settings_config.ts
index 6924640ca1e5..c539e50cf908 100644
--- a/src/core/server/ui_settings/ui_settings_config.ts
+++ b/src/core/server/ui_settings/ui_settings_config.ts
@@ -37,6 +37,8 @@ const deprecations: ConfigDeprecationProvider = ({ unused, renameFromRoot }) =>
renameFromRoot('server.defaultRoute', 'uiSettings.overrides.defaultRoute'),
];
+export const DEFAULT_THEME_VERSION = 'v8';
+
/* There are 4 levels of uiSettings:
* 1) defaults hardcoded in code
* 2) defaults provided in the opensearch_dashboards.yml
@@ -56,7 +58,7 @@ const configSchema = schema.object({
overrides: schema.object({}, { unknowns: 'allow' }),
defaults: schema.object({
'theme:darkMode': schema.maybe(schema.boolean({ defaultValue: false })),
- 'theme:version': schema.maybe(schema.string({ defaultValue: 'v8' })),
+ 'theme:version': schema.maybe(schema.string({ defaultValue: DEFAULT_THEME_VERSION })),
}),
});
diff --git a/src/core/server/ui_settings/ui_settings_service.mock.ts b/src/core/server/ui_settings/ui_settings_service.mock.ts
index bb6e9ec64bd5..df34cbe1bf16 100644
--- a/src/core/server/ui_settings/ui_settings_service.mock.ts
+++ b/src/core/server/ui_settings/ui_settings_service.mock.ts
@@ -40,6 +40,7 @@ const createClientMock = () => {
const mocked: jest.Mocked = {
getRegistered: jest.fn(),
getOverrideOrDefault: jest.fn(),
+ getDefault: jest.fn(),
get: jest.fn(),
getAll: jest.fn(),
getUserProvided: jest.fn(),
diff --git a/src/legacy/ui/ui_render/bootstrap/startup.js.hbs b/src/legacy/ui/ui_render/bootstrap/startup.js.hbs
index 2a7e6f28a90b..9534a808c09f 100644
--- a/src/legacy/ui/ui_render/bootstrap/startup.js.hbs
+++ b/src/legacy/ui/ui_render/bootstrap/startup.js.hbs
@@ -30,14 +30,16 @@ if ({{configEnableUserControl}}) {
rawThemeVersion = '{{configThemeVersion}}';
}
+var themeSources = {{THEME_SOURCES}};
+var themeVersionValueMap = {{THEME_VERSION_VALUE_MAP}};
+
// TODO: source of truth for mapping should be elsewhere
var darkMode = rawDarkMode ? 'dark' : 'light';
-var themeVersion = rawThemeVersion === 'v7' ? 'v7' : 'v8';
+var resolvedThemeVersion = themeVersionValueMap[rawThemeVersion];
+var themeVersion = themeSources[resolvedThemeVersion] ? resolvedThemeVersion : '{{defaultThemeVersion}}';
window.__osdThemeTag__ = themeVersion + darkMode;
-var themeSources = {{THEME_SOURCES}};
-
var themeDefinition = themeSources[themeVersion][darkMode];
var stylesheetTarget = document.querySelector('head meta[name="add-styles-here"]');
diff --git a/src/legacy/ui/ui_render/ui_render_mixin.js b/src/legacy/ui/ui_render/ui_render_mixin.js
index 476c465edb52..24837ba4a085 100644
--- a/src/legacy/ui/ui_render/ui_render_mixin.js
+++ b/src/legacy/ui/ui_render/ui_render_mixin.js
@@ -96,14 +96,19 @@ export function uiRenderMixin(osdServer, server, config) {
!authEnabled || request.auth.isAuthenticated
? await uiSettings.get('theme:darkMode')
: uiSettings.getOverrideOrDefault('theme:darkMode');
+ const themeMode = darkMode ? 'dark' : 'light';
- const themeVersion =
+ const configuredThemeVersion =
!authEnabled || request.auth.isAuthenticated
? await uiSettings.get('theme:version')
: uiSettings.getOverrideOrDefault('theme:version');
+ // Validate themeVersion is in valid format
+ const themeVersion =
+ UiSharedDeps.themeVersionValueMap[configuredThemeVersion] ||
+ uiSettings.getDefault('theme:version');
// Next (preview) label is mapped to v8 here
- const themeTag = `${themeVersion === 'v7' ? 'v7' : 'v8'}${darkMode ? 'dark' : 'light'}`;
+ const themeTag = `${themeVersion}${themeMode}`;
const buildHash = server.newPlatform.env.packageInfo.buildNum;
const basePath = config.get('server.basePath');
@@ -112,25 +117,9 @@ export function uiRenderMixin(osdServer, server, config) {
const styleSheetPaths = [
`${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.baseCssDistFilename}`,
- ...(darkMode
- ? [
- themeVersion === 'v7'
- ? `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.darkCssDistFilename}`
- : `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.darkV8CssDistFilename}`,
- themeVersion === 'v7'
- ? `${basePath}/node_modules/@osd/ui-framework/dist/kui_dark.css`
- : `${basePath}/node_modules/@osd/ui-framework/dist/kui_next_dark.css`,
- `${basePath}/ui/legacy_dark_theme.css`,
- ]
- : [
- themeVersion === 'v7'
- ? `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.lightCssDistFilename}`
- : `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.lightV8CssDistFilename}`,
- themeVersion === 'v7'
- ? `${basePath}/node_modules/@osd/ui-framework/dist/kui_light.css`
- : `${basePath}/node_modules/@osd/ui-framework/dist/kui_next_light.css`,
- `${basePath}/ui/legacy_light_theme.css`,
- ]),
+ `${regularBundlePath}/osd-ui-shared-deps/${UiSharedDeps.themeCssDistFilenames[themeVersion][themeMode]}`,
+ `${basePath}/node_modules/@osd/ui-framework/dist/${UiSharedDeps.kuiCssDistFilenames[themeVersion][themeMode]}`,
+ `${basePath}/ui/legacy_${themeMode}_theme.css`,
];
const kpUiPlugins = osdServer.newPlatform.__internals.uiPlugins;
diff --git a/src/plugins/advanced_settings/public/header_user_theme_menu.tsx b/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
index fc297aaa74bc..b1d6f09dafff 100644
--- a/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
+++ b/src/plugins/advanced_settings/public/header_user_theme_menu.tsx
@@ -21,23 +21,17 @@ import {
EuiButtonIcon,
} from '@elastic/eui';
import { CoreStart } from 'opensearch-dashboards/public';
+import { themeVersionLabelMap, themeVersionValueMap } from '@osd/ui-shared-deps/theme_config';
import { useOpenSearchDashboards, useUiSetting$ } from '../../opensearch_dashboards_react/public';
export const HeaderUserThemeMenu = () => {
const {
services: { uiSettings },
} = useOpenSearchDashboards();
- // TODO: move to central location?
- const themeOptions = [
- {
- value: 'v7',
- text: 'v7',
- },
- {
- value: 'next',
- text: 'Next (preview)',
- },
- ];
+ const themeOptions = Object.keys(themeVersionLabelMap).map((v) => ({
+ value: v,
+ text: themeVersionLabelMap[v],
+ }));
const screenModeOptions = [
{
value: 'light',
@@ -52,13 +46,18 @@ export const HeaderUserThemeMenu = () => {
text: 'Use browser settings',
},
];
+ const defaultTheme = uiSettings.getDefault('theme:version');
+ const defaultScreenMode = uiSettings.getDefault('theme:darkMode');
const prefersAutomatic =
(window.localStorage.getItem('useBrowserColorScheme') && window.matchMedia) || false;
const [darkMode, setDarkMode] = useUiSetting$('theme:darkMode');
const [themeVersion, setThemeVersion] = useUiSetting$('theme:version');
const [isPopoverOpen, setPopover] = useState(false);
// TODO: improve naming?
- const [theme, setTheme] = useState(themeOptions.find((t) => t.text === themeVersion)?.value);
+ const [theme, setTheme] = useState(
+ themeOptions.find((t) => t.value === themeVersionValueMap[themeVersion])?.value ||
+ themeVersionValueMap[defaultTheme]
+ );
const [screenMode, setScreenMode] = useState(
prefersAutomatic
? screenModeOptions[2].value
@@ -66,9 +65,6 @@ export const HeaderUserThemeMenu = () => {
? screenModeOptions[1].value
: screenModeOptions[0].value
);
- const allSettings = uiSettings.getAll();
- const defaultTheme = allSettings['theme:version'].value;
- const defaultScreenMode = allSettings['theme:darkMode'].value;
const legacyAppearance = !uiSettings.get('home:useNewHomePage');
@@ -85,7 +81,7 @@ export const HeaderUserThemeMenu = () => {
};
const onAppearanceSubmit = async (e: SyntheticEvent) => {
- const actions = [setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? '')];
+ const actions = [setThemeVersion(themeOptions.find((t) => theme === t.value)?.value ?? '')];
if (screenMode === 'automatic') {
const browserMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
diff --git a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
index 62bb2f9e90fc..6c8cbf7bd5aa 100644
--- a/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
@@ -929,6 +929,7 @@ exports[`Dashboard top nav render in embed mode 1`] = `
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -1985,6 +1986,7 @@ exports[`Dashboard top nav render in embed mode, and force hide filter bar 1`] =
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -3041,6 +3043,7 @@ exports[`Dashboard top nav render in embed mode, components can be forced show b
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -4097,6 +4100,7 @@ exports[`Dashboard top nav render in full screen mode with appended URL param bu
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -5153,6 +5157,7 @@ exports[`Dashboard top nav render in full screen mode, no componenets should be
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -6209,6 +6214,7 @@ exports[`Dashboard top nav render with all components 1`] = `
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
diff --git a/src/plugins/dashboard/public/application/embeddable/empty/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/embeddable/empty/__snapshots__/dashboard_empty_screen.test.tsx.snap
index 3e910f5dc4f9..9889462a0472 100644
--- a/src/plugins/dashboard/public/application/embeddable/empty/__snapshots__/dashboard_empty_screen.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/embeddable/empty/__snapshots__/dashboard_empty_screen.test.tsx.snap
@@ -173,6 +173,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -520,6 +521,7 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -906,6 +908,7 @@ exports[`DashboardEmptyScreen renders correctly without visualize paragraph 1`]
},
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
diff --git a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
index 00dd4ef65d32..41755d0462a8 100644
--- a/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
+++ b/src/plugins/data/public/ui/query_editor/__snapshots__/language_selector.test.tsx.snap
@@ -465,6 +465,7 @@ exports[`LanguageSelector should select DQL if language is kuery 1`] = `
"get": [MockFunction],
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],
@@ -1032,6 +1033,7 @@ exports[`LanguageSelector should select lucene if language is lucene 1`] = `
"get": [MockFunction],
"get$": [MockFunction],
"getAll": [MockFunction],
+ "getDefault": [MockFunction],
"getSaved$": [MockFunction],
"getUpdate$": [MockFunction],
"getUpdateErrors$": [MockFunction],