From 5b9d1c82fcdb8163de665c9e1a1f4f90bab80d58 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Fri, 1 Sep 2023 06:21:08 -0700
Subject: [PATCH] Refactor login logo usage (#1568)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit ecb15d56aa96c549f1fd0ca07c86e677cbe6ddbc)
---
 public/apps/customerror/custom-error.tsx      |  5 +--
 public/apps/login/login-app.tsx               |  5 ++-
 public/apps/login/login-page.tsx              |  4 +--
 .../__snapshots__/login-page.test.tsx.snap    |  4 +--
 public/apps/login/test/login-page.test.tsx    | 34 +++++++++++++++----
 public/assets/opensearch_logo_h.svg           | 10 ------
 6 files changed, 38 insertions(+), 24 deletions(-)
 delete mode 100644 public/assets/opensearch_logo_h.svg

diff --git a/public/apps/customerror/custom-error.tsx b/public/apps/customerror/custom-error.tsx
index d228b0320..eb4dd9f2e 100644
--- a/public/apps/customerror/custom-error.tsx
+++ b/public/apps/customerror/custom-error.tsx
@@ -19,7 +19,6 @@ 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';
 
@@ -27,6 +26,7 @@ interface CustomErrorDeps {
   title: string;
   subtitle: string;
   http: CoreStart['http'];
+  chrome: CoreStart['chrome'];
   config: ClientConfigType['ui']['basicauth']['login'];
 }
 
@@ -34,7 +34,7 @@ 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."
diff --git a/public/apps/login/login-app.tsx b/public/apps/login/login-app.tsx
index 77eaa8eac..340b45eec 100644
--- a/public/apps/login/login-app.tsx
+++ b/public/apps/login/login-app.tsx
@@ -26,6 +26,9 @@ export function renderApp(
   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);
 }
diff --git a/public/apps/login/login-page.tsx b/public/apps/login/login-page.tsx
index 82019cba7..22421e3a7 100644
--- a/public/apps/login/login-page.tsx
+++ b/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" />
diff --git a/public/apps/login/test/__snapshots__/login-page.test.tsx.snap b/public/apps/login/test/__snapshots__/login-page.test.tsx.snap
index a73477edc..c2dac62c1 100644
--- a/public/apps/login/test/__snapshots__/login-page.test.tsx.snap
+++ b/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"
diff --git a/public/apps/login/test/login-page.test.tsx b/public/apps/login/test/login-page.test.tsx
index 803ca9d71..3c41b17c3 100644
--- a/public/apps/login/test/login-page.test.tsx
+++ b/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', () => {
diff --git a/public/assets/opensearch_logo_h.svg b/public/assets/opensearch_logo_h.svg
deleted file mode 100644
index cb329cadf..000000000
--- a/public/assets/opensearch_logo_h.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg viewBox="0 0 372 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M61.7374 26.5C60.4878 26.5 59.4748 27.513 59.4748 28.7626C59.4748 47.3814 44.3814 62.4748 25.7626 62.4748C24.513 62.4748 23.5 63.4878 23.5 64.7374C23.5 65.987 24.513 67 25.7626 67C46.8805 67 64 49.8805 64 28.7626C64 27.513 62.987 26.5 61.7374 26.5Z" fill="#005EB8"/>
-<path d="M48.0814 41C50.2572 37.4505 52.3615 32.7178 51.9475 26.0921C51.0899 12.3673 38.6589 1.95537 26.9206 3.08373C22.3253 3.52547 17.6068 7.2712 18.026 13.9805C18.2082 16.8961 19.6352 18.6169 21.9544 19.9399C24.1618 21.1992 26.9978 21.9969 30.2128 22.9011C34.0962 23.9934 38.6009 25.2203 42.0631 27.7717C46.2125 30.8296 49.0491 34.3743 48.0814 41Z" fill="#003B5C"/>
-<path d="M3.91861 17C1.74276 20.5495 -0.361506 25.2822 0.0524931 31.9079C0.910072 45.6327 13.3411 56.0446 25.0794 54.9163C29.6747 54.4745 34.3932 50.7288 33.974 44.0195C33.7918 41.1039 32.3647 39.3831 30.0456 38.0601C27.8382 36.8008 25.0022 36.0031 21.7872 35.0989C17.9038 34.0066 13.3991 32.7797 9.93695 30.2283C5.78747 27.1704 2.95092 23.6257 3.91861 17Z" fill="#005EB8"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M362.5 31V54H371.5V29C371.5 24.3927 370.6 20.9121 368.799 18.5511C366.998 16.1672 364.282 15 360.75 15C356.918 15 353.847 17.2408 352 21H351.5C351.636 19.0591 351.76 17.9472 351.85 17.1353C351.943 16.298 352 15.7797 352 15V0.5H343V54H352.5V35.5C352.5 31.3511 352.639 28.2815 353.493 26.081C354.347 23.8575 355.836 22.7458 357.96 22.7458C360.8 22.7458 362.5 25.3841 362.5 31ZM231.852 51.2289C234.284 48.7148 235.5 45.0936 235.5 40.3653C235.5 37.4129 234.834 34.7835 233.501 32.477C232.191 30.1705 229.865 27.9102 226.521 25.6959C224.042 24.0814 222.3 22.6398 221.294 21.3713C220.312 20.1027 219.821 18.615 219.821 16.9082C219.821 15.1783 220.23 13.8175 221.049 12.8257C221.891 11.8108 223.083 11.3034 224.627 11.3034C226.03 11.3034 227.339 11.5571 228.555 12.0645C229.794 12.572 230.975 13.1486 232.098 13.7944L235.254 6.25216C231.63 4.08405 227.854 3 223.925 3C219.809 3 216.524 4.26857 214.069 6.80572C211.637 9.34287 210.421 12.7796 210.421 17.1158C210.421 19.3761 210.725 21.3597 211.333 23.0665C211.964 24.7733 212.841 26.3187 213.964 27.7026C215.109 29.0634 216.781 30.4935 218.979 31.9927C221.505 33.6995 223.317 35.2564 224.416 36.6633C225.515 38.0472 226.065 39.5811 226.065 41.2648C226.065 42.9716 225.597 44.3209 224.662 45.3127C223.75 46.3045 222.382 46.8004 220.558 46.8004C217.354 46.8004 213.835 45.5664 210 43.0985V52.4052C213.133 54.1351 216.933 55 221.4 55C225.959 55 229.444 53.743 231.852 51.2289ZM241.674 49.8745C244.48 53.2915 248.306 55 253.152 55C257.303 55 260.862 54.1111 263.83 52.3333V44.7489C260.677 46.619 257.593 47.5541 254.578 47.5541C252.213 47.5541 250.358 46.7229 249.013 45.0606C247.668 43.3752 247.07 40.9401 247 37.5H265.5V32.4545C265.5 26.9365 264.283 22.6537 261.848 19.6061C259.413 16.5354 256.086 15 251.865 15C247.343 15 243.819 16.7893 241.291 20.368C238.764 23.9466 237.5 28.9221 237.5 35.2944C237.5 41.5743 238.891 46.4343 241.674 49.8745ZM248.526 24.2121C249.384 22.8038 250.474 22.0996 251.796 22.0996C253.21 22.0996 254.323 22.8268 255.135 24.2814C255.946 25.7359 256.454 28.1833 256.5 31H247C247.139 28.0678 247.668 25.5974 248.526 24.2121ZM288 54L286.5 49H286C284.622 51.2587 283.295 52.868 281.824 53.7208C280.352 54.5736 278.494 55 276.252 55C273.378 55 271.112 53.9398 269.453 51.8194C267.818 49.6989 267 46.7488 267 42.9689C267 38.9124 268.121 35.9046 270.364 33.9455C272.63 31.9634 276.006 30.8686 280.492 30.6612L285.678 30.4538V27.688C285.678 24.0925 284.101 22.2947 280.947 22.2947C278.611 22.2947 275.924 23.1936 272.887 24.9914L269.663 18.6301C273.542 16.21 277.694 15 282.25 15C286.385 15 289.592 16.1755 291.741 18.5264C293.914 20.8542 295 24.1616 295 28.4486V54H288ZM280.071 47.809C281.777 47.809 283.132 47.0599 284.136 45.5618C285.164 44.0406 285.678 42.0239 285.678 39.5117V36.2619L282.805 36.4002C280.679 36.5154 279.113 37.1147 278.109 38.1979C277.128 39.2812 276.637 40.8946 276.637 43.038C276.637 46.2187 277.782 47.809 280.071 47.809ZM318 15.75C316.93 15.405 315.337 15 314.222 15C312.651 15 311.273 15.5174 310.089 16.5523C308.905 17.5872 308.002 18.5853 307 21H306.5L305 16H298V54H307.463V34C307.463 30.6424 307.676 28.4763 308.86 26.7285C310.044 24.9577 311.74 24.0723 313.948 24.0723C314.973 24.0723 315.863 24.27 316.5 24.5L318 15.75ZM332 55C327.443 55 323.954 53.478 321.573 50.1302C319.191 46.7824 318 41.8647 318 35.377C318 28.5891 319.122 23.5213 321.366 20.1735C323.634 16.8257 327.017 15 331.735 15C333.154 15 334.752 15.3596 336.309 15.7752C337.866 16.1908 339.763 16.715 341 17.5L337.889 24.7449C335.989 23.6136 334.305 23.048 332.84 23.048C330.893 23.048 329.485 24.0754 328.614 26.1302C327.767 28.162 327.344 31.2211 327.344 35.3077C327.344 39.3019 327.767 42.2918 328.614 44.2774C329.462 46.2399 330.847 47.2211 332.771 47.2211C335.061 47.2211 337.454 46.413 339.95 44.7969V52.9008C337.546 54.4015 334.908 55 332 55Z" fill="#003B5C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M107.777 48.2625C110.926 43.7708 112.5 37.3442 112.5 28.9827C112.5 20.6213 110.937 14.2062 107.812 9.73754C104.686 5.24585 100.194 3 94.3368 3C88.4098 3 83.8719 5.23433 80.7231 9.70299C77.5744 14.1486 76 20.5522 76 28.9136C76 37.3442 77.5744 43.8053 80.7231 48.297C83.8719 52.7657 88.3866 55 94.2674 55C100.125 55 104.628 52.7542 107.777 48.2625ZM87.8425 42.1468C86.3839 39.1293 85.6546 34.7413 85.6546 28.9827C85.6546 23.2011 86.3839 18.8131 87.8425 15.8186C89.3011 12.8011 91.4659 11.2924 94.3368 11.2924C99.986 11.2924 102.811 17.1891 102.811 28.9827C102.811 40.7763 99.9629 46.6731 94.2674 46.6731C91.4428 46.6731 89.3011 45.1643 87.8425 42.1468ZM128.186 53.9979C129.469 54.7387 130.85 55 132.5 55C136.03 55 138.9 53.3265 140.94 49.7612C142.98 46.196 144 41.2764 144 35.0025C144 28.6359 143.014 23.7164 141.043 20.2437C139.072 16.7479 136.345 15 132.861 15C129.24 15 126.402 17.1569 124.5 21H124L122.5 16H115.5V71.5H124.5V55C124.5 54.3518 124.367 52.1485 124 49H124.5C125.25 51.25 126.925 53.2339 128.186 53.9979ZM125.882 25.3832C126.685 23.6932 127.979 22.8482 129.767 22.8482C131.44 22.8482 132.666 23.8437 133.446 25.8347C134.248 27.8257 134.649 30.8353 134.649 34.8636C134.649 43.059 133.045 47.1567 129.836 47.1567C127.979 47.1567 126.65 46.1844 125.848 44.2397C125.046 42.295 124.645 39.1928 124.645 34.933V33.7176C124.691 29.8282 125.103 27.0501 125.882 25.3832ZM161.652 55C156.806 55 152.98 53.2915 150.174 49.8745C147.391 46.4343 146 41.5743 146 35.2944C146 28.9221 147.264 23.9466 149.791 20.368C152.319 16.7893 155.843 15 160.365 15C164.586 15 167.913 16.5354 170.348 19.6061C172.783 22.6537 174 26.9365 174 32.4545V37.5H155.5C155.57 40.9401 156.168 43.3752 157.513 45.0606C158.858 46.7229 160.713 47.5541 163.078 47.5541C166.093 47.5541 169.177 46.619 172.33 44.7489V52.3333C169.362 54.1111 165.803 55 161.652 55ZM160.296 22.0996C158.974 22.0996 157.884 22.8038 157.026 24.2121C156.168 25.5974 155.639 28.0678 155.5 31H165C164.954 28.1833 164.446 25.7359 163.635 24.2814C162.823 22.8268 161.71 22.0996 160.296 22.0996ZM196.5 31V54H205.5V29.1991C205.5 24.5589 204.623 21.0323 202.868 18.6194C201.137 16.2065 198.516 15 195.007 15C192.93 15 191.117 15.5104 189.57 16.5313C188.024 17.5289 186.831 19.2135 186 21H185.5L184.25 16H177V54H186.5V35.75C186.5 31.0402 186.673 27.8302 187.597 25.8582C188.52 23.8628 189.974 22.8652 191.96 22.8652C193.461 22.8652 194.546 23.5844 195.215 25.0229C195.885 26.4614 196.5 28.1927 196.5 31Z" fill="#005EB8"/>
-</svg>
-