Branding configs rename and improvement (opensearch-project#771)

Change config smallLogoUrl to logoUrl, config logoUrl to fullLogoUrl to emphasize that thumbnail version
of the logo will be used mostly in the application. Full version of the logo will only be used on the main
page nav bar. If full logo is not provided, thumbnail logo will be used on the nav bar. Some config improvement
includes fixing the validation error when inputting empty string, and add title validation function.

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

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);
+    });
+  });
 });