From 6b5151b2fdef6804caa484df1e0fdcb76d289627 Mon Sep 17 00:00:00 2001 From: Miki Date: Fri, 16 Jun 2023 21:59:25 -0700 Subject: [PATCH] Update header logo selection logic and assets 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 +++++--- .../opensearch_logo_dark_mode.svg | 95 ------------------- .../opensearch_logo_default_mode.svg | 95 ------------------- .../assets/logos/opensearch_dashboards.svg | 13 +++ .../logos/opensearch_dashboards_darkmode.svg | 13 +++ 8 files changed, 62 insertions(+), 202 deletions(-) delete mode 100644 src/core/server/core_app/assets/default_branding/opensearch_logo_dark_mode.svg delete mode 100644 src/core/server/core_app/assets/default_branding/opensearch_logo_default_mode.svg 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 5ebf8ae3f797..6c2eae19d2e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,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)) - Introduce new fonts for the Next theme ([#4381](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4381)) - Bump OUI to `1.1.2` to make `anomalyDetection` icon available ([#4408](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4408)) - [Multiple DataSource] Frontend support for adding sample data ([#4412](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4412)) diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index a78371f4f264..0e595001480d 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..a37b1d7837d1 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 independent of 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/core/server/core_app/assets/default_branding/opensearch_logo_dark_mode.svg b/src/core/server/core_app/assets/default_branding/opensearch_logo_dark_mode.svg deleted file mode 100644 index 5fc96631974a..000000000000 --- a/src/core/server/core_app/assets/default_branding/opensearch_logo_dark_mode.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/src/core/server/core_app/assets/default_branding/opensearch_logo_default_mode.svg b/src/core/server/core_app/assets/default_branding/opensearch_logo_default_mode.svg deleted file mode 100644 index 9ee816341523..000000000000 --- a/src/core/server/core_app/assets/default_branding/opensearch_logo_default_mode.svg +++ /dev/null @@ -1,95 +0,0 @@ - - - - - - - - - - - - - - - - - - - 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 @@ + + + + + + + + + + + + +