Make home page primary dashboard card logo and title configurable (#809)

Home page dashboard card logo and title can be customized by config
mark.defaultUrl and mark.darkModeUrl. Unit test and functional test
are also written.

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

config/opensearch_dashboards.yml

@@ -162,4 +162,4 @@
     # defaultUrl: ""
     # darkModeUrl: ""
   # faviconUrl: ""
-  # applicationTitle: ""
+  # applicationTitle: ""

src/core/public/chrome/chrome_service.tsx

@@ -51,6 +51,7 @@ import { ChromeNavLinks, NavLinksService, ChromeNavLink } from './nav_links';
 import { ChromeRecentlyAccessed, RecentlyAccessedService } from './recently_accessed';
 import { Header } from './ui';
 import { ChromeHelpExtensionMenuLink } from './ui/header/header_help_menu';
+import { Branding } from '../';
 export { ChromeNavControls, ChromeRecentlyAccessed, ChromeDocTitle };
 
 const IS_LOCKED_KEY = 'core.chrome.isLocked';
@@ -71,6 +72,9 @@ export interface ChromeBrand {
 /** @public */
 export type ChromeBreadcrumb = EuiBreadcrumb;
 
+/** @public */
+export type ChromeBranding = Branding;
+
 /** @public */
 export interface ChromeHelpExtension {
   /**

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

@@ -33,40 +33,23 @@
 import React from 'react';
 import '../header_logo.scss';
 import { OpenSearchDashboardsLogoDarkMode } from './opensearch_dashboards_logo_darkmode';
-
-/**
- * @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 {
-  darkMode: boolean;
-  logo: {
-    defaultUrl?: string;
-    darkModeUrl?: string;
-  };
-  mark: {
-    defaultUrl?: string;
-    darkModeUrl?: string;
-  };
-  applicationTitle?: string;
-}
+import { ChromeBranding } from '../../../chrome_service';
 
 /**
  * Use branding configurations to render the header logo on the nab bar.
  *
- * @param {CustomLogoType} - branding object consist of logo, mark and title
+ * @param {ChromeBranding} - 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 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) => {
+export const CustomLogo = ({ ...branding }: ChromeBranding) => {
   const darkMode = branding.darkMode;
-  const logoDefault = branding.logo.defaultUrl;
-  const logoDarkMode = branding.logo.darkModeUrl;
-  const markDefault = branding.mark.defaultUrl;
-  const markDarkMode = branding.mark.darkModeUrl;
+  const logoDefault = branding.logo?.defaultUrl;
+  const logoDarkMode = branding.logo?.darkModeUrl;
+  const markDefault = branding.mark?.defaultUrl;
+  const markDarkMode = branding.mark?.darkModeUrl;
   const applicationTitle = branding.applicationTitle;
 
   /**

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

@@ -55,7 +55,7 @@ import {
 } from '../..';
 import { InternalApplicationStart } from '../../../application/types';
 import { HttpStart } from '../../../http';
-import { ChromeHelpExtension } from '../../chrome_service';
+import { ChromeHelpExtension, ChromeBranding } from '../../chrome_service';
 import { OnIsLockedUpdate } from './';
 import { CollapsibleNav } from './collapsible_nav';
 import { HeaderBadge } from './header_badge';
@@ -87,18 +87,7 @@ export interface HeaderProps {
   isLocked$: Observable<boolean>;
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
-  branding: {
-    darkMode: boolean;
-    logo: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
-    mark: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
-    applicationTitle?: string;
-  };
+  branding: ChromeBranding;
 }
 
 export function Header({

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

@@ -36,7 +36,8 @@ import useObservable from 'react-use/lib/useObservable';
 import { Observable } from 'rxjs';
 import Url from 'url';
 import { ChromeNavLink } from '../..';
-import { CustomLogo, CustomLogoType } from './branding/opensearch_dashboards_custom_logo';
+import { CustomLogo } from './branding/opensearch_dashboards_custom_logo';
+import { ChromeBranding } from '../../chrome_service';
 import './header_logo.scss';
 
 function findClosestAnchor(element: HTMLElement): HTMLAnchorElement | void {
@@ -104,7 +105,7 @@ interface Props {
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
-  branding: CustomLogoType;
+  branding: ChromeBranding;
 }
 
 export function HeaderLogo({ href, navigateToApp, branding, ...observables }: Props) {

src/core/public/index.ts

@@ -89,6 +89,7 @@ import {
   HandlerContextType,
   HandlerParameters,
 } from './context';
+import { Branding } from '../types';
 
 export { PackageInfo, EnvironmentMode } from '../server/types';
 /** @interal */
@@ -236,13 +237,7 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
    * */
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
-    getBranding: () => {
-      mark: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      title?: string;
-    };
+    getBranding: () => Branding;
   };
   /** {@link StartServicesAccessor} */
   getStartServices: StartServicesAccessor<TPluginsStart, TStart>;
@@ -298,14 +293,7 @@ export interface CoreStart {
    * */
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
-    getBranding: () => {
-      darkMode: boolean;
-      mark: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      applicationTitle?: string;
-    };
+    getBranding: () => Branding;
   };
 }
 
@@ -352,6 +340,7 @@ export {
   IUiSettingsClient,
   UiSettingsState,
   NavType,
+  Branding,
 };
 
 export { __osdBootstrap__ } from './osd_bootstrap';

src/core/public/injected_metadata/injected_metadata_service.ts

@@ -39,7 +39,7 @@ import {
   UiSettingsParams,
   UserProvidedValues,
 } from '../../server/types';
-import { AppCategory } from '../';
+import { AppCategory, Branding } from '../';
 
 export interface InjectedPluginMetadata {
   id: PluginName;
@@ -76,23 +76,7 @@ export interface InjectedMetadataParams {
         user?: Record<string, UserProvidedValues>;
       };
     };
-    branding: {
-      darkMode: boolean;
-      logo: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      mark: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      loadingLogo: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      faviconUrl?: string;
-      applicationTitle?: string;
-    };
+    branding: Branding;
   };
 }
 
@@ -197,23 +181,7 @@ export interface InjectedMetadataSetup {
   getInjectedVars: () => {
     [key: string]: unknown;
   };
-  getBranding: () => {
-    darkMode: boolean;
-    logo: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
-    mark: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
-    loadingLogo: {
-      defaultUrl?: string;
-      darkModeUrl?: string;
-    };
-    faviconUrl?: string;
-    applicationTitle?: string;
-  };
+  getBranding: () => Branding;
 }
 
 /** @internal */

src/core/server/rendering/types.ts

@@ -32,6 +32,7 @@
 
 import { i18n } from '@osd/i18n';
 
+import { Branding } from 'src/core/types';
 import { EnvironmentMode, PackageInfo } from '../config';
 import { ICspConfig } from '../csp';
 import { InternalHttpServiceSetup, OpenSearchDashboardsRequest, LegacyRequest } from '../http';
@@ -74,23 +75,7 @@ export interface RenderingMetadata {
         user: Record<string, UserProvidedValues<any>>;
       };
     };
-    branding: {
-      darkMode: boolean;
-      logo: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      mark: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      loadingLogo: {
-        defaultUrl?: string;
-        darkModeUrl?: string;
-      };
-      faviconUrl?: string;
-      applicationTitle?: string;
-    };
+    branding: Branding;
   };
 }
 

src/core/server/rendering/views/template.tsx

@@ -96,10 +96,10 @@ export const Template: FunctionComponent<Props> = ({
     </svg>
   );
 
-  const loadingLogoDefault = injectedMetadata.branding.loadingLogo.defaultUrl;
-  const loadingLogoDarkMode = injectedMetadata.branding.loadingLogo.darkModeUrl;
-  const markDefault = injectedMetadata.branding.mark.defaultUrl;
-  const markDarkMode = injectedMetadata.branding.mark.darkModeUrl;
+  const loadingLogoDefault = injectedMetadata.branding.loadingLogo?.defaultUrl;
+  const loadingLogoDarkMode = injectedMetadata.branding.loadingLogo?.darkModeUrl;
+  const markDefault = injectedMetadata.branding.mark?.defaultUrl;
+  const markDarkMode = injectedMetadata.branding.mark?.darkModeUrl;
   const favicon = injectedMetadata.branding.faviconUrl;
   const applicationTitle = injectedMetadata.branding.applicationTitle;
 
@@ -149,7 +149,7 @@ export const Template: FunctionComponent<Props> = ({
    * @returns a loading bar component or no loading bar component
    */
   const renderBrandingEnabledOrDisabledLoadingBar = () => {
-    if (customLoadingLogo() && !injectedMetadata.branding.loadingLogo.defaultUrl) {
+    if (customLoadingLogo() && !loadingLogoDefault) {
       return <div className="osdProgress" />;
     }
   };

src/core/server/types.ts

@@ -36,3 +36,4 @@ export * from './saved_objects/types';
 export * from './ui_settings/types';
 export * from './legacy/types';
 export type { EnvironmentMode, PackageInfo } from '@osd/config';
+export { Branding } from '../../core/types';

src/core/types/custom_branding.ts

@@ -0,0 +1,60 @@
+/*
+ * 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.
+ */
+
+/**
+ * A type definition for custom branding configurations from yml file
+ * @public
+ */
+
+export interface Branding {
+  /** Default mode or Dark mode*/
+  darkMode?: boolean;
+  /** Small logo icon that will be used in most logo occurrences */
+  mark?: {
+    defaultUrl?: string;
+    darkModeUrl?: string;
+  };
+  /** Fuller logo that will be rendered on nav bar header */
+  logo?: {
+    defaultUrl?: string;
+    darkModeUrl?: string;
+  };
+  /** Loading logo that will be rendered on the loading page */
+  loadingLogo?: {
+    defaultUrl?: string;
+    darkModeUrl?: string;
+  };
+  /** Custom favicon that will be rendered on the browser tab */
+  faviconUrl?: string;
+  /** Application title that will replace the default opensearch dashboard string */
+  applicationTitle?: string;
+}

src/core/types/index.ts

@@ -40,3 +40,4 @@ export * from './app_category';
 export * from './ui_settings';
 export * from './saved_objects';
 export * from './serializable';
+export * from './custom_branding';

src/plugins/home/public/application/components/_solutions_section.scss

@@ -135,3 +135,13 @@
     background-size: $euiSizeL * 2;
   }
 }
+
+.homSolutionPanel__customIconContainer {
+  height: 50px;
+  padding: 5px 5px 5px 5px;
+}
+
+.homSolutionPanel__customIcon {
+  height: 100%;
+  max-width: 100%;
+}

src/plugins/home/public/application/components/home.js

@@ -163,6 +163,7 @@ export class Home extends Component {
               addBasePath={addBasePath}
               solutions={solutions}
               directories={directories}
+              branding={getServices().injectedMetadata.getBranding()}
             />
           ) : null}