ui(components): New Dialog and Modal components for ui-next (#4772)

Co-authored-by: sedghi <ar.sedghi@gmail.com>

platform/core/src/defaults/hotkeyBindings.ts

@@ -135,7 +135,7 @@ const bindings = [
   },
   {
     commandName: 'cancelMeasurement',
-    label: 'Cancel Cornerstone Measurement',
+    label: 'Cancel Measurement',
     keys: ['esc'],
   },
   {

platform/core/src/extensions/ExtensionManager.ts

@@ -382,6 +382,10 @@ export default class ExtensionManager extends PubSubService {
     return this.dataSourceMap[dataSourceName];
   };
 
+  getDataSourceInstance = dataSourceName => {
+    return this.dataSourceMap[dataSourceName][0];
+  };
+
   getActiveDataSource = () => {
     return this.dataSourceMap[this.activeDataSource];
   };
@@ -409,6 +413,29 @@ export default class ExtensionManager extends PubSubService {
     return this.getDataSourceDefinition(this.activeDataSource);
   };
 
+  /**
+   * Gets a formatted list of data sources suitable for UI display/selection.
+   * Only returns data sources that support STOW or have a WADO root.
+   * @returns Array of data source options with value, label, and placeholder
+   */
+  getDataSourcesForUI = () => {
+    // If multi-select export is not allowed, return empty list
+    if (this._appConfig?.allowMultiSelectExport === false) {
+      return [];
+    }
+
+    return Object.keys(this.dataSourceMap)
+      .filter(ds => {
+        const configuration = this.dataSourceDefs[ds]?.configuration;
+        return configuration?.supportsStow ?? configuration?.wadoRoot;
+      })
+      .map(ds => ({
+        value: ds,
+        label: ds,
+        placeHolder: ds,
+      }));
+  };
+
   /**
    * @private
    * @param {string} moduleType

platform/core/src/services/CustomizationService/types.ts

@@ -9,7 +9,6 @@ export interface BaseCustomization extends Obj {
   description?: string;
   label?: string;
   commands?: Command[];
-  content?: (...props: any) => React.JSX.Element;
 }
 
 export interface LabelCustomization extends BaseCustomization {
@@ -29,6 +28,7 @@ export interface ComponentCustomization extends BaseCustomization {
 }
 
 export type Customization =
+  | React.ComponentType
   | BaseCustomization
   | LabelCustomization
   | CommandCustomization

platform/core/src/services/UIDialogService/UIDialogService.ts

@@ -1,80 +1,95 @@
-import { PubSubService } from '../_shared/pubSubServiceInterface';
+import type { ManagedDialogProps } from 'platform/ui-next/src/contextProviders/ManagedDialog';
+type DialogOptions = ManagedDialogProps;
 
-class UIDialogService extends PubSubService {
-  public static readonly EVENTS = {};
+const name = 'uiDialogService';
 
-  public static REGISTRATION = {
-    name: 'uiDialogService',
+const serviceImplementation = {
+  _show: (options: DialogOptions) => {
+    console.warn('show() NOT IMPLEMENTED');
+    return '';
+  },
+  _hide: (id: string) => console.warn('hide() NOT IMPLEMENTED'),
+  _hideAll: () => console.warn('hideAll() NOT IMPLEMENTED'),
+  _isEmpty: () => {
+    console.warn('isEmpty() NOT IMPLEMENTED');
+    return true;
+  },
+  _customComponent: null,
+};
+
+class UIDialogService {
+  static REGISTRATION = {
+    name,
     altName: 'UIDialogService',
-    create: ({ configuration = {} }) => {
+    create: (): UIDialogService => {
       return new UIDialogService();
     },
   };
 
-  serviceImplementation = {
-    _dismiss: () => console.warn('dismiss() NOT IMPLEMENTED'),
-    _dismissAll: () => console.warn('dismissAll() NOT IMPLEMENTED'),
-    _create: () => console.warn('create() NOT IMPLEMENTED'),
-  };
+  readonly name = name;
 
-  constructor() {
-    super(UIDialogService.EVENTS);
-    this.serviceImplementation = {
-      ...this.serviceImplementation,
-    };
+  /**
+   * Show a new UI dialog
+   *
+   * @param {DialogOptions} options - The dialog options
+   * @returns {string} The dialog id
+   */
+  show(options: DialogOptions): string {
+    return serviceImplementation._show(options);
   }
 
-  public create({
-    id,
-    content,
-    contentProps,
-    onStart,
-    onDrag,
-    onStop,
-    centralize = false,
-    preservePosition = true,
-    isDraggable = true,
-    showOverlay = false,
-    defaultPosition,
-    onClickOutside,
-  }) {
-    return this.serviceImplementation._create({
-      id,
-      content,
-      contentProps,
-      onStart,
-      onDrag,
-      onStop,
-      centralize,
-      preservePosition,
-      isDraggable,
-      showOverlay,
-      defaultPosition,
-      onClickOutside,
-    });
+  /**
+   * Hide a specific dialog by id
+   *
+   * @param {string} id - The dialog id to hide
+   */
+  hide(id: string): void {
+    return serviceImplementation._hide(id);
   }
 
-  public dismiss({ id }) {
-    return this.serviceImplementation._dismiss({ id });
+  /**
+   * Hide all currently shown dialogs
+   */
+  hideAll(): void {
+    return serviceImplementation._hideAll();
   }
 
-  public dismissAll() {
-    return this.serviceImplementation._dismissAll();
+  /**
+   * Check if there are any dialogs currently shown
+   *
+   * @returns {boolean} True if no dialogs are shown
+   */
+  isEmpty(): boolean {
+    return serviceImplementation._isEmpty();
   }
 
-  public setServiceImplementation({
-    dismiss: dismissImplementation,
-    dismissAll: dismissAllImplementation,
-    create: createImplementation,
-  }) {
-    if (dismissImplementation) {
-      this.serviceImplementation._dismiss = dismissImplementation;
+  /**
+   * This provides flexibility in customizing the Modal's default component
+   *
+   * @returns {React.Component}
+   */
+  getCustomComponent() {
+    return serviceImplementation._customComponent;
+  }
+
+  /**
+   * Set the service implementation
+   */
+  setServiceImplementation({ show, hide, hideAll, isEmpty, customComponent }: any): void {
+    if (show) {
+      serviceImplementation._show = show;
     }
-    if (dismissAllImplementation) {
-      this.serviceImplementation._dismissAll = dismissAllImplementation;
+    if (hide) {
+      serviceImplementation._hide = hide;
     }
-    if (createImplementation) {
-      this.serviceImplementation._create = createImplementation;
+    if (hideAll) {
+      serviceImplementation._hideAll = hideAll;
+    }
+    if (isEmpty) {
+      serviceImplementation._isEmpty = isEmpty;
+    }
+    if (customComponent) {
+      serviceImplementation._customComponent = customComponent;
     }
   }
 }

platform/core/src/services/UIModalService/index.ts

@@ -1,16 +1,3 @@
-/**
- * UI Modal
- *
- * @typedef {Object} ModalProps
- * @property {ReactElement|HTMLElement} [content=null] Modal content.
- * @property {Object} [contentProps=null] Modal content props.
- * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key.
- * @property {boolean} [isOpen=true] Make the Modal visible or hidden.
- * @property {boolean} [closeButton=true] Should the modal body render the close button.
- * @property {string} [title=null] Should the modal render the title independently of the body content.
- * @property {string} [customClassName=null] The custom class to style the modal.
- */
-
 const name = 'uiModalService';
 
 const serviceImplementation = {
@@ -38,30 +25,20 @@ class UIModalService {
   show({
     content = null,
     contentProps = null,
-    shouldCloseOnEsc = true,
-    isOpen = true,
-    closeButton = true,
     title = null,
-    customClassName = null,
-    movable = false,
-    containerDimensions = null,
-    contentDimensions = null,
+    className = null,
+    shouldCloseOnEsc = true,
     shouldCloseOnOverlayClick = true,
-    shouldCloseImmediately = false,
+    containerClassName = null,
   }) {
     return serviceImplementation._show({
       content,
       contentProps,
       shouldCloseOnEsc,
-      isOpen,
-      closeButton,
       title,
-      customClassName,
-      movable,
-      containerDimensions,
-      contentDimensions,
+      className,
       shouldCloseOnOverlayClick,
-      shouldCloseImmediately,
+      containerClassName,
     });
   }