fix(protocol-designer): color picker chooses new color for defaults (#…

…15064) closes AUTH-375
Opentrons · May 2, 2024 · b2749d8 · b2749d8
1 parent be954d4
commit b2749d8
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 25 deletions.
diff --git a/protocol-designer/src/components/ColorPicker/index.tsx b/protocol-designer/src/components/ColorPicker/index.tsx
@@ -11,6 +11,7 @@ interface ColorPickerProps {
 }
 
 export function ColorPicker(props: ColorPickerProps): JSX.Element {
+  const { value, onChange } = props
   const [showColorPicker, setShowColorPicker] = React.useState<boolean>(false)
 
   return (
@@ -27,7 +28,7 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
           <div
             className={styles.color}
             style={{
-              backgroundColor: props.value,
+              backgroundColor: value,
             }}
           />
         </div>
@@ -39,9 +40,9 @@ export function ColorPicker(props: ColorPickerProps): JSX.Element {
             />
             <TwitterPicker
               colors={DEFAULT_LIQUID_COLORS}
-              color={props.value}
+              color={value}
               onChange={(color, event) => {
-                props.onChange(color.hex)
+                onChange(color.hex)
               }}
             />
           </div>

diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -4,7 +4,6 @@ import { Controller, useForm } from 'react-hook-form'
 import { yupResolver } from '@hookform/resolvers/yup'
 import { useSelector } from 'react-redux'
 import * as Yup from 'yup'
-import { swatchColors } from '../swatchColors'
 import {
   Card,
   DeprecatedCheckboxField,
@@ -18,18 +17,23 @@ import {
 } from '@opentrons/components'
 import { DEPRECATED_WHALE_GREY } from '@opentrons/shared-data'
 import { selectors } from '../../labware-ingred/selectors'
+import { swatchColors } from '../swatchColors'
+import { ColorPicker } from '../ColorPicker'
 import styles from './LiquidEditForm.module.css'
 import formStyles from '../forms/forms.module.css'
 
-import { LiquidGroup } from '../../labware-ingred/types'
-import { ColorPicker } from '../ColorPicker'
-import { ColorResult } from 'react-color'
+import type { ColorResult } from 'react-color'
+import type { LiquidGroup } from '../../labware-ingred/types'
 
-type Props = LiquidGroup & {
+interface LiquidEditFormProps {
+  serialize: boolean
   canDelete: boolean
-  deleteLiquidGroup: () => unknown
-  cancelForm: () => unknown
-  saveForm: (liquidGroup: LiquidGroup) => unknown
+  deleteLiquidGroup: () => void
+  cancelForm: () => void
+  saveForm: (liquidGroup: LiquidGroup) => void
+  displayColor?: string
+  name?: string | null
+  description?: string | null
 }
 
 interface LiquidEditFormValues {
@@ -69,17 +73,26 @@ export const liquidEditFormSchema: any = Yup.object().shape({
   serialize: Yup.boolean(),
 })
 
-export function LiquidEditForm(props: Props): JSX.Element {
-  const { deleteLiquidGroup, cancelForm, canDelete, saveForm } = props
+export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
+  const {
+    deleteLiquidGroup,
+    cancelForm,
+    canDelete,
+    saveForm,
+    displayColor,
+    name: propName,
+    description: propDescription,
+    serialize,
+  } = props
   const selectedLiquid = useSelector(selectors.getSelectedLiquidGroupState)
   const nextGroupId = useSelector(selectors.getNextLiquidGroupId)
   const liquidId = selectedLiquid.liquidGroupId ?? nextGroupId
   const { t } = useTranslation(['form', 'button'])
   const initialValues: LiquidEditFormValues = {
-    name: props.name || '',
-    displayColor: props.displayColor ?? swatchColors(liquidId),
-    description: props.description || '',
-    serialize: props.serialize || false,
+    name: propName || '',
+    displayColor: displayColor ?? swatchColors(liquidId),
+    description: propDescription || '',
+    serialize: serialize || false,
   }
 
   const {
@@ -94,6 +107,7 @@ export function LiquidEditForm(props: Props): JSX.Element {
   })
   const name = watch('name')
   const description = watch('description')
+  const color = watch('displayColor')
 
   const handleLiquidEdits = (values: LiquidEditFormValues): void => {
     saveForm({
@@ -150,9 +164,10 @@ export function LiquidEditForm(props: Props): JSX.Element {
                 control={control}
                 render={({ field }) => (
                   <ColorPicker
-                    value={field.value}
+                    value={color}
                     onChange={(color: ColorResult['hex']) => {
                       setValue('displayColor', color)
+                      field.onChange(color)
                     }}
                   />
                 )}

diff --git a/protocol-designer/src/components/LiquidsPage/index.tsx b/protocol-designer/src/components/LiquidsPage/index.tsx
@@ -44,12 +44,6 @@ export function LiquidsPage(): JSX.Element {
       })
     )
   }
-  console.assert(
-    !(liquidGroupId && !selectedIngredFields),
-    `Expected selected liquid group "${String(
-      liquidGroupId
-    )}" to have fields in allIngredientGroupFields`
-  )
 
   return showForm ? (
     <LiquidEditForm
@@ -59,7 +53,7 @@ export function LiquidsPage(): JSX.Element {
       canDelete={liquidGroupId != null}
       name={selectedIngredFields?.name ?? ''}
       serialize={selectedIngredFields?.serialize ?? false}
-      displayColor={selectedIngredFields?.displayColor ?? '#B925FF'}
+      displayColor={selectedIngredFields?.displayColor}
       description={selectedIngredFields?.description ?? ''}
       key={formKey}
     />