Branding config structure change and renaming (#793)

Change the branding related config to a map structure in the yml file.
Also rename the configs according to the official branding guidelines.
The full logo on the main page header will be called logo; the small
logo icon will be called mark.

Signed-off-by: Abby Hu <abigailhu2000@gmail.com>

config/opensearch_dashboards.yml

@@ -151,16 +151,15 @@
 # ]
 #vis_type_timeline.graphiteBlockedIPs: []
 
-# full version customized logo URL
-# opensearchDashboards.branding.fullLogoUrl: ""
-
-# smaller version customized logo URL
-# opensearchDashboards.branding.logoUrl: ""
-
-# customized loading logo URL
-# opensearchDashboards.branding.loadingLogoUrl: ""
-
-# custom application title
-# opensearchDashboards.branding.title: ""
-
-
+# opensearchDashboards.branding:
+  # logo:
+    # defaultUrl: ""
+    # darkModeUrl: ""
+  # mark:
+    # defaultUrl: ""
+    # darkModeUrl: ""
+  # loadingLogo: 
+    # defaultUrl: ""
+    # darkModeUrl: ""
+  # favicon: ""
+  # applicationTitle: ""

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

@@ -12,19 +12,31 @@ import { CustomLogo } from './opensearch_dashboards_custom_logo';
 
 describe('Custom Logo', () => {
   it('Take in a normal full logo URL string', () => {
-    const branding = { fullLogoUrl: '/custom', title: 'title' };
+    const branding = {
+      logo: { defaultUrl: '/' },
+      mark: {},
+      applicationTitle: 'title',
+    };
     const component = mountWithIntl(<CustomLogo {...branding} />);
     expect(component).toMatchSnapshot();
   });
 
   it('Take in an invalid full logo URL string and a valid logo URL string', () => {
-    const branding = { logoUrl: '/custom', title: 'title' };
+    const branding = {
+      logo: {},
+      mark: { defaultUrl: '/' },
+      applicationTitle: 'title',
+    };
     const component = mountWithIntl(<CustomLogo {...branding} />);
     expect(component).toMatchSnapshot();
   });
 
   it('Take in invalid full logo URL and logo URL', () => {
-    const branding = { title: 'title' };
+    const branding = {
+      logo: {},
+      mark: {},
+      applicationTitle: 'title',
+    };
     const component = mountWithIntl(<CustomLogo {...branding} />);
     expect(component).toMatchSnapshot();
   });

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

@@ -35,35 +35,45 @@ import '../header_logo.scss';
 import { OpenSearchDashboardsLogoDarkMode } from './opensearch_dashboards_logo_darkmode';
 
 /**
- * @param {string} fullLogoUrl - custom URL for the top left logo of the main screen
- * @param {string} logoUrl - custom URL for the logo icon
- * @param {string} title - custom title for the application
+ * @param {object} logo - full logo on main screen: defaultUrl will be used in default mode; darkModeUrl will be used in dark mode
+ * @param {object} mark - thumbnail logo: defaultUrl will be used in default mode; darkModeUrl will be used in dark mode
+ * @param {string} applicationTitle - custom title for the application
  */
 export interface CustomLogoType {
-  fullLogoUrl?: string;
-  logoUrl?: string;
-  title: string;
+  logo: {
+    defaultUrl?: string;
+    darkModeUrl?: string;
+  };
+  mark: {
+    defaultUrl?: string;
+    darkModeUrl?: string;
+  };
+  applicationTitle?: string;
 }
 /**
  *
- * @param {CustomLogoType} - branding object consist of fullLogoUrl, logoUrl and title
+ * @param {CustomLogoType} - branding object consist of logo, mark and title
  * @returns A image component which is going to be rendered on the main page header bar.
- *          If fullLogoUrl is valid, the full logo by fullLogoUrl config will be rendered;
- *          if not, the logo icon by logoUrl config will be rendered; if both are not found,
+ *          If logo default is valid, the full logo by logo default config will be rendered;
+ *          if not, the logo icon by mark default config will be rendered; if both are not found,
  *          the default opensearch logo will be rendered.
  */
 export const CustomLogo = ({ ...branding }: CustomLogoType) => {
-  const headerLogoUrl = !branding.fullLogoUrl ? branding.logoUrl : branding.fullLogoUrl;
-  return !branding.fullLogoUrl && !branding.logoUrl ? (
+  const headerLogoUrl = !branding.logo.defaultUrl
+    ? branding.mark.defaultUrl
+    : branding.logo.defaultUrl;
+  return !branding.logo.defaultUrl && !branding.mark.defaultUrl ? (
     OpenSearchDashboardsLogoDarkMode()
   ) : (
-    <img
-      data-test-subj="customLogo"
-      data-test-image-url={headerLogoUrl}
-      src={headerLogoUrl}
-      alt={branding.title + ' logo'}
-      loading="lazy"
-      className="logoImage"
-    />
+    <div className="logoContainer">
+      <img
+        data-test-subj="customLogo"
+        data-test-image-url={headerLogoUrl}
+        src={headerLogoUrl}
+        alt={branding.applicationTitle + ' logo'}
+        loading="lazy"
+        className="logoImage"
+      />
+    </div>
   );
 };

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

@@ -69,7 +69,11 @@ function mockProps() {
     isLocked$: new BehaviorSubject(false),
     loadingCount$: new BehaviorSubject(0),
     onIsLockedUpdate: () => {},
-    branding: { fullLogoUrl: '/', logoUrl: '/', title: 'OpenSearch Dashboards' },
+    branding: {
+      logo: { defaultUrl: '/' },
+      mark: { defaultUrl: '/' },
+      applicationTitle: 'OpenSearch Dashboards',
+    },
   };
 }
 

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

@@ -87,7 +87,17 @@ export interface HeaderProps {
   isLocked$: Observable<boolean>;
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
-  branding: { fullLogoUrl?: string; logoUrl?: string; title: string };
+  branding: {
+    logo: {
+      defaultUrl?: string;
+      darkModeUrl?: string;
+    };
+    mark: {
+      defaultUrl?: string;
+      darkModeUrl?: string;
+    };
+    applicationTitle?: string;
+  };
 }
 
 export function Header({

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

@@ -3,7 +3,7 @@
     padding: 3px 3px 3px 10px;
 }
 
-.logoImage{
+.logoImage {
     height: 100%;
     max-width: 100%;
 }

src/core/public/index.ts

@@ -237,9 +237,11 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
-      fullLogoUrl?: string;
-      logoUrl?: string;
-      title: string;
+      mark: {
+        defaultUrl?: string;
+        darkModeUrl?: string;
+      };
+      title?: string;
     };
   };
   /** {@link StartServicesAccessor} */
@@ -297,9 +299,11 @@ export interface CoreStart {
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
-      fullLogoUrl?: string;
-      logoUrl?: string;
-      title: string;
+      mark: {
+        defaultUrl?: string;
+        darkModeUrl?: string;
+      };
+      applicationTitle?: string;
     };
   };
 }