Welcome page title and logo configurable (#738)

Add two new configs branding.smallLogoUrl and branding.title in the yaml file for making the welcome page logo and title configurable. If URL is invalid, the default branding will be shown. Signed-off-by: Qingyang(Abby) Hu <[email protected]>
opensearch-project · Oct 30, 2021 · 6e8003e · 6e8003e
1 parent 9365ed1
commit 6e8003e
Show file tree

Hide file tree

Showing 33 changed files with 615 additions and 112 deletions.
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
@@ -149,6 +149,13 @@
 # ]
 #vis_type_timeline.graphiteBlockedIPs: []
 
-# user input URL for customized logo 
+# full version customized logo URL
 # opensearchDashboards.branding.logoUrl: ""
 
+# smaller version customized logo URL
+# opensearchDashboards.branding.smallLogoUrl: ""
+
+# custom application title
+# opensearchDashboards.branding.title: ""
+
+
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/...c/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap b/...c/chrome/ui/header/branding/__snapshots__/opensearch_dashboards_custom_logo.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.test.tsx
@@ -12,7 +12,12 @@ import { CustomLogo } from './opensearch_dashboards_custom_logo';
 
 describe('Custom Logo', () => {
   it('Take in a normal URL string', () => {
-    const branding = { logoUrl: '/', className: '' };
+    const branding = { logoUrl: '/custom' };
+    const component = mountWithIntl(<CustomLogo {...branding} />);
+    expect(component).toMatchSnapshot();
+  });
+  it('Take in a invalid URL string', () => {
+    const branding = {};
     const component = mountWithIntl(<CustomLogo {...branding} />);
     expect(component).toMatchSnapshot();
   });

diff --git a/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx b/src/core/public/chrome/ui/header/branding/opensearch_dashboards_custom_logo.tsx
@@ -32,13 +32,19 @@
 
 import React from 'react';
 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
+ */
 export interface CustomLogoType {
-  logoUrl: string;
+  logoUrl?: string;
 }
 
 export const CustomLogo = ({ ...branding }: CustomLogoType) => {
-  return (
+  return !branding.logoUrl ? (
+    OpenSearchDashboardsLogoDarkMode()
+  ) : (
     <img
       data-test-subj="customLogo"
       data-test-image-url={branding.logoUrl}

diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/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' },
   };
 }
 

diff --git a/src/core/public/chrome/ui/header/header.tsx b/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: { logoUrl?: string };
 }
 
 export function Header({

diff --git a/src/core/public/chrome/ui/header/header_logo.tsx b/src/core/public/chrome/ui/header/header_logo.tsx
@@ -104,7 +104,7 @@ interface Props {
   navLinks$: Observable<ChromeNavLink[]>;
   forceNavigation$: Observable<boolean>;
   navigateToApp: (appId: string) => void;
-  logoUrl: string;
+  logoUrl?: string;
 }
 
 export function HeaderLogo({ href, navigateToApp, logoUrl, ...observables }: Props) {

diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
@@ -239,7 +239,7 @@ export class CoreSystem {
         docLinks,
         http,
         i18n,
-        injectedMetadata: pick(injectedMetadata, ['getInjectedVar']),
+        injectedMetadata: pick(injectedMetadata, ['getInjectedVar', 'getBranding']),
         notifications,
         overlays,
         savedObjects,

diff --git a/src/core/public/index.ts b/src/core/public/index.ts
@@ -236,6 +236,11 @@ export interface CoreSetup<TPluginsStart extends object = object, TStart = unkno
    * */
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
+    getBranding: () => {
+      logoUrl?: string;
+      smallLogoUrl?: string;
+      title: string;
+    };
   };
   /** {@link StartServicesAccessor} */
   getStartServices: StartServicesAccessor<TPluginsStart, TStart>;
@@ -291,6 +296,11 @@ export interface CoreStart {
    * */
   injectedMetadata: {
     getInjectedVar: (name: string, defaultValue?: any) => unknown;
+    getBranding: () => {
+      logoUrl?: string;
+      smallLogoUrl?: string;
+      title: string;
+    };
   };
 }
 

diff --git a/src/core/public/injected_metadata/injected_metadata_service.test.ts b/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: '/' });
+    const branding = injectedMetadata.setup().getBranding();
+    expect(branding).toEqual({ logoUrl: '/', smallLogoUrl: '/', title: 'title' });
   });
 });
diff --git a/src/core/public/injected_metadata/injected_metadata_service.ts b/src/core/public/injected_metadata/injected_metadata_service.ts
@@ -77,7 +77,9 @@ export interface InjectedMetadataParams {
       };
     };
     branding: {
-      logoUrl: string;
+      logoUrl?: string;
+      smallLogoUrl?: string;
+      title: string;
     };
   };
 }
@@ -184,7 +186,9 @@ export interface InjectedMetadataSetup {
     [key: string]: unknown;
   };
   getBranding: () => {
-    logoUrl: string;
+    logoUrl?: string;
+    smallLogoUrl?: string;
+    title: string;
   };
 }
 

diff --git a/src/core/public/mocks.ts b/src/core/public/mocks.ts
@@ -103,6 +103,7 @@ function createCoreStartMock({ basePath = '' } = {}) {
     savedObjects: savedObjectsServiceMock.createStartContract(),
     injectedMetadata: {
       getInjectedVar: injectedMetadataServiceMock.createStartContract().getInjectedVar,
+      getBranding: injectedMetadataServiceMock.createStartContract().getBranding,
     },
     fatalErrors: fatalErrorsServiceMock.createStartContract(),
   };

diff --git a/src/core/public/plugins/plugin_context.ts b/src/core/public/plugins/plugin_context.ts
@@ -120,6 +120,7 @@ export function createPluginSetupContext<
     uiSettings: deps.uiSettings,
     injectedMetadata: {
       getInjectedVar: deps.injectedMetadata.getInjectedVar,
+      getBranding: deps.injectedMetadata.getBranding,
     },
     getStartServices: () => plugin.startDependencies,
   };
@@ -166,6 +167,7 @@ export function createPluginStartContext<
     savedObjects: deps.savedObjects,
     injectedMetadata: {
       getInjectedVar: deps.injectedMetadata.getInjectedVar,
+      getBranding: deps.injectedMetadata.getBranding,
     },
     fatalErrors: deps.fatalErrors,
   };

diff --git a/src/core/public/plugins/plugins_service.test.ts b/src/core/public/plugins/plugins_service.test.ts
@@ -113,7 +113,7 @@ describe('PluginsService', () => {
       ...mockSetupDeps,
       application: expect.any(Object),
       getStartServices: expect.any(Function),
-      injectedMetadata: pick(mockSetupDeps.injectedMetadata, 'getInjectedVar'),
+      injectedMetadata: pick(mockSetupDeps.injectedMetadata, 'getInjectedVar', 'getBranding'),
     };
     mockStartDeps = {
       application: applicationServiceMock.createInternalStartContract(),
@@ -132,7 +132,7 @@ describe('PluginsService', () => {
       ...mockStartDeps,
       application: expect.any(Object),
       chrome: omit(mockStartDeps.chrome, 'getComponent'),
-      injectedMetadata: pick(mockStartDeps.injectedMetadata, 'getInjectedVar'),
+      injectedMetadata: pick(mockStartDeps.injectedMetadata, 'getInjectedVar', 'getBranding'),
     };
 
     // Reset these for each test.

diff --git a/src/core/server/opensearch_dashboards_config.ts b/src/core/server/opensearch_dashboards_config.ts
@@ -54,9 +54,12 @@ export const config = {
     autocompleteTimeout: schema.duration({ defaultValue: 1000 }),
     branding: schema.object({
       logoUrl: schema.string({
-        defaultValue:
-          'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg',
+        defaultValue: '/',
       }),
+      smallLogoUrl: schema.string({
+        defaultValue: '/',
+      }),
+      title: schema.string({ defaultValue: 'OpenSearch Dashboards' }),
     }),
   }),
   deprecations,

diff --git a/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap b/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap
diff --git a/src/core/server/rendering/rendering_service.test.ts b/src/core/server/rendering/rendering_service.test.ts
@@ -136,42 +136,28 @@ describe('RenderingService', () => {
       });
     });
   });
-  describe('checkUrlvalid()', () => {
-    it('URL is valid', async () => {
-      jest.mock('axios', () => ({
-        async get() {
-          return {
-            status: 200,
-          };
-        },
-      }));
+  describe('checkUrlValid()', () => {
+    it('SVG URL is valid', async () => {
       const result = await service.checkUrlValid(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.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',
+        'config'
       );
+      expect(result).toEqual(true);
     });
-    it('URL does not contain jpeg, jpg, gif, or png', async () => {
+    it('PNG URL is valid', async () => {
       const result = await service.checkUrlValid(
-        'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode'
-      );
-      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',
+        'config'
       );
+      expect(result).toEqual(true);
+    });
+    it('URL does not contain svg, or png', async () => {
+      const result = await service.checkUrlValid('https://validUrl', 'config');
+      expect(result).toEqual(false);
     });
     it('URL is invalid', async () => {
-      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', 'config');
+      expect(result).toEqual(false);
     });
   });
 });
diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx
@@ -63,7 +63,14 @@ export class RenderingService {
       .pipe(first())
       .toPromise();
 
-    const validLogoUrl = await this.checkUrlValid(opensearchDashboardsConfig.branding.logoUrl);
+    const isLogoUrlValid = await this.checkUrlValid(
+      opensearchDashboardsConfig.branding.logoUrl,
+      'logoUrl'
+    );
+    const isSmallLogoUrlValid = await this.checkUrlValid(
+      opensearchDashboardsConfig.branding.smallLogoUrl,
+      'smallLogoUrl'
+    );
 
     return {
       render: async (
@@ -114,7 +121,11 @@ export class RenderingService {
               uiSettings: settings,
             },
             branding: {
-              logoUrl: validLogoUrl,
+              logoUrl: isLogoUrlValid ? opensearchDashboardsConfig.branding.logoUrl : undefined,
+              smallLogoUrl: isSmallLogoUrlValid
+                ? opensearchDashboardsConfig.branding.smallLogoUrl
+                : undefined,
+              title: opensearchDashboardsConfig.branding.title,
             },
           },
         };
@@ -132,22 +143,18 @@ 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, configName?: string): Promise<boolean> => {
     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').warn(configName + ' config is not found or invalid.');
+      return false;
     }
     return await Axios.get(url, { adapter: AxiosHttpAdapter })
       .then(() => {
-        return url;
+        return true;
       })
       .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').warn(configName + ' config is not found or invalid');
+        return false;
       });
   };
 }
diff --git a/src/core/server/rendering/types.ts b/src/core/server/rendering/types.ts
@@ -75,7 +75,9 @@ export interface RenderingMetadata {
       };
     };
     branding: {
-      logoUrl: string;
+      logoUrl?: string;
+      smallLogoUrl?: string;
+      title: string;
     };
   };
 }