Make top left logo on the main screen configurable

Add a new config opensearchDashboards.branding.logoUrl in yaml file
for making top left corner logo on the main screen configurable. If
URL is invalid, the default OpenSearch logo will be shown.

Signed-off-by: Abby Hu <[email protected]>

config/opensearch_dashboards.yml

@@ -150,3 +150,7 @@
 #  'ff00::/8',
 # ]
 #vis_type_timeline.graphiteBlockedIPs: []
+
+# user input URL for customized logo 
+# opensearchDashboards.branding.logoUrl: ""
+

src/core/public/chrome/chrome_service.tsx

@@ -253,6 +253,7 @@ export class ChromeService {
           navControlsRight$={navControls.getRight$()}
           onIsLockedUpdate={setIsNavDrawerLocked}
           isLocked$={getIsNavDrawerLocked$}
+          branding={injectedMetadata.getBranding()}
         />
       ),
 

src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ */
+
+import React from 'react';
+import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import { CustomLogo } from './opensearch_dashboards_custom_logo';
+
+describe('Custom Logo', () => {
+  it('Take in a normal URL string', () => {
+    const branding = { logoUrl: '/', className: '' };
+    const component = mountWithIntl(<CustomLogo {...branding} />);
+    expect(component).toMatchSnapshot();
+  });
+});

src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx

@@ -0,0 +1,51 @@
+/*
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * The OpenSearch Contributors require contributions made to
+ * this file be licensed under the Apache-2.0 license or a
+ * compatible open source license.
+ */
+
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Modifications Copyright OpenSearch Contributors. See
+ * GitHub history for details.
+ */
+
+import React from 'react';
+import '../header_logo.scss';
+
+export interface CustomLogoType {
+  logoUrl: string;
+}
+
+export const CustomLogo = ({ ...branding }: CustomLogoType) => {
+  return (
+    <img
+      data-test-subj="customLogo"
+      data-test-image-url={branding.logoUrl}
+      src={branding.logoUrl}
+      alt="logo"
+      loading="lazy"
+      className="logoImage"
+    />
+  );
+};

src/core/public/chrome/ui/header/header.test.tsx

@@ -69,6 +69,7 @@ function mockProps() {
     isLocked$: new BehaviorSubject(false),
     loadingCount$: new BehaviorSubject(0),
     onIsLockedUpdate: () => {},
+    branding: { logoUrl: '/' },
   };
 }
 

src/core/public/chrome/ui/header/header.tsx

@@ -87,6 +87,7 @@ export interface HeaderProps {
   isLocked$: Observable<boolean>;
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
+  branding: { logoUrl: string };
 }
 
 export function Header({
@@ -96,6 +97,7 @@ export function Header({
   basePath,
   onIsLockedUpdate,
   homeHref,
+  branding,
   ...observables
 }: HeaderProps) {
   const isVisible = useObservable(observables.isVisible$, false);
@@ -125,6 +127,7 @@ export function Header({
                     forceNavigation$={observables.forceAppSwitcherNavigation$}
                     navLinks$={observables.navLinks$}
                     navigateToApp={application.navigateToApp}
+                    logoUrl={branding.logoUrl}
                   />,
                   <LoadingIndicator loadingCount$={observables.loadingCount$} />,
                 ],

src/core/public/chrome/ui/header/header_logo.scss

@@ -0,0 +1,9 @@
+.logoContainer {
+    height: 30px;
+    padding: 3px 3px 3px 10px;
+}
+
+.logoImage{
+    height: 100%;
+    max-width: 100%;
+}

src/core/public/chrome/ui/header/header_logo.tsx

@@ -30,14 +30,14 @@
  * GitHub history for details.
  */
 
-import { EuiHeaderLogo } from '@elastic/eui';
 import { i18n } from '@osd/i18n';
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import Url from 'url';
 import { ChromeNavLink } from '../..';
-import { OpenSearchDashboardsLogoDarkMode } from './branding/opensearch_dashboards_logo_darkmode';
+import { CustomLogo, CustomLogoType } from './branding/opensearch_dashboards_custom_logo';
+import './header_logo.scss';
 
 function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
   let current = element;
@@ -104,21 +104,27 @@ interface Props {
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
+  logoUrl: string;
 }
 
-export function HeaderLogo({ href, navigateToApp, ...observables }: Props) {
+export function HeaderLogo({ href, navigateToApp, logoUrl, ...observables }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
+  const branding: CustomLogoType = {
+    logoUrl,
+  };
 
   return (
-    <EuiHeaderLogo
+    <a
       data-test-subj="logo"
-      iconType={OpenSearchDashboardsLogoDarkMode}
       onClick={(e) => onClick(e, forceNavigation, navLinks, navigateToApp)}
       href={href}
       aria-label={i18n.translate('core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel', {
         defaultMessage: 'Go to home page',
       })}
-    />
+      className="logoContainer"
+    >
+      <CustomLogo {...branding} />
+    </a>
   );
 }

src/core/public/injected_metadata/injected_metadata_service.mock.ts

@@ -45,6 +45,7 @@ const createSetupContractMock = () => {
     getInjectedVar: jest.fn(),
     getInjectedVars: jest.fn(),
     getOpenSearchDashboardsBuildNumber: jest.fn(),
+    getBranding: jest.fn(),
   };
   setupContract.getCspConfig.mockReturnValue({ warnLegacyBrowsers: true });
   setupContract.getOpenSearchDashboardsVersion.mockReturnValue('opensearchDashboardsVersion');

src/core/public/injected_metadata/injected_metadata_service.test.ts

@@ -229,3 +229,16 @@ describe('setup.getInjectedVars()', () => {
     );
   });
 });
+
+describe('setup.getBranding()', () => {
+  it('returns injectedMetadata.branding', () => {
+    const injectedMetadata = new InjectedMetadataService({
+      injectedMetadata: {
+        branding: { logoUrl: '/' },
+      },
+    } as any);
+
+    const logoURL = injectedMetadata.setup().getBranding();
+    expect(logoURL).toEqual({ logoUrl: '/' });
+  });
+});