fix: OpenID Connect and Local route rendering

platform/core/src/extensions/ExtensionManager.js

@@ -186,6 +186,7 @@ export default class ExtensionManager {
           case MODULE_TYPES.SOP_CLASS_HANDLER:
           case MODULE_TYPES.CONTEXT:
           case MODULE_TYPES.LAYOUT_TEMPLATE:
+          case MODULE_TYPES.HANGING_PROTOCOL:
             // Default for most extension points,
             // Just adds each entry ready for consumption by mode.
             extensionModule.forEach(element => {
@@ -194,13 +195,6 @@ export default class ExtensionManager {
               ] = element;
             });
             break;
-          case MODULE_TYPES.HANGING_PROTOCOL:
-            extensionModule.forEach(element => {
-              this.modulesMap[
-                `${extensionId}.${moduleType}.${element.name}`
-              ] = element;
-            });
-            break;
           default:
             throw new Error(`Module type invalid: ${moduleType}`);
         }
@@ -306,27 +300,9 @@ export default class ExtensionManager {
   }
 
   _initHangingProtocolModule(extensionModule, extensionId) {
-    extensionModule.forEach(element => {
-      const namespace = `${extensionId}.${MODULE_TYPES.HANGING_PROTOCOL}.${element.name}`;
-
-      dataSources.forEach(dataSource => {
-        if (dataSource.namespace === namespace) {
-          const dataSourceInstance = element.createDataSource(
-            dataSource.configuration
-          );
-
-          if (this.dataSourceMap[dataSource.sourceName]) {
-            this.dataSourceMap[dataSource.sourceName].push(dataSourceInstance);
-          } else {
-            this.dataSourceMap[dataSource.sourceName] = [dataSourceInstance];
-          }
-        }
-      });
-    });
-
     extensionModule.forEach(element => {
       this.modulesMap[
-        `${extensionId}.${MODULE_TYPES.DATA_SOURCE}.${element.name}`
+        `${extensionId}.${MODULE_TYPES.HANGING_PROTOCOL}.${element.name}`
       ] = element;
     });
   }

platform/core/src/services/UserAuthenticationService/UserAuthenticationService.js

@@ -37,9 +37,7 @@ function _getUser() {
 }
 
 function _getAuthorizationHeader() {
-  const user = serviceImplementation._getUser();
-
-  return serviceImplementation._getAuthorizationHeader(user);
+  return serviceImplementation._getAuthorizationHeader();
 }
 
 function _handleUnauthenticated() {

platform/ui/src/contextProviders/UserAuthenticationProvider.js

@@ -88,6 +88,7 @@ export function UserAuthenticationProvider({ children, service }) {
    *
    * @returns void
    */
+  // TODO: should this be a useEffect or not?
   useEffect(() => {
     if (service) {
       service.setServiceImplementation({
@@ -100,6 +101,19 @@ export function UserAuthenticationProvider({ children, service }) {
     }
   }, [getState, service, setUser, getUser, reset, set]);
 
+  // TODO: This may not be correct, but I think we need to set the implementation for the service
+  // immediately when this runs, since otherwise the authentication redirects will fail.
+  // (useEffect only runs after the child components - in this case, routing logic - has failed)
+  if (service) {
+    service.setServiceImplementation({
+      getState,
+      setUser,
+      getUser,
+      reset,
+      set,
+    });
+  }
+
   const api = {
     getState,
     setUser,

platform/viewer/src/App.jsx

@@ -79,8 +79,6 @@ function App({ config, defaultExtensions }) {
   let authRoutes = null;
 
   if (oidc) {
-    UserAuthenticationService.set({ enabled: true });
-
     authRoutes = (<OpenIdConnectRoutes
                 oidc={oidc}
                 routerBasename={routerBasename}

platform/viewer/src/routes/Local/Local.jsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
+import { useNavigate } from 'react-router-dom';
 import { MODULE_TYPES } from '@ohif/core'
 
-import PropTypes from 'prop-types'
 import Dropzone from 'react-dropzone'
 import filesToStudies from './filesToStudies'
 
@@ -39,8 +39,8 @@ const getLoadButton = (onDrop, text, isDir) => {
     </Dropzone>)
 }
 
-function Local(props) {
-  const { history } = props
+function Local() {
+  const navigate = useNavigate();
   const dropzoneRef = useRef()
 
   // Initializing the dicom local dataSource
@@ -61,7 +61,7 @@ function Local(props) {
   const onDrop = async (acceptedFiles) => {
     const studies = await filesToStudies(acceptedFiles, dataSource)
     // Todo: navigate to work list and let user select a mode
-    history.push(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
+    navigate(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
   }
 
   // Set body style
@@ -74,7 +74,7 @@ function Local(props) {
 
   return (
     <Dropzone ref={dropzoneRef} onDrop={onDrop} noClick>
-      {({ getRootProps, getInputProps }) => (
+      {({ getRootProps }) => (
         <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
           <div className="h-screen w-screen flex justify-center items-center ">
             <div className="py-8 px-8 mx-auto bg-secondary-dark shadow-md space-y-2 rounded-lg">
@@ -107,10 +107,4 @@ function Local(props) {
   )
 }
 
-Local.propTypes = {
-  history: PropTypes.shape({
-    push: PropTypes.func,
-  }).isRequired,
-};
-
 export default Local

platform/viewer/src/routes/Mode/Mode.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import { useParams } from 'react-router';
+import { useParams, useLocation } from 'react-router';
 import PropTypes from 'prop-types';
 // TODO: DicomMetadataStore should be injected?
 import { DicomMetadataStore } from '@ohif/core';
@@ -54,7 +54,6 @@ async function defaultRouteInit({
 }
 
 export default function ModeRoute({
-  location,
   mode,
   dataSourceName,
   extensionManager,
@@ -62,6 +61,7 @@ export default function ModeRoute({
   hotkeysManager,
 }) {
   // Parse route params/querystring
+  const location = useLocation();
   const query = useQuery();
   const params = useParams();
 
@@ -287,14 +287,6 @@ export default function ModeRoute({
 }
 
 ModeRoute.propTypes = {
-  // Ref: https://reacttraining.com/react-router/web/api/location
-  location: PropTypes.shape({
-    key: PropTypes.string,
-    pathname: PropTypes.string.isRequired,
-    search: PropTypes.string.isRequired,
-    hash: PropTypes.string.isRequired,
-    //state: PropTypes.object.isRequired,
-  }),
   mode: PropTypes.object.isRequired,
   dataSourceName: PropTypes.string,
   extensionManager: PropTypes.object,

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -175,12 +175,14 @@ function WorkList({
       }
     });
 
+    const search = qs.stringify(queryString, {
+      skipNull: true,
+      skipEmptyString: true,
+    });
+
     navigate({
       pathname: '/',
-      search: `?${qs.stringify(queryString, {
-        skipNull: true,
-        skipEmptyString: true,
-      })}`,
+      search: search ? `?${search}` : undefined,
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [debouncedFilterValues]);

platform/viewer/src/routes/buildModeRoutes.js

@@ -50,9 +50,8 @@ export default function buildModeRoutes({
       const path = `/${mode.id}/${dataSourceName}`;
 
       // TODO move up.
-      const component = ({ location }) => (
+      const children = () => (
         <ModeRoute
-          location={location}
           mode={mode}
           dataSourceName={dataSourceName}
           extensionManager={extensionManager}
@@ -63,7 +62,7 @@ export default function buildModeRoutes({
 
       routes.push({
         path,
-        component,
+        children,
       });
     });
 
@@ -73,9 +72,8 @@ export default function buildModeRoutes({
     const path = `/${mode.id}`;
 
     // TODO move up.
-    const children = ({ location }) => (
+    const children = () => (
       <ModeRoute
-        location={location}
         mode={mode}
         dataSourceName={defaultDataSourceName}
         extensionManager={extensionManager}

platform/viewer/src/utils/OpenIdConnectRoutes.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useEffect } from 'react';
 import { Route, Routes, useLocation, useNavigate } from 'react-router';
 import CallbackPage from '../routes/CallbackPage';
 import SignoutCallbackComponent from '../routes/SignoutCallbackComponent';
@@ -100,7 +101,10 @@ function OpenIdConnectRoutes({
                          UserAuthenticationService
                         }) {
   const userManager = initUserManager(oidc, routerBasename);
-  const getAuthorizationHeader = (user) => {
+
+  const getAuthorizationHeader = () => {
+    const user = UserAuthenticationService.getUser();
+
     return {
       Authorization: `Bearer ${user.access_token}`
     };
@@ -115,10 +119,14 @@ function OpenIdConnectRoutes({
 
   const navigate = useNavigate();
 
-  UserAuthenticationService.setServiceImplementation({
-    getAuthorizationHeader,
-    handleUnauthenticated
-  });
+  useEffect(() => {
+    UserAuthenticationService.set({ enabled: true });
+
+    UserAuthenticationService.setServiceImplementation({
+      getAuthorizationHeader,
+      handleUnauthenticated
+    });
+  }, [])
 
   const oidcAuthority = oidc[0].authority;
 
@@ -166,7 +174,10 @@ function OpenIdConnectRoutes({
 
           UserAuthenticationService.setUser(user);
 
-          navigate(`${pathname}?${search}`);
+          navigate({
+            pathname,
+            search
+          })
         }}/>}
       />
       <Route