fix(protocol-designer): fix the display when dropdown menu option is …

…only one (#16640) * fix(protocol-designer): fix the display when dropdown menu option is only one
Opentrons · Nov 5, 2024 · 8040b74 · 8040b74
1 parent 49e144f
commit 8040b74
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 41 deletions.
diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx
@@ -2,7 +2,12 @@ import * as React from 'react'
 import styled, { css } from 'styled-components'
 
 import { Flex } from '../../primitives'
-import { ALIGN_CENTER, DIRECTION_COLUMN, TEXT_ALIGN_RIGHT } from '../../styles'
+import {
+  ALIGN_CENTER,
+  DIRECTION_COLUMN,
+  DIRECTION_ROW,
+  TEXT_ALIGN_RIGHT,
+} from '../../styles'
 import { BORDERS, COLORS } from '../../helix-design-system'
 import { Icon } from '../../icons'
 import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
@@ -249,7 +254,11 @@ export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
       >
         <Flex flexDirection={DIRECTION_COLUMN} width="100%">
           {title != null ? (
-            <Flex gridGap={SPACING.spacing8}>
+            <Flex
+              flexDirection={DIRECTION_ROW}
+              gridGap={SPACING.spacing8}
+              alignItems={ALIGN_CENTER}
+            >
               <StyledText
                 desktopStyle="bodyDefaultRegular"
                 htmlFor={props.id}

diff --git a/components/src/molecules/DropdownMenu/index.tsx b/components/src/molecules/DropdownMenu/index.tsx
@@ -204,7 +204,11 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
       gridGap={SPACING.spacing4}
     >
       {title !== null ? (
-        <Flex gridGap={SPACING.spacing8} paddingBottom={SPACING.spacing8}>
+        <Flex
+          gridGap={SPACING.spacing8}
+          paddingBottom={SPACING.spacing8}
+          alignItems={ALIGN_CENTER}
+        >
           <StyledText
             desktopStyle="captionRegular"
             color={disabled ? COLORS.grey35 : COLORS.grey60}

diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
@@ -93,7 +93,7 @@
         }
       },
       "location": {
-        "dropTip": "drop tip location",
+        "dropTip": "Tip drop location",
         "label": "location",
         "pickUp": "pick up tip"
       },
@@ -278,8 +278,8 @@
     "tipRack": "tip rack",
     "wellSelectionLabel": {
       "columns": "columns",
-      "columns_aspirate_wells": "Select source columns",
-      "columns_dispense_wells": "Select destination columns",
+      "columns_aspirate_wells": "Source columns",
+      "columns_dispense_wells": "Destination columns",
       "columns_mix_wells": "Select columns",
       "wells": "wells",
       "wells_aspirate_wells": "Select source wells",

diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -2,6 +2,7 @@
   "add_details": "Add step details",
   "advanced_settings": "Advanced pipetting settings",
   "air_gap_volume": "Air gap volume",
+  "aspirate_labware": "Source labware",
   "aspirate": "Aspirate",
   "aspirated": "Aspirated",
   "batch_edit_steps": "Batch edit steps",
@@ -16,6 +17,7 @@
   "delay_position": "Delay position from bottom",
   "delete_steps": "Delete steps",
   "delete": "Delete step",
+  "dispense_labware": "Destination labware",
   "dispense": "Dispense",
   "dispensed": "Dispensed",
   "disposal_volume": "Disposal volume",
@@ -72,6 +74,7 @@
     "untilTemperature": "<text>Pausing until</text><semiBoldText>{{module}}</semiBoldText><text>reaches</text><tag/>",
     "untilTime": "<text>Pausing for</text><tag/>"
   },
+  "pipette": "Pipette",
   "protocol_steps": "Protocol steps",
   "protocol_timeline": "Protocol timeline",
   "rename": "Rename",
@@ -124,10 +127,12 @@
     }
   },
   "time": "Time",
+  "tiprack": "Tiprack",
   "tip_position": "{{prefix}} tip position",
   "touch_tip_position": "Touch tip position from top",
   "valid_range": "Valid range between {{min}} - {{max}} {{unit}}",
   "view_details": "View details",
+  "volume_per_well": "Volume per well",
   "well_name": "Well {{wellName}}",
   "well_order_title": "{{prefix}} well order",
   "well_position": "Well position (x,y,z): "

diff --git a/protocol-designer/src/assets/localization/en/shared.json b/protocol-designer/src/assets/localization/en/shared.json
@@ -104,6 +104,7 @@
   "ot2": "Opentrons OT-2",
   "overwrite_labware": "Overwrite labware",
   "overwrite": "Click Overwrite to replace the existing labware with the new labware.",
+  "part": "Part {{current}} / {{max}}",
   "pipette": "Pipette",
   "pd_version": "Protocol designer version",
   "primary_order": "Primary order",

diff --git a/...-designer/src/components/StepEditForm/fields/DropTipField/__tests__/DropTipField.test.tsx b/...-designer/src/components/StepEditForm/fields/DropTipField/__tests__/DropTipField.test.tsx
@@ -55,7 +55,7 @@ describe('DropTipField', () => {
   })
   it('renders the label and dropdown field with trash bin selected as default', () => {
     render(props)
-    screen.getByText('drop tip location')
+    screen.getByText('Tip drop location')
     screen.getByRole('combobox', { name: '' })
     screen.getByRole('option', { name: 'Trash Bin' })
     screen.getByRole('option', { name: 'mock tip' })

diff --git a/protocol-designer/src/molecules/DropdownStepFormField/index.tsx b/protocol-designer/src/molecules/DropdownStepFormField/index.tsx
@@ -1,5 +1,13 @@
 import { useTranslation } from 'react-i18next'
-import { DropdownMenu, Flex, SPACING } from '@opentrons/components'
+import {
+  COLORS,
+  DIRECTION_COLUMN,
+  DropdownMenu,
+  Flex,
+  ListItem,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 import type { Options } from '@opentrons/components'
 import type { FieldProps } from '../../pages/Designer/ProtocolSteps/StepForm/types'
 
@@ -30,22 +38,41 @@ export function DropdownStepFormField(
 
   return (
     <Flex padding={addPadding ? SPACING.spacing16 : 0}>
-      <DropdownMenu
-        tooltipText={tooltipContent != null ? t(`${tooltipContent}`) : null}
-        width={width}
-        error={errorToShow}
-        dropdownType="neutral"
-        filterOptions={options}
-        title={title}
-        onBlur={onFieldBlur}
-        onFocus={onFieldFocus}
-        currentOption={
-          availableOptionId ?? { name: 'Choose option', value: '' }
-        }
-        onClick={value => {
-          updateValue(value)
-        }}
-      />
+      {options.length > 1 ? (
+        <DropdownMenu
+          tooltipText={tooltipContent != null ? t(`${tooltipContent}`) : null}
+          width={width}
+          error={errorToShow}
+          dropdownType="neutral"
+          filterOptions={options}
+          title={title}
+          onBlur={onFieldBlur}
+          onFocus={onFieldFocus}
+          currentOption={
+            availableOptionId ?? { name: 'Choose option', value: '' }
+          }
+          onClick={value => {
+            updateValue(value)
+          }}
+        />
+      ) : (
+        <Flex
+          gridGap={SPACING.spacing8}
+          flexDirection={DIRECTION_COLUMN}
+          width="100%"
+        >
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {title}
+          </StyledText>
+          <ListItem type="noActive">
+            <Flex padding={SPACING.spacing12}>
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {options[0].name}
+              </StyledText>
+            </Flex>
+          </ListItem>
+        </Flex>
+      )}
     </Flex>
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx
@@ -17,12 +17,13 @@ export function LabwareField(props: FieldProps): JSX.Element {
       ? [...options, ...disposalOptions]
       : [...options]
 
+  console.log('name', name)
   return (
     <DropdownStepFormField
       {...props}
       name={name}
       options={allOptions}
-      title={t(`select_${name}`)}
+      title={t(`${name}`)}
     />
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PipetteField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PipetteField.tsx
@@ -13,7 +13,7 @@ export const PipetteField = (props: FieldProps): JSX.Element => {
       {...props}
       options={pipetteOptions}
       value={value ? String(value) : null}
-      title={t('select_pipette')}
+      title={t('pipette')}
     />
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/TiprackField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/TiprackField.tsx
@@ -1,6 +1,14 @@
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
+import {
+  COLORS,
+  DIRECTION_COLUMN,
+  Flex,
+  ListItem,
+  SPACING,
+  StyledText,
+} from '@opentrons/components'
 import { getPipetteEntities } from '../../../../../step-forms/selectors'
 import { getTiprackOptions } from '../../../../../ui/labware/selectors'
 import { DropdownStepFormField } from '../../../../../molecules'
@@ -29,12 +37,34 @@ export function TiprackField(props: TiprackFieldProps): JSX.Element {
   }, [defaultTiprackUris, value, updateValue])
   const hasMissingTiprack = defaultTiprackUris.length > tiprackOptions.length
   return (
-    <DropdownStepFormField
-      {...props}
-      options={tiprackOptions}
-      value={String(value) != null ? String(value) : null}
-      title={t('select_tiprack')}
-      tooltipContent={hasMissingTiprack ? 'missing_tiprack' : null}
-    />
+    <>
+      {tiprackOptions.length > 1 ? (
+        <DropdownStepFormField
+          {...props}
+          options={tiprackOptions}
+          value={String(value) != null ? String(value) : null}
+          title={t('tiprack')}
+          tooltipContent={hasMissingTiprack ? 'missing_tiprack' : null}
+        />
+      ) : (
+        <Flex
+          padding={SPACING.spacing16}
+          gridGap={SPACING.spacing8}
+          flexDirection={DIRECTION_COLUMN}
+          width="100%"
+        >
+          <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
+            {t('tiprack')}
+          </StyledText>
+          <ListItem type="noActive">
+            <Flex padding={SPACING.spacing12}>
+              <StyledText desktopStyle="bodyDefaultRegular">
+                {tiprackOptions[0].name}
+              </StyledText>
+            </Flex>
+          </ListItem>
+        </Flex>
+      )}
+    </>
   )
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/VolumeField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/VolumeField.tsx
@@ -8,7 +8,7 @@ export function VolumeField(props: FieldProps): JSX.Element {
 
   return (
     <InputStepFormField
-      title={t('select_volume')}
+      title={t('volume_per_well')}
       units={t('application:units.microliter')}
       {...props}
     />

diff --git a/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/WellSelectionField.tsx b/...l-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/WellSelectionField.tsx
@@ -1,7 +1,9 @@
 import { createPortal } from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
+
 import {
+  ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -13,6 +15,7 @@ import {
   useHoverTooltip,
 } from '@opentrons/components'
 import { COLUMN } from '@opentrons/shared-data'
+
 import {
   actions as stepsActions,
   getSelectedStepId,
@@ -22,6 +25,7 @@ import { selectors as stepFormSelectors } from '../../../../../step-forms'
 import { SelectWellsModal } from '../../../../../organisms'
 import { getMainPagePortalEl } from '../../../../../components/portals/MainPageModalPortal'
 import { getNozzleType } from '../utils'
+
 import type { FieldProps } from '../types'
 
 export type WellSelectionFieldProps = FieldProps & {
@@ -94,8 +98,13 @@ export const WellSelectionField = (
   const [targetProps, tooltipProps] = useHoverTooltip()
   return (
     <>
-      <Flex flexDirection={DIRECTION_COLUMN} padding={SPACING.spacing16}>
-        <Flex gridGap={SPACING.spacing8}>
+      <Flex
+        flexDirection={DIRECTION_COLUMN}
+        padding={SPACING.spacing16}
+        id="hello"
+        gridGap={SPACING.spacing4}
+      >
+        <Flex gridGap={SPACING.spacing8} alignItems={ALIGN_CENTER}>
           <StyledText desktopStyle="captionRegular" color={COLORS.grey60}>
             {i18n.format(label, 'capitalize')}
           </StyledText>

diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx
@@ -10,11 +10,11 @@ import {
   Icon,
   POSITION_RELATIVE,
   PrimaryButton,
-  SPACING,
   SecondaryButton,
+  SPACING,
   StyledText,
-  TYPOGRAPHY,
   Toolbox,
+  TYPOGRAPHY,
 } from '@opentrons/components'
 import { stepIconsByType } from '../../../../form-types'
 import { FormAlerts } from '../../../../organisms'
@@ -153,7 +153,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
             'capitalize'
           ),
           t,
-        }) as string
+        })
       )
     } else {
       setShowFormErrorsAndWarnings(true)
@@ -175,7 +175,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
         subHeader={
           isMultiStepToolbox ? (
             <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
-              {t('shared:step', { current: toolboxStep + 1, max: 2 })}
+              {t('shared:part', { current: toolboxStep + 1, max: 2 })}
             </StyledText>
           ) : null
         }

diff --git a/step-generation/src/commandCreators/atomic/dispense.ts b/step-generation/src/commandCreators/atomic/dispense.ts
@@ -221,7 +221,7 @@ export const dispense: CommandCreator<ExtendedDispenseParams> = (
         },
         flowRate,
         //  pushOut will always be undefined in step-generation for now
-        //  since there is no easy way to allow users to select a volume for it in PD
+        //  since there is no easy way to allow users to  for it in PD
       },
       ...(isAirGap && { meta: { isAirGap } }),
     },