fix(protocol-designer): misc bugs with copy, ui, and liquid color error

closes AUTH-386 AUTH-387 AUTH-385 partially RQA-2682

protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx

@@ -55,7 +55,7 @@ function checkColor(hex: string): boolean {
 
 const INVALID_DISPLAY_COLORS = ['#000000', '#ffffff', DEPRECATED_WHALE_GREY]
 
-export const liquidEditFormSchema: any = Yup.object().shape({
+const liquidEditFormSchema: any = Yup.object().shape({
   name: Yup.string().required('liquid name is required'),
   displayColor: Yup.string().test(
     'disallowed-color',
@@ -66,7 +66,7 @@ export const liquidEditFormSchema: any = Yup.object().shape({
       }
       return !INVALID_DISPLAY_COLORS.includes(value)
         ? !checkColor(value)
-        : !INVALID_DISPLAY_COLORS.includes(value)
+        : false
     }
   ),
   description: Yup.string(),
@@ -117,7 +117,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
       serialize: values.serialize || false,
     })
   }
-
+  console.log('errors', errors)
   return (
     <Card className={styles.form_card}>
       <form onSubmit={handleSubmit(handleLiquidEdits)}>
@@ -181,7 +181,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
             fontWeight={TYPOGRAPHY.fontWeightSemiBold}
             marginTop={errors.name != null ? '-0.25rem' : '0rem'}
           >
-            {errors.displayColor != null ? errors.displayColor : null}
+            {errors.displayColor != null ? errors.displayColor.message : null}
           </Flex>
         </section>
         <section className={styles.section}>

protocol-designer/src/components/modals/AnnouncementModal/announcements.tsx

@@ -9,7 +9,7 @@ import {
 } from '@opentrons/components'
 
 import magTempCombined from '../../../images/modules/magdeck_tempdeck_combined.png'
-import thermocycler from '../../../images/modules/thermocycler.jpg'
+import thermocycler from '../../../images/modules/thermocycler.png'
 import multiSelect from '../../../images/announcements/multi_select.gif'
 import batchEdit from '../../../images/announcements/batch_edit.gif'
 import heaterShaker from '../../../images/modules/heatershaker.png'

protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { css } from 'styled-components'
-import { FLEX_ROBOT_TYPE } from '@opentrons/shared-data'
+import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 
 import {
   Flex,
@@ -57,6 +57,7 @@ interface EquipmentOptionProps extends StyleProps {
   showCheckbox?: boolean
   disabled?: boolean
   multiples?: MultiplesProps
+  type?: 'module' | 'pipetteTip'
 }
 export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
   const {
@@ -66,6 +67,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
     image = null,
     showCheckbox = false,
     disabled = false,
+    type = 'module',
     robotType,
     multiples,
     ...styleProps
@@ -197,6 +199,14 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
     )
   }
 
+  let optionTooltip
+  if (robotType === FLEX_ROBOT_TYPE && type === 'module') {
+    optionTooltip = t('disabled_no_space_additional_items')
+  } else if (robotType === OT2_ROBOT_TYPE && type === 'module') {
+    optionTooltip = t('disabled_you_can_add_one_type')
+  } else if (type === 'pipetteTip') {
+    optionTooltip = t('disabled_no_space_pipette')
+  }
   return (
     <>
       <Flex
@@ -255,13 +265,7 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
         </Flex>
       </Flex>
       {disabled ? (
-        <Tooltip {...equipmentTooltipProps}>
-          {t(
-            robotType === FLEX_ROBOT_TYPE
-              ? 'disabled_no_space_additional_items'
-              : 'disabled_you_can_add_one_type'
-          )}
-        </Tooltip>
+        <Tooltip {...equipmentTooltipProps}>{optionTooltip}</Tooltip>
       ) : null}
     </>
   )

protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx

@@ -210,7 +210,11 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
               )
             }}
             width="21.75rem"
+            disabled={
+              selectedValues.length === 3 && !selectedValues.includes(o.value)
+            }
             minHeight="4rem"
+            type="pipetteTip"
             showCheckbox
           />
         ))}
@@ -276,6 +280,11 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
                   }}
                   width="21.75rem"
                   minHeight="4rem"
+                  type="pipetteTip"
+                  disabled={
+                    selectedValues.length === 3 &&
+                    !selectedValues.includes(o.value)
+                  }
                   showCheckbox
                 />
               ))}

protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx

@@ -23,6 +23,7 @@ describe('EquipmentOption', () => {
       isSelected: false,
       text: 'mockText',
       robotType: FLEX_ROBOT_TYPE,
+      type: 'module',
     }
   })
   afterEach(() => {
@@ -39,7 +40,7 @@ describe('EquipmentOption', () => {
     }
     render(props)
     expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
-      `background-color: ${COLORS.white}`
+      `background-color: ${COLORS.grey10}`
     )
   })
   it('renders the equipment option without check not selected and image', () => {
@@ -55,7 +56,7 @@ describe('EquipmentOption', () => {
       screen.getByLabelText('EquipmentOption_checkbox-blank-outline')
     ).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
-      `border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}`
+      `border: 1px ${BORDERS.styleSolid} ${COLORS.grey35}`
     )
   })
   it('renders the equipment option without check selected', () => {

protocol-designer/src/components/modules/ModuleDiagram.tsx

@@ -22,7 +22,7 @@ import magdeck_gen1 from '../../images/modules/magdeck_gen1.png'
 import magdeck_gen2 from '../../images/modules/magdeck_gen2.png'
 import tempdeck_gen1 from '../../images/modules/tempdeck_gen1.png'
 import temp_deck_gen_2_transparent from '../../images/modules/temp_deck_gen_2_transparent.png'
-import thermocycler from '../../images/modules/thermocycler.jpg'
+import thermocycler from '../../images/modules/thermocycler.png'
 import thermocycler_gen2 from '../../images/modules/thermocycler_gen2.png'
 import heater_shaker_module_transparent from '../../images/modules/heater_shaker_module_transparent.png'
 import mag_block from '../../images/modules/mag_block.png'

protocol-designer/src/localization/en/tooltip.json

@@ -6,6 +6,7 @@
   "disabled_step_creation": "New steps cannot be added in Batch Edit mode.",
   "disabled_no_space_additional_items": "No space for this combination of staging area slots, trash, and modules.",
   "disabled_you_can_add_one_type": "Only one module of each type is allowed on the deck at a time",
+  "disabled_no_space_pipette": "Only up to 3 tipracks can be assigned",
   "not_enough_space_for_temp": "There is not enough space on the deck to add more temperature modules",
   "not_in_beta": "ⓘ Coming Soon",
   "missing_tiprack": "Missing a tiprack? Make sure it is added to the deck",

protocol-designer/src/steplist/formLevel/warnings.tsx

@@ -62,14 +62,14 @@ const belowMinDisposalVolumeWarning = (min: number): FormWarning => ({
 const tipPositionedLowInTube = (): FormWarning => ({
   type: 'TIP_POSITIONED_LOW_IN_TUBE',
   title:
-    'A tuberack has an aspirate and dispense default height at 1mm and 0.5mm from the bottom of the well, which could cause liquid overflow or pipette damage. Edit tip position in advanced settings.',
+    'A tuberack has an aspirate and dispense default height at 1mm from the bottom of the well, which could cause liquid overflow or pipette damage. Edit tip position in advanced settings.',
   dependentFields: ['aspirate_labware', 'dispense_labware'],
 })
 
 const mixTipPositionedLowInTube = (): FormWarning => ({
   type: 'MIX_TIP_POSITIONED_LOW_IN_TUBE',
   title:
-    'The default mix height is 0.5mm from the bottom of the well, which could cause liquid overflow or pipette damage. Edit tip position in advanced settings.',
+    'The default mix height is 1mm from the bottom of the well, which could cause liquid overflow or pipette damage. Edit tip position in advanced settings.',
   dependentFields: ['labware'],
 })