Branding config rename and improvement

config/opensearch_dashboards.yml

@@ -152,10 +152,10 @@
 #vis_type_timeline.graphiteBlockedIPs: []
 
 # full version customized logo URL
-# opensearchDashboards.branding.logoUrl: ""
+# opensearchDashboards.branding.fullLogoUrl: ""
 
 # smaller version customized logo URL
-# opensearchDashboards.branding.smallLogoUrl: ""
+# opensearchDashboards.branding.logoUrl: ""
 
 # customized loading logo URL
 # opensearchDashboards.branding.loadingLogoUrl: ""

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

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

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

@@ -35,21 +35,33 @@ import '../header_logo.scss';
 import { OpenSearchDashboardsLogoDarkMode } from './opensearch_dashboards_logo_darkmode';
 
 /**
- * @param {string} logoUrl - custom URL for the top left logo of the main screen
+ * @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
  */
 export interface CustomLogoType {
+  fullLogoUrl?: string;
   logoUrl?: string;
+  title: string;
 }
-
+/**
+ *
+ * @param {CustomLogoType} - branding object consist of fullLogoUrl, logoUrl 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,
+ *          the default opensearch logo will be rendered.
+ */
 export const CustomLogo = ({ ...branding }: CustomLogoType) => {
-  return !branding.logoUrl ? (
+  const headerLogoUrl = !branding.fullLogoUrl ? branding.logoUrl : branding.fullLogoUrl;
+  return !branding.fullLogoUrl && !branding.logoUrl ? (
     OpenSearchDashboardsLogoDarkMode()
   ) : (
     <img
       data-test-subj="customLogo"
-      data-test-image-url={branding.logoUrl}
-      src={branding.logoUrl}
-      alt="logo"
+      data-test-image-url={headerLogoUrl}
+      src={headerLogoUrl}
+      alt={branding.title + ' logo'}
       loading="lazy"
       className="logoImage"
     />

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: '/', smallLogoUrl: '/', title: 'OpenSearch Dashboards' },
+    branding: { fullLogoUrl: '/', logoUrl: '/', title: 'OpenSearch Dashboards' },
   };
 }
 

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

@@ -87,7 +87,7 @@ export interface HeaderProps {
   isLocked$: Observable<boolean>;
   loadingCount$: ReturnType<HttpStart['getLoadingCount$']>;
   onIsLockedUpdate: OnIsLockedUpdate;
-  branding: { logoUrl?: string };
+  branding: { fullLogoUrl?: string; logoUrl?: string; title: string };
 }
 
 export function Header({
@@ -127,7 +127,7 @@ export function Header({
                     forceNavigation$={observables.forceAppSwitcherNavigation$}
                     navLinks$={observables.navLinks$}
                     navigateToApp={application.navigateToApp}
-                    logoUrl={branding.logoUrl}
+                    branding={branding}
                   />,
                   <LoadingIndicator loadingCount$={observables.loadingCount$} />,
                 ],

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

@@ -104,15 +104,12 @@ interface Props {
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
-  logoUrl?: string;
+  branding: CustomLogoType;
 }
 
-export function HeaderLogo({ href, navigateToApp, logoUrl, ...observables }: Props) {
+export function HeaderLogo({ href, navigateToApp, branding, ...observables }: Props) {
   const forceNavigation = useObservable(observables.forceNavigation$, false);
   const navLinks = useObservable(observables.navLinks$, []);
-  const branding: CustomLogoType = {
-    logoUrl,
-  };
 
   return (
     <a

src/core/public/index.ts

@@ -237,8 +237,8 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
+      fullLogoUrl?: string;
       logoUrl?: string;
-      smallLogoUrl?: string;
       title: string;
     };
   };
@@ -297,8 +297,8 @@ export interface CoreStart {
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
     getBranding: () => {
+      fullLogoUrl?: string;
       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: '/', smallLogoUrl: '/', title: 'title' },
+        branding: { fullLogoUrl: '/', logoUrl: '/', title: 'title' },
       },
     } as any);
 
     const branding = injectedMetadata.setup().getBranding();
-    expect(branding).toEqual({ logoUrl: '/', smallLogoUrl: '/', title: 'title' });
+    expect(branding).toEqual({ fullLogoUrl: '/', logoUrl: '/', title: 'title' });
   });
 });

src/core/public/injected_metadata/injected_metadata_service.ts

@@ -77,8 +77,8 @@ export interface InjectedMetadataParams {
       };
     };
     branding: {
+      fullLogoUrl?: string;
       logoUrl?: string;
-      smallLogoUrl?: string;
       title: string;
     };
   };
@@ -186,8 +186,8 @@ export interface InjectedMetadataSetup {
     [key: string]: unknown;
   };
   getBranding: () => {
+    fullLogoUrl?: string;
     logoUrl?: string;
-    smallLogoUrl?: string;
     title: string;
   };
 }

src/core/server/opensearch_dashboards_config.ts

@@ -53,16 +53,16 @@ export const config = {
     autocompleteTerminateAfter: schema.duration({ defaultValue: 100000 }),
     autocompleteTimeout: schema.duration({ defaultValue: 1000 }),
     branding: schema.object({
-      logoUrl: schema.string({
+      fullLogoUrl: schema.string({
         defaultValue: '/',
       }),
-      smallLogoUrl: schema.string({
+      logoUrl: schema.string({
         defaultValue: '/',
       }),
       loadingLogoUrl: schema.string({
         defaultValue: '/',
       }),
-      title: schema.string({ defaultValue: 'OpenSearch Dashboards' }),
+      title: schema.string({ defaultValue: '' }),
     }),
   }),
   deprecations,

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

@@ -42,10 +42,12 @@ export const setupMock: jest.Mocked<InternalRenderingServiceSetup> = {
 export const mockSetup = jest.fn().mockResolvedValue(setupMock);
 export const mockStop = jest.fn();
 export const mockCheckUrlValid = jest.fn();
+export const mockCheckTitleValid = jest.fn();
 export const mockRenderingService: jest.Mocked<IRenderingService> = {
   setup: mockSetup,
   stop: mockStop,
   checkUrlValid: mockCheckUrlValid,
+  checkTitleValid: mockCheckTitleValid,
 };
 export const RenderingService = jest.fn<IRenderingService, [typeof mockRenderingServiceParams]>(
   () => mockRenderingService

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

@@ -138,30 +138,50 @@ describe('RenderingService', () => {
   });
 
   describe('checkUrlValid()', () => {
-    it('SVG URL is valid', async () => {
+    it('checks valid SVG URL', async () => {
       const result = await service.checkUrlValid(
         'https://opensearch.org/assets/brand/SVG/Mark/opensearch_mark_default.svg',
         'config'
       );
       expect(result).toEqual(true);
     });
 
-    it('PNG URL is valid', async () => {
+    it('checks valid PNG URL', async () => {
       const result = await service.checkUrlValid(
         'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png',
         'config'
       );
       expect(result).toEqual(true);
     });
 
-    it('URL does not contain svg, png or gif', async () => {
+    it('checks invalid URL that does not contain svg, png or gif', async () => {
       const result = await service.checkUrlValid('https://validUrl', 'config');
       expect(result).toEqual(false);
     });
 
-    it('URL is invalid', async () => {
+    it('checks invalid URL', async () => {
       const result = await service.checkUrlValid('http://notfound.svg', 'config');
       expect(result).toEqual(false);
     });
   });
+
+  describe('checkTitleValid()', () => {
+    it('checks valid title', () => {
+      const result = service.checkTitleValid('OpenSearch Dashboards', 'config');
+      expect(result).toEqual(true);
+    });
+
+    it('checks invalid title with empty string', () => {
+      const result = service.checkTitleValid('', 'config');
+      expect(result).toEqual(false);
+    });
+
+    it('checks invalid title with length > 36 character', () => {
+      const result = service.checkTitleValid(
+        'OpenSearch Dashboardssssssssssssssssssssss',
+        'config'
+      );
+      expect(result).toEqual(false);
+    });
+  });
 });