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

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

extensions/dicom-microscopy/src/components/MicroscopyPanel/MicroscopyPanel.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { callInputDialog } from '@ohif/extension-default';
 import { ExtensionManager, CommandsManager, DicomMetadataStore } from '@ohif/core';
-import { MeasurementTable } from '@ohif/ui';
+import { DataRow } from '@ohif/ui-next';
 import { withTranslation, WithTranslation } from 'react-i18next';
 import { EVENTS as MicroscopyEvents } from '../../services/MicroscopyService';
 import dcmjs from 'dcmjs';
@@ -328,14 +328,34 @@ function MicroscopyPanel(props: IMicroscopyPanelProps) {
         className="ohif-scrollbar overflow-y-auto overflow-x-hidden"
         data-cy={'measurements-panel'}
       >
-        <MeasurementTable
-          title="Measurements"
-          servicesManager={props.servicesManager}
-          data={data}
-          onClick={onMeasurementItemClickHandler}
-          onEdit={onMeasurementItemEditHandler}
-          onDelete={onMeasurementDeleteHandler}
-        />
+        <div className="flex flex-col">
+          {data.map(item => (
+            <DataRow
+              key={item.uid}
+              number={item.index + 1}
+              title={item.label}
+              isSelected={item.isActive}
+              onSelect={() => onMeasurementItemClickHandler({ uid: item.uid })}
+              details={{
+                primary: item.displayText,
+                secondary: [],
+              }}
+              isVisible={true}
+              onToggleVisibility={() => {}}
+              isLocked={false}
+              onToggleLocked={() => {}}
+              onRename={() =>
+                onMeasurementItemEditHandler({ uid: item.uid, isActive: item.isActive })
+              }
+              onDelete={() =>
+                onMeasurementDeleteHandler({ uid: item.uid, isActive: item.isActive })
+              }
+              onColor={() => {}}
+              disableEditing={false}
+              description={item.displayText.join(', ')}
+            />
+          ))}
+        </div>
       </div>
     </>
   );

extensions/dicom-microscopy/src/customizations/panelMeasurementItem.tsx

@@ -1,5 +0,0 @@
-import { MeasurementItem } from '@ohif/ui';
-
-export default {
-  'microscopyPanel.measurementItem': MeasurementItem,
-};

extensions/dicom-microscopy/src/getCustomizationModule.ts

@@ -1,12 +1,3 @@
-import panelMeasurementItem from './customizations/panelMeasurementItem';
-
 export default function getCustomizationModule() {
-  return [
-    {
-      name: 'default',
-      value: {
-        ...panelMeasurementItem,
-      },
-    },
-  ];
+  return [];
 }