fix(app): fix remove Parameters header if a protocl is non-RTP (#15036)

* fix(app): fix remove Parameters header if a protocl is non-RTP
Opentrons · May 1, 2024 · ccce785 · ccce785
1 parent b73b082
commit ccce785
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
@@ -28,14 +28,24 @@ export interface DropdownOption {
 export type DropdownBorder = 'rounded' | 'neutral'
 
 export interface DropdownMenuProps {
+  /** dropdown options */
   filterOptions: DropdownOption[]
+  /** click handler */
   onClick: (value: string) => void
+  /** current selected option */
   currentOption: DropdownOption
+  /** dropdown */
   width?: string
+  /** dropdown style type  */
   dropdownType?: DropdownBorder
+  /** dropdown title */
   title?: string
+  /** dropdown item caption */
   caption?: string | null
+  /** text for tooltip */
   tooltipText?: string
+  /** html tabindex property */
+  tabIndex?: number
 }
 
 // TODO: (smb: 4/15/22) refactor this to use html select for accessibility
@@ -50,6 +60,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
     title,
     caption,
     tooltipText,
+    tabIndex = 0,
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
   const [showDropdownMenu, setShowDropdownMenu] = React.useState<boolean>(false)
@@ -130,6 +141,7 @@ export function DropdownMenu(props: DropdownMenuProps): JSX.Element {
             toggleSetShowDropdownMenu()
           }}
           css={DROPDOWN_STYLE}
+          tabIndex={tabIndex}
         >
           <StyledText
             css={css`

diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -71,17 +71,19 @@ export function ProtocolRunRuntimeParameters({
     <>
       <Flex
         flexDirection={DIRECTION_COLUMN}
-        padding={SPACING.spacing16}
+        padding={hasRunTimeParameters ? SPACING.spacing16 : undefined}
         gridGap={SPACING.spacing10}
       >
         <Flex
           flexDirection={DIRECTION_ROW}
           gridGap={SPACING.spacing8}
           alignItems={ALIGN_CENTER}
         >
-          <StyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
-            {t('parameters')}
-          </StyledText>
+          {hasRunTimeParameters ? (
+            <StyledText as="h3" fontWeight={TYPOGRAPHY.fontWeightSemiBold}>
+              {t('parameters')}
+            </StyledText>
+          ) : null}
           {hasRunTimeParameters ? (
             <StyledText as="label" color={COLORS.grey60}>
               {hasCustomRunTimeParameterValues

diff --git a/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx b/app/src/organisms/Devices/ProtocolRun/__tests__/ProtocolRunRuntimeParameters.test.tsx
@@ -169,7 +169,7 @@ describe('ProtocolRunRuntimeParameters', () => {
         runTimeParameters: [] as RunTimeParameter[],
       } as CompletedProtocolAnalysis)
     render(props)
-    screen.getByText('Parameters')
+    expect(screen.queryByText('Parameters')).not.toBeInTheDocument()
     expect(screen.queryByText('Default values')).not.toBeInTheDocument()
     screen.getByText('mock InfoScreen')
   })

diff --git a/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLiquidsDetails.tsx
@@ -76,7 +76,7 @@ export const ProtocolLiquidsDetails = (
           borderRadius={BORDERS.borderRadius8}
         >
           <Icon
-            color={COLORS.grey50}
+            color={COLORS.grey60}
             size="1.25rem"
             name="ot-alert"
             aria-label="ProtocolLIquidsDetails_noLiquidsIcon"