refactor(protocol-designer): Remove last instances of FieldConnector (#…

…7546) closes #7295
Opentrons · Mar 26, 2021 · 1587007 · 1587007
1 parent 53529f3
commit 1587007
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 182 deletions.
diff --git a/protocol-designer/docs/STEP_FORMS_AND_PROTOCOL_TIMELINE.md b/protocol-designer/docs/STEP_FORMS_AND_PROTOCOL_TIMELINE.md
@@ -68,7 +68,7 @@ The rest of this doc will describe the PD-specific side of things: how Step Form
 
 **Masking values**: Masking is a behavior where a field rejects updates when they fail to meet a certain condition -- for example, a field only intended for integers will reject changes to add a decimal point. Maskers are used in the presentational layer (specifically, in the `FieldConnector` component) where they should be applied to all updates.
 
-**Field-level errors**: `steplist/fieldLevel` allows you to specify a `getErrors` function for each field. A field can have multiple "error checker" functions that can be composed together; the final result is an array of strings where each represents an error in the field. (NOTE: if there are multiple field-level errors, `FieldConnector` will just join them with `', '`.)
+**Field-level errors**: `steplist/fieldLevel` allows you to specify a `getErrors` function for each field. A field can have multiple "error checker" functions that can be composed together; the final result is an array of strings where each represents an error in the field. ~~(NOTE: if there are multiple field-level errors, `FieldConnector` will just join them with `', '`.)~~
 
 **Form-level errors & warnings**: When an error is related to the value of more than one field, it should be specified in `steplist/formLevel` under `getErrors` for that form's `stepType`. Also, there's no such thing as field-level warnings in PD; if need a warning in a form, go to `formLevel` and specify a `getWarnings` function. Form-level errors have a `dependentFields` array associated with them, which is used to ensure that all fields have been touched (are not pristine) before showing the error.
 

diff --git a/protocol-designer/src/components/StepEditForm/fields/FieldConnector.js b/protocol-designer/src/components/StepEditForm/fields/FieldConnector.js
diff --git a/protocol-designer/src/components/StepEditForm/fields/ToggleRowField.js b/protocol-designer/src/components/StepEditForm/fields/ToggleRowField.js
@@ -5,28 +5,34 @@ import cx from 'classnames'
 import { ToggleField } from '@opentrons/components'
 
 import styles from '../StepEditForm.css'
-import { FieldConnector } from './FieldConnector'
-import type { StepFieldName } from '../../../steplist/fieldLevel'
+
+import type { FieldProps } from '../types'
 
 type ToggleRowProps = {|
+  ...FieldProps,
   offLabel?: string,
   onLabel?: string,
-  name: StepFieldName,
   className?: string,
-  disabled?: boolean,
 |}
-export const ToggleRowField = (props: ToggleRowProps): React.Node => (
-  <FieldConnector
-    name={props.name}
-    render={({ value, updateValue, disabled }) => (
-      <ToggleField
-        offLabel={props.offLabel}
-        onLabel={props.onLabel}
-        disabled={disabled || props.disabled}
-        className={cx(styles.toggle_field, props.className)}
-        value={!!value}
-        onChange={(e: SyntheticInputEvent<*>) => updateValue(!value)}
-      />
-    )}
-  />
-)
+export const ToggleRowField = (props: ToggleRowProps): React.Node => {
+  const {
+    updateValue,
+    value,
+    name,
+    offLabel,
+    onLabel,
+    disabled,
+    className,
+  } = props
+  return (
+    <ToggleField
+      name={name}
+      offLabel={offLabel}
+      onLabel={onLabel}
+      className={cx(styles.toggle_field, className)}
+      value={Boolean(value)}
+      onChange={(e: SyntheticInputEvent<*>) => updateValue(!value)}
+      disabled={disabled}
+    />
+  )
+}
diff --git a/protocol-designer/src/components/StepEditForm/forms/ThermocyclerForm/StateFields.js b/protocol-designer/src/components/StepEditForm/forms/ThermocyclerForm/StateFields.js
@@ -36,7 +36,7 @@ export const StateFields = (props: Props): React.Node => {
       >
         <div className={styles.toggle_row}>
           <ToggleRowField
-            name={blockActiveName}
+            {...propsForFields[blockActiveName]}
             offLabel={i18n.t(
               'form.step_edit_form.field.thermocyclerState.block.toggleOff'
             )}
@@ -63,7 +63,7 @@ export const StateFields = (props: Props): React.Node => {
       >
         <div className={styles.toggle_row}>
           <ToggleRowField
-            name={lidActiveName}
+            {...propsForFields[lidActiveName]}
             offLabel={i18n.t(
               'form.step_edit_form.field.thermocyclerState.lid.toggleOff'
             )}
@@ -91,7 +91,7 @@ export const StateFields = (props: Props): React.Node => {
         className={styles.toggle_form_group}
       >
         <ToggleRowField
-          name={lidOpenName}
+          {...propsForFields[lidOpenName]}
           offLabel={i18n.t(
             'form.step_edit_form.field.thermocyclerState.lidPosition.toggleOff'
           )}

diff --git a/protocol-designer/src/components/StepEditForm/forms/__tests__/MixForm.test.js b/protocol-designer/src/components/StepEditForm/forms/__tests__/MixForm.test.js
@@ -31,10 +31,6 @@ jest.mock('../../fields/', () => {
   }
 })
 
-jest.mock('../../fields/FieldConnector', () => ({
-  FieldConnector: () => <div></div>,
-}))
-
 const mockStore = {
   dispatch: jest.fn(),
   subscribe: jest.fn(),

diff --git a/protocol-designer/src/components/StepEditForm/utils.js b/protocol-designer/src/components/StepEditForm/utils.js
@@ -1,5 +1,4 @@
 // @flow
-import * as React from 'react'
 import difference from 'lodash/difference'
 import isEqual from 'lodash/isEqual'
 import without from 'lodash/without'
@@ -10,7 +9,6 @@ import {
   DEST_WELL_BLOWOUT_DESTINATION,
 } from '../../step-generation/utils'
 import { getDefaultsForStepType } from '../../steplist/formLevel/getDefaultsForStepType.js'
-import styles from './StepEditForm.css'
 import type { Options } from '@opentrons/components'
 import type { ProfileFormError } from '../../steplist/formLevel/profileErrors'
 import type { FormWarning } from '../../steplist/formLevel/warnings'
@@ -170,48 +168,6 @@ export const getVisibleProfileFormLevelErrors = (args: {|
   })
 }
 
-// TODO(IL, 2021-02-25): DEPRECATED. this is only used by FieldConnector. Remove in #7298
-export function getTooltipForField(
-  stepType: ?string,
-  name: string,
-  disabled: boolean
-): ?React.Node {
-  if (!stepType) {
-    console.error(
-      `expected stepType for form, cannot getTooltipText for ${name}`
-    )
-    return null
-  }
-
-  const prefixes = ['aspirate_', 'dispense_']
-  const nameWithoutPrefix = prefixes.some(prefix => name.startsWith(prefix))
-    ? name.split('_').slice(1).join('_')
-    : name
-
-  // NOTE: this is a temporary solution until we want to be able to choose from
-  // multiple tooltips for the same field depending on form state.
-  // As-is, this will only let us show two tooltips for any given field per step type:
-  // non-disabled tooltip copy, and disabled tooltip copy.
-  const disabledKeys = disabled
-    ? [
-        `tooltip.step_fields.${stepType}.disabled.${name}`,
-        `tooltip.step_fields.${stepType}.disabled.$generic`,
-      ]
-    : []
-
-  // specificity cascade for names.
-  // first level: "disabled" wins out if disabled arg is true
-  // second level: prefix. "aspirate_foo" wins over "foo"
-  const text: string = i18n.t([
-    ...disabledKeys,
-    `tooltip.step_fields.defaults.${name}`,
-    `tooltip.step_fields.defaults.${nameWithoutPrefix}`,
-    '',
-  ])
-
-  return text ? <div className={styles.tooltip}>{text}</div> : null
-}
-
 export const getFieldDefaultTooltip = (name: string): string =>
   i18n.t([`tooltip.step_fields.defaults.${name}`, ''])