Welcome page title and logo configurable

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: Abby Hu <abigailhu2000@gmail.com>
opensearch-project · Aug 26, 2021 · 3cd7bb6 · 3cd7bb6
1 parent 43dd663
commit 3cd7bb6
Show file tree

Hide file tree

Showing 31 changed files with 539 additions and 98 deletions.
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
@@ -151,6 +151,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 = { logoUrl: '' };
     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
@@ -38,11 +38,13 @@ export interface CustomLogoType {
 }
 
 export const CustomLogo = ({ ...branding }: CustomLogoType) => {
+  const defaultUrl =
+    'https://opensearch.org/assets/brand/SVG/Logo/opensearch_dashboards_logo_darkmode.svg';
   return (
     <img
       data-test-subj="customLogo"
-      data-test-image-url={branding.logoUrl}
-      src={branding.logoUrl}
+      data-test-image-url={branding.logoUrl === '' ? defaultUrl : branding.logoUrl}
+      src={branding.logoUrl === '' ? defaultUrl : branding.logoUrl}
       alt="logo"
       loading="lazy"
       className="logoImage"

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/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
@@ -78,6 +78,8 @@ export interface InjectedMetadataParams {
     };
     branding: {
       logoUrl: string;
+      smallLogoUrl: string;
+      title: string;
     };
   };
 }
@@ -185,6 +187,8 @@ export interface InjectedMetadataSetup {
   };
   getBranding: () => {
     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