feat(protocol-designer): change tip field and timeline alert copy to …

…i18n (#2062)

Move the copy for the options in the get new tip step edit form field into i18n. Update the timeline
alerts to pull from i18n and change no tips error copy to reflect field label and copy changes.

Closes #1934

protocol-designer/src/components/StepEditForm/formFields.js

@@ -10,12 +10,14 @@ import {
   type DropdownOption,
   type HoverTooltipHandlers
 } from '@opentrons/components'
+import i18n from '../../localization'
 import {selectors as pipetteSelectors} from '../../pipettes'
 import {selectors as labwareIngredSelectors} from '../../labware-ingred/reducers'
 import {actions} from '../../steplist'
 import {hydrateField} from '../../steplist/fieldLevel'
 import type {StepFieldName} from '../../steplist/fieldLevel'
 import {DISPOSAL_PERCENTAGE} from '../../steplist/formLevel/warnings'
+import type {ChangeTipOptions} from '../../step-generation/types'
 import type {BaseState, ThunkDispatch} from '../../types'
 import type {StepType} from '../../form-types'
 import styles from './StepEditForm.css'
@@ -181,31 +183,21 @@ export const FlowRateField = () => <FormGroup label='FLOW RATE'>Default</FormGro
 // this is a placeholder
 export const TipPositionField = () => <FormGroup label='TIP POSITION'>Bottom, center</FormGroup>
 
-const getChangeTipOptions = () => [
-  {name: 'For each aspirate', value: 'always'},
-  {name: 'Only the first aspirate', value: 'once'},
-  {name: 'Never', value: 'never'}
-]
+const CHANGE_TIP_VALUES: Array<ChangeTipOptions> = ['always', 'once', 'never']
 
 // NOTE: ChangeTipField not validated as of 6/27/18 so no focusHandlers needed
 type ChangeTipFieldProps = {name: StepFieldName, stepType: StepType}
 export const ChangeTipField = (props: ChangeTipFieldProps) => {
   const {name, stepType} = props
-  let options = getChangeTipOptions()
-  // Override change tip option names for certain step types
-  switch (stepType) {
-    case 'consolidate':
-      options[0].name = 'For each dispense'
-      break
-    case 'mix':
-      options[0].name = 'For each well'
-      break
-  }
+  const options = CHANGE_TIP_VALUES.map((value) => ({
+    value,
+    name: i18n.t(`step_edit_form.${stepType}.change_tip_option.${value}`)
+  }))
   return (
     <StepField
       name={name}
       render={({value, updateValue}) => (
-        <FormGroup label='Get new tip'>
+        <FormGroup label={i18n.t('step_edit_form.field.change_tip.label')}>
           <DropdownField
             options={options}
             value={value ? String(value) : null}

protocol-designer/src/components/steplist/TimelineAlerts.js

@@ -4,6 +4,7 @@
 import * as React from 'react'
 import type {Dispatch} from 'redux'
 import {connect} from 'react-redux'
+import i18n from '../../localization'
 import {
   actions as dismissActions,
   selectors as dismissSelectors
@@ -14,9 +15,7 @@ import {AlertItem} from '@opentrons/components'
 import type {BaseState} from '../../types'
 import type {
   CommandCreatorError,
-  CommandCreatorWarning,
-  ErrorType,
-  WarningType
+  CommandCreatorWarning
 } from '../../step-generation'
 
 type AlertContent = {
@@ -41,38 +40,19 @@ type Props = SP & DP
   * These 'overrides' replace the content of some of those errors/warnings
   * in order to make things clearer to the PD user.
   *
-  * When an override is not specified here, the default behaviors is that
-  * the warning/error `message` gets put into the `title` of the Alert
+  * When an override is not specified in /localization/en/alert/ , the default
+  * behavior is that the warning/error `message` gets put into the `title` of the Alert
   */
-const errorOverrides: {[ErrorType]: AlertContent} = {
-  'INSUFFICIENT_TIPS': {
-    title: 'Not enough tips to complete action',
-    body: 'Add another tip rack to an empty slot in Deck Setup'
-  },
-  'NO_TIP_ON_PIPETTE': {
-    title: 'No tip on pipette',
-    body: 'The first time a pipette is used in a protocol the "change tip" setting must be set to always or once.'
-  }
-}
 
-const warningOverrides: {[WarningType]: AlertContent} = {
-  'ASPIRATE_MORE_THAN_WELL_CONTENTS': {
-    title: 'Not enough liquid in well(s)',
-    body: 'You are trying to aspirate more than the current volume of one of your well(s). If you intended to add air to your tip, please use the Air Gap advanced setting.'
-  },
-  'ASPIRATE_FROM_PRISTINE_WELL': {
-    title: 'Source well is empty',
-    body: "The well(s) you're trying to aspirate from are empty. You can add a starting liquid to this labware in Labware & Liquids"
-  }
-}
+const getErrorContent = (error: CommandCreatorError): AlertContent => ({
+  title: i18n.t(`alert.timeline.error.${error.type}.title`, error.message),
+  body: i18n.t(`alert.timeline.error.${error.type}.body`, '')
+})
 
-function getErrorContent (error: CommandCreatorError): AlertContent {
-  return errorOverrides[error.type] || {title: error.message}
-}
-
-function getWarningContent (warning: CommandCreatorWarning): AlertContent {
-  return warningOverrides[warning.type] || {title: warning.message}
-}
+const getWarningContent = (warning: CommandCreatorWarning): AlertContent => ({
+  title: i18n.t(`alert.timeline.warning.${warning.type}.title`, warning.message),
+  body: i18n.t(`alert.timeline.warning.${warning.type}.body`, '')
+})
 
 function Alerts (props: Props) {
   const errors = props.errors.map((error, key) => {

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

@@ -0,0 +1,26 @@
+{
+  "field": {},
+  "form": {},
+  "timeline": {
+    "error": {
+      "INSUFFICIENT_TIPS": {
+        "title": "Not enough tips to complete action",
+        "body": "Add another tip rack to an empty slot in Deck Setup"
+      },
+      "NO_TIP_ON_PIPETTE": {
+        "title": "No tip on pipette",
+        "body": "The setting \"Get new tip\" cannot be \"Never\" the first time a pipette is used in a protocol"
+      }
+    },
+    "warning": {
+      "ASPIRATE_MORE_THAN_WELL_CONTENTS": {
+        "title": "Not enough liquid in well(s)",
+        "body": "You are trying to aspirate more than the current volume of one of your well(s). If you intended to add air to your tip, please use the Air Gap advanced setting."
+      },
+      "ASPIRATE_FROM_PRISTINE_WELL": {
+        "title": "Source well is empty",
+        "body": "The well(s) you're trying to aspirate from are empty. You can add a starting liquid to this labware in Labware & Liquids"
+      }
+    }
+  }
+}

protocol-designer/src/localization/en/index.js

@@ -1,9 +1,13 @@
 // @flow
 
+import alert from './alert.json'
+import step_edit_form from './step_edit_form.json'
 import tooltip from './tooltip.json'
 
 export default {
   translation: {
+    alert,
+    step_edit_form,
     tooltip
   }
 }

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

@@ -0,0 +1,35 @@
+{
+  "consolidate": {
+    "change_tip_option": {
+      "always": "For each dispense",
+      "once": "Only the first aspirate",
+      "never": "Never"
+    }
+  },
+  "distribute": {
+    "change_tip_option": {
+      "always": "For each aspirate",
+      "once": "Only the first aspirate",
+      "never": "Never"
+    }
+  },
+  "mix": {
+    "change_tip_option": {
+      "always": "For each well",
+      "once": "Only the first aspirate",
+      "never": "Never"
+    }
+  },
+  "transfer": {
+    "change_tip_option": {
+      "always": "For each aspirate",
+      "once": "Only the first aspirate",
+      "never": "Never"
+    }
+  },
+  "field": {
+    "change_tip": {
+      "label": "Get new tip"
+    }
+  }
+}