[Backport 2.x] Support OpenSearch logo theming for light / dark modes

public/apps/customerror/custom-error.tsx

@@ -19,22 +19,22 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router, Route } from 'react-router-dom';
 import { ERROR_MISSING_ROLE_PATH } from '../../../common';
-import defaultBrandImage from '../../assets/opensearch_logo_h.svg';
 import { ClientConfigType } from '../../types';
 import './_index.scss';
 
 interface CustomErrorDeps {
   title: string;
   subtitle: string;
   http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
   config: ClientConfigType['ui']['basicauth']['login'];
 }
 
 export function CustomErrorPage(props: CustomErrorDeps) {
   return (
     <EuiListGroup className="custom-error-wrapper">
       {props.config.showbrandimage && (
-        <EuiImage alt="" url={props.config.brandimage || defaultBrandImage} />
+        <EuiImage alt="" url={props.config.brandimage || props.chrome.logos.OpenSearch.url} />
       )}
       <EuiSpacer size="s" />
       <EuiText size="m" textAlign="center">
@@ -62,6 +62,7 @@ export async function renderPage(
       <Route path={ERROR_MISSING_ROLE_PATH}>
         <CustomErrorPage
           http={coreStart.http}
+          chrome={coreStart.chrome}
           config={config.ui.basicauth.login}
           title="Missing Role"
           subtitle="No roles available for this user, please contact your system administrator."

public/apps/login/login-app.tsx

@@ -26,6 +26,9 @@
   params: AppMountParameters,
   config: ClientConfigType
 ) {
-  ReactDOM.render(<LoginPage http={coreStart.http} config={config} />, params.element);
+  ReactDOM.render(
+    <LoginPage http={coreStart.http} chrome={coreStart.chrome} config={config} />,
+    params.element
+  );
   return () => ReactDOM.unmountComponentAtNode(params.element);
 }

public/apps/login/login-page.tsx

@@ -28,7 +28,6 @@ import {
 } from '@elastic/eui';
 import { CoreStart } from '../../../../../src/core/public';
 import { ClientConfigType } from '../../types';
-import defaultBrandImage from '../../assets/opensearch_logo_h.svg';
 import { validateCurrentPassword } from '../../utils/login-utils';
 import {
   ANONYMOUS_AUTH_LOGIN,
@@ -39,6 +38,7 @@ import {
 
 interface LoginPageDeps {
   http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
   config: ClientConfigType;
 }
 
@@ -259,7 +259,7 @@ export function LoginPage(props: LoginPageDeps) {
         <EuiImage
           size="fullWidth"
           alt=""
-          url={props.config.ui.basicauth.login.brandimage || defaultBrandImage}
+          url={props.config.ui.basicauth.login.brandimage || props.chrome.logos.OpenSearch.url}
         />
       )}
       <EuiSpacer size="s" />

public/apps/login/test/__snapshots__/login-page.test.tsx.snap

@@ -366,7 +366,7 @@ exports[`Login page renders renders with default value: string 1`] = `
   <EuiImage
     alt=""
     size="fullWidth"
-    url="test-file-stub"
+    url="/ui/logos/opensearch_on_light.svg"
   />
   <EuiSpacer
     size="s"
@@ -469,7 +469,7 @@ exports[`Login page renders renders with default value: string array 1`] = `
   <EuiImage
     alt=""
     size="fullWidth"
-    url="test-file-stub"
+    url="/ui/logos/opensearch_on_light.svg"
   />
   <EuiSpacer
     size="s"

public/apps/login/test/login-page.test.tsx

@@ -19,6 +19,7 @@ import { ClientConfigType } from '../../../types';
 import { LoginPage, extractNextUrlFromWindowLocation } from '../login-page';
 import { validateCurrentPassword } from '../../../utils/login-utils';
 import { API_AUTH_LOGOUT } from '../../../../common';
+import { chromeServiceMock } from '../../../../../../src/core/public/mocks';
 
 jest.mock('../../../utils/login-utils', () => ({
   validateCurrentPassword: jest.fn(),
@@ -84,12 +85,17 @@ describe('test extractNextUrlFromWindowLocation', () => {
 });
 
 describe('Login page', () => {
+  let chrome: ReturnType<typeof chromeServiceMock.createStartContract>;
   const mockHttpStart = {
     basePath: {
       serverBasePath: '/app/opensearch-dashboards',
     },
   };
 
+  beforeEach(() => {
+    chrome = chromeServiceMock.createStartContract();
+  });
+
   describe('renders', () => {
     it('renders with config value: string array', () => {
       const config: ClientConfigType = {
@@ -99,7 +105,9 @@ describe('Login page', () => {
           logout_url: API_AUTH_LOGOUT,
         },
       };
-      const component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      const component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
       expect(component).toMatchSnapshot();
     });
 
@@ -111,7 +119,9 @@ describe('Login page', () => {
           logout_url: API_AUTH_LOGOUT,
         },
       };
-      const component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      const component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
       expect(component).toMatchSnapshot();
     });
 
@@ -123,7 +133,9 @@ describe('Login page', () => {
           logout_url: API_AUTH_LOGOUT,
         },
       };
-      const component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      const component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
       expect(component).toMatchSnapshot();
     });
 
@@ -134,7 +146,9 @@ describe('Login page', () => {
           type: [''],
         },
       };
-      const component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      const component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
       expect(component).toMatchSnapshot();
     });
 
@@ -145,7 +159,9 @@ describe('Login page', () => {
           type: '',
         },
       };
-      const component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      const component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
       expect(component).toMatchSnapshot();
     });
   });
@@ -162,7 +178,9 @@ describe('Login page', () => {
     };
     beforeEach(() => {
       useState.mockImplementation((initialValue) => [initialValue, setState]);
-      component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
     });
 
     it('should update user name field on change event', () => {
@@ -195,7 +213,9 @@ describe('Login page', () => {
     beforeEach(() => {
       useState.mockImplementation(() => ['user1', setState]);
       useState.mockImplementation(() => ['password1', setState]);
-      component = shallow(<LoginPage http={mockHttpStart as any} config={config as any} />);
+      component = shallow(
+        <LoginPage http={mockHttpStart as any} chrome={chrome} config={config as any} />
+      );
     });
 
     it('submit click event', () => {