fix: whiteLabeling should support component creation by passing React to defined fn (#1659)

docs/latest/viewer/configuration.md

@@ -11,7 +11,25 @@ are:
 ```js
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
+  whiteLabeling: {
+    /* Optional: Should return a React component to be rendered in the "Logo" section of the application's Top Navigation bar */
+    createLogoComponentFn: function(React) {
+      return React.createElement('a', {
+        target: '_self',
+        rel: 'noopener noreferrer',
+        className: 'header-brand',
+        href: '/',
+        style: {
+          display: 'block',
+          textIndent: '-9999px',
+          background: 'url(/svg-file-hosted-at-domain-root.svg)',
+          backgroundSize: 'contain',
+          backgroundRepeat: 'no-repeat',
+          width: '200px',
+        },
+      });
+    },
+  },
   extensions: [],
   showStudyList: true,
   filterQueryParam: false,

docs/latest/viewer/themeing.md

@@ -66,11 +66,11 @@ open to pull requests and discussion issues.
 
 Current white-labeling options are limited. We expose the ability to replace the
 "Logo" section of the application with a custom "Logo" component. You can do
-this by adding a `whiteLabelling` key to your
+this by adding a `whiteLabeling` key to your
 [configuration file](./configuration.md).
 
 ```js
-function RadicalImagingLogo() {
+function RadicalImagingLogo(React) {
   return React.createElement(
     'a',
     {
@@ -83,8 +83,8 @@ function RadicalImagingLogo() {
   );
 }
 
-props.whiteLabelling = {
+props.whiteLabeling = {
-  logoComponent: RadicalImagingLogo(),
+  createLogoComponentFn: RadicalImagingLogo,
 };
 ```
 

platform/core/src/classes/MetadataProvider.js

@@ -378,7 +378,7 @@ class MetadataProvider {
         }
 
         metadata = {
-          overlays
+          overlays,
         };
 
         break;

platform/viewer/public/config/default.js

@@ -1,7 +1,6 @@
 window.config = {
   // default: '/'
   routerBasename: '/',
-  whiteLabelling: {},
   extensions: [],
   showStudyList: true,
   filterQueryParam: false,

platform/viewer/public/config/demo.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   extensions: [],
   showStudyList: true,
   servers: {

platform/viewer/public/config/docker_nginx-orthanc.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   showStudyList: true,
   servers: {
     dicomWeb: [

platform/viewer/public/config/docker_openresty-orthanc-keycloak.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   showStudyList: true,
   servers: {
     // This is an array, but we'll only use the first entry for now

platform/viewer/public/config/docker_openresty-orthanc.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   showStudyList: true,
   servers: {
     // This is an array, but we'll only use the first entry for now

platform/viewer/public/config/google.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   enableGoogleCloudAdapter: true,
   healthcareApiEndpoint: 'https://healthcare.googleapis.com/v1beta1',
   servers: {

platform/viewer/public/config/local_dcm4chee.js

@@ -1,7 +1,6 @@
 window.config = {
   // default: '/'
   routerBasename: '/',
-  whiteLabelling: {},
   // default: ''
   showStudyList: true,
   servers: {

platform/viewer/public/config/netlify.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/pwa',
-  whiteLabelling: {},
   showStudyList: true,
   servers: {
     dicomWeb: [

platform/viewer/public/config/public_dicomweb.js

@@ -1,6 +1,5 @@
 window.config = {
   routerBasename: '/',
-  whiteLabelling: {},
   showStudyList: true,
   servers: {
     dicomWeb: [

platform/viewer/src/App.js

@@ -50,7 +50,7 @@ import { getActiveContexts } from './store/layout/selectors.js';
 import store from './store';
 
 /** Contexts */
-import WhiteLabellingContext from './context/WhiteLabellingContext';
+import WhiteLabelingContext from './context/WhiteLabelingContext';
 import UserManagerContext from './context/UserManagerContext';
 import AppContext from './context/AppContext';
 
@@ -77,7 +77,9 @@ class App extends Component {
       PropTypes.shape({
         routerBasename: PropTypes.string.isRequired,
         oidc: PropTypes.array,
-        whiteLabelling: PropTypes.object,
+        whiteLabeling: PropTypes.shape({
+          createLogoComponentFn: PropTypes.func,
+        }),
         extensions: PropTypes.array,
       }),
     ]).isRequired,
@@ -87,7 +89,6 @@ class App extends Component {
   static defaultProps = {
     config: {
       showStudyList: true,
-      whiteLabelling: {},
       oidc: [],
       extensions: [],
     },
@@ -107,7 +108,6 @@ class App extends Component {
       cornerstoneExtensionConfig: {},
       extensions: [],
       routerBasename: '/',
-      whiteLabelling: {},
     };
 
     this._appConfig = {
@@ -146,7 +146,7 @@ class App extends Component {
   }
 
   render() {
-    const { whiteLabelling, routerBasename } = this._appConfig;
+    const { whiteLabeling, routerBasename } = this._appConfig;
     const {
       UINotificationService,
       UIDialogService,
@@ -162,7 +162,7 @@ class App extends Component {
               <OidcProvider store={store} userManager={this._userManager}>
                 <UserManagerContext.Provider value={this._userManager}>
                   <Router basename={routerBasename}>
-                    <WhiteLabellingContext.Provider value={whiteLabelling}>
+                    <WhiteLabelingContext.Provider value={whiteLabeling}>
                       <SnackbarProvider service={UINotificationService}>
                         <DialogProvider service={UIDialogService}>
                           <ModalProvider
@@ -175,7 +175,7 @@ class App extends Component {
                           </ModalProvider>
                         </DialogProvider>
                       </SnackbarProvider>
-                    </WhiteLabellingContext.Provider>
+                    </WhiteLabelingContext.Provider>
                   </Router>
                 </UserManagerContext.Provider>
               </OidcProvider>
@@ -190,7 +190,7 @@ class App extends Component {
         <Provider store={store}>
           <I18nextProvider i18n={i18n}>
             <Router basename={routerBasename}>
-              <WhiteLabellingContext.Provider value={whiteLabelling}>
+              <WhiteLabelingContext.Provider value={whiteLabeling}>
                 <SnackbarProvider service={UINotificationService}>
                   <DialogProvider service={UIDialogService}>
                     <ModalProvider modal={OHIFModal} service={UIModalService}>
@@ -198,7 +198,7 @@ class App extends Component {
                     </ModalProvider>
                   </DialogProvider>
                 </SnackbarProvider>
-              </WhiteLabellingContext.Provider>
+              </WhiteLabelingContext.Provider>
             </Router>
           </I18nextProvider>
         </Provider>

platform/viewer/src/components/Header/Header.css

@@ -4,8 +4,16 @@
   height: var(--top-bar-height);
 }
 
-.dd-item {
+.header-left-box {
-  width: 100%;
+  display: inline-block;
+  position: relative;
+}
+
+.header-brand {
+  text-decoration: none;
+  height: 30px;
+  float: left;
+  clear: both;
 }
 
 /* Home Page */
@@ -17,35 +25,11 @@
   width: 100%;
 }
 
-.header-left-box {
-  display: inline-block;
-  position: relative;
-}
-
-.header-viewerLink {
-  float: left;
-}
-
-.header-brand {
-  height: 30px;
-  text-decoration: none;
-  float: left;
-  clear: both;
-}
-
 .entry-header.header-big .header-brand {
-  height: auto;
+  height: 50px;
   padding: 0;
 }
 
-.header-logo-image {
-  fill: transparent;
-  height: 100%;
-  margin: 0 8px 0 0;
-  width: 30px;
-  float: left;
-}
-
 .entry-header.header-big .header-logo-image {
   margin-right: 20px;
   width: 50px;
@@ -57,6 +41,24 @@
   height: auto;
 }
 
+/** OTHER STYLES **/
+
+.dd-item {
+  width: 100%;
+}
+
+.header-viewerLink {
+  float: left;
+}
+
+.header-logo-image {
+  fill: transparent;
+  height: 100%;
+  margin: 0 8px 0 0;
+  width: 30px;
+  float: left;
+}
+
 .header-btn {
   color: var(--text-secondary-color);
   cursor: pointer;
@@ -130,13 +132,6 @@
     width: 40%;
   }
 
-  /* Account for notification bar height */
-  .entry-header.header-big .header-brand {
-  }
-
-  .dd-menu {
-  }
-
   /* Toggle Notification Bar */
   .notification-bar {
     display: block;

platform/viewer/src/connectedComponents/Viewer.js

@@ -14,7 +14,7 @@ import SidePanel from './../components/SidePanel.js';
 import { extensionManager } from './../App.js';
 
 // Contexts
-import WhiteLabellingContext from '../context/WhiteLabellingContext.js';
+import WhiteLabelingContext from '../context/WhiteLabelingContext.js';
 import UserManagerContext from '../context/UserManagerContext';
 import AppContext from '../context/AppContext';
 
@@ -227,8 +227,8 @@ class Viewer extends Component {
     return (
       <>
         {/* HEADER */}
-        <WhiteLabellingContext.Consumer>
+        <WhiteLabelingContext.Consumer>
-          {whiteLabelling => (
+          {whiteLabeling => (
             <UserManagerContext.Consumer>
               {userManager => (
                 <AppContext.Consumer>
@@ -244,14 +244,16 @@ class Viewer extends Component {
                       }
                       userManager={userManager}
                     >
-                      {whiteLabelling.logoComponent}
+                      {whiteLabeling &&
+                        whiteLabeling.createLogoComponentFn &&
+                        whiteLabeling.createLogoComponentFn(React)}
                     </ConnectedHeader>
                   )}
                 </AppContext.Consumer>
               )}
             </UserManagerContext.Consumer>
           )}
-        </WhiteLabellingContext.Consumer>
+        </WhiteLabelingContext.Consumer>
 
         {/* TOOLBAR */}
         <ConnectedToolbarRow

platform/viewer/src/context/WhiteLabelingContext.js

@@ -0,0 +1,10 @@
+import OHIFLogo from '../components/OHIFLogo/OHIFLogo.js';
+import React from 'react';
+
+const defaultContextValues = {
+  createLogoComponentFn: React => OHIFLogo(),
+};
+
+const WhiteLabelingContext = React.createContext(defaultContextValues);
+
+export default WhiteLabelingContext;

platform/viewer/src/context/WhiteLabellingContext.js

@@ -1,10 +0,0 @@
-import OHIFLogo from '../components/OHIFLogo/OHIFLogo.js';
-import React from 'react';
-
-const defaultContextValues = {
-  logoComponent: OHIFLogo(),
-};
-
-const WhiteLabellingContext = React.createContext(defaultContextValues);
-
-export default WhiteLabellingContext;

platform/viewer/src/studylist/StudyListRoute.js

@@ -19,7 +19,7 @@ import filesToStudies from '../lib/filesToStudies.js';
 
 // Contexts
 import UserManagerContext from '../context/UserManagerContext';
-import WhiteLabellingContext from '../context/WhiteLabellingContext';
+import WhiteLabelingContext from '../context/WhiteLabelingContext';
 import AppContext from '../context/AppContext';
 
 const { urlUtil: UrlUtil } = OHIF.utils;
@@ -209,8 +209,8 @@ function StudyListRoute(props) {
         />
       ) : null}
       {healthCareApiWindows}
-      <WhiteLabellingContext.Consumer>
+      <WhiteLabelingContext.Consumer>
-        {whiteLabelling => (
+        {whiteLabeling => (
           <UserManagerContext.Consumer>
             {userManager => (
               <ConnectedHeader
@@ -218,12 +218,14 @@ function StudyListRoute(props) {
                 user={user}
                 userManager={userManager}
               >
-                {whiteLabelling.logoComponent}
+                {whiteLabeling &&
+                  whiteLabeling.createLogoComponentFn &&
+                  whiteLabeling.createLogoComponentFn(React)}
               </ConnectedHeader>
             )}
           </UserManagerContext.Consumer>
         )}
-      </WhiteLabellingContext.Consumer>
+      </WhiteLabelingContext.Consumer>
       <div className="study-list-header">
         <div className="header">
           <h1 style={{ fontWeight: 300, fontSize: '22px' }}>