refactor(ui): Migrate components to ui-next (#4930)

Co-authored-by: Dan Rukas <dan.rukas@gmail.com>

extensions/default/src/Components/LineChartViewport/LineChartViewport.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { LineChart } from '@ohif/ui';
+import { LineChart } from '@ohif/ui-next';
 
 const LineChartViewport = ({ displaySets }) => {
   const displaySet = displaySets[0];

extensions/default/src/Components/ProgressDropdownWithService.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, ReactElement } from 'react';
-import { ProgressDropdown } from '@ohif/ui';
+import { ProgressDropdown } from '@ohif/ui-next';
 
 const workflowStepsToDropdownOptions = (steps = []) =>
   steps.map(step => ({

extensions/default/src/CustomizableContextMenu/ContextMenuItemsBuilder.ts

@@ -1,4 +1,4 @@
-import { Types } from '@ohif/ui';
+import { Types } from '@ohif/ui-next';
 import { Menu, SelectorProps, MenuItem, ContextMenuProps } from './types';
 
 type ContextMenuItem = Types.ContextMenuItem;

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowser.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { useImageViewer } from '@ohif/ui';
+import { useImageViewer } from '@ohif/ui-next';
 import { useSystem, utils } from '@ohif/core';
 import { useNavigate } from 'react-router-dom';
 import { useViewportGrid, StudyBrowser, Separator } from '@ohif/ui-next';

extensions/default/src/Toolbar/LegacyLayoutSelector.tsx

@@ -1,87 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
-
-function LegacyLayoutSelectorWithServices({
-  servicesManager,
-  rows = 3,
-  columns = 3,
-  onLayoutChange = () => {},
-  ...props
-}) {
-  const { toolbarService } = servicesManager.services;
-
-  const onSelection = useCallback(
-    props => {
-      toolbarService.recordInteraction({
-        interactionType: 'action',
-        commands: [
-          {
-            commandName: 'setViewportGridLayout',
-            commandOptions: { ...props },
-            context: 'DEFAULT',
-          },
-        ],
-      });
-    },
-    [toolbarService]
-  );
-
-  return (
-    <LayoutSelector
-      {...props}
-      onSelection={onSelection}
-    />
-  );
-}
-
-function LayoutSelector({ rows, columns, className, onSelection, ...rest }) {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const closeOnOutsideClick = () => {
-    if (isOpen) {
-      setIsOpen(false);
-    }
-  };
-
-  useEffect(() => {
-    window.addEventListener('click', closeOnOutsideClick);
-    return () => {
-      window.removeEventListener('click', closeOnOutsideClick);
-    };
-  }, [isOpen]);
-
-  const onInteractionHandler = () => setIsOpen(!isOpen);
-  const DropdownContent = isOpen ? OHIFLayoutSelector : null;
-
-  return (
-    <ToolbarButton
-      id="Layout"
-      label="Grid Layout"
-      icon="tool-layout"
-      onInteraction={onInteractionHandler}
-      className={className}
-      rounded={rest.rounded}
-      dropdownContent={
-        DropdownContent !== null && (
-          <DropdownContent
-            rows={rows}
-            columns={columns}
-            onSelection={onSelection}
-          />
-        )
-      }
-      isActive={isOpen}
-      type="toggle"
-    />
-  );
-}
-
-LayoutSelector.propTypes = {
-  rows: PropTypes.number,
-  columns: PropTypes.number,
-  onLayoutChange: PropTypes.func,
-  servicesManager: PropTypes.object.isRequired,
-};
-
-export default LegacyLayoutSelectorWithServices;

extensions/default/src/ViewerLayout/index.tsx

@@ -1,7 +1,7 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 
-import { InvestigationalUseDialog } from '@ohif/ui';
+import { InvestigationalUseDialog } from '@ohif/ui-next';
 import { HangingProtocolService, CommandsManager } from '@ohif/core';
 import { useAppConfig } from '@state';
 import ViewerHeader from './ViewerHeader';

extensions/default/src/customizations/labellingFlowCustomization.tsx

@@ -1,4 +1,4 @@
-import { LabellingFlow } from '@ohif/ui';
+import { LabellingFlow } from '@ohif/ui-next';
 
 export default {
   'ui.labellingComponent': LabellingFlow,

extensions/default/src/customizations/loadingIndicatorProgressCustomization.tsx

@@ -1,4 +1,4 @@
-import { LoadingIndicatorProgress } from '@ohif/ui';
+import { LoadingIndicatorProgress } from '@ohif/ui-next';
 
 export default {
   'ui.loadingIndicatorProgress': LoadingIndicatorProgress,

extensions/default/src/customizations/loadingIndicatorTotalPercentCustomization.tsx

@@ -1,4 +1,4 @@
-import { LoadingIndicatorTotalPercent } from '@ohif/ui';
+import { LoadingIndicatorTotalPercent } from '@ohif/ui-next';
 
 export default {
   'ui.loadingIndicatorTotalPercent': LoadingIndicatorTotalPercent,

extensions/default/src/customizations/notificationCustomization.ts

@@ -1,5 +1,5 @@
 import i18n from '@ohif/i18n';
-import { Notification } from '@ohif/ui';
+import { ViewportDialog } from '@ohif/ui-next';
 
 const beginTrackingMessage = i18n.t('MeasurementTable:Track measurements for this series?');
 const trackNewSeriesMessage = i18n.t('Do you want to add this measurement to the existing report?');
@@ -16,7 +16,7 @@ const hydrateSEGMessage = i18n.t('Do you want to open this Segmentation?');
 const discardDirtyMessage = i18n.t('There are unsaved measurements. Do you want to save it?');
 
 export default {
-  'ui.notificationComponent': Notification,
+  'ui.notificationComponent': ViewportDialog,
   'viewportNotification.beginTrackingMessage': beginTrackingMessage,
   'viewportNotification.trackNewSeriesMessage': trackNewSeriesMessage,
   'viewportNotification.discardSeriesMessage': discardSeriesMessage,

extensions/default/src/customizations/progressLoadingBarCustomization.tsx

@@ -1,4 +1,4 @@
-import { ProgressLoadingBar } from '@ohif/ui';
+import { ProgressLoadingBar } from '@ohif/ui-next';
 
 export default {
   'ui.progressLoadingBar': ProgressLoadingBar,

extensions/default/src/getToolbarModule.tsx

@@ -33,7 +33,12 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
       name: 'ohif.toolBoxButton',
       defaultComponent: ToolBoxButtonWrapper,
     },
-    // legacy
+    // legacy will get removed in the future
+    // legacy will get removed in the future
+    // legacy will get removed in the future
+    // legacy will get removed in the future
+    // legacy will get removed in the future
+    // legacy will get removed in the future
     {
       name: 'ohif.radioGroup',
       defaultComponent: ToolbarButtonLegacy,

extensions/default/src/utils/addIcon.ts

@@ -1,8 +1,6 @@
-import { addIcon as addIconUI } from '@ohif/ui';
 import { Icons } from '@ohif/ui-next';
 
 /** Adds the icon to both ui and ui-next */
 export function addIcon(name, icon) {
-  addIconUI(name, icon);
   Icons.addIcon(name, icon);
 }

extensions/default/src/utils/callInputDialog.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { setAnnotationLabel } from '@cornerstonejs/tools/utilities';
 import { annotation } from '@cornerstonejs/tools';
-import { LabellingFlow } from '@ohif/ui';
+import { LabellingFlow } from '@ohif/ui-next';
 import { InputDialog } from '@ohif/ui-next';
 
 interface InputDialogDefaultProps {