Make home page primary dashboard card logo and title configurable

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: Abby Hu <[email protected]>

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}