feat(grid): remove viewportIndex and only rely on viewportId (#3591)

Co-authored-by: Bill Wallace <wayfarer3130@gmail.com>

platform/ui/src/components/Dialog/Footer.tsx

@@ -10,7 +10,7 @@ const Footer = ({ actions, className, onSubmit, value }) => {
 
   return (
     <div className={classNames(flex, padding, className)}>
-      {actions.map((action, index) => {
+      {actions?.map((action, index) => {
         const isFirst = index === 0;
 
         const onClickHandler = event => onSubmit({ action, value, event });

platform/ui/src/components/Notification/Notification.tsx

@@ -73,9 +73,7 @@ const Notification = ({
         <span className="ml-2 text-[13px] text-black">{message}</span>
       </div>
       <div className="flex flex-wrap gap-2 justify-end mt-2">
-        {actions.map((action, index) => {
-          const isFirst = index === 0;
-
+        {actions?.map((action, index) => {
           return (
             <Button
               name={action.id}

platform/ui/src/components/Viewport/Viewport.tsx

@@ -1,18 +1,40 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import LegacyViewportActionBar from '../LegacyViewportActionBar';
 import Notification from '../Notification';
 
-const Viewport = ({
+interface StudyData {
+  label: string;
+  isTracked: boolean;
+  isLocked: boolean;
+  isRehydratable: boolean;
+  studyDate: string;
+  currentSeries: number;
+  seriesDescription: string;
+  modality: string;
+  patientInformation: {
+    patientName: string;
+    patientSex: string;
+    patientAge: string;
+    MRN: string;
+    thickness: string;
+    spacing: string;
+    scanner: string;
+  };
+}
+
+interface ViewportProps {
+  viewportId: string;
+  onArrowsClick: () => void;
+  studyData: StudyData;
+  children: React.ReactNode;
+}
+
+const Viewport: React.FC<ViewportProps> = ({
   viewportId,
-  viewportIndex,
   onArrowsClick,
   studyData,
   children,
 }) => {
-  if (!viewportId) {
-    viewportId = `viewport-${viewportIndex}`;
-  }
   return (
     <div className="relative flex flex-col h-full">
       <div className="absolute top-0 left-0 w-full">
@@ -58,30 +80,5 @@ const Viewport = ({
   );
 };
 
-Viewport.propTypes = {
-  viewportIndex: PropTypes.number.isRequired,
-  onArrowsClick: PropTypes.func.isRequired,
-  studyData: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    isTracked: PropTypes.bool.isRequired,
-    /* Specific to SR Viewports only... */
-    isLocked: PropTypes.bool.isRequired,
-    isRehydratable: PropTypes.bool.isRequired,
-    studyDate: PropTypes.string.isRequired,
-    currentSeries: PropTypes.number.isRequired,
-    seriesDescription: PropTypes.string.isRequired,
-    modality: PropTypes.string.isRequired,
-    patientInformation: PropTypes.shape({
-      patientName: PropTypes.string.isRequired,
-      patientSex: PropTypes.string.isRequired,
-      patientAge: PropTypes.string.isRequired,
-      MRN: PropTypes.string.isRequired,
-      thickness: PropTypes.string.isRequired,
-      spacing: PropTypes.string.isRequired,
-      scanner: PropTypes.string.isRequired,
-    }),
-  }).isRequired,
-  children: PropTypes.node.isRequired,
-};
-
 export default Viewport;
+export type { ViewportProps, StudyData };

platform/ui/src/components/Viewport/index.js

@@ -1,2 +0,0 @@
-import Viewport from './Viewport';
-export default Viewport;

platform/ui/src/components/Viewport/index.ts

@@ -0,0 +1,5 @@
+import Viewport from './Viewport';
+import type { StudyData, ViewportProps } from './Viewport';
+
+export default Viewport;
+export type { StudyData, ViewportProps };

platform/ui/src/components/ViewportActionBar/ViewportActionBar.tsx

@@ -27,7 +27,6 @@ const ViewportActionBar = ({
   getStatusComponent,
 }: ViewportActionBarProps): JSX.Element => {
   const { label, studyDate, seriesDescription, patientInformation } = studyData;
-
   const {
     patientName,
     patientSex,