From 804760988e6a57b032a3683a906c9c2fe8a4b237 Mon Sep 17 00:00:00 2001 From: "Qingyang(Abby) Hu" Date: Wed, 8 Sep 2021 11:39:04 -0700 Subject: [PATCH] Make loading page logo and title configurable (#746) Add one new config branding.loadingLogoUrl for making loading page logo configurable. URL can be in svg and gif format. If no loading logo is found, the static logo with a horizontal bar loading bar will be shown. If logo is also not found, the default OpenSearch loading logo and spinner will be shown. Signed-off-by: Qingyang(Abby) Hu --- config/opensearch_dashboards.yml | 3 + .../server/opensearch_dashboards_config.ts | 3 + .../rendering/rendering_service.test.ts | 6 +- .../server/rendering/rendering_service.tsx | 9 +- src/core/server/rendering/types.ts | 1 + .../__snapshots__/template.test.tsx.snap | 445 ++++++++++++++++++ src/core/server/rendering/views/styles.tsx | 10 + .../server/rendering/views/template.test.tsx | 116 +++++ src/core/server/rendering/views/template.tsx | 39 +- src/legacy/server/config/schema.js | 1 + 10 files changed, 626 insertions(+), 7 deletions(-) create mode 100644 src/core/server/rendering/views/__snapshots__/template.test.tsx.snap create mode 100644 src/core/server/rendering/views/template.test.tsx diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml index 267406fb704f..19b90127fd68 100644 --- a/config/opensearch_dashboards.yml +++ b/config/opensearch_dashboards.yml @@ -155,6 +155,9 @@ # smaller version customized logo URL # opensearchDashboards.branding.smallLogoUrl: "" +# customized loading logo URL +# opensearchDashboards.branding.loadingLogoUrl: "" + # custom application title # opensearchDashboards.branding.title: "" diff --git a/src/core/server/opensearch_dashboards_config.ts b/src/core/server/opensearch_dashboards_config.ts index a4628e19fb3e..8284ab6c6e9b 100644 --- a/src/core/server/opensearch_dashboards_config.ts +++ b/src/core/server/opensearch_dashboards_config.ts @@ -59,6 +59,9 @@ export const config = { smallLogoUrl: schema.string({ defaultValue: '/', }), + loadingLogoUrl: schema.string({ + defaultValue: '/', + }), title: schema.string({ defaultValue: 'OpenSearch Dashboards' }), }), }), diff --git a/src/core/server/rendering/rendering_service.test.ts b/src/core/server/rendering/rendering_service.test.ts index 05f755fc7d7c..9a1d37203ff4 100644 --- a/src/core/server/rendering/rendering_service.test.ts +++ b/src/core/server/rendering/rendering_service.test.ts @@ -136,6 +136,7 @@ describe('RenderingService', () => { }); }); }); + describe('checkUrlValid()', () => { it('SVG URL is valid', async () => { const result = await service.checkUrlValid( @@ -144,6 +145,7 @@ describe('RenderingService', () => { ); expect(result).toEqual(true); }); + it('PNG URL is valid', async () => { const result = await service.checkUrlValid( 'https://opensearch.org/assets/brand/PNG/Mark/opensearch_mark_default.png', @@ -151,10 +153,12 @@ describe('RenderingService', () => { ); expect(result).toEqual(true); }); - it('URL does not contain svg, or png', async () => { + + it('URL 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 () => { 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 index 7c746c50cbaa..49b5897defee 100644 --- a/src/core/server/rendering/rendering_service.tsx +++ b/src/core/server/rendering/rendering_service.tsx @@ -71,6 +71,10 @@ export class RenderingService { opensearchDashboardsConfig.branding.smallLogoUrl, 'smallLogoUrl' ); + const isLoadingLogoUrlValid = await this.checkUrlValid( + opensearchDashboardsConfig.branding.loadingLogoUrl, + 'loadingLogoUrl' + ); return { render: async ( @@ -125,6 +129,9 @@ export class RenderingService { smallLogoUrl: isSmallLogoUrlValid ? opensearchDashboardsConfig.branding.smallLogoUrl : undefined, + loadingLogoUrl: isLoadingLogoUrlValid + ? opensearchDashboardsConfig.branding.loadingLogoUrl + : undefined, title: opensearchDashboardsConfig.branding.title, }, }, @@ -144,7 +151,7 @@ export class RenderingService { } public checkUrlValid = async (url: string, configName?: string): Promise => { - if (url.match(/\.(png|svg)$/) === null) { + if (url.match(/\.(png|svg|gif)$/) === null) { 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 index ae3038360516..31a610448882 100644 --- a/src/core/server/rendering/types.ts +++ b/src/core/server/rendering/types.ts @@ -77,6 +77,7 @@ export interface RenderingMetadata { branding: { logoUrl?: string; smallLogoUrl?: string; + loadingLogoUrl?: string; title: string; }; }; diff --git a/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap new file mode 100644 index 000000000000..b54c56b50f3e --- /dev/null +++ b/src/core/server/rendering/views/__snapshots__/template.test.tsx.snap @@ -0,0 +1,445 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Template renders with customized loading logo 1`] = ` +Array [ + , + , + , + + OpenSearch + , + null, + , + , + , + , + , + , + , + , + null, + , + , + , + , +