Add favicon configuration (#801)

Added a configuration on favicon inside opensearchDashboards.branding in the yml file. If user inputs a valid URL, we gurantee basic browser favicon customization, while remaining places show the default browser/device favicon icon. If user does not provide a valid URL for favicon, the opensearch favicon icon will be used. Signed-off-by: Abby Hu <[email protected]>
opensearch-project · Sep 21, 2021 · 51f4c2d · 51f4c2d
1 parent 7904df4
commit 51f4c2d
Show file tree

Hide file tree

Showing 10 changed files with 412 additions and 53 deletions.
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
@@ -161,5 +161,5 @@
   # loadingLogo: 
     # defaultUrl: ""
     # darkModeUrl: ""
-  # favicon: ""
+  # faviconUrl: ""
   # applicationTitle: ""
diff --git a/src/core/public/injected_metadata/injected_metadata_service.ts b/src/core/public/injected_metadata/injected_metadata_service.ts
@@ -90,7 +90,7 @@ export interface InjectedMetadataParams {
         defaultUrl?: string;
         darkModeUrl?: string;
       };
-      favicon?: string;
+      faviconUrl?: string;
       applicationTitle?: string;
     };
   };
@@ -211,7 +211,7 @@ export interface InjectedMetadataSetup {
       defaultUrl?: string;
       darkModeUrl?: string;
     };
-    favicon?: string;
+    faviconUrl?: string;
     applicationTitle?: string;
   };
 }

diff --git a/src/core/server/opensearch_dashboards_config.ts b/src/core/server/opensearch_dashboards_config.ts
@@ -77,7 +77,7 @@ export const config = {
           defaultValue: '/',
         }),
       }),
-      favicon: schema.string({
+      faviconUrl: schema.string({
         defaultValue: '/',
       }),
       applicationTitle: schema.string({

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.tsx b/src/core/server/rendering/rendering_service.tsx
@@ -135,7 +135,7 @@ export class RenderingService {
                 defaultUrl: brandingAssignment.loadingLogoDefault,
                 darkModeUrl: brandingAssignment.loadingLogoDarkmode,
               },
-              favicon: '',
+              faviconUrl: brandingAssignment.favicon,
               applicationTitle: brandingAssignment.applicationTitle,
             },
           },
@@ -223,6 +223,9 @@ export class RenderingService {
       loadingLogoDarkmode = undefined;
     }
 
+    // assign favicon based on brandingValidation function result
+    const favicon = brandingValidation.isFaviconValid ? branding.faviconUrl : undefined;
+
     // assign applition title based on brandingValidation function result
     const applicationTitle = brandingValidation.isTitleValid
       ? branding.applicationTitle
@@ -235,6 +238,7 @@ export class RenderingService {
       markDarkmode,
       loadingLogoDefault,
       loadingLogoDarkmode,
+      favicon,
       applicationTitle,
     };
 
@@ -276,6 +280,8 @@ export class RenderingService {
       ? await this.checkUrlValid(branding.loadingLogo.darkModeUrl, 'loadingLogo darkMode')
       : false;
 
+    const isFaviconValid = await this.checkUrlValid(branding.faviconUrl, 'favicon');
+
     const isTitleValid = this.checkTitleValid(branding.applicationTitle, 'applicationTitle');
 
     const brandingValidation: BrandingValidation = {
@@ -285,6 +291,7 @@ export class RenderingService {
       isMarkDarkmodeValid,
       isLoadingLogoDefaultValid,
       isLoadingLogoDarkmodeValid,
+      isFaviconValid,
       isTitleValid,
     };
 
@@ -307,15 +314,15 @@ export class RenderingService {
    */
   public checkUrlValid = async (url: string, configName?: string): Promise<boolean> => {
     if (url.match(/\.(png|svg|gif|PNG|SVG|GIF)$/) === null) {
-      this.logger.get('branding').warn(configName + ' config is not found or invalid.');
+      this.logger.get('branding').info(configName + ' config is not found or invalid.');
       return false;
     }
     return await Axios.get(url, { adapter: AxiosHttpAdapter })
       .then(() => {
         return true;
       })
       .catch(() => {
-        this.logger.get('branding').warn(configName + ' config is not found or invalid');
+        this.logger.get('branding').info(configName + ' config is not found or invalid');
         return false;
       });
   };
@@ -332,7 +339,7 @@ export class RenderingService {
     if (!title || title.length > 36) {
       this.logger
         .get('branding')
-        .warn(
+        .info(
           configName +
             ' config is not found or invalid. Title length should be between 1 to 36 characters.'
         );

diff --git a/src/core/server/rendering/types.ts b/src/core/server/rendering/types.ts
@@ -88,7 +88,7 @@ export interface RenderingMetadata {
         defaultUrl?: string;
         darkModeUrl?: string;
       };
-      favicon?: string;
+      faviconUrl?: string;
       applicationTitle?: string;
     };
   };
@@ -148,6 +148,7 @@ export interface BrandingValidation {
   isMarkDarkmodeValid: boolean;
   isLoadingLogoDefaultValid: boolean;
   isLoadingLogoDarkmodeValid: boolean;
+  isFaviconValid: boolean;
   isTitleValid: boolean;
 }
 
@@ -163,5 +164,6 @@ export interface BrandingAssignment {
   markDarkmode?: string;
   loadingLogoDefault?: string;
   loadingLogoDarkmode?: string;
+  favicon?: string;
   applicationTitle?: string;
 }