Overview Header Logo Configuration

Make logo for opensearch dashboard overview header logo be configurable.
Use config mark.defaultUrl and mark.darkModeUrl.

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

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

@@ -317,9 +317,7 @@ export function CollapsibleNav({
         {orderedCategories.map((categoryName) => {
           const category = categoryDictionary[categoryName]!;
           const opensearchLinkLogo =
-            category.label === 'OpenSearch Dashboards'
-              ? customSideMenuLogo()
-              : category.euiIconType;
+            category.id === 'opensearchDashboards' ? customSideMenuLogo() : category.euiIconType;
 
           return (
             <EuiCollapsibleNavGroup

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

@@ -155,6 +155,7 @@ export class Home extends Component {
           showDevToolsLink
           showManagementLink
           title={<FormattedMessage id="home.header.title" defaultMessage="Home" />}
+          branding={getServices().injectedMetadata.getBranding()}
         />
 
         <div className="homContent">

src/plugins/opensearch_dashboards_overview/public/application.tsx

@@ -53,6 +53,7 @@ export const renderApp = (
     .filter(({ id }) => id !== 'opensearchDashboards')
     .filter(({ id }) => navLinks.find(({ category, hidden }) => !hidden && category?.id === id));
   const features = home.featureCatalogue.get();
+  const branding = core.injectedMetadata.getBranding();
 
   ReactDOM.render(
     <I18nProvider>
@@ -65,6 +66,7 @@ export const renderApp = (
           newsfeed$={newsfeed$}
           solutions={solutions}
           features={features}
+          branding={branding}
         />
       </OpenSearchDashboardsContextProvider>
     </I18nProvider>,

src/plugins/opensearch_dashboards_overview/public/components/app.tsx

@@ -39,6 +39,7 @@ import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { FetchResult } from 'src/plugins/newsfeed/public';
 import { FeatureCatalogueEntry, FeatureCatalogueSolution } from 'src/plugins/home/public';
 import { Overview } from './overview';
+import { OverviewPluginBranding } from '../plugin';
 
 interface OpenSearchDashboardsOverviewAppDeps {
   basename: string;
@@ -48,13 +49,15 @@ interface OpenSearchDashboardsOverviewAppDeps {
   newsfeed$?: Observable<FetchResult | null | void>;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
+  branding: OverviewPluginBranding;
 }
 
 export const OpenSearchDashboardsOverviewApp = ({
   basename,
   newsfeed$,
   solutions,
   features,
+  branding,
 }: OpenSearchDashboardsOverviewAppDeps) => {
   const [newsFetchResult, setNewsFetchResult] = useState<FetchResult | null | void>(null);
 
@@ -73,7 +76,12 @@ export const OpenSearchDashboardsOverviewApp = ({
       <I18nProvider>
         <Switch>
           <Route exact path="/">
-            <Overview newsFetchResult={newsFetchResult} solutions={solutions} features={features} />
+            <Overview
+              newsFetchResult={newsFetchResult}
+              solutions={solutions}
+              features={features}
+              branding={branding}
+            />
           </Route>
         </Switch>
       </I18nProvider>

src/plugins/opensearch_dashboards_overview/public/components/overview/overview.test.tsx

@@ -167,26 +167,45 @@ const mockFeatures = [
   },
 ];
 
+const mockBranding = {
+  darkMode: false,
+  mark: {
+    defaultUrl: '/defaultModeUrl',
+    darkModeUrl: '/darkModeUrl',
+  },
+};
+
 describe('Overview', () => {
   test('render', () => {
     const component = shallowWithIntl(
       <Overview
         newsFetchResult={mockNewsFetchResult}
         solutions={mockSolutions}
         features={mockFeatures}
+        branding={mockBranding}
       />
     );
     expect(component).toMatchSnapshot();
   });
   test('without solutions', () => {
     const component = shallowWithIntl(
-      <Overview newsFetchResult={mockNewsFetchResult} solutions={[]} features={mockFeatures} />
+      <Overview
+        newsFetchResult={mockNewsFetchResult}
+        solutions={[]}
+        features={mockFeatures}
+        branding={mockBranding}
+      />
     );
     expect(component).toMatchSnapshot();
   });
   test('without features', () => {
     const component = shallowWithIntl(
-      <Overview newsFetchResult={mockNewsFetchResult} solutions={mockSolutions} features={[]} />
+      <Overview
+        newsFetchResult={mockNewsFetchResult}
+        solutions={mockSolutions}
+        features={[]}
+        branding={mockBranding}
+      />
     );
     expect(component).toMatchSnapshot();
   });

src/plugins/opensearch_dashboards_overview/public/components/overview/overview.tsx

@@ -62,17 +62,18 @@ import { AddData } from '../add_data';
 import { GettingStarted } from '../getting_started';
 import { ManageData } from '../manage_data';
 import { NewsFeed } from '../news_feed';
+import { OverviewPluginBranding } from '../../plugin';
 
 const sortByOrder = (featureA: FeatureCatalogueEntry, featureB: FeatureCatalogueEntry) =>
   (featureA.order || Infinity) - (featureB.order || Infinity);
-
 interface Props {
   newsFetchResult: FetchResult | null | void;
   solutions: FeatureCatalogueSolution[];
   features: FeatureCatalogueEntry[];
+  branding: OverviewPluginBranding;
 }
 
-export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) => {
+export const Overview: FC<Props> = ({ newsFetchResult, solutions, features, branding }) => {
   const [isNewOpenSearchDashboardsInstance, setNewOpenSearchDashboardsInstance] = useState(false);
   const {
     services: { http, data, uiSettings, application },
@@ -155,6 +156,7 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
             id="opensearchDashboardsOverview.header.title"
           />
         }
+        branding={branding}
       />
 
       <div className="osdOverviewContent">

src/plugins/opensearch_dashboards_overview/public/plugin.ts

@@ -41,6 +41,7 @@ import {
   DEFAULT_APP_CATEGORIES,
   AppStatus,
   AppNavLinkStatus,
+  Branding,
 } from '../../../core/public';
 import {
   OpenSearchDashboardsOverviewPluginSetup,
@@ -50,6 +51,9 @@ import {
 } from './types';
 import { PLUGIN_ID, PLUGIN_NAME, PLUGIN_PATH, PLUGIN_ICON } from '../common';
 
+/** @public */
+export type OverviewPluginBranding = Branding;
+
 export class OpenSearchDashboardsOverviewPlugin
   implements
     Plugin<

src/plugins/opensearch_dashboards_react/public/index.ts

@@ -48,6 +48,10 @@ export { reactToUiComponent, uiToReactComponent } from './adapters';
 export { useUrlTracker } from './use_url_tracker';
 export { toMountPoint, MountPointPortal } from './util';
 export { RedirectAppLinks } from './app_links';
+import { Branding } from 'opensearch-dashboards/public';
+
+/** Custom branding configurations for opensearch dashboards react plugin */
+export type ReactPluginBranding = Branding;
 
 /** dummy plugin, we just want opensearchDashboardsReact to have its own bundle */
 export function plugin() {