From db43fe94e88c5ea534315507fd870681d1b50967 Mon Sep 17 00:00:00 2001
From: koji <koji.kanao@opentrons.com>
Date: Wed, 1 May 2024 10:33:41 -0400
Subject: [PATCH] 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
---
 app/src/atoms/MenuList/DropdownMenu.tsx              | 12 ++++++++++++
 .../ProtocolRun/ProtocolRunRunTimeParameters.tsx     | 10 ++++++----
 .../__tests__/ProtocolRunRuntimeParameters.test.tsx  |  2 +-
 .../ProtocolDetails/ProtocolLiquidsDetails.tsx       |  2 +-
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx
index ec383bf0ead..5d9d82d7d7f 100644
--- 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
index b7a253fdeca..8298084e5a0 100644
--- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
+++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx
@@ -71,7 +71,7 @@ export function ProtocolRunRuntimeParameters({
     <>
       <Flex
         flexDirection={DIRECTION_COLUMN}
-        padding={SPACING.spacing16}
+        padding={hasRunTimeParameters ? SPACING.spacing16 : undefined}
         gridGap={SPACING.spacing10}
       >
         <Flex
@@ -79,9 +79,11 @@ export function ProtocolRunRuntimeParameters({
           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
index 4be025a491e..e2398fb084c 100644
--- 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
index 5aff2a28ea4..52ddf497bb7 100644
--- 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"