feat(CustomizationService):Add a customization service (#2984)

* feat(customization):Add a customization service

Update UICustomizationService to v3-stable.

Also, adds an example customization for tab colors

* moved the customization service to ui category

platform/viewer/public/config/default.js

@@ -3,6 +3,10 @@ window.config = {
   // whiteLabelling: {},
   extensions: [],
   modes: [],
+  customizationService: {
+    // Shows a custom route -access via http://localhost:3000/custom
+    // helloPage: '@ohif/extension-default.customizationModule.helloPage',
+  },
   showStudyList: true,
   maxNumberOfWebWorkers: 4,
   // below flag is for performance reasons, but it might not work for all servers

platform/viewer/public/config/local_static.js

@@ -1,10 +1,12 @@
 window.config = {
   routerBasename: '/',
-  // whiteLabelling: {},
+  customizationService: [
+    '@ohif/extension-default.customizationModule.helloPage',
+  ],
   extensions: [],
   modes: [],
   showStudyList: true,
-  maxNumberOfWebWorkers: 3,
+  maxNumberOfWebWorkers: 4,
   // below flag is for performance reasons, but it might not work for all servers
   omitQuotationForMultipartRequest: true,
   showLoadingIndicator: true,
@@ -51,25 +53,6 @@ window.config = {
     // Could use services manager here to bring up a dialog/modal if needed.
     console.warn('test, navigate to https://ohif.org/');
   },
-  // 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: 'text-purple-600 line-through',
-  //         href: '/',
-  //       },
-  //       React.createElement('img',
-  //         {
-  //           src: './customLogo.svg',
-  //           className: 'w-8 h-8',
-  //         }
-  //       ))
-  //   },
-  // },
   defaultDataSourceName: 'dicomweb',
   hotkeys: [
     {

platform/viewer/public/config/multiple.js

@@ -1,6 +1,12 @@
 window.config = {
   routerBasename: '/',
   customizationService: [
+    '@ohif/extension-default.customizationModule.helloPage',
+    {
+      id: 'class:StudyBrowser',
+      true: 'black',
+      false: 'default',
+    },
   ],
   extensions: [],
   modes: [],

platform/viewer/src/App.tsx

@@ -52,16 +52,6 @@ function App({ config, defaultExtensions, defaultModes }) {
   const appConfigState = init.appConfig;
   const { routerBasename, modes, dataSources, oidc } = appConfigState;
 
-  // Use config to create routes
-  const appRoutes = createRoutes({
-    modes,
-    dataSources,
-    extensionManager,
-    servicesManager,
-    commandsManager,
-    hotkeysManager,
-    routerBasename,
-  });
   const {
     UIDialogService,
     UIModalService,
@@ -70,6 +60,7 @@ function App({ config, defaultExtensions, defaultModes }) {
     ViewportGridService,
     CineService,
     UserAuthenticationService,
+    customizationService,
   } = servicesManager.services;
 
   const providers = [
@@ -89,6 +80,20 @@ function App({ config, defaultExtensions, defaultModes }) {
 
   let authRoutes = null;
 
+  // Should there be a generic call to init on the extension manager?
+  customizationService.init(extensionManager);
+
+  // Use config to create routes
+  const appRoutes = createRoutes({
+    modes,
+    dataSources,
+    extensionManager,
+    servicesManager,
+    commandsManager,
+    hotkeysManager,
+    routerBasename,
+  });
+
   if (oidc) {
     authRoutes = (
       <OpenIdConnectRoutes
@@ -115,9 +120,7 @@ App.propTypes = {
     PropTypes.shape({
       routerBasename: PropTypes.string.isRequired,
       oidc: PropTypes.array,
-      whiteLabeling: PropTypes.shape({
-        createLogoComponentFn: PropTypes.func,
-      }),
+      whiteLabeling: PropTypes.object,
       extensions: PropTypes.array,
     }),
   ]).isRequired,

platform/viewer/src/appInit.js

@@ -15,6 +15,7 @@ import {
   CineService,
   UserAuthenticationService,
   errorHandler,
+  CustomizationServiceRegistration,
   // utils,
 } from '@ohif/core';
 
@@ -50,6 +51,7 @@ async function appInit(appConfigOrFunc, defaultExtensions, defaultModes) {
     UIViewportDialogService,
     MeasurementService,
     DisplaySetService,
+    [CustomizationServiceRegistration, appConfig.customizationService],
     ToolBarService,
     ViewportGridService,
     HangingProtocolService,

platform/viewer/src/routes/index.tsx

@@ -10,7 +10,6 @@ import NotFound from './NotFound';
 import buildModeRoutes from './buildModeRoutes';
 import PrivateRoute from './PrivateRoute';
 
-// TODO: Make these configurable
 // TODO: Include "routes" debug route if dev build
 const bakedInRoutes = [
   // WORK LIST
@@ -24,10 +23,11 @@ const bakedInRoutes = [
     path: '/local',
     children: Local,
   },
-  // NOT FOUND (404)
-  { component: NotFound },
 ];
 
+// NOT FOUND (404)
+const notFoundRoute = { component: NotFound };
+
 const createRoutes = ({
   modes,
   dataSources,
@@ -47,7 +47,17 @@ const createRoutes = ({
       hotkeysManager,
     }) || [];
 
-  const allRoutes = [...routes, ...bakedInRoutes];
+  const { customizationService } = servicesManager.services;
+
+  const customRoutes = customizationService.getGlobalCustomization(
+    'customRoutes'
+  );
+  const allRoutes = [
+    ...routes,
+    ...(customRoutes?.routes || []),
+    ...bakedInRoutes,
+    customRoutes?.notFoundRoute || notFoundRoute,
+  ];
 
   function RouteWithErrorBoundary({ route, ...rest }) {
     // eslint-disable-next-line react/jsx-props-no-spreading