fix(protocol-designer): always enable save in EditInstrumentsModal (#18928)

This PR updates the EditInstrumentsModal component to ensure the "Save"
button is always enabled. The behavior of save should be determined by
the conditions previously used to set the "disabled" prop on the button.
Now, clicking the button when saving if not valid will result in the
error message "Add at least one pipette to save" displaying.

Closes AUTH-1321

Author: ncdiehl11

protocol-designer/src/assets/localization/en/onboarding.json

@@ -1,11 +1,11 @@
 {
   "add_custom_tips": "Add custom pipette tips",
   "add_fixtures": "Add your fixtures",
-  "add_gripper_for_absorbance_reader": "Add a gripper to enable adding Absorbance Plate Reader",
   "add_gripper": "Add a gripper",
+  "add_gripper_for_absorbance_reader": "Add a gripper to enable adding Absorbance Plate Reader",
   "add_modules": "Add your modules",
-  "add_pipette_to_continue": "Add a pipette to continue",
   "add_pipette": "Add a pipette",
+  "add_pipette_to_continue": "Add a pipette to continue",
   "add_your_pipettes": "Add your pipettes",
   "are_you_sure_clear_slot": "Are you sure you want to clear slot?",
   "are_you_sure_reconfigure_slot": "Are you sure you want to reconfigure the slot?",
@@ -27,11 +27,12 @@
   "modules_added": "Modules added",
   "name": "Name",
   "need_gripper": "Do you want to move labware automatically with the gripper?",
+  "pipette": "{{mount}} Mount",
   "pipette_gen": "Pipette generation",
+  "pipette_required": "Add at least one pipette to save",
   "pipette_tips": "Pipette tips",
   "pipette_type": "Pipette type",
   "pipette_vol": "Pipette volume",
-  "pipette": "{{mount}} Mount",
   "place_hardware": "Place the modules and fixtures that you are using for this protocol onto the deck.",
   "quantity": "Quantity",
   "remove": "Remove",
@@ -57,7 +58,7 @@
   "wasteChute": "Waste Chute",
   "which_fixtures": "Which fixtures will you be using?",
   "which_modules": "Select modules to use in your protocol.",
-  "which_pipette_second": "Now add your second pipette",
   "which_pipette": "Pick your first pipette. If you need a second pipette, you can add it next.",
+  "which_pipette_second": "Now add your second pipette",
   "your_pipettes": "Your pipettes"
 }

protocol-designer/src/components/organisms/EditInstrumentsModal/PipetteOverview.tsx

@@ -30,6 +30,7 @@ import { LINK_BUTTON_STYLE } from '../../atoms'
 import { PipetteInfoItem } from '../PipetteInfoItem'
 import { getSectionsFromPipetteName } from './utils'
 
+import type { Dispatch, SetStateAction } from 'react'
 import type { RobotType } from '@opentrons/shared-data'
 import type { AdditionalEquipmentName } from '@opentrons/step-generation'
 import type {
@@ -51,6 +52,8 @@ interface PipetteOverviewProps {
   labware: AllTemporalPropertiesForTimelineFrame['labware']
   robotType: RobotType
   pipetteConfig: PipetteConfig
+  showNoPipetteError: boolean
+  setSaveAttemptFailed: Dispatch<SetStateAction<boolean>>
   leftPipette?: PipetteOnDeck
   rightPipette?: PipetteOnDeck
   gripper?: Gripper
@@ -62,6 +65,8 @@ export function PipetteOverview({
   labware,
   robotType,
   pipetteConfig,
+  showNoPipetteError,
+  setSaveAttemptFailed,
   leftPipette,
   rightPipette,
   gripper,
@@ -107,6 +112,12 @@ export function PipetteOverview({
     setSelectedTips,
   } = pipetteConfig
 
+  const handleAddPipette = (): void => {
+    setPage('add')
+    setMount(targetPipetteMount)
+    setSaveAttemptFailed(false)
+  }
+
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing24}>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing8}>
@@ -187,16 +198,23 @@ export function PipetteOverview({
           ) : null}
           {has96Channel ||
           (leftPipette != null && rightPipette != null) ? null : (
-            <Flex width={FLEX_MAX_CONTENT}>
-              <EmptySelectorButton
-                onClick={() => {
-                  setPage('add')
-                  setMount(targetPipetteMount)
-                }}
-                text={t('add_pipette')}
-                textAlignment="left"
-                iconName="plus"
-              />
+            <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+              <Flex width={FLEX_MAX_CONTENT}>
+                <EmptySelectorButton
+                  onClick={handleAddPipette}
+                  text={t('add_pipette')}
+                  textAlignment="left"
+                  iconName="plus"
+                />
+              </Flex>
+              {showNoPipetteError ? (
+                <StyledText
+                  desktopStyle="bodyDefaultRegular"
+                  color={COLORS.red50}
+                >
+                  {t('pipette_required')}
+                </StyledText>
+              ) : null}
             </Flex>
           )}
         </Flex>

protocol-designer/src/components/organisms/EditInstrumentsModal/__tests__/EditInstrumentsModal.test.tsx

@@ -122,7 +122,8 @@ describe('EditInstrumentsModal', () => {
       resetFields: vi.fn(),
     })
     render(props)
-    expect(screen.getByText('Save')).toBeDisabled()
+    fireEvent.click(screen.getByText('Save'))
+    expect(mockOnClose).not.toHaveBeenCalled()
   })
 
   it('should render text and buttons - pipette overview', () => {

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

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { useDispatch, useSelector } from 'react-redux'
@@ -45,6 +46,7 @@ export function EditInstrumentsModal(
   const initialDeckSetup = useSelector(getInitialDeckSetup)
   const additionalEquipment = useSelector(getAdditionalEquipment)
   const pipetteEntities = useSelector(getPipetteEntities)
+  const [saveAttemptFailed, setSaveAttemptFailed] = useState<boolean>(false)
   const { pipettes, labware } = initialDeckSetup
   const pipettesOnDeck = Object.values(pipettes)
   const has96Channel = getHas96Channel(pipetteEntities)
@@ -69,7 +71,19 @@ export function EditInstrumentsModal(
       ? `${pipetteVolume}_${pipetteType}`
       : `${pipetteVolume}_${pipetteType}_${pipetteGen.toLowerCase()}`
 
+  const canSave =
+    (page === 'add' &&
+      pipetteVolume != null &&
+      pipetteType != null &&
+      pipetteGen != null &&
+      selectedTips.length > 0) ||
+    (page === 'overview' && pipettesOnDeck.length > 0)
   const handleOnSave = (): void => {
+    if (!canSave) {
+      setSaveAttemptFailed(true)
+      return
+    }
+
     if (page === 'overview') {
       onClose()
     } else {
@@ -118,19 +132,7 @@ export function EditInstrumentsModal(
             >
               {page === 'overview' ? t('cancel') : t('back')}
             </SecondaryButton>
-            <PrimaryButton
-              disabled={
-                (page === 'add' &&
-                  (pipetteVolume == null ||
-                    pipetteType == null ||
-                    pipetteGen == null ||
-                    selectedTips.length === 0)) ||
-                (page === 'overview' && pipettesOnDeck.length === 0)
-              }
-              onClick={handleOnSave}
-            >
-              {t('save')}
-            </PrimaryButton>
+            <PrimaryButton onClick={handleOnSave}>{t('save')}</PrimaryButton>
           </Flex>
         }
       >
@@ -144,6 +146,8 @@ export function EditInstrumentsModal(
             rightPipette={rightPipette}
             gripper={gripper}
             pipetteConfig={pipetteConfig}
+            showNoPipetteError={saveAttemptFailed && !canSave}
+            setSaveAttemptFailed={setSaveAttemptFailed}
           />
         ) : (
           <PipetteConfiguration