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

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

platform/app/public/config/default.js

@@ -6,7 +6,13 @@ window.config = {
   // whiteLabeling: {},
   extensions: [],
   modes: [],
-  customizationService: {},
+  customizationService: {
+    'viewportActionMenu.windowLevelActionMenu': {
+      $merge: {
+        location: 0,
+      },
+    },
+  },
   showStudyList: true,
   // some windows systems have issues with more than 3 web workers
   maxNumberOfWebWorkers: 3,
@@ -17,6 +23,7 @@ window.config = {
   experimentalStudyBrowserSort: false,
   strictZSpacingForVolumeViewport: true,
   groupEnabledModesFirst: true,
+  allowMultiSelectExport: true,
   maxNumRequests: {
     interaction: 100,
     thumbnail: 75,

platform/app/src/App.tsx

@@ -15,9 +15,6 @@ import {
   SystemContextProvider,
 } from '@ohif/core';
 import {
-  DialogProvider,
-  Modal,
-  ModalProvider,
   ThemeWrapper,
   ViewportDialogProvider,
   CineProvider,
@@ -27,8 +24,12 @@ import {
   ThemeWrapper as ThemeWrapperNext,
   NotificationProvider,
   ViewportGridProvider,
+  DialogProvider,
   TooltipProvider,
   ToolboxProvider,
+  Modal as ModalNext,
+  ManagedDialog,
+  ModalProvider,
 } from '@ohif/ui-next';
 // Viewer Project
 // TODO: Should this influence study list?
@@ -122,8 +123,8 @@ function App({
     [CineProvider, { service: cineService }],
     [NotificationProvider, { service: uiNotificationService }],
     [TooltipProvider],
-    [DialogProvider, { service: uiDialogService }],
-    [ModalProvider, { service: uiModalService, modal: Modal }],
+    [DialogProvider, { service: uiDialogService, dialog: ManagedDialog }],
+    [ModalProvider, { service: uiModalService, modal: ModalNext }],
     [ShepherdJourneyProvider],
   ];
 

platform/app/src/routes/DataSourceWrapper.tsx

@@ -199,7 +199,6 @@ function DataSourceWrapper(props: withAppTypes) {
 
           servicesManager.services.uiModalService.show({
             title: 'Data Source Connection Error',
-            containerDimensions: 'w-1/2',
             content: () => {
               return (
                 <div>

platform/app/src/routes/WorkList/WorkList.tsx

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import filtersMeta from './filtersMeta.js';
 import { useAppConfig } from '@state';
 import { useDebounce, useSearchParams } from '@hooks';
-import { utils, hotkeys } from '@ohif/core';
+import { utils } from '@ohif/core';
 import publicUrl from '../../utils/publicUrl';
 
 import {
@@ -19,9 +19,6 @@ import {
   StudyListTable,
   StudyListPagination,
   StudyListFilter,
-  useModal,
-  AboutModal,
-  UserPreferences,
   useSessionStorage,
   InvestigationalUseDialog,
   Button,
@@ -35,21 +32,19 @@ import {
   TooltipTrigger,
   TooltipContent,
   Clipboard,
+  useModal,
   Onboarding,
   ScrollArea,
 } from '@ohif/ui-next';
 
 import { Types } from '@ohif/ui';
 
-import i18n from '@ohif/i18n';
 import { preserveQueryParameters, preserveQueryStrings } from '../../utils/preserveQueryParameters';
 
 const PatientInfoVisibility = Types.PatientInfoVisibility;
 
 const { sortBySeriesDate } = utils;
 
-const { availableLanguages, defaultLanguage, currentLanguage } = i18n;
-
 const seriesInStudiesMap = new Map();
 
 /**
@@ -102,6 +97,7 @@ function WorkList({
   const sortModifier = sortDirection === 'descending' ? 1 : -1;
   const defaultSortValues =
     shouldUseDefaultSort && canSort ? { sortBy: 'studyDate', sortDirection: 'ascending' } : {};
+  const { customizationService } = servicesManager.services;
 
   const sortedStudies = useMemo(() => {
     if (!canSort) {
@@ -470,8 +466,9 @@ function WorkList({
   });
 
   const hasStudies = numOfStudies > 0;
-  const versionNumber = process.env.VERSION_NUMBER;
-  const commitHash = process.env.COMMIT_HASH;
+
+  const AboutModal = customizationService.getCustomization('ohif.aboutModal');
+  const UserPreferencesModal = customizationService.getCustomization('ohif.userPreferencesModal');
 
   const menuOptions = [
     {
@@ -479,10 +476,9 @@ function WorkList({
       icon: 'info',
       onClick: () =>
         show({
-          content: AboutModal,
+          content: AboutModal as React.ComponentType,
           title: t('AboutModal:About OHIF Viewer'),
-          contentProps: { versionNumber, commitHash },
-          containerDimensions: 'max-w-4xl max-h-4xl',
+          containerClassName: 'max-w-md ',
         }),
     },
     {
@@ -491,24 +487,8 @@ function WorkList({
       onClick: () =>
         show({
           title: t('UserPreferencesModal:User preferences'),
-          content: UserPreferences,
-          contentProps: {
-            hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
-            hotkeyDefinitions,
-            onCancel: hide,
-            currentLanguage: currentLanguage(),
-            availableLanguages,
-            defaultLanguage,
-            onSubmit: state => {
-              if (state.language.value !== currentLanguage().value) {
-                i18n.changeLanguage(state.language.value);
-              }
-              hotkeysManager.setHotkeys(state.hotkeyDefinitions);
-              hide();
-            },
-            onReset: () => hotkeysManager.restoreDefaultBindings(),
-            hotkeysModule: hotkeys,
-          },
+          content: UserPreferencesModal as React.ComponentType,
+          containerClassName: 'flex  max-w-4xl flex-col',
         }),
     },
   ];
@@ -523,7 +503,6 @@ function WorkList({
     });
   }
 
-  const { customizationService } = servicesManager.services;
   const LoadingIndicatorProgress = customizationService.getCustomization(
     'ui.loadingIndicatorProgress'
   );