Configure left logo in the cBioPortal header via 'skin.left_logo' property (#4747)

The left logo in the header can be configured in the portal.properties file via the 'skin.left_logo' property.

Author: pvannierop

src/appShell/App/PortalHeader.tsx

@@ -4,7 +4,10 @@ import { Link, NavLink } from 'react-router-dom';
 import { If, Then, Else } from 'react-if';
 import { AppStore } from '../../AppStore';
 import { observer } from 'mobx-react';
-import { getInstituteLogoUrl } from '../../shared/api/urls';
+import {
+    getcBioPortalLogoUrl,
+    getInstituteLogoUrl,
+} from '../../shared/api/urls';
 import SocialAuthButton from '../../shared/components/SocialAuthButton';
 import { Dropdown } from 'react-bootstrap';
 import { DataAccessTokensDropdown } from '../../shared/components/dataAccessTokens/DataAccessTokensDropdown';
@@ -119,7 +122,11 @@ export default class PortalHeader extends React.Component<
                 <div id="leftHeaderContent">
                     <Link to="/" id="cbioportal-logo">
                         <img
-                            src={require('../../globalStyles/images/cbioportal_logo.png')}
+                            src={
+                                !!getcBioPortalLogoUrl()
+                                    ? getcBioPortalLogoUrl()
+                                    : require('../../globalStyles/images/cbioportal_logo.png')
+                            }
                             alt="cBioPortal Logo"
                         />
                     </Link>
@@ -171,10 +178,10 @@ export default class PortalHeader extends React.Component<
                             </Else>
                         </If>
                     </If>
-                    <If condition={getInstituteLogoUrl()}>
+                    <If condition={!!getInstituteLogoUrl()}>
                         <img
                             id="institute-logo"
-                            src={getInstituteLogoUrl()}
+                            src={getInstituteLogoUrl()!}
                             alt="Institute Logo"
                         />
                     </If>

src/config/IAppConfig.ts

@@ -99,6 +99,7 @@ export interface IServerConfig {
     skin_documentation_news: string | null;
     skin_documentation_oql: string | null;
     skin_query_max_tree_depth: string;
+    skin_left_logo: string | null;
     skin_right_logo: string | null;
     skin_right_nav_show_data_sets: boolean;
     skin_right_nav_show_examples: boolean;

src/shared/api/urls.ts

@@ -214,18 +214,21 @@ export function getOncoKbApiUrl() {
     );
 }
 
+export function getcBioPortalLogoUrl() {
+    return getLogoUrl(getServerConfig().skin_left_logo);
+}
+
 export function getInstituteLogoUrl() {
-    if (getServerConfig().skin_right_logo) {
-        if (/^http/.test(getServerConfig().skin_right_logo || '')) {
-            return getServerConfig().skin_right_logo!;
-        } else {
-            return buildCBioPortalPageUrl(
-                `images/${getServerConfig().skin_right_logo}`
-            );
-        }
-    } else {
-        return undefined;
+    return getLogoUrl(getServerConfig().skin_right_logo);
+}
+
+function getLogoUrl(logo_path: string | null) {
+    if (logo_path) {
+        return /^http/.test(logo_path || '')
+            ? logo_path!
+            : buildCBioPortalPageUrl(`images/${logo_path}`);
     }
+    return undefined;
 }
 
 export function getGenomeNexusApiUrl() {