use useModal for all modals in protocol overview

Opentrons · Dec 18, 2024 · d818028 · d818028
1 parent ae535ad
commit d818028
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 45 deletions.
diff --git a/protocol-designer/src/organisms/MaterialsListModal/index.tsx b/protocol-designer/src/organisms/MaterialsListModal/index.tsx
@@ -51,15 +51,16 @@ interface MaterialsListModalProps {
   fixtures: FixtureInList[]
   labware: LabwareOnDeck[]
   liquids: OrderedLiquids
-  setShowMaterialsListModal: (showMaterialsListModal: boolean) => void
+  onClose: () => void
 }
 
 export function MaterialsListModal({
   hardware,
   fixtures,
   labware,
   liquids,
-  setShowMaterialsListModal,
+  // setShowMaterialsListModal,
+  onClose,
 }: MaterialsListModalProps): JSX.Element {
   const { t } = useTranslation(['protocol_overview', 'shared'])
   const robotType = useSelector(getRobotType)
@@ -71,7 +72,7 @@ export function MaterialsListModal({
   const tCSlot = robotType === FLEX_ROBOT_TYPE ? 'A1, B1' : '7,8,10,11'
 
   const handleClose = (): void => {
-    setShowMaterialsListModal(false)
+    onClose()
   }
 
   return createPortal(

diff --git a/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx b/protocol-designer/src/pages/ProtocolOverview/InstrumentsInfo.tsx
@@ -24,14 +24,14 @@ interface InstrumentsInfoProps {
   robotType: RobotType
   pipettesOnDeck: PipetteOnDeck[]
   additionalEquipment: AdditionalEquipmentEntities
-  setShowEditInstrumentsModal: (showEditInstrumentsModal: boolean) => void
+  handleOpenEditInstrumentsModal: () => void
 }
 
 export function InstrumentsInfo({
   robotType,
   pipettesOnDeck,
   additionalEquipment,
-  setShowEditInstrumentsModal,
+  handleOpenEditInstrumentsModal,
 }: InstrumentsInfoProps): JSX.Element {
   const { t } = useTranslation(['protocol_overview', 'shared'])
   const leftPipette = pipettesOnDeck.find(pipette => pipette.mount === 'left')
@@ -84,9 +84,7 @@ export function InstrumentsInfo({
         <Flex padding={SPACING.spacing4}>
           <Btn
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            onClick={() => {
-              setShowEditInstrumentsModal(true)
-            }}
+            onClick={handleOpenEditInstrumentsModal}
             css={BUTTON_LINK_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx b/protocol-designer/src/pages/ProtocolOverview/StartingDeck.tsx
@@ -27,12 +27,12 @@ import type { DeckSlot } from '../../types'
 
 interface StartingDeckProps {
   robotType: RobotType
-  setShowMaterialsListModal: Dispatch<SetStateAction<boolean>>
+  handleOpenMaterialsListModal: () => void
 }
 
 export function StartingDeck({
   robotType,
-  setShowMaterialsListModal,
+  handleOpenMaterialsListModal,
 }: StartingDeckProps): JSX.Element {
   const [isOffDeck, setIsOFfDeck] = useState<boolean>(false)
 
@@ -41,7 +41,7 @@ export function StartingDeck({
       <StartingDeckHeader
         isOffDeck={isOffDeck}
         setIsOffDeck={setIsOFfDeck}
-        setShowMaterialsListModal={setShowMaterialsListModal}
+        handleOpenMaterialsListModal={handleOpenMaterialsListModal}
       />
       <StartingDeckBody isOffDeck={isOffDeck} robotType={robotType} />
     </Flex>
@@ -51,11 +51,11 @@ export function StartingDeck({
 interface StartingDeckHeaderProps {
   isOffDeck: boolean
   setIsOffDeck: Dispatch<SetStateAction<boolean>>
-  setShowMaterialsListModal: Dispatch<SetStateAction<boolean>>
+  handleOpenMaterialsListModal: () => void
 }
 
 function StartingDeckHeader(props: StartingDeckHeaderProps): JSX.Element {
-  const { isOffDeck, setIsOffDeck, setShowMaterialsListModal } = props
+  const { isOffDeck, setIsOffDeck, handleOpenMaterialsListModal } = props
   const { t } = useTranslation(['protocol_overview', 'starting_deck_state'])
   const onDeckString = t('starting_deck_state:onDeck')
   const offDeckString = t('starting_deck_state:offDeck')
@@ -69,9 +69,7 @@ function StartingDeckHeader(props: StartingDeckHeaderProps): JSX.Element {
           <Btn
             data-testid="Materials_list"
             textDecoration={TYPOGRAPHY.textDecorationUnderline}
-            onClick={() => {
-              setShowMaterialsListModal(true)
-            }}
+            onClick={handleOpenMaterialsListModal}
             css={BUTTON_LINK_STYLE}
           >
             <StyledText desktopStyle="bodyDefaultRegular">

diff --git a/protocol-designer/src/pages/ProtocolOverview/index.tsx b/protocol-designer/src/pages/ProtocolOverview/index.tsx
@@ -77,10 +77,6 @@ export function ProtocolOverview(): JSX.Element {
     'modules',
   ])
   const navigate = useNavigate()
-  const [
-    showEditInstrumentsModal,
-    setShowEditInstrumentsModal,
-  ] = useState<boolean>(false)
   const { openModal, closeModal } = useModal()
 
   const [showExportWarningModal, setShowExportWarningModal] = useState<boolean>(
@@ -93,9 +89,6 @@ export function ProtocolOverview(): JSX.Element {
     labwareIngredSelectors.allIngredientGroupFields
   )
   const dispatch: ThunkDispatch<any> = useDispatch()
-  const [showMaterialsListModal, setShowMaterialsListModal] = useState<boolean>(
-    false
-  )
   const fileData = useSelector(fileSelectors.createFile)
   const savedStepForms = useSelector(stepFormSelectors.getSavedStepForms)
   const additionalEquipment = useSelector(getAdditionalEquipmentEntities)
@@ -215,29 +208,29 @@ export function ProtocolOverview(): JSX.Element {
     openModal(<EditProtocolMetadataModal onClose={closeModal} />)
   }
 
+  const handleOpenEditInstrumentsModal = (): void => {
+    openModal(<EditInstrumentsModal onClose={closeModal} />)
+  }
+
+  const handleOpenMaterialsListModal = (): void => {
+    openModal(
+      <MaterialsListModal
+        hardware={Object.values(modulesOnDeck)}
+        fixtures={
+          robotType === OT2_ROBOT_TYPE
+            ? Object.values(additionalEquipmentOnDeck)
+            : []
+        }
+        labware={Object.values(labwaresOnDeck)}
+        liquids={liquidsOnDeck}
+        onClose={closeModal}
+      />
+    )
+  }
+
   return (
     <Fragment>
-      {showEditInstrumentsModal ? (
-        <EditInstrumentsModal
-          onClose={() => {
-            setShowEditInstrumentsModal(false)
-          }}
-        />
-      ) : null}
       {exportWarningModal}
-      {showMaterialsListModal ? (
-        <MaterialsListModal
-          hardware={Object.values(modulesOnDeck)}
-          fixtures={
-            robotType === OT2_ROBOT_TYPE
-              ? Object.values(additionalEquipmentOnDeck)
-              : []
-          }
-          labware={Object.values(labwaresOnDeck)}
-          liquids={liquidsOnDeck}
-          setShowMaterialsListModal={setShowMaterialsListModal}
-        />
-      ) : null}
       <Flex
         flexDirection={DIRECTION_COLUMN}
         padding={`${SPACING.spacing60} ${SPACING.spacing80}`}
@@ -305,7 +298,7 @@ export function ProtocolOverview(): JSX.Element {
               robotType={robotType}
               pipettesOnDeck={pipettesOnDeck}
               additionalEquipment={additionalEquipment}
-              setShowEditInstrumentsModal={setShowEditInstrumentsModal}
+              handleOpenEditInstrumentsModal={handleOpenEditInstrumentsModal}
             />
             <LiquidDefinitions
               allIngredientGroupFields={allIngredientGroupFields}
@@ -319,7 +312,7 @@ export function ProtocolOverview(): JSX.Element {
           >
             <StartingDeck
               robotType={robotType}
-              setShowMaterialsListModal={setShowMaterialsListModal}
+              handleOpenMaterialsListModal={handleOpenMaterialsListModal}
             />
           </Flex>
         </Flex>