feat(protocol-designer): update modules section to accommodate gripper

closes RLIQ-416, RAUT-504, RAUT-506

protocol-designer/src/components/DeckSetup/index.tsx

@@ -432,7 +432,7 @@ export const DeckSetup = (): JSX.Element => {
   })
 
   return (
-    <React.Fragment>
+    <>
       <div className={styles.deck_row}>
         {drilledDown && <BrowseLabwareModal />}
         <div ref={wrapperRef} className={styles.deck_wrapper}>
@@ -458,7 +458,7 @@ export const DeckSetup = (): JSX.Element => {
           </RobotWorkSpace>
         </div>
       </div>
-    </React.Fragment>
+    </>
   )
 }
 

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

@@ -14,9 +14,9 @@ import {
 } from '@opentrons/components'
 import { InputField } from './InputField'
 import { GoBackLink } from './GoBackLink'
+import { HandleEnter } from './HandleEnter'
 
 import type { WizardTileProps } from './types'
-import { HandleEnter } from './HandleEnter'
 
 export function MetadataTile(props: WizardTileProps): JSX.Element {
   const { i18n, t } = useTranslation()

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

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import styled from 'styled-components'
+import { useTranslation } from 'react-i18next'
 import {
   OutlineButton,
   Flex,
   JUSTIFY_SPACE_BETWEEN,
   ALIGN_CENTER,
+  DIRECTION_COLUMN,
 } from '@opentrons/components'
 import gripperImage from '../../images/flex_gripper.svg'
 import styles from './styles.css'
@@ -16,19 +18,22 @@ interface GripperRowProps {
 
 export function GripperRow(props: GripperRowProps): JSX.Element {
   const { handleGripper, isGripperAdded } = props
+  const { i18n, t } = useTranslation()
 
   return (
     <Flex justifyContent={JUSTIFY_SPACE_BETWEEN}>
-      <Flex flexDirection="column">
-        <h4 className={styles.row_title}>{'Flex Gripper'}</h4>
+      <Flex flexDirection={DIRECTION_COLUMN}>
+        <h4 className={styles.row_title}>Flex Gripper</h4>
         <AdditionalItemImage src={gripperImage} alt="Opentrons Flex Gripper" />
       </Flex>
       <div
         className={styles.modules_button_group}
         style={{ alignSelf: ALIGN_CENTER }}
       >
         <OutlineButton className={styles.module_button} onClick={handleGripper}>
-          {isGripperAdded ? 'Remove' : 'Add'}
+          {isGripperAdded
+            ? i18n.format(t('shared.remove'), 'capitalize')
+            : i18n.format(t('shared.add'), 'capitalize')}
         </OutlineButton>
       </div>
     </Flex>

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

@@ -2,5 +2,7 @@
   "exit": "exit",
   "go_back": "go back",
   "next": "next",
-  "step": "Step {{current}} / {{max}}"
+  "step": "Step {{current}} / {{max}}",
+  "remove": "remove",
+  "add": "add"
 }

robot-server/simulators/test.json

@@ -1,20 +1,18 @@
 {
-  "machine": "OT-3 Standard",
-  "strict_attached_instruments": false,
   "attached_instruments": {
     "right": {
-      "model": "p1000_single_v3.4",
+      "model": "p300_single_v1",
       "id": "321",
-      "max_volume": 1000,
-      "name": "p1000_single_gen3",
+      "max_volume": 300,
+      "name": "p300_single",
       "tip_length": 0,
       "channels": 1
     },
     "left": {
-      "model": "p50_single_v3.4",
+      "model": "p10_single_v1",
       "id": "123",
-      "max_volume": 50,
-      "name": "p50_single_gen3",
+      "max_volume": 10,
+      "name": "p10_single",
       "tip_length": 0,
       "channels": 1
     }