From 241686c9851fea3a4396033aee4b5256c5038082 Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 16 Jun 2023 21:59:25 -0700 Subject: [PATCH] Relocate tutorials imagery Signed-off-by: Miki --- CHANGELOG.md | 1 + src/core/public/chrome/ui/header/header.tsx | 8 +++- .../chrome/ui/header/header_logo.test.tsx | 2 + .../public/chrome/ui/header/header_logo.tsx | 37 +++++++++++++------ .../assets/logos/opensearch_dashboards.svg | 13 +++++++ .../logos/opensearch_dashboards_darkmode.svg | 13 +++++++ 6 files changed, 62 insertions(+), 12 deletions(-) create mode 100644 src/plugins/home/public/assets/logos/opensearch_dashboards.svg create mode 100644 src/plugins/home/public/assets/logos/opensearch_dashboards_darkmode.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 3e17268e1605..bc295893ee45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -25,6 +25,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) - [@osd/pm] Fix `file:`-linked dependencies' resolution to improve ability to test with local packages ([#4342](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4342)) - [Multiple DataSource] Backend support for adding sample data ([#4268](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4268)) - Add configurable defaults and overrides to uiSettings ([#4344](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4344)) +- Update header logo selection logic to match the header's ([#4383](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4383)) ### 🐛 Bug Fixes diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index a78371f4f264..f6d81741eb4e 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -30,6 +30,7 @@ import { EuiHeader, + EuiHeaderProps, EuiHeaderSection, EuiHeaderSectionItem, EuiHeaderSectionItemButton, @@ -116,6 +117,8 @@ export function Header({ const className = classnames('hide-for-sharing', 'headerGlobalNav'); const { useExpandedHeader = true, darkMode } = branding; + const headerTheme: EuiHeaderProps['theme'] = 'dark'; + return ( <>
@@ -123,7 +126,7 @@ export function Header({ {useExpandedHeader && ( , ], borders: 'none', diff --git a/src/core/public/chrome/ui/header/header_logo.test.tsx b/src/core/public/chrome/ui/header/header_logo.test.tsx index 0ac5a03b3589..9bcb118d26bb 100644 --- a/src/core/public/chrome/ui/header/header_logo.test.tsx +++ b/src/core/public/chrome/ui/header/header_logo.test.tsx @@ -7,9 +7,11 @@ import React from 'react'; import { BehaviorSubject } from 'rxjs'; import { mountWithIntl } from 'test_utils/enzyme_helpers'; import { HeaderLogo, DEFAULT_DARK_LOGO, DEFAULT_LOGO } from './header_logo'; +import { BasePath } from '../../../http/base_path'; const mockProps = () => ({ href: '/', + basePath: new BasePath('/base'), navLinks$: new BehaviorSubject([]), forceNavigation$: new BehaviorSubject(false), navigateToApp: jest.fn(), diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx index 26b1783e132b..0c4efcb2a11a 100644 --- a/src/core/public/chrome/ui/header/header_logo.tsx +++ b/src/core/public/chrome/ui/header/header_logo.tsx @@ -29,12 +29,14 @@ */ import './header_logo.scss'; +import { EuiHeaderProps } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import React from 'react'; import useObservable from 'react-use/lib/useObservable'; import { Observable } from 'rxjs'; import { ChromeNavLink } from '../..'; import { ChromeBranding } from '../../chrome_service'; +import { HttpStart } from '../../../http'; function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void { let current = element; @@ -96,32 +98,45 @@ function onClick( } } -export const DEFAULT_DARK_LOGO = 'opensearch_logo_dark_mode.svg'; -export const DEFAULT_LOGO = 'opensearch_logo_default_mode.svg'; +export const DEFAULT_LOGO = 'plugins/home/assets/logos/opensearch_dashboards.svg'; +export const DEFAULT_DARK_LOGO = 'plugins/home/assets/logos/opensearch_dashboards_darkmode.svg'; + interface Props { href: string; navLinks$: Observable; forceNavigation$: Observable; navigateToApp: (appId: string) => void; branding: ChromeBranding; + basePath: HttpStart['basePath']; + // What background is the logo appearing on; this is unrelated to theme:darkMode + theme?: EuiHeaderProps['theme']; } -export function HeaderLogo({ href, navigateToApp, branding, ...observables }: Props) { +export function HeaderLogo({ + href, + navigateToApp, + branding, + basePath, + theme = 'default', + ...observables +}: Props) { const forceNavigation = useObservable(observables.forceNavigation$, false); const navLinks = useObservable(observables.navLinks$, []); const { - darkMode, - assetFolderUrl = '', - logo = {}, + logo: { defaultUrl: customLogoUrl, darkModeUrl: customDarkLogoUrl } = {}, applicationTitle = 'opensearch dashboards', } = branding; - const { defaultUrl: logoUrl, darkModeUrl: darkLogoUrl } = logo; - const customLogo = darkMode ? darkLogoUrl ?? logoUrl : logoUrl; - const defaultLogo = darkMode ? DEFAULT_DARK_LOGO : DEFAULT_LOGO; + // Attempt to find a suitable custom branded logo before falling back on OSD's + let logoSrc = theme === 'dark' && customDarkLogoUrl ? customDarkLogoUrl : customLogoUrl; + let testSubj = 'customLogo'; + + // If no custom branded logo was set, use OSD's + if (!logoSrc) { + logoSrc = `${basePath.serverBasePath}/${theme === 'dark' ? DEFAULT_DARK_LOGO : DEFAULT_LOGO}`; + testSubj = 'defaultLogo'; + } - const logoSrc = customLogo ? customLogo : `${assetFolderUrl}/${defaultLogo}`; - const testSubj = customLogo ? 'customLogo' : 'defaultLogo'; const alt = `${applicationTitle} logo`; return ( diff --git a/src/plugins/home/public/assets/logos/opensearch_dashboards.svg b/src/plugins/home/public/assets/logos/opensearch_dashboards.svg new file mode 100644 index 000000000000..bb85dcdd10ed --- /dev/null +++ b/src/plugins/home/public/assets/logos/opensearch_dashboards.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/plugins/home/public/assets/logos/opensearch_dashboards_darkmode.svg b/src/plugins/home/public/assets/logos/opensearch_dashboards_darkmode.svg new file mode 100644 index 000000000000..ba023b5b9a37 --- /dev/null +++ b/src/plugins/home/public/assets/logos/opensearch_dashboards_darkmode.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + +