fix(protocol-designer): fix define a liquid behavior in LiquidToolbox (#18504)

* fix(protocol-designer): fix define a liquid behavior in LiquidToolbox

Author: koji

protocol-designer/src/components/organisms/AssignLiquidsModal/LiquidToolbox.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -36,7 +35,6 @@ import { getLabwareNicknamesById } from '../../../ui/labware/selectors'
 import { deselectAllWells } from '../../../well-selection/actions'
 import { getSelectedWells } from '../../../well-selection/selectors'
 import { LINK_BUTTON_STYLE } from '../../atoms'
-import { DefineLiquidsModal } from '../DefineLiquidsModal'
 import { LiquidCard } from './LiquidCard'
 
 import type { ChangeEvent, Dispatch, SetStateAction } from 'react'
@@ -62,15 +60,16 @@ interface ToolboxFormValues {
 interface LiquidToolboxProps {
   showBadFormState: boolean
   setShowBadFormState: Dispatch<SetStateAction<boolean>>
+  setDefineLiquidModal: Dispatch<SetStateAction<boolean>>
 }
 export function LiquidToolbox({
   showBadFormState,
   setShowBadFormState,
+  setDefineLiquidModal,
 }: LiquidToolboxProps): JSX.Element {
   const { t } = useTranslation(['liquids', 'form', 'shared'])
   const dispatch = useDispatch()
   const navigate = useNavigate()
-  const [showDefineLiquidModal, setDefineLiquidModal] = useState<boolean>(false)
   const liquids = useSelector(getLiquidEntities)
   const labwareId = useSelector(labwareIngredSelectors.getSelectedLabwareId)
   const selectedWellGroups = useSelector(getSelectedWells)
@@ -267,14 +266,6 @@ export function LiquidToolbox({
 
   return (
     <>
-      {showDefineLiquidModal ? (
-        <DefineLiquidsModal
-          onClose={() => {
-            setDefineLiquidModal(false)
-          }}
-        />
-      ) : null}
-
       <Toolbox
         title={
           <StyledText desktopStyle="bodyLargeSemiBold">

protocol-designer/src/components/organisms/AssignLiquidsModal/index.tsx

@@ -41,11 +41,12 @@ const CONTAINER_WIDTH = '49.8125rem'
 
 interface AssignLiquidsModalProps {
   showLiquidOverflowMenu: Dispatch<SetStateAction<boolean>>
+  setDefineLiquidModal: Dispatch<SetStateAction<boolean>>
 }
 export function AssignLiquidsModal(
   props: AssignLiquidsModalProps
 ): JSX.Element | null {
-  const { showLiquidOverflowMenu } = props
+  const { showLiquidOverflowMenu, setDefineLiquidModal } = props
   const { t } = useTranslation('liquids')
   const [highlightedWells, setHighlightedWells] = useState<WellGroup | {}>({})
   const [showBadFormState, setShowBadFormState] = useState(false)
@@ -187,6 +188,7 @@ export function AssignLiquidsModal(
         <LiquidToolbox
           showBadFormState={showBadFormState}
           setShowBadFormState={setShowBadFormState}
+          setDefineLiquidModal={setDefineLiquidModal}
         />
       </Flex>
     </Flex>

protocol-designer/src/pages/Liquids/index.tsx

@@ -55,7 +55,10 @@ export function Liquids(): JSX.Element {
         />
       ) : null}
 
-      <AssignLiquidsModal showLiquidOverflowMenu={showLiquidOverflowMenu} />
+      <AssignLiquidsModal
+        showLiquidOverflowMenu={showLiquidOverflowMenu}
+        setDefineLiquidModal={setDefineLiquidModal}
+      />
     </>
   )
 }