Update header logo selection logic and assets

Signed-off-by: Miki <[email protected]>
AMoo-Miki · Jun 30, 2023 · 6b5151b · 6b5151b
1 parent 63b66f9
commit 6b5151b
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 202 deletions.
diff --git 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
@@ -30,6 +30,7 @@
 
 import {
   EuiHeader,
+  EuiHeaderProps,
   EuiHeaderSection,
   EuiHeaderSectionItem,
   EuiHeaderSectionItemButton,
@@ -116,14 +117,16 @@ export function Header({
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
   const { useExpandedHeader = true, darkMode } = branding;
 
+  const headerTheme: EuiHeaderProps['theme'] = 'dark';
+
   return (
     <>
       <header className={className} data-test-subj="headerGlobalNav">
         <div id="globalHeaderBars">
           {useExpandedHeader && (
             <EuiHeader
               className="expandedHeader"
-              theme="dark"
+              theme={headerTheme}
               position="fixed"
               sections={[
                 {
@@ -134,6 +137,9 @@ export function Header({
                       navLinks$={observables.navLinks$}
                       navigateToApp={application.navigateToApp}
                       branding={branding}
+                      basePath={basePath}
+                      /* This `theme` should match the theme of EuiHeader */
+                      theme={headerTheme}
                     />,
                   ],
                   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
@@ -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
@@ -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<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   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 (