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/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