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

extensions/default/src/Panels/PanelStudyBrowser.tsx

@@ -234,6 +234,7 @@ function PanelStudyBrowser({
   return (
     <StudyBrowser
       tabs={tabs}
+      servicesManager={servicesManager}
       activeTabName={activeTabName}
       onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
       activeDisplaySetInstanceUIDs={activeDisplaySetInstanceUIDs}

extensions/default/src/getCustomizationModule.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ *
+ * Note: this is an example of how the customization module can be used
+ * using the customization module. Below, we are adding a new custom route
+ * to the application at the path /custom and rendering a custom component
+ * Real world use cases of the having a custom route would be to add a
+ * custom page for the user to view their profile, or to add a custom
+ * page for login etc.
+ */
+export default function getCustomizationModule() {
+  return [
+    {
+      name: 'helloPage',
+      value: {
+        id: 'customRoutes',
+        routes: [
+          {
+            path: '/custom',
+            children: () => (
+              <h1 style={{ color: 'white' }}>Hello Custom Route</h1>
+            ),
+          },
+        ],
+      },
+    },
+  ];
+}

extensions/default/src/index.js

@@ -6,6 +6,7 @@ import getToolbarModule from './getToolbarModule';
 import commandsModule from './commandsModule';
 import getHangingProtocolModule from './getHangingProtocolModule';
 import getStudiesForPatientByStudyInstanceUID from './Panels/getStudiesForPatientByStudyInstanceUID';
+import getCustomizationModule from './getCustomizationModule';
 import { id } from './id.js';
 import init from './init';
 
@@ -36,6 +37,8 @@ const defaultExtension = {
       },
     ];
   },
+
+  getCustomizationModule,
 };
 
 export default defaultExtension;

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -349,6 +349,7 @@ function PanelStudyBrowserTracking({
   return (
     <StudyBrowser
       tabs={tabs}
+      servicesManager={servicesManager}
       activeTabName={activeTabName}
       expandedStudyInstanceUIDs={expandedStudyInstanceUIDs}
       onClickStudy={_handleStudyClick}