OCPBUGS-53412,CONSOLE-4404,CONSOLE-4062: Add the ability to specify second logo, favicons (#14749)

* CONSOLE-4404: Adopt new customLogos configuration in bridge and console to make it possible to specify separate masthead logo for dark and light theme.

* CONSOLE-4404: bump api changes

* CONSOLE-4404: Adjustments after recent API changes, parsing custom logos from config file to two separate flags for favicon and masthead.

* CONSOLE-4404: consolidations after recent API changes

* Fix the problem with customLogo endpoint not retrieving favicons

* CONSOLE-4062: Add custom favicon

* Adjust about modal logos logic

* fix failing tests

* update customLogos and customFavicons description

* make logic for the LogosKeyValue Set method correspond to MultiKeyValue Set

* introduce new SERVER_FLAGS that provide console frontend with information if there is a favicon or customLogo customization

* Added a loading logic so that we prevent frontend from rendering static logos when custom logos have not been fetched yet.

Used the newly introduced SERVER_FLAGS customFaviconsConfigured and customLogosConfigured in a logic that prevents attempts to fetch custom logo type that is not configured.

* revert the capitalization of the theme global var values to fix test regressions, capitalize the custom logo query parameter to match the expected backend syntax.

Author: Mylanos

cmd/bridge/main.go

@@ -111,7 +111,11 @@ func main() {
 
 	fBranding := fs.String("branding", "okd", "Console branding for the masthead logo and title. One of okd, openshift, ocp, online, dedicated, azure, or rosa. Defaults to okd.")
 	fCustomProductName := fs.String("custom-product-name", "", "Custom product name for console branding.")
-	fCustomLogoFile := fs.String("custom-logo-file", "", "Custom product image for console branding.")
+
+	customLogoFlags := serverconfig.LogosKeyValue{}
+	fs.Var(&customLogoFlags, "custom-logo-files", "List of custom product images used for console branding. Each entry consist of theme type (Dark | Light ) as a key and path to image file as value.")
+	customFaviconFlags := serverconfig.LogosKeyValue{}
+	fs.Var(&customFaviconFlags, "custom-favicon-files", "List of custom favicon images used for console branding. Each entry consist of theme type (Dark | Light ) as a key and path to image file as value.")
 	fStatuspageID := fs.String("statuspage-id", "", "Unique ID assigned by statuspage.io page that provides status info.")
 	fDocumentationBaseURL := fs.String("documentation-base-url", "", "The base URL for documentation links.")
 
@@ -207,12 +211,6 @@ func main() {
 		flags.FatalIfFailed(flags.NewInvalidFlagError("branding", "value must be one of okd, openshift, ocp, online, dedicated, azure, or rosa"))
 	}
 
-	if *fCustomLogoFile != "" {
-		if _, err := os.Stat(*fCustomLogoFile); err != nil {
-			klog.Fatalf("could not read logo file: %v", err)
-		}
-	}
-
 	if len(consolePluginsFlags) > 0 {
 		klog.Infoln("The following console plugins are enabled:")
 		for pluginName := range consolePluginsFlags {
@@ -266,7 +264,8 @@ func main() {
 		BaseURL:                      baseURL,
 		Branding:                     branding,
 		CustomProductName:            *fCustomProductName,
-		CustomLogoFile:               *fCustomLogoFile,
+		CustomLogoFiles:              customLogoFlags,
+		CustomFaviconFiles:           customFaviconFlags,
 		ControlPlaneTopology:         *fControlPlaneTopology,
 		StatuspageID:                 *fStatuspageID,
 		DocumentationBaseURL:         documentationBaseURL,

frontend/@types/console/index.d.ts

@@ -22,6 +22,8 @@ declare interface Window {
     branding: string;
     consoleVersion: string;
     customLogoURL: string;
+    customLogosConfigured: boolean;
+    customFaviconsConfigured: boolean;
     customProductName: string;
     documentationBaseURL: string;
     kubeAPIServerURL: string;

frontend/public/components/ThemeProvider.tsx

@@ -6,25 +6,40 @@ export const THEME_LOCAL_STORAGE_KEY = 'bridge/theme';
 const THEME_SYSTEM_DEFAULT = 'systemDefault';
 const THEME_DARK_CLASS = 'pf-v6-theme-dark';
 const THEME_DARK_CLASS_LEGACY = 'pf-v5-theme-dark'; // legacy class name needed to support PF5
-const THEME_DARK = 'dark';
-const THEME_LIGHT = 'light';
+export const THEME_DARK = 'dark';
+export const THEME_LIGHT = 'light';
+export const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
 
 type PROCESSED_THEME = typeof THEME_DARK | typeof THEME_LIGHT;
 
-export const updateThemeClass = (htmlTagElement: HTMLElement, theme: string): PROCESSED_THEME => {
-  let systemTheme: string;
-  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    systemTheme = THEME_DARK;
+export const applyThemeBehaviour = (
+  theme: string,
+  onDarkBehaviour?: () => string,
+  onLightBehaviour?: () => string,
+) => {
+  if (darkThemeMq.matches && theme === THEME_SYSTEM_DEFAULT) {
+    theme = THEME_DARK;
   }
-  if (theme === THEME_DARK || (theme === THEME_SYSTEM_DEFAULT && systemTheme === THEME_DARK)) {
-    htmlTagElement.classList.add(THEME_DARK_CLASS);
-    htmlTagElement.classList.add(THEME_DARK_CLASS_LEGACY);
-    return THEME_DARK;
+  if (theme === THEME_DARK) {
+    return onDarkBehaviour();
   }
+  return onLightBehaviour();
+};
 
-  htmlTagElement.classList.remove(THEME_DARK_CLASS);
-  htmlTagElement.classList.remove(THEME_DARK_CLASS_LEGACY);
-  return THEME_LIGHT;
+export const updateThemeClass = (htmlTagElement: HTMLElement, theme: string): PROCESSED_THEME => {
+  return applyThemeBehaviour(
+    theme,
+    () => {
+      htmlTagElement.classList.add(THEME_DARK_CLASS);
+      htmlTagElement.classList.add(THEME_DARK_CLASS_LEGACY);
+      return THEME_DARK;
+    },
+    () => {
+      htmlTagElement.classList.remove(THEME_DARK_CLASS);
+      htmlTagElement.classList.remove(THEME_DARK_CLASS_LEGACY);
+      return THEME_LIGHT;
+    },
+  ) as PROCESSED_THEME;
 };
 
 export const ThemeContext = React.createContext<string>('');
@@ -57,7 +72,6 @@ export const ThemeProvider: React.FC<{}> = ({ children }) => {
   );
 
   React.useEffect(() => {
-    const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)');
     if (theme === THEME_SYSTEM_DEFAULT) {
       darkThemeMq.addEventListener('change', mqListener);
     }

frontend/public/components/about-modal.tsx

@@ -10,7 +10,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import { useClusterVersion, BlueArrowCircleUpIcon, useCanClusterUpgrade } from '@console/shared';
 import { isLoadedDynamicPluginInfo } from '@console/plugin-sdk/src';
 import { useDynamicPluginInfo } from '@console/plugin-sdk/src/api/useDynamicPluginInfo';
-import { getBrandingDetails } from './utils/branding';
+import { getBrandingDetails, MASTHEAD_TYPE, useCustomLogoURL } from './utils/branding';
 import {
   ReleaseNotesLink,
   ServiceLevel,
@@ -162,16 +162,18 @@ AboutModalItems.displayName = 'AboutModalItems';
 export const AboutModal: React.FC<AboutModalProps> = (props) => {
   const { isOpen, closeAboutModal } = props;
   const { t } = useTranslation();
-  const details = getBrandingDetails();
-  const customBranding = window.SERVER_FLAGS.customLogoURL || window.SERVER_FLAGS.customProductName;
-  const openShiftBranding = window.SERVER_FLAGS.branding !== 'okd' && !customBranding;
+  const { productName } = getBrandingDetails();
+  const { logoUrl: customLogoUrl } = useCustomLogoURL(MASTHEAD_TYPE);
+
+  const customBranding = customLogoUrl || window.SERVER_FLAGS.customProductName;
+  const openShiftBranding = window.SERVER_FLAGS.branding !== 'okd';
   return (
     <PfAboutModal
       isOpen={isOpen}
       onClose={closeAboutModal}
-      productName={details.productName}
-      brandImageSrc={openShiftBranding && redHatFedoraImg}
-      brandImageAlt={openShiftBranding && details.productName}
+      productName={productName}
+      brandImageSrc={customLogoUrl || (openShiftBranding && redHatFedoraImg)}
+      brandImageAlt={(openShiftBranding || customLogoUrl) && productName}
       backgroundImageSrc={openShiftBranding && `/${redHatFedoraWatermarkImg}`}
       hasNoContentContainer
       aria-label="About modal"

frontend/public/components/masthead-toolbar.jsx

@@ -55,7 +55,7 @@ import { action as reduxAction } from 'typesafe-actions';
 import feedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback.svg';
 import darkFeedbackImage from '@patternfly/react-user-feedback/dist/esm/images/rh_feedback-dark.svg';
 import QuickCreate, { QuickCreateImportFromGit, QuickCreateContainerImages } from './QuickCreate';
-import { ThemeContext } from './ThemeProvider';
+import { ThemeContext, THEME_DARK } from './ThemeProvider';
 
 const LAST_CONSOLE_ACTIVITY_TIMESTAMP_LOCAL_STORAGE_KEY = 'last-console-activity-timestamp';
 
@@ -94,7 +94,7 @@ const FeedbackModalLocalized = ({ isOpen, onClose, reportBugLink }) => {
       onOpenSupportCase={reportBugLink.href}
       feedbackLocale={feedbackLocales}
       onJoinMailingList="https://console.redhat.com/self-managed-research-form?source=openshift"
-      feedbackImg={theme === 'dark' ? darkFeedbackImage : feedbackImage}
+      feedbackImg={theme === THEME_DARK ? darkFeedbackImage : feedbackImage}
       isOpen={isOpen}
       onClose={onClose}
     />

frontend/public/components/masthead.jsx

@@ -14,11 +14,32 @@ import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { ReactSVG } from 'react-svg';
 import { MastheadToolbar } from './masthead-toolbar';
-import { getBrandingDetails } from './utils/branding';
+import {
+  FAVICON_TYPE,
+  getBrandingDetails,
+  MASTHEAD_TYPE,
+  useCustomLogoURL,
+} from './utils/branding';
 
 export const Masthead = React.memo(({ isMastheadStacked, isNavOpen, onNavToggle }) => {
-  const details = getBrandingDetails();
+  const { productName, staticLogo } = getBrandingDetails();
   const navigate = useNavigate();
+
+  const { logoUrl: customMastheadUrl, loading } = useCustomLogoURL(MASTHEAD_TYPE);
+  const { logoUrl: customFaviconUrl } = useCustomLogoURL(FAVICON_TYPE);
+
+  React.useEffect(() => {
+    if (customFaviconUrl) {
+      let link = document.querySelector("link[rel='icon']");
+      if (!link) {
+        link = document.createElement('link');
+        link.rel = 'icon';
+        document.head.appendChild(link);
+      }
+      link.href = customFaviconUrl;
+    }
+  }, [customFaviconUrl]);
+
   const defaultRoute = '/';
   const logoProps = {
     href: defaultRoute,
@@ -40,14 +61,14 @@ export const Masthead = React.memo(({ isMastheadStacked, isNavOpen, onNavToggle
         <MastheadBrand>
           <MastheadLogo
             component="a"
-            aria-label={window.SERVER_FLAGS.customLogoURL ? undefined : details.productName}
+            aria-label={productName}
             data-test="masthead-logo"
             {...logoProps}
           >
-            {window.SERVER_FLAGS.customLogoURL ? (
-              <Brand src={details.logoImg} alt={details.productName} />
+            {customMastheadUrl ? (
+              <Brand src={customMastheadUrl} alt={productName} />
             ) : (
-              <ReactSVG src={details.logoImg} aria-hidden className="pf-v6-c-brand" />
+              !loading && <ReactSVG src={staticLogo} aria-hidden className="pf-v6-c-brand" />
             )}
           </MastheadLogo>
         </MastheadBrand>

frontend/public/components/utils/branding.ts

@@ -1,46 +1,121 @@
+import * as React from 'react';
+import {
+  ThemeContext,
+  THEME_DARK,
+  THEME_LIGHT,
+  applyThemeBehaviour,
+  darkThemeMq,
+} from '@console/internal/components/ThemeProvider';
 import okdLogoImg from '../../imgs/okd-logo.svg';
 import openshiftLogoImg from '../../imgs/openshift-logo.svg';
 import onlineLogoImg from '../../imgs/openshift-online-logo.svg';
 import dedicatedLogoImg from '../../imgs/openshift-dedicated-logo.svg';
 import rosaLogoImg from '../../imgs/openshift-service-on-aws-logo.svg';
+import { capitalize } from 'lodash';
+
+type CUSTOM_LOGO = typeof FAVICON_TYPE | typeof MASTHEAD_TYPE;
+export const FAVICON_TYPE = 'Favicon';
+export const MASTHEAD_TYPE = 'Masthead';
 
 export const getBrandingDetails = () => {
-  let logoImg, productName;
+  let staticLogo, productName;
   // Webpack won't bundle these images if we don't directly reference them, hence the switch
   switch (window.SERVER_FLAGS.branding) {
     case 'openshift':
-      logoImg = openshiftLogoImg;
+      staticLogo = openshiftLogoImg;
       productName = 'Red Hat OpenShift';
       break;
     case 'ocp':
-      logoImg = openshiftLogoImg;
+      staticLogo = openshiftLogoImg;
       productName = 'Red Hat OpenShift';
       break;
     case 'online':
-      logoImg = onlineLogoImg;
+      staticLogo = onlineLogoImg;
       productName = 'Red Hat OpenShift Online';
       break;
     case 'dedicated':
-      logoImg = dedicatedLogoImg;
+      staticLogo = dedicatedLogoImg;
       productName = 'Red Hat OpenShift Dedicated';
       break;
     case 'azure':
-      logoImg = openshiftLogoImg;
+      staticLogo = openshiftLogoImg;
       productName = 'Azure Red Hat OpenShift';
       break;
     case 'rosa':
-      logoImg = rosaLogoImg;
+      staticLogo = rosaLogoImg;
       productName = 'Red Hat OpenShift Service on AWS';
       break;
     default:
-      logoImg = okdLogoImg;
+      staticLogo = okdLogoImg;
       productName = 'OKD';
   }
-  if (window.SERVER_FLAGS.customLogoURL) {
-    logoImg = window.SERVER_FLAGS.customLogoURL;
-  }
   if (window.SERVER_FLAGS.customProductName) {
     productName = window.SERVER_FLAGS.customProductName;
   }
-  return { logoImg, productName };
+  return { staticLogo, productName };
+};
+
+/** Fetches given custom logo and returns its blob URL.
+ * Fetches the bridge's custom logo endpoint with query parameters that specify the type
+ * and the theme of the requested custom logo.
+ * The hook listens for theme changes to provide correct custom logo for given theme.
+ * results into redux, adjusts the API polling frequency based on the poll success.
+ * @param type - The type of the custom logo to query.
+ * @returns Returns logoURL blob URL and the loading state of the API request.
+ */
+export const useCustomLogoURL = (type: CUSTOM_LOGO): { logoUrl: string; loading: Boolean } => {
+  const [logoUrl, setLogoUrl] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const theme = React.useContext(ThemeContext);
+
+  React.useEffect(() => {
+    // return when requested custom logo type is not configured
+    if (
+      (type === MASTHEAD_TYPE && !window.SERVER_FLAGS.customLogosConfigured) ||
+      (type === FAVICON_TYPE && !window.SERVER_FLAGS.customFaviconsConfigured)
+    ) {
+      return;
+    }
+    setLoading(true);
+    let reqTheme;
+    const fetchData = async () => {
+      if (type === FAVICON_TYPE) {
+        if (!darkThemeMq.matches) {
+          // Fetch Light theme favicon if the Dark preference is not set via the system preference
+          reqTheme = THEME_LIGHT;
+        } else {
+          reqTheme = THEME_DARK;
+        }
+      } else {
+        reqTheme = applyThemeBehaviour(
+          theme,
+          () => {
+            return THEME_DARK;
+          },
+          () => {
+            return THEME_LIGHT;
+          },
+        );
+      }
+      const fetchURL = `${window.SERVER_FLAGS.basePath}custom-logo?type=${type}&theme=${capitalize(
+        reqTheme,
+      )}`;
+      const response = await fetch(fetchURL);
+      if (response.ok) {
+        const blob = await response.blob();
+        setLogoUrl(URL.createObjectURL(blob));
+        setLoading(false);
+      } else if (response.status === 404) {
+        return;
+      } else {
+        throw new Error(`Failed to fetch ${fetchURL}: ${response.statusText}`);
+      }
+    };
+    fetchData().catch((err) => {
+      // eslint-disable-next-line no-console
+      console.warn(`Error while fetching ${type} logo: ${err}`);
+    });
+  }, [theme, type]);
+
+  return { logoUrl, loading };
 };

frontend/public/imgs/okd-logo-dark.svg

@@ -29,7 +29,7 @@
     <title>Red Hat OpenShift Service on AWS</title>
     <meta name="application-name" content="Red Hat OpenShift Service on AWS" />
     [[ end ]] [[ if eq .ServerFlags.Branding "okd" ]]
-    <link rel="shortcut icon" href="<%= require('./imgs/okd-favicon.png') %>" />
+    <link rel="icon" href="<%= require('./imgs/okd-favicon.png') %>" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"
@@ -42,7 +42,7 @@
       content="<%= require('./imgs/okd-mstile-144x144.png') %>"
     />
     [[ else ]]
-    <link rel="shortcut icon" href="<%= require('./imgs/openshift-favicon.png') %>" />
+    <link rel="icon" href="<%= require('./imgs/openshift-favicon.png') %>" />
     <link
       rel="apple-touch-icon-precomposed"
       sizes="144x144"