title and small logo config working

config/opensearch_dashboards.yml

@@ -151,9 +151,13 @@
 # ]
 #vis_type_timeline.graphiteBlockedIPs: []
 
-# user input URL for customized logo 
- opensearchDashboards.branding.logoUrl: "https://i.ibb.co/WHHLG2W/bear.png"
+# user input URL for customized logo on the main page
+# opensearchDashboards.branding.logoUrl: "https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg"
+
+# user input URL for customized logo of smaller version 
+ opensearchDashboards.branding.smallLogoUrl: "https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg"
 
 # user input for custom application title
- opensearchDashboards.branding.title: "BearSearch Dashboards"
+# opensearchDashboards.branding.title: "BearSearch Dashboards"
+
 

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

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

src/core/public/index.ts

@@ -238,6 +238,7 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
       logoUrl: string;
+      smallLogoUrl: string;
       title: string;
     };
   };
@@ -297,6 +298,7 @@ export interface CoreStart {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
       logoUrl: string;
+      smallLogoUrl: string;
       title: string;
     };
   };

src/core/public/injected_metadata/injected_metadata_service.test.ts

@@ -234,11 +234,11 @@ describe('setup.getBranding()', () => {
   it('returns injectedMetadata.branding', () => {
     const injectedMetadata = new InjectedMetadataService({
       injectedMetadata: {
-        branding: { logoUrl: '/' },
+        branding: { logoUrl: '/', smallLogoUrl: '/', title: 'title' },
       },
     } as any);
 
     const logoURL = injectedMetadata.setup().getBranding();
-    expect(logoURL).toEqual({ logoUrl: '/' });
+    expect(logoURL).toEqual({ logoUrl: '/', smallLogoUrl: '/', title: 'title' });
   });
 });

src/core/public/injected_metadata/injected_metadata_service.ts

@@ -78,6 +78,7 @@ export interface InjectedMetadataParams {
     };
     branding: {
       logoUrl: string;
+      smallLogoUrl: string;
       title: string;
     };
   };
@@ -186,6 +187,7 @@ export interface InjectedMetadataSetup {
   };
   getBranding: () => {
     logoUrl: string;
+    smallLogoUrl: string;
     title: string;
   };
 }

src/core/server/opensearch_dashboards_config.ts

@@ -53,10 +53,15 @@ export const config = {
     autocompleteTerminateAfter: schema.duration({ defaultValue: 100000 }),
     autocompleteTimeout: schema.duration({ defaultValue: 1000 }),
     branding: schema.object({
+      // custom_enabled: schema.boolean({ defaultValue: false }),
       logoUrl: schema.string({
         defaultValue:
           'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg',
       }),
+      smallLogoUrl: schema.string({
+        defaultValue:
+          'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg',
+      }),
       title: schema.string({ defaultValue: 'OpenSearch Dashboards' }),
     }),
   }),

src/core/server/rendering/rendering_service.test.ts

@@ -136,42 +136,72 @@ describe('RenderingService', () => {
       });
     });
   });
+  /* jest.mock('axios', () => ({
+    async get(url: string) {
+      expect(url).toBe('https://validSVGUrl.svg')
+      return {
+        status: 200,
+      };
+    },
+  }));*/
   describe('checkUrlvalid()', () => {
-    it('URL is valid', async () => {
-      jest.mock('axios', () => ({
-        async get() {
+    it('SVG URL is valid', async () => {
+      /* jest.mock('axios', () => ({
+        async get(url: string) {
+          expect(url).toBe('https://validSVGUrl.svg')
           return {
             status: 200,
           };
         },
-      }));
+      }));*/
       const result = await service.checkUrlValid(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+        'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg',
+        'error',
+        'https://validUrl.svg'
       );
       expect(result).toEqual(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+        'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg'
       );
     });
-    it('URL does not contain jpeg, jpg, gif, or png', async () => {
+    it('PNG URL is valid', async () => {
+      /* jest.mock('axios', () => ({
+        async get() {
+          return {
+            status: 200,
+          };
+        },
+      }));*/
       const result = await service.checkUrlValid(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode'
+        'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png',
+        'error',
+        'https://validUrl.png'
       );
       expect(result).toEqual(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+        'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png'
+      );
+    });
+    it('URL does not contain svg, or png', async () => {
+      const result = await service.checkUrlValid(
+        'https://validUrl',
+        'error',
+        'https://validUrl.svg'
       );
+      expect(result).toEqual('https://validUrl.svg');
     });
     it('URL is invalid', async () => {
-      jest.mock('axios', () => ({
+      /* jest.mock('axios', () => ({
         async get() {
           return {
             status: 404,
           };
         },
-      }));
-      const result = await service.checkUrlValid('http://notfound');
-      expect(result).toEqual(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+      }));*/
+      const result = await service.checkUrlValid(
+        'http://notfound.svg',
+        'error',
+        'https://validUrl.svg'
       );
+      expect(result).toEqual('https://validUrl.svg');
     });
   });
 });

src/core/server/rendering/rendering_service.tsx

@@ -63,7 +63,16 @@ export class RenderingService {
       .pipe(first())
       .toPromise();
 
-    const validLogoUrl = await this.checkUrlValid(opensearchDashboardsConfig.branding.logoUrl);
+    const validLogoUrl = await this.checkUrlValid(
+      opensearchDashboardsConfig.branding.logoUrl,
+      'Invalid logoUrl, default OpenSearch logo will be rendered on the main page',
+      'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+    );
+    const validSmallLogoUrl = await this.checkUrlValid(
+      opensearchDashboardsConfig.branding.smallLogoUrl,
+      'Invalid smallLogoUrl, default OpenSearch logo will be rendered on the welcome page',
+      'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+    );
 
     return {
       render: async (
@@ -115,6 +124,7 @@ export class RenderingService {
             },
             branding: {
               logoUrl: validLogoUrl,
+              smallLogoUrl: validSmallLogoUrl,
               title: opensearchDashboardsConfig.branding.title,
             },
           },
@@ -133,22 +143,22 @@ export class RenderingService {
     return ((await browserConfig?.pipe(take(1)).toPromise()) ?? {}) as Record<string, any>;
   }
 
-  public checkUrlValid = async (url: string): Promise<string> => {
+  public checkUrlValid = async (
+    url: string,
+    errorMessage: string,
+    validUrl: string
+  ): Promise<string> => {
     if (url.match(/\.(png|svg)$/) === null) {
-      this.logger
-        .get('branding')
-        .error('Invalid URL for logo. Rendering default OpenSearch Dashboard Logo.');
-      return 'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg';
+      this.logger.get('branding').error(errorMessage);
+      return validUrl;
     }
     return await Axios.get(url, { adapter: AxiosHttpAdapter })
       .then(() => {
         return url;
       })
       .catch(() => {
-        this.logger
-          .get('branding')
-          .error('Invalid URL for logo. Rendering default OpenSearch Dashboard Logo.');
-        return 'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg';
+        this.logger.get('branding').error(errorMessage);
+        return validUrl;
       });
   };
 }

src/core/server/rendering/types.ts

@@ -76,6 +76,7 @@ export interface RenderingMetadata {
     };
     branding: {
       logoUrl: string;
+      smallLogoUrl: string;
       title: string;
     };
   };

src/legacy/server/config/schema.js

@@ -237,6 +237,9 @@ export default () =>
         logoUrl: Joi.string().default(
           'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
         ),
+        smallLogoUrl: Joi.string().default(
+          'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg'
+        ),
         title: Joi.string().default('OpenSearch Dashboards'),
       }),
     }).default(),