From e3d494fdf7445025fbe6141e74a59e2262461029 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Mon, 2 Oct 2023 14:53:56 +0000 Subject: [PATCH 01/26] init ui Signed-off-by: Josh Romero --- src/core/public/chrome/ui/header/header.tsx | 5 +++++ .../public/chrome/ui/header/header_user_menu.tsx | 12 ++++++++++++ 2 files changed, 17 insertions(+) create mode 100644 src/core/public/chrome/ui/header/header_user_menu.tsx diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index acc7c6869145..f325239036f0 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -60,6 +60,7 @@ import { CollapsibleNav } from './collapsible_nav'; import { HeaderBadge } from './header_badge'; import { HeaderBreadcrumbs } from './header_breadcrumbs'; import { HeaderHelpMenu } from './header_help_menu'; +import { HeaderUserMenu } from './header_user_menu'; import { HomeLoader } from './home_loader'; import { HeaderNavControls } from './header_nav_controls'; import { HeaderActionMenu } from './header_action_menu'; @@ -231,6 +232,10 @@ export function Header({ + + + + { + return ; +}; From b138518d4c03e89839e0149ede5a6e5043cac610 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Tue, 10 Oct 2023 19:49:00 +0000 Subject: [PATCH 02/26] Mock out new user menu panels Signed-off-by: Josh Romero --- .../chrome/ui/header/header_user_menu.tsx | 445 +++++++++++++++++- 1 file changed, 442 insertions(+), 3 deletions(-) diff --git a/src/core/public/chrome/ui/header/header_user_menu.tsx b/src/core/public/chrome/ui/header/header_user_menu.tsx index ae86aeb08076..fbf2420080f5 100644 --- a/src/core/public/chrome/ui/header/header_user_menu.tsx +++ b/src/core/public/chrome/ui/header/header_user_menu.tsx @@ -3,10 +3,449 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React from 'react'; +import React, { useState } from 'react'; -import { EuiAvatar } from '@elastic/eui'; +import { + EuiAvatar, + EuiButton, + EuiButtonEmpty, + EuiCallOut, + EuiComboBox, + EuiContextMenu, + EuiContextMenuPanelDescriptor, + EuiFieldPassword, + EuiFlexGroup, + EuiFlexItem, + EuiFormRow, + EuiHorizontalRule, + EuiIcon, + EuiLink, + EuiPopover, + EuiRadioGroup, + EuiSelect, + EuiSpacer, + EuiSwitch, + EuiText, + EuiTextAlign, + EuiTitle, +} from '@elastic/eui'; + +export interface FormRowDeps { + headerText: string; + optional?: boolean; + headerSubText?: string; + helpLink?: string; + helpText?: string; +} +export interface FormRowWithChildComponentDeps extends FormRowDeps { + isInvalid?: boolean; + error?: string[]; + children: React.ReactElement; +} + +export function ExternalLink(props: { href: string }) { + return ( + + {'Learn more'} + + ); +} + +export function FormRow(props: FormRowWithChildComponentDeps) { + return ( + + + {props.headerText} + {props.optional && ' - optional'} + + + {props.headerSubText} + {props.helpLink && ( + <> + {' '} + + + )} + + + } + helpText={props.helpText} + isInvalid={props.isInvalid} + error={props.error} + > + {props.children} + + ); +} export const HeaderUserMenu = () => { - return ; + const [isPopoverOpen, setPopover] = useState(false); + + const onAvatarClick = () => { + setPopover(!isPopoverOpen); + }; + + const onThemeChange = () => { + console.log('change theme'); + }; + + const onScreenModeChange = () => { + console.log('change screen mode'); + }; + + const onTenantSwitchRadioChange = (id: string) => { + console.log(`change tenant radio to ${id}`); + }; + + const onCustomTenantChange = () => { + console.log('change custom tenant'); + }; + + const handleTenantConfirmation = () => { + console.log('change tenant submit'); + }; + + const onChangeCurrentPassword = () => { + console.log('change current password'); + }; + + const onChangeNewPassword = () => { + console.log('change new password'); + }; + + const onChangeNewPasswordReenter = () => { + console.log('change new password reenter'); + }; + + const closePopover = () => { + setPopover(false); + }; + const avatar = ( + + + + ); + + const roles = ['own_index', 'kibana_user', 'all_access', 'readall']; + const backendRoles = ['admin', 'kibanauser', 'readall']; + + const customTenantOptions = [ + { + label: 'Custom Tenant 1', + value: 'tenant1', + }, + { + label: 'Custom Tenant 2', + value: 'tenant2', + }, + ]; + + const tenantSwitchRadios = [ + { + id: 'GLOBAL_TENANT_RADIO_ID', + label: ( + <> + Global + + The global tenant is shared between every OpenSearch Dashboards user. + + + + ), + }, + { + id: 'PRIVATE_TENANT_RADIO_ID', + label: ( + <> + Private + + The private tenant is exclusive to each user and can't be shared. You might use the + private tenant for exploratory work. + + + + ), + }, + { + id: 'CUSTOM_TENANT_RADIO_ID', + label: <>Choose from custom, + disabled: customTenantOptions.length === 0, + }, + ]; + + const panels: EuiContextMenuPanelDescriptor[] = [ + { + id: 0, + title: 'Anonymous', + items: [ + { + name: 'Appearance', + icon: 'color', + panel: 2, + }, + { + name: 'View roles and identities', + icon: 'users', + panel: 3, + }, + { + name: 'Switch tenant', + icon: 'inputOutput', + panel: 4, + }, + { + name: 'Reset password', + icon: 'lock', + panel: 5, + }, + { + name: Log out, + icon: , + onClick: () => { + closePopover(); + }, + }, + ], + }, + { + id: 1, + initialFocusedItemIndex: 1, + title: 'Nest panels', + items: [ + { + name: 'PDF reports', + icon: 'user', + onClick: () => { + closePopover(); + }, + }, + { + name: 'Embed code', + icon: 'user', + panel: 6, + }, + { + name: 'Permalinks', + icon: 'user', + onClick: () => { + closePopover(); + }, + }, + ], + }, + { + id: 2, + initialFocusedItemIndex: 0, + title: 'Appearance', + content: ( +
+ + These settings apply to only this user account. Tochange settings for the entire + application, visit Advanced Settings or contact your administrator. Learn more + + + + + + + + + + + + Theme feedback + + + + + Apply + + + +
+ ), + }, + { + id: 3, + initialFocusedItemIndex: 0, + title: 'View roles and identities', + content: ( +
+ +

Roles ({roles.length})

+ + + Roles you are currently mapped to by your administrator. + + + {roles.map((item) => ( + <> + + {item} + + + ))} + + +

Backend roles ({backendRoles.length})

+ + + Backend roles you are currently mapped to by your administrator. + + + {backendRoles.map((item) => ( + <> + + {item} + + + ))} +
+ ), + }, + { + id: 4, + initialFocusedItemIndex: 0, + title: 'Switch tenant', + content: ( +
+ +

Select your tenant

+ + + + Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. + You can switch your tenant anytime by clicking the user avatar on top right. + + + + + onTenantSwitchRadioChange(radioId)} + name="tenantSwitchRadios" + /> + + {/* This combo box has to be outside the radio group. + In current EUI if put into the child of radio option, clicking in the combo box will not + show the drop down list since the radio option consumes the click event. */} + + + + + + Confirm + + +
+ ), + }, + { + id: 5, + initialFocusedItemIndex: 0, + title: 'Reset password', + content: ( +
+ + + + + + + + + + + + + + + + + Cancel + + + + + Reset + + + +
+ ), + }, + ]; + + return ( + + + + ); }; From b0af1315f9f41a9f21edf7af12bdab5f3fcd2e2f Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Fri, 13 Oct 2023 22:31:18 +0000 Subject: [PATCH 03/26] hook up to uisettings Signed-off-by: Josh Romero --- package.json | 1 - src/core/public/chrome/ui/header/header.tsx | 4 +- .../chrome/ui/header/header_user_menu.tsx | 97 ++-- .../advanced_settings/public/account-app.tsx | 30 ++ .../public/header_user_menu.tsx | 467 ++++++++++++++++++ .../advanced_settings/public/plugin.ts | 7 +- yarn.lock | 5 - 7 files changed, 555 insertions(+), 56 deletions(-) create mode 100644 src/plugins/advanced_settings/public/account-app.tsx create mode 100644 src/plugins/advanced_settings/public/header_user_menu.tsx diff --git a/package.json b/package.json index 1e66bbfbd290..e3bef56384c2 100644 --- a/package.json +++ b/package.json @@ -462,7 +462,6 @@ "tough-cookie": "^4.1.3", "tree-kill": "^1.2.2", "typescript": "4.0.2", - "ui-select": "0.19.8", "vega": "^5.23.0", "vega-interpreter": "npm:@amoo-miki/vega-forced-csp-compliant-interpreter@1.0.6", "vega-lite": "^5.6.0", diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index f325239036f0..99ad13224af3 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -232,9 +232,9 @@ export function Header({ - + {/* - + */} { + const themeOptions = [ + { + value: 'v7', + text: 'v7', + }, + { + value: 'next', + text: 'Next (preview)', + }, + ]; + const screenModeOptions = [ + { + value: 'light', + text: 'Light mode', + }, + { + value: 'dark', + text: 'Dark mode', + }, + { + value: 'automatic', + text: 'Use browser settings', + }, + ]; const [isPopoverOpen, setPopover] = useState(false); + const [theme, setTheme] = useState(themeOptions[1].value); + const [screenMode, setScreenMode] = useState(screenModeOptions[1].value); const onAvatarClick = () => { setPopover(!isPopoverOpen); }; - const onThemeChange = () => { - console.log('change theme'); + const onThemeChange = (e: ChangeEvent) => { + console.log(`change theme to ${e.target.value}`); + setTheme(e.target.value); }; - const onScreenModeChange = () => { - console.log('change screen mode'); + const onScreenModeChange = (e: ChangeEvent) => { + console.log(`change screen mode to ${e.target.value}`); + setScreenMode(e.target.value); + }; + + const onAppearanceSubmit = (e: SyntheticEvent) => { + console.log(e); + const mainStyleLink = document.querySelector('link[href*="osd-ui-shared-deps.v8.light"]'); + mainStyleLink?.parentNode?.removeChild(mainStyleLink); }; const onTenantSwitchRadioChange = (id: string) => { @@ -253,38 +286,12 @@ export const HeaderUserMenu = () => { - + @@ -296,7 +303,9 @@ export const HeaderUserMenu = () => { - Apply + + Apply + @@ -317,11 +326,9 @@ export const HeaderUserMenu = () => { {roles.map((item) => ( - <> - - {item} - - + + {item} + ))} @@ -332,11 +339,9 @@ export const HeaderUserMenu = () => { {backendRoles.map((item) => ( - <> - - {item} - - + + {item} + ))} ), diff --git a/src/plugins/advanced_settings/public/account-app.tsx b/src/plugins/advanced_settings/public/account-app.tsx new file mode 100644 index 000000000000..73719c6d4178 --- /dev/null +++ b/src/plugins/advanced_settings/public/account-app.tsx @@ -0,0 +1,30 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import ReactDOM from 'react-dom'; +import { CoreStart } from 'opensearch-dashboards/public'; +import { HeaderUserMenu } from './header_user_menu'; +import { OpenSearchDashboardsContextProvider } from '../../opensearch_dashboards_react/public'; + +export async function setupTopNavButton(coreStart: CoreStart) { + coreStart.chrome.navControls.registerRight({ + // Pin to rightmost, since newsfeed plugin is using 1000, here needs a number > 1000 + order: 2000, + mount: (element: HTMLElement) => { + ReactDOM.render( + + + , + element + ); + return () => ReactDOM.unmountComponentAtNode(element); + }, + }); +} diff --git a/src/plugins/advanced_settings/public/header_user_menu.tsx b/src/plugins/advanced_settings/public/header_user_menu.tsx new file mode 100644 index 000000000000..b1feec692b80 --- /dev/null +++ b/src/plugins/advanced_settings/public/header_user_menu.tsx @@ -0,0 +1,467 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { ChangeEvent, SyntheticEvent, useState } from 'react'; + +import { + EuiAvatar, + EuiButton, + EuiButtonEmpty, + EuiCallOut, + EuiComboBox, + EuiContextMenu, + EuiContextMenuPanelDescriptor, + EuiFieldPassword, + EuiFlexGroup, + EuiFlexItem, + EuiFormRow, + EuiHorizontalRule, + EuiIcon, + EuiLink, + EuiPopover, + EuiRadioGroup, + EuiSelect, + EuiSpacer, + EuiText, + EuiTextAlign, + EuiTitle, +} from '@elastic/eui'; +import { useUiSetting$ } from '../../opensearch_dashboards_react/public'; + +export interface FormRowDeps { + headerText: string; + optional?: boolean; + headerSubText?: string; + helpLink?: string; + helpText?: string; +} +export interface FormRowWithChildComponentDeps extends FormRowDeps { + isInvalid?: boolean; + error?: string[]; + children: React.ReactElement; +} + +export function ExternalLink(props: { href: string }) { + return ( + + {'Learn more'} + + ); +} + +export function FormRow(props: FormRowWithChildComponentDeps) { + return ( + + + {props.headerText} + {props.optional && ' - optional'} + + + {props.headerSubText} + {props.helpLink && ( + <> + {' '} + + + )} + + + } + helpText={props.helpText} + isInvalid={props.isInvalid} + error={props.error} + > + {props.children} + + ); +} + +export const HeaderUserMenu = () => { + const themeOptions = [ + { + value: 'v7', + text: 'v7', + }, + { + value: 'next', + text: 'Next (preview)', + }, + ]; + const screenModeOptions = [ + { + value: 'light', + text: 'Light mode', + }, + { + value: 'dark', + text: 'Dark mode', + }, + { + value: 'automatic', + text: 'Use browser settings', + }, + ]; + const [darkMode, setDarkMode] = useUiSetting$('theme:darkMode'); + const [themeVersion, setThemeVersion] = useUiSetting$('theme:version'); + const [isPopoverOpen, setPopover] = useState(false); + const [theme, setTheme] = useState(themeOptions.find((t) => t.text === themeVersion)?.value); + const [screenMode, setScreenMode] = useState( + darkMode ? screenModeOptions[1].value : screenModeOptions[0].value + ); + + console.log(themeVersion); + + const onAvatarClick = () => { + setPopover(!isPopoverOpen); + }; + + const onThemeChange = (e: ChangeEvent) => { + console.log(`change theme to ${e.target.value}`); + setTheme(e.target.value); + }; + + const onScreenModeChange = (e: ChangeEvent) => { + console.log(`change screen mode to ${e.target.value}`); + setScreenMode(e.target.value); + }; + + const onAppearanceSubmit = (e: SyntheticEvent) => { + console.log(e); + // const mainStyleLink = document.querySelector('link[href*="osd-ui-shared-deps.v8.light"]'); + // mainStyleLink?.parentNode?.removeChild(mainStyleLink); + + setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? ''); + setDarkMode(screenMode === 'dark'); + window.location.reload(); + }; + + const onTenantSwitchRadioChange = (id: string) => { + console.log(`change tenant radio to ${id}`); + }; + + const onCustomTenantChange = () => { + console.log('change custom tenant'); + }; + + const handleTenantConfirmation = () => { + console.log('change tenant submit'); + }; + + const onChangeCurrentPassword = () => { + console.log('change current password'); + }; + + const onChangeNewPassword = () => { + console.log('change new password'); + }; + + const onChangeNewPasswordReenter = () => { + console.log('change new password reenter'); + }; + + const closePopover = () => { + setPopover(false); + }; + const avatar = ( + + + + ); + + const roles = ['own_index', 'kibana_user', 'all_access', 'readall']; + const backendRoles = ['admin', 'kibanauser', 'readall']; + + const customTenantOptions = [ + { + label: 'Custom Tenant 1', + value: 'tenant1', + }, + { + label: 'Custom Tenant 2', + value: 'tenant2', + }, + ]; + + const tenantSwitchRadios = [ + { + id: 'GLOBAL_TENANT_RADIO_ID', + label: ( + <> + Global + + The global tenant is shared between every OpenSearch Dashboards user. + + + + ), + }, + { + id: 'PRIVATE_TENANT_RADIO_ID', + label: ( + <> + Private + + The private tenant is exclusive to each user and can't be shared. You might use the + private tenant for exploratory work. + + + + ), + }, + { + id: 'CUSTOM_TENANT_RADIO_ID', + label: <>Choose from custom, + disabled: customTenantOptions.length === 0, + }, + ]; + + const panels: EuiContextMenuPanelDescriptor[] = [ + { + id: 0, + title: 'Anonymous', + items: [ + { + name: 'Appearance', + icon: 'color', + panel: 2, + }, + { + name: 'View roles and identities', + icon: 'users', + panel: 3, + }, + { + name: 'Switch tenant', + icon: 'inputOutput', + panel: 4, + }, + { + name: 'Reset password', + icon: 'lock', + panel: 5, + }, + { + name: Log out, + icon: , + onClick: () => { + closePopover(); + }, + }, + ], + }, + { + id: 1, + initialFocusedItemIndex: 1, + title: 'Nest panels', + items: [ + { + name: 'PDF reports', + icon: 'user', + onClick: () => { + closePopover(); + }, + }, + { + name: 'Embed code', + icon: 'user', + panel: 6, + }, + { + name: 'Permalinks', + icon: 'user', + onClick: () => { + closePopover(); + }, + }, + ], + }, + { + id: 2, + initialFocusedItemIndex: 0, + title: 'Appearance', + content: ( +
+ + These settings apply to only this user account. Tochange settings for the entire + application, visit Advanced Settings or contact your administrator. Learn more + + + + + + + + + + + + Theme feedback + + + + + + Apply + + + + +
+ ), + }, + { + id: 3, + initialFocusedItemIndex: 0, + title: 'View roles and identities', + content: ( +
+ +

Roles ({roles.length})

+ + + Roles you are currently mapped to by your administrator. + + + {roles.map((item) => ( + + {item} + + ))} + + +

Backend roles ({backendRoles.length})

+ + + Backend roles you are currently mapped to by your administrator. + + + {backendRoles.map((item) => ( + + {item} + + ))} +
+ ), + }, + { + id: 4, + initialFocusedItemIndex: 0, + title: 'Switch tenant', + content: ( +
+ +

Select your tenant

+ + + + Tenants are useful for safely sharing your work with other OpenSearch Dashboards users. + You can switch your tenant anytime by clicking the user avatar on top right. + + + + + onTenantSwitchRadioChange(radioId)} + name="tenantSwitchRadios" + /> + + {/* This combo box has to be outside the radio group. + In current EUI if put into the child of radio option, clicking in the combo box will not + show the drop down list since the radio option consumes the click event. */} + + + + + + Confirm + + +
+ ), + }, + { + id: 5, + initialFocusedItemIndex: 0, + title: 'Reset password', + content: ( +
+ + + + + + + + + + + + + + + + + Cancel + + + + + Reset + + + +
+ ), + }, + ]; + + return ( + + + + ); +}; diff --git a/src/plugins/advanced_settings/public/plugin.ts b/src/plugins/advanced_settings/public/plugin.ts index 608bfc6a25e7..49084eedfdad 100644 --- a/src/plugins/advanced_settings/public/plugin.ts +++ b/src/plugins/advanced_settings/public/plugin.ts @@ -29,10 +29,11 @@ */ import { i18n } from '@osd/i18n'; -import { CoreSetup, Plugin } from 'opensearch-dashboards/public'; +import { CoreSetup, CoreStart, Plugin } from 'opensearch-dashboards/public'; import { FeatureCatalogueCategory } from '../../home/public'; import { ComponentRegistry } from './component_registry'; import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types'; +import { setupTopNavButton } from './account-app'; const component = new ComponentRegistry(); @@ -77,7 +78,9 @@ export class AdvancedSettingsPlugin }; } - public start() { + public start(core: CoreStart) { + setupTopNavButton(core); + return { component: component.start, }; diff --git a/yarn.lock b/yarn.lock index 544864b2e711..a1f9507288db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -17472,11 +17472,6 @@ uglify-js@^3.1.4: resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.15.4.tgz#fa95c257e88f85614915b906204b9623d4fa340d" integrity sha512-vMOPGDuvXecPs34V74qDKk4iJ/SN4vL3Ow/23ixafENYvtrNvtbcgUeugTcUGRGsOF/5fU8/NYSL5Hyb3l1OJA== -ui-select@0.19.8: - version "0.19.8" - resolved "https://registry.yarnpkg.com/ui-select/-/ui-select-0.19.8.tgz#74860848a7fd8bc494d9856d2f62776ea98637c1" - integrity sha1-dIYISKf9i8SU2YVtL2J3bqmGN8E= - unbox-primitive@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471" From 5586192cbf95f39f615a1dc1222eadf563849993 Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Sat, 14 Oct 2023 00:49:33 +0000 Subject: [PATCH 04/26] audit theming Signed-off-by: Josh Romero --- docs/theme.md | 36 +++++++++++++++++++ .../public/context_menu_examples/util.ts | 2 +- src/core/public/application/types.ts | 2 +- src/core/public/chrome/nav_links/nav_link.ts | 2 +- .../chrome/nav_links/to_nav_link.test.ts | 2 +- src/core/public/chrome/ui/header/header.tsx | 1 - src/core/types/app_category.ts | 2 +- .../public/header_user_menu.tsx | 8 +++-- .../actions/add_to_library_action.tsx | 2 +- .../actions/clone_panel_action.tsx | 2 +- .../actions/expand_panel_action.tsx | 2 +- .../actions/library_notification_action.tsx | 2 +- .../actions/replace_panel_action.tsx | 2 +- .../actions/unlink_from_library_action.tsx | 2 +- .../public/lib/actions/edit_panel_action.ts | 2 +- .../add_panel/add_panel_action.ts | 2 +- .../customize_title/customize_panel_action.ts | 2 +- .../panel_actions/inspect_panel_action.ts | 2 +- .../panel_actions/remove_panel_action.ts | 2 +- .../status_message/status_message.tsx | 2 +- src/plugins/management/public/types.ts | 2 +- .../public/utils/management_item.ts | 2 +- .../public/top_nav_menu/top_nav_menu_data.tsx | 2 +- .../ui_actions/public/actions/action.ts | 2 +- .../public/actions/action_internal.ts | 2 +- .../ui_actions/public/util/presentable.ts | 2 +- .../actions/plugin_resource_delete_action.ts | 2 +- .../actions/saved_object_delete_action.ts | 2 +- .../actions/view_events_option_action.tsx | 2 +- 29 files changed, 67 insertions(+), 30 deletions(-) create mode 100644 docs/theme.md diff --git a/docs/theme.md b/docs/theme.md new file mode 100644 index 000000000000..0f286e05450b --- /dev/null +++ b/docs/theme.md @@ -0,0 +1,36 @@ +# Theme loading + +## Loading + +`src/legacy/ui/ui_render/ui_render_mixin.js` via `src/legacy/ui/ui_render/bootstrap/template.js.hbs` and `src/legacy/ui/ui_render/bootstrap/app_bootstrap.js`. Aliased in `src/legacy/ui/ui_mixin.js`, called by `src/legacy/server/osd_server.js`. Called by `src/core/server/legacy/legacy_service.ts` via `src/core/server/server.ts` + +## Injected style tags + +1. `src/core/server/rendering/views/styles.tsx` - depends on dark/light mode and injects style tag in head +2. `src/core/server/rendering/views/fonts.tsx` - depends on theme version and injects font style tag in head +3. Monaco editor styles +4. Ace styles +5. Ace TM overrides +6. Ace error styles + + +## Styleshsheets + +1. KUI styles (e.g. `packages/osd-ui-framework/src/kui_dark.scss`, compiled by `packages/osd-ui-framework/Gruntfile.js`). Separate stylesheets for each theme version/dark mode combo (colors). +2. Monaco editor styles +3. Legacy styles (bootstrap) +4. OUI styles (compiled by `packages/osd-ui-shared-deps/webpack.config.js`) +5. Component styles + +## JSON/JS Vars + +1. Defined by `packages/osd-ui-shared-deps/theme.ts` + 1. Used by `src/plugins/charts/public/static/color_maps/color_maps.ts` to set vis colors + 2. Used by `src/plugins/discover/public/application/components/chart/histogram/histogram.tsx` to define Discover histogram Elastic Chart styling + 3. Used by `src/plugins/maps_legacy/public/map/opensearch_dashboards_map.js` and `src/plugins/region_map/public/choropleth_layer.js` for minor map UI styling (line color, empty shade) + 4. Used by `src/plugins/vis_type_vega/public/data_model/vega_parser.ts` for Vega/Vega-Lite theming +2. Used by `src/plugins/vis_type_vislib/public/vislib/components/tooltip/tooltip.js` for tooltip spacing +3. Used by `src/plugins/expressions/public/react_expression_renderer.tsx` to define padding options. +4. Used by `src/core/server/rendering/views/theme.ts` to inject values into `src/core/server/rendering/views/styles.tsx` +5. Used (incorrectly) to style a badge color in `src/plugins/index_pattern_management/public/components/create_button/create_button.tsx` +6. Used by `src/plugins/opensearch_dashboards_react/public/code_editor/editor_theme.ts` to create Monaco theme styles diff --git a/examples/ui_actions_explorer/public/context_menu_examples/util.ts b/examples/ui_actions_explorer/public/context_menu_examples/util.ts index 86a495c17268..a21cba8dc6e2 100644 --- a/examples/ui_actions_explorer/public/context_menu_examples/util.ts +++ b/examples/ui_actions_explorer/public/context_menu_examples/util.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { Action } from '../../../../src/plugins/ui_actions/public'; export const sampleAction = ( diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts index 7398aad65009..12af52567df2 100644 --- a/src/core/public/application/types.ts +++ b/src/core/public/application/types.ts @@ -32,7 +32,7 @@ import { Observable } from 'rxjs'; import { History } from 'history'; import { RecursiveReadonly } from '@osd/utility-types'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { MountPoint } from '../types'; import { Capabilities } from './capabilities'; import { ChromeStart } from '../chrome'; diff --git a/src/core/public/chrome/nav_links/nav_link.ts b/src/core/public/chrome/nav_links/nav_link.ts index cddd45234514..21d0ed120d46 100644 --- a/src/core/public/chrome/nav_links/nav_link.ts +++ b/src/core/public/chrome/nav_links/nav_link.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { pick } from '@osd/std'; import { AppCategory } from '../../'; diff --git a/src/core/public/chrome/nav_links/to_nav_link.test.ts b/src/core/public/chrome/nav_links/to_nav_link.test.ts index 1fe2532b7d8f..1fbe568a431b 100644 --- a/src/core/public/chrome/nav_links/to_nav_link.test.ts +++ b/src/core/public/chrome/nav_links/to_nav_link.test.ts @@ -32,7 +32,7 @@ import { PublicAppInfo, AppNavLinkStatus, AppStatus } from '../../application'; import { toNavLink } from './to_nav_link'; import { httpServiceMock } from '../../mocks'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; const app = (props: Partial = {}): PublicAppInfo => ({ id: 'some-id', diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index 99ad13224af3..3d8de060cd4c 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -60,7 +60,6 @@ import { CollapsibleNav } from './collapsible_nav'; import { HeaderBadge } from './header_badge'; import { HeaderBreadcrumbs } from './header_breadcrumbs'; import { HeaderHelpMenu } from './header_help_menu'; -import { HeaderUserMenu } from './header_user_menu'; import { HomeLoader } from './home_loader'; import { HeaderNavControls } from './header_nav_controls'; import { HeaderActionMenu } from './header_action_menu'; diff --git a/src/core/types/app_category.ts b/src/core/types/app_category.ts index 7e843b6ab55f..cc505c377e16 100644 --- a/src/core/types/app_category.ts +++ b/src/core/types/app_category.ts @@ -9,7 +9,7 @@ * GitHub history for details. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; /* * Licensed to Elasticsearch B.V. under one or more contributor diff --git a/src/plugins/advanced_settings/public/header_user_menu.tsx b/src/plugins/advanced_settings/public/header_user_menu.tsx index b1feec692b80..ba11cc97eb27 100644 --- a/src/plugins/advanced_settings/public/header_user_menu.tsx +++ b/src/plugins/advanced_settings/public/header_user_menu.tsx @@ -135,13 +135,15 @@ export const HeaderUserMenu = () => { setScreenMode(e.target.value); }; - const onAppearanceSubmit = (e: SyntheticEvent) => { + const onAppearanceSubmit = async (e: SyntheticEvent) => { console.log(e); // const mainStyleLink = document.querySelector('link[href*="osd-ui-shared-deps.v8.light"]'); // mainStyleLink?.parentNode?.removeChild(mainStyleLink); - setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? ''); - setDarkMode(screenMode === 'dark'); + await await Promise.all([ + setThemeVersion(themeOptions.find((t) => theme === t.value)?.text ?? ''), + setDarkMode(screenMode === 'dark'), + ]); window.location.reload(); }; diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx index f687786cfe4e..021ae0aa624b 100644 --- a/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx +++ b/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import _ from 'lodash'; import uuid from 'uuid'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { PanelNotFoundError, diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx index 8ef1e5a0cb2a..63099cacf48a 100644 --- a/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { CoreStart } from 'src/core/public'; import uuid from 'uuid'; import _ from 'lodash'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { SavedObject } from '../../../../saved_objects/public'; import { diff --git a/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx b/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx index 4cbdb471844f..65da5a02d04d 100644 --- a/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { IEmbeddable } from '../../../../embeddable/public'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; diff --git a/src/plugins/dashboard/public/application/actions/library_notification_action.tsx b/src/plugins/dashboard/public/application/actions/library_notification_action.tsx index 2dc37a7526eb..c722e706b43e 100644 --- a/src/plugins/dashboard/public/application/actions/library_notification_action.tsx +++ b/src/plugins/dashboard/public/application/actions/library_notification_action.tsx @@ -31,7 +31,7 @@ import React from 'react'; import { i18n } from '@osd/i18n'; import { EuiBadge } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { IEmbeddable, ViewMode, diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx index fa634a170e44..b329b3e913dc 100644 --- a/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx @@ -30,7 +30,7 @@ import { i18n } from '@osd/i18n'; import { CoreStart } from 'src/core/public'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { IEmbeddable, ViewMode, EmbeddableStart } from '../../../../embeddable/public'; import { DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '../embeddable'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; diff --git a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx index 67518066dd75..aab30e3e730f 100644 --- a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx +++ b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import _ from 'lodash'; import uuid from 'uuid'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { PanelNotFoundError, diff --git a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts index 1cacaf05842d..48be6f16b4f7 100644 --- a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts +++ b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { ApplicationStart } from 'opensearch-dashboards/public'; import { Action } from 'src/plugins/ui_actions/public'; import { take } from 'rxjs/operators'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ViewMode } from '../types'; import { EmbeddableFactoryNotFoundError } from '../errors'; import { EmbeddableStart } from '../../plugin'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts index d98ab4c6efdf..280188d4d903 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { Action, ActionExecutionContext } from 'src/plugins/ui_actions/public'; import { NotificationsStart, OverlayStart } from 'src/core/public'; import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ViewMode } from '../../../../types'; import { openAddPanelFlyout } from './open_add_panel_flyout'; import { IContainer } from '../../../../containers'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts index a07695d8ddf7..e9916441d363 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts @@ -30,7 +30,7 @@ import { i18n } from '@osd/i18n'; import { Action } from 'src/plugins/ui_actions/public'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ViewMode } from '../../../../types'; import { IEmbeddable } from '../../../../embeddables'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts index ce1657b7ad7c..31030a5cfa2f 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import { Action } from 'src/plugins/ui_actions/public'; import { Start as InspectorStartContract } from 'src/plugins/inspector/public'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { IEmbeddable } from '../../../embeddables'; export const ACTION_INSPECT_PANEL = 'openInspector'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts index 37bb1ceaa310..dcf11cda398c 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts @@ -29,7 +29,7 @@ */ import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { Action, IncompatibleActionError } from '../../../ui_actions'; import { ContainerInput, IContainer } from '../../../containers'; import { ViewMode } from '../../../types'; diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx index afa798de34dc..61c3b57fa6e1 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx @@ -31,7 +31,7 @@ import React from 'react'; import { EuiCallOut } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { FormattedMessage } from '@osd/i18n/react'; import { MatchedItem } from '../../../../types'; diff --git a/src/plugins/management/public/types.ts b/src/plugins/management/public/types.ts index a10a0095589c..8cb5a81e5959 100644 --- a/src/plugins/management/public/types.ts +++ b/src/plugins/management/public/types.ts @@ -29,7 +29,7 @@ */ import { ScopedHistory, Capabilities } from 'opensearch-dashboards/public'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ManagementSection, RegisterManagementSectionArgs } from './utils'; import { ChromeBreadcrumb } from '../../../core/public/'; diff --git a/src/plugins/management/public/utils/management_item.ts b/src/plugins/management/public/utils/management_item.ts index de79c626f40f..8ec7ebedeebc 100644 --- a/src/plugins/management/public/utils/management_item.ts +++ b/src/plugins/management/public/utils/management_item.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { CreateManagementItemArgs } from '../types'; export class ManagementItem { diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx index f541456c93b4..c4a1d5bf2099 100644 --- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx +++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx @@ -29,7 +29,7 @@ */ import { EuiButtonProps } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; export type TopNavMenuAction = (anchorElement: HTMLElement) => void; diff --git a/src/plugins/ui_actions/public/actions/action.ts b/src/plugins/ui_actions/public/actions/action.ts index 76fc2ddb3bed..f3e3a44eca26 100644 --- a/src/plugins/ui_actions/public/actions/action.ts +++ b/src/plugins/ui_actions/public/actions/action.ts @@ -29,7 +29,7 @@ */ import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { ActionType, ActionContextMapping, BaseContext } from '../types'; import { Presentable } from '../util/presentable'; import { Trigger } from '../triggers'; diff --git a/src/plugins/ui_actions/public/actions/action_internal.ts b/src/plugins/ui_actions/public/actions/action_internal.ts index 5610051dc3f7..c839871f2222 100644 --- a/src/plugins/ui_actions/public/actions/action_internal.ts +++ b/src/plugins/ui_actions/public/actions/action_internal.ts @@ -30,7 +30,7 @@ // @ts-ignore import React from 'react'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { Action, ActionContext as Context, ActionDefinition } from './action'; import { Presentable, PresentableGrouping } from '../util/presentable'; import { uiToReactComponent } from '../../../opensearch_dashboards_react/public'; diff --git a/src/plugins/ui_actions/public/util/presentable.ts b/src/plugins/ui_actions/public/util/presentable.ts index 9aaeada8a16e..7e486b25a7c8 100644 --- a/src/plugins/ui_actions/public/util/presentable.ts +++ b/src/plugins/ui_actions/public/util/presentable.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public'; /** diff --git a/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts b/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts index 6e3939820d28..8748c86f522d 100644 --- a/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts +++ b/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts @@ -5,7 +5,7 @@ import { isEmpty } from 'lodash'; import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { Action, IncompatibleActionError } from '../../../ui_actions/public'; import { getSavedAugmentVisLoader } from '../services'; import { PluginResourceDeleteContext } from '../ui_actions_bootstrap'; diff --git a/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts b/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts index 5d031359a8d1..3f363308347b 100644 --- a/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts +++ b/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts @@ -5,7 +5,7 @@ import { isEmpty } from 'lodash'; import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { Action, IncompatibleActionError } from '../../../ui_actions/public'; import { getAugmentVisSavedObjs } from '../utils'; import { getSavedAugmentVisLoader } from '../services'; diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx b/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx index 6410e8a13634..6268156265e7 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx +++ b/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx @@ -4,7 +4,7 @@ */ import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; +import { EuiIconType } from '@elastic/eui'; import { get, isEmpty } from 'lodash'; import { VisualizeEmbeddable } from '../../../../visualizations/public'; import { EmbeddableContext } from '../../../../embeddable/public'; From db5b415ad2b92f7d10c316d15c9bbab13787c04b Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Mon, 18 Dec 2023 22:08:48 +0000 Subject: [PATCH 05/26] revert changes to EuiIconType imports Signed-off-by: Josh Romero --- .../ui_actions_explorer/public/context_menu_examples/util.ts | 2 +- src/core/public/application/types.ts | 2 +- src/core/public/chrome/nav_links/nav_link.ts | 2 +- src/core/public/chrome/nav_links/to_nav_link.test.ts | 2 +- src/core/types/app_category.ts | 2 +- .../public/application/actions/add_to_library_action.tsx | 2 +- .../dashboard/public/application/actions/clone_panel_action.tsx | 2 +- .../public/application/actions/expand_panel_action.tsx | 2 +- .../public/application/actions/library_notification_action.tsx | 2 +- .../public/application/actions/replace_panel_action.tsx | 2 +- .../public/application/actions/unlink_from_library_action.tsx | 2 +- src/plugins/embeddable/public/lib/actions/edit_panel_action.ts | 2 +- .../panel_header/panel_actions/add_panel/add_panel_action.ts | 2 +- .../panel_actions/customize_title/customize_panel_action.ts | 2 +- .../panel/panel_header/panel_actions/inspect_panel_action.ts | 2 +- .../lib/panel/panel_header/panel_actions/remove_panel_action.ts | 2 +- .../components/status_message/status_message.tsx | 2 +- src/plugins/management/public/types.ts | 2 +- src/plugins/management/public/utils/management_item.ts | 2 +- .../navigation/public/top_nav_menu/top_nav_menu_data.tsx | 2 +- src/plugins/ui_actions/public/actions/action.ts | 2 +- src/plugins/ui_actions/public/actions/action_internal.ts | 2 +- src/plugins/ui_actions/public/util/presentable.ts | 2 +- .../public/actions/plugin_resource_delete_action.ts | 2 +- .../vis_augmenter/public/actions/saved_object_delete_action.ts | 2 +- .../view_events_flyout/actions/view_events_option_action.tsx | 2 +- 26 files changed, 26 insertions(+), 26 deletions(-) diff --git a/examples/ui_actions_explorer/public/context_menu_examples/util.ts b/examples/ui_actions_explorer/public/context_menu_examples/util.ts index a21cba8dc6e2..14d810379f50 100644 --- a/examples/ui_actions_explorer/public/context_menu_examples/util.ts +++ b/examples/ui_actions_explorer/public/context_menu_examples/util.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon' import { Action } from '../../../../src/plugins/ui_actions/public'; export const sampleAction = ( diff --git a/src/core/public/application/types.ts b/src/core/public/application/types.ts index ad5ffd6813fe..4744ab34cfd3 100644 --- a/src/core/public/application/types.ts +++ b/src/core/public/application/types.ts @@ -32,7 +32,7 @@ import { Observable } from 'rxjs'; import { History } from 'history'; import { RecursiveReadonly } from '@osd/utility-types'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { MountPoint } from '../types'; import { Capabilities } from './capabilities'; import { ChromeStart } from '../chrome'; diff --git a/src/core/public/chrome/nav_links/nav_link.ts b/src/core/public/chrome/nav_links/nav_link.ts index 21d0ed120d46..cddd45234514 100644 --- a/src/core/public/chrome/nav_links/nav_link.ts +++ b/src/core/public/chrome/nav_links/nav_link.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { pick } from '@osd/std'; import { AppCategory } from '../../'; diff --git a/src/core/public/chrome/nav_links/to_nav_link.test.ts b/src/core/public/chrome/nav_links/to_nav_link.test.ts index 1fbe568a431b..1fe2532b7d8f 100644 --- a/src/core/public/chrome/nav_links/to_nav_link.test.ts +++ b/src/core/public/chrome/nav_links/to_nav_link.test.ts @@ -32,7 +32,7 @@ import { PublicAppInfo, AppNavLinkStatus, AppStatus } from '../../application'; import { toNavLink } from './to_nav_link'; import { httpServiceMock } from '../../mocks'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; const app = (props: Partial = {}): PublicAppInfo => ({ id: 'some-id', diff --git a/src/core/types/app_category.ts b/src/core/types/app_category.ts index cc505c377e16..7e843b6ab55f 100644 --- a/src/core/types/app_category.ts +++ b/src/core/types/app_category.ts @@ -9,7 +9,7 @@ * GitHub history for details. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; /* * Licensed to Elasticsearch B.V. under one or more contributor diff --git a/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx b/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx index 021ae0aa624b..f687786cfe4e 100644 --- a/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx +++ b/src/plugins/dashboard/public/application/actions/add_to_library_action.tsx @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import _ from 'lodash'; import uuid from 'uuid'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { PanelNotFoundError, diff --git a/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx b/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx index 63099cacf48a..8ef1e5a0cb2a 100644 --- a/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/clone_panel_action.tsx @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { CoreStart } from 'src/core/public'; import uuid from 'uuid'; import _ from 'lodash'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { SavedObject } from '../../../../saved_objects/public'; import { diff --git a/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx b/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx index 65da5a02d04d..4cbdb471844f 100644 --- a/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/expand_panel_action.tsx @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { i18n } from '@osd/i18n'; import { IEmbeddable } from '../../../../embeddable/public'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; diff --git a/src/plugins/dashboard/public/application/actions/library_notification_action.tsx b/src/plugins/dashboard/public/application/actions/library_notification_action.tsx index c722e706b43e..2dc37a7526eb 100644 --- a/src/plugins/dashboard/public/application/actions/library_notification_action.tsx +++ b/src/plugins/dashboard/public/application/actions/library_notification_action.tsx @@ -31,7 +31,7 @@ import React from 'react'; import { i18n } from '@osd/i18n'; import { EuiBadge } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { IEmbeddable, ViewMode, diff --git a/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx b/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx index b329b3e913dc..fa634a170e44 100644 --- a/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx +++ b/src/plugins/dashboard/public/application/actions/replace_panel_action.tsx @@ -30,7 +30,7 @@ import { i18n } from '@osd/i18n'; import { CoreStart } from 'src/core/public'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { IEmbeddable, ViewMode, EmbeddableStart } from '../../../../embeddable/public'; import { DASHBOARD_CONTAINER_TYPE, DashboardContainer } from '../embeddable'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; diff --git a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx index aab30e3e730f..67518066dd75 100644 --- a/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx +++ b/src/plugins/dashboard/public/application/actions/unlink_from_library_action.tsx @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import _ from 'lodash'; import uuid from 'uuid'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ActionByType, IncompatibleActionError } from '../../../../ui_actions/public'; import { PanelNotFoundError, diff --git a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts index 48be6f16b4f7..1cacaf05842d 100644 --- a/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts +++ b/src/plugins/embeddable/public/lib/actions/edit_panel_action.ts @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { ApplicationStart } from 'opensearch-dashboards/public'; import { Action } from 'src/plugins/ui_actions/public'; import { take } from 'rxjs/operators'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ViewMode } from '../types'; import { EmbeddableFactoryNotFoundError } from '../errors'; import { EmbeddableStart } from '../../plugin'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts index 280188d4d903..d98ab4c6efdf 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts @@ -32,7 +32,7 @@ import { i18n } from '@osd/i18n'; import { Action, ActionExecutionContext } from 'src/plugins/ui_actions/public'; import { NotificationsStart, OverlayStart } from 'src/core/public'; import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ViewMode } from '../../../../types'; import { openAddPanelFlyout } from './open_add_panel_flyout'; import { IContainer } from '../../../../containers'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts index e9916441d363..a07695d8ddf7 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.ts @@ -30,7 +30,7 @@ import { i18n } from '@osd/i18n'; import { Action } from 'src/plugins/ui_actions/public'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ViewMode } from '../../../../types'; import { IEmbeddable } from '../../../../embeddables'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts index 31030a5cfa2f..ce1657b7ad7c 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/inspect_panel_action.ts @@ -31,7 +31,7 @@ import { i18n } from '@osd/i18n'; import { Action } from 'src/plugins/ui_actions/public'; import { Start as InspectorStartContract } from 'src/plugins/inspector/public'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { IEmbeddable } from '../../../embeddables'; export const ACTION_INSPECT_PANEL = 'openInspector'; diff --git a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts index dcf11cda398c..37bb1ceaa310 100644 --- a/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts +++ b/src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/remove_panel_action.ts @@ -29,7 +29,7 @@ */ import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { Action, IncompatibleActionError } from '../../../ui_actions'; import { ContainerInput, IContainer } from '../../../containers'; import { ViewMode } from '../../../types'; diff --git a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx index 61c3b57fa6e1..afa798de34dc 100644 --- a/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx +++ b/src/plugins/index_pattern_management/public/components/create_index_pattern_wizard/components/step_index_pattern/components/status_message/status_message.tsx @@ -31,7 +31,7 @@ import React from 'react'; import { EuiCallOut } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { FormattedMessage } from '@osd/i18n/react'; import { MatchedItem } from '../../../../types'; diff --git a/src/plugins/management/public/types.ts b/src/plugins/management/public/types.ts index 8cb5a81e5959..a10a0095589c 100644 --- a/src/plugins/management/public/types.ts +++ b/src/plugins/management/public/types.ts @@ -29,7 +29,7 @@ */ import { ScopedHistory, Capabilities } from 'opensearch-dashboards/public'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ManagementSection, RegisterManagementSectionArgs } from './utils'; import { ChromeBreadcrumb } from '../../../core/public/'; diff --git a/src/plugins/management/public/utils/management_item.ts b/src/plugins/management/public/utils/management_item.ts index 8ec7ebedeebc..de79c626f40f 100644 --- a/src/plugins/management/public/utils/management_item.ts +++ b/src/plugins/management/public/utils/management_item.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { CreateManagementItemArgs } from '../types'; export class ManagementItem { diff --git a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx index c4a1d5bf2099..f541456c93b4 100644 --- a/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx +++ b/src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx @@ -29,7 +29,7 @@ */ import { EuiButtonProps } from '@elastic/eui'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; export type TopNavMenuAction = (anchorElement: HTMLElement) => void; diff --git a/src/plugins/ui_actions/public/actions/action.ts b/src/plugins/ui_actions/public/actions/action.ts index f3e3a44eca26..76fc2ddb3bed 100644 --- a/src/plugins/ui_actions/public/actions/action.ts +++ b/src/plugins/ui_actions/public/actions/action.ts @@ -29,7 +29,7 @@ */ import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { ActionType, ActionContextMapping, BaseContext } from '../types'; import { Presentable } from '../util/presentable'; import { Trigger } from '../triggers'; diff --git a/src/plugins/ui_actions/public/actions/action_internal.ts b/src/plugins/ui_actions/public/actions/action_internal.ts index c839871f2222..5610051dc3f7 100644 --- a/src/plugins/ui_actions/public/actions/action_internal.ts +++ b/src/plugins/ui_actions/public/actions/action_internal.ts @@ -30,7 +30,7 @@ // @ts-ignore import React from 'react'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { Action, ActionContext as Context, ActionDefinition } from './action'; import { Presentable, PresentableGrouping } from '../util/presentable'; import { uiToReactComponent } from '../../../opensearch_dashboards_react/public'; diff --git a/src/plugins/ui_actions/public/util/presentable.ts b/src/plugins/ui_actions/public/util/presentable.ts index 7e486b25a7c8..9aaeada8a16e 100644 --- a/src/plugins/ui_actions/public/util/presentable.ts +++ b/src/plugins/ui_actions/public/util/presentable.ts @@ -28,7 +28,7 @@ * under the License. */ -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { UiComponent } from 'src/plugins/opensearch_dashboards_utils/public'; /** diff --git a/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts b/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts index 8748c86f522d..6e3939820d28 100644 --- a/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts +++ b/src/plugins/vis_augmenter/public/actions/plugin_resource_delete_action.ts @@ -5,7 +5,7 @@ import { isEmpty } from 'lodash'; import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { Action, IncompatibleActionError } from '../../../ui_actions/public'; import { getSavedAugmentVisLoader } from '../services'; import { PluginResourceDeleteContext } from '../ui_actions_bootstrap'; diff --git a/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts b/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts index 3f363308347b..5d031359a8d1 100644 --- a/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts +++ b/src/plugins/vis_augmenter/public/actions/saved_object_delete_action.ts @@ -5,7 +5,7 @@ import { isEmpty } from 'lodash'; import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { Action, IncompatibleActionError } from '../../../ui_actions/public'; import { getAugmentVisSavedObjs } from '../utils'; import { getSavedAugmentVisLoader } from '../services'; diff --git a/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx b/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx index 6268156265e7..6410e8a13634 100644 --- a/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx +++ b/src/plugins/vis_augmenter/public/view_events_flyout/actions/view_events_option_action.tsx @@ -4,7 +4,7 @@ */ import { i18n } from '@osd/i18n'; -import { EuiIconType } from '@elastic/eui'; +import { EuiIconType } from '@elastic/eui/src/components/icon/icon'; import { get, isEmpty } from 'lodash'; import { VisualizeEmbeddable } from '../../../../visualizations/public'; import { EmbeddableContext } from '../../../../embeddable/public'; From 681afca16fa89c497233aa28eb1478389ab289ee Mon Sep 17 00:00:00 2001 From: Josh Romero Date: Tue, 2 Jan 2024 20:36:12 +0000 Subject: [PATCH 06/26] feat (core): make theme UI settings client-side 1. Add optional `preferBrowserSetting` to UISettings that should be defined client-side 2. Make `theme:darkMode` and `theme:version` prefer browser settings 3. Update UISettings client-side client to check localstorage for settings that prefer browser settings 4. Refactor logos to be responsive to browser-defined theme mode 5. Add a new `startup` script that handles theme/dark mode (injected as blocking script to head) 6. Remove theme/mode-specific logic from injected Styles and Fonts (move logic to `startup` script instead, define all font-faces) 7. Only inject theme values necessary for loading/error screens via `startup` 8. Update branding metadata to pass the correct dark mode Signed-off-by: Josh Romero --- src/core/public/osd_bootstrap.ts | 5 + .../public/ui_settings/ui_settings_client.ts | 4 +- .../server/rendering/rendering_service.tsx | 4 + src/core/server/rendering/types.ts | 1 + src/core/server/rendering/views/fonts.tsx | 32 +---- src/core/server/rendering/views/styles.tsx | 42 +++--- src/core/server/rendering/views/template.tsx | 68 +++++++-- src/core/server/rendering/views/theme.ts | 1 + src/core/server/ui_settings/settings/theme.ts | 2 + src/core/types/ui_settings.ts | 1 + .../ui/ui_render/bootstrap/template.js.hbs | 40 +++++- .../ui/ui_render/startup/app_startup.js | 80 +++++++++++ .../ui/ui_render/startup/app_startup.test.js | 131 ++++++++++++++++++ src/legacy/ui/ui_render/startup/index.js | 6 + .../ui/ui_render/startup/template.js.hbs | 74 ++++++++++ src/legacy/ui/ui_render/ui_render_mixin.js | 123 ++++++++++++---- 16 files changed, 510 insertions(+), 104 deletions(-) create mode 100644 src/legacy/ui/ui_render/startup/app_startup.js create mode 100644 src/legacy/ui/ui_render/startup/app_startup.test.js create mode 100644 src/legacy/ui/ui_render/startup/index.js create mode 100644 src/legacy/ui/ui_render/startup/template.js.hbs diff --git a/src/core/public/osd_bootstrap.ts b/src/core/public/osd_bootstrap.ts index f5571292b83a..ed64ed0bc2b5 100644 --- a/src/core/public/osd_bootstrap.ts +++ b/src/core/public/osd_bootstrap.ts @@ -38,6 +38,11 @@ export async function __osdBootstrap__() { document.querySelector('osd-injected-metadata')!.getAttribute('data')! ); + const globals: any = typeof window === 'undefined' ? {} : window; + const themeTag: string = globals.__osdThemeTag__ || ''; + + injectedMetadata.branding.darkMode = themeTag.endsWith('dark'); + let i18nError: Error | undefined; const apmSystem = new ApmSystem(injectedMetadata.vars.apmConfig, injectedMetadata.basePath); diff --git a/src/core/public/ui_settings/ui_settings_client.ts b/src/core/public/ui_settings/ui_settings_client.ts index a234551c4bf5..2b4a25b3e428 100644 --- a/src/core/public/ui_settings/ui_settings_client.ts +++ b/src/core/public/ui_settings/ui_settings_client.ts @@ -89,7 +89,9 @@ You can use \`IUiSettingsClient.get("${key}", defaultValue)\`, which will just r } const type = this.cache[key].type; - const userValue = this.cache[key].userValue; + const userValue = this.cache[key].preferBrowserSetting + ? window.localStorage.getItem(`uiSettings:${key}`) + : this.cache[key].userValue; const defaultValue = defaultOverride !== undefined ? defaultOverride : this.cache[key].value; const value = userValue == null ? defaultValue : userValue; diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx index 437d8e1e3d46..a737083e1078 100644 --- a/src/core/server/rendering/rendering_service.tsx +++ b/src/core/server/rendering/rendering_service.tsx @@ -94,18 +94,21 @@ export class RenderingService { defaults: uiSettings.getRegistered(), user: includeUserSettings ? await uiSettings.getUserProvided() : {}, }; + // TODO: make sure this is used as default in templates // Cannot use `uiSettings.get()` since a user might not be authenticated const darkMode = (settings.user?.['theme:darkMode']?.userValue ?? uiSettings.getOverrideOrDefault('theme:darkMode')) || false; + // TODO: make sure this is used as default in templates // At the very least, the schema should define a default theme; the '' will be unreachable const themeVersion = (settings.user?.['theme:version']?.userValue ?? uiSettings.getOverrideOrDefault('theme:version')) || ''; + // TODO: should this be moved to better account for dark mode? const brandingAssignment = await this.assignBrandingConfig( darkMode, opensearchDashboardsConfig as OpenSearchDashboardsConfigType @@ -115,6 +118,7 @@ export class RenderingService { strictCsp: http.csp.strict, uiPublicUrl, bootstrapScriptUrl: `${basePath}/bootstrap.js`, + startupScriptUrl: `${basePath}/startup.js`, i18n: i18n.translate, locale: i18n.getLocale(), darkMode, diff --git a/src/core/server/rendering/types.ts b/src/core/server/rendering/types.ts index 45821c2b8228..4a01acbcc681 100644 --- a/src/core/server/rendering/types.ts +++ b/src/core/server/rendering/types.ts @@ -43,6 +43,7 @@ export interface RenderingMetadata { strictCsp: ICspConfig['strict']; uiPublicUrl: string; bootstrapScriptUrl: string; + startupScriptUrl: string; i18n: typeof i18n.translate; locale: string; darkMode: boolean; diff --git a/src/core/server/rendering/views/fonts.tsx b/src/core/server/rendering/views/fonts.tsx index 61005f2bf209..6ff3a4c272ea 100644 --- a/src/core/server/rendering/views/fonts.tsx +++ b/src/core/server/rendering/views/fonts.tsx @@ -36,7 +36,6 @@ import { RenderingMetadata } from '../types'; interface Props { url: RenderingMetadata['uiPublicUrl']; - theme: RenderingMetadata['themeVersion']; } interface FontFace { @@ -50,7 +49,7 @@ interface FontFace { }>; } -export const Fonts: FunctionComponent = ({ url, theme }) => { +export const Fonts: FunctionComponent = ({ url }) => { // For next theme const sourceSans3: FontFace = { family: 'Source Sans 3', @@ -532,9 +531,7 @@ export const Fonts: FunctionComponent = ({ url, theme }) => { url('${url}/fonts/inter_ui/Inter-UI-italic.var.woff2') format('woff2'); } */ - const fontText = theme === 'v7' ? interUi : sourceSans3; - const fontCode = theme === 'v7' ? roboto : sourceCodePro; - const fontsDefinitionRules = [fontText, fontCode] + const fontsDefinitionRules = [interUi, sourceSans3, roboto, sourceCodePro] .flatMap(({ family, variants }) => variants.map(({ style, weight, format, sources, unicodeRange }) => { const src = sources @@ -557,36 +554,11 @@ export const Fonts: FunctionComponent = ({ url, theme }) => { ) .join('\n'); - /* - * The default fonts are added as CSS variables, overriding OUI's, and then - * the CSS variables are consumed. - */ - const fontRules = ` - :root { - --font-text: "${fontText.family}", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, - sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; - - --font-code: "${fontCode.family}", Consolas, Menlo, Courier, monospace; - - --oui-font-family: var(--font-text); - --oui-code-font-family: var(--font-code); - } - - code, pre, kbd, samp { - font-family: var(--font-code); - } - html, input, textarea, select, button { - font-family: var(--font-text); - } - - `; - return (