feat: Add customization support for more UI components (#4634)

Co-authored-by: ashikcn <ashik@L1140.trenser.com>
Co-authored-by: Devu Jayalekshmi <devu.jayalekshmi@trenser.com>
Co-authored-by: Arul Mozhi <arul.mozhi@trenser.com>

extensions/cornerstone/src/commandsModule.ts

@@ -208,8 +208,9 @@ function commandsModule({
      */
     setMeasurementLabel: ({ uid }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
       const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
         (val: Map<any, any>) => {
           measurementService.update(
             uid,
@@ -325,16 +326,19 @@ function commandsModule({
 
     renameMeasurement: ({ uid }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
       const measurement = measurementService.getMeasurement(uid);
-      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig).then(val => {
-        measurementService.update(
-          uid,
-          {
-            ...val,
-          },
-          true
-        );
-      });
+      showLabelAnnotationPopup(measurement, uiDialogService, labelConfig, renderContent).then(
+        val => {
+          measurementService.update(
+            uid,
+            {
+              ...val,
+            },
+            true
+          );
+        }
+      );
     },
 
     toggleLockMeasurement: ({ uid }) => {
@@ -376,7 +380,8 @@ function commandsModule({
     },
     arrowTextCallback: ({ callback, data, uid }) => {
       const labelConfig = customizationService.getCustomization('measurementLabels');
-      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig);
+      const renderContent = customizationService.getCustomization('ui.labellingComponent');
+      callLabelAutocompleteDialog(uiDialogService, callback, {}, labelConfig, renderContent);
     },
     toggleCine: () => {
       const { viewports } = viewportGridService.getState();

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Button, ProgressLoadingBar } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
+import { Button } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 import DicomFileUploader, {
   EVENTS,
@@ -40,6 +41,11 @@ function DicomUploadProgress({
   dicomFileUploaderArr,
   onComplete,
 }: DicomUploadProgressProps): ReactElement {
+  const { servicesManager } = useSystem();
+
+  const ProgressLoadingBar =
+    servicesManager.services.customizationService.getCustomization('ui.progressLoadingBar');
+
   const [totalUploadSize] = useState(
     dicomFileUploaderArr.reduce((acc, fileUploader) => acc + fileUploader.getFileSize(), 0)
   );

extensions/cornerstone/src/components/OHIFViewportActionCorners.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
 import { useViewportActionCornersContext } from '../contextProviders/ViewportActionCornersProvider';
-import { ViewportActionCorners } from '@ohif/ui';
+import { useSystem } from '@ohif/core';
 
 export type OHIFViewportActionCornersProps = {
   viewportId: string;
 };
 
 function OHIFViewportActionCorners({ viewportId }: OHIFViewportActionCornersProps) {
+  const { servicesManager } = useSystem();
   const [viewportActionCornersState] = useViewportActionCornersContext();
-
+  const ViewportActionCorners =
+    servicesManager.services.customizationService.getCustomization('ui.viewportActionCorner');
   if (!viewportActionCornersState[viewportId]) {
     return null;
   }