fix(app): fix choose csv file button label

app/src/organisms/ProtocolSetupParameters/__tests__/ProtocolSetupParameters.test.tsx

@@ -12,8 +12,14 @@ import { renderWithProviders } from '../../../__testing-utils__'
 import { ProtocolSetupParameters } from '..'
 import { ChooseEnum } from '../ChooseEnum'
 import { mockRunTimeParameterData } from '../../../pages/ProtocolDetails/fixtures'
+import { useFeatureFlag } from '../../../redux/config'
+
 import type * as ReactRouterDom from 'react-router-dom'
 import type { HostConfig } from '@opentrons/api-client'
+import type {
+  CompletedProtocolAnalysis,
+  RunTimeParameter,
+} from '@opentrons/shared-data'
 
 const mockGoBack = vi.fn()
 
@@ -27,16 +33,24 @@ vi.mock('react-router-dom', async importOriginal => {
     useHistory: () => ({ goBack: mockGoBack } as any),
   }
 })
+vi.mock('../../../redux/config')
+
 const MOCK_HOST_CONFIG: HostConfig = { hostname: 'MOCK_HOST' }
 const mockCreateProtocolAnalysis = vi.fn()
 const mockCreateRun = vi.fn()
+const mockMostRecentAnalysis = ({
+  commands: [],
+  labware: [],
+} as unknown) as CompletedProtocolAnalysis
+
 const render = (
   props: React.ComponentProps<typeof ProtocolSetupParameters>
 ) => {
   return renderWithProviders(<ProtocolSetupParameters {...props} />, {
     i18nInstance: i18n,
   })
 }
+
 describe('ProtocolSetupParameters', () => {
   let props: React.ComponentProps<typeof ProtocolSetupParameters>
 
@@ -45,6 +59,7 @@ describe('ProtocolSetupParameters', () => {
       protocolId: 'mockId',
       labwareOffsets: [],
       runTimeParameters: mockRunTimeParameterData,
+      mostRecentAnalysis: mockMostRecentAnalysis,
     }
     vi.mocked(ChooseEnum).mockReturnValue(<div>mock ChooseEnum</div>)
     vi.mocked(useHost).mockReturnValue(MOCK_HOST_CONFIG)
@@ -54,6 +69,9 @@ describe('ProtocolSetupParameters', () => {
     when(vi.mocked(useCreateRunMutation))
       .calledWith(expect.anything())
       .thenReturn({ createRun: mockCreateRun } as any)
+    when(vi.mocked(useFeatureFlag))
+      .calledWith('enableCsvFile')
+      .thenReturn(false)
   })
 
   it('renders the parameters labels and mock data', () => {
@@ -109,4 +127,38 @@ describe('ProtocolSetupParameters', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Go back' }))
     expect(title).not.toBeInTheDocument()
   })
+
+  it('render csv file when a protocol requires a csv file', () => {
+    when(vi.mocked(useFeatureFlag)).calledWith('enableCsvFile').thenReturn(true)
+    const mockMostRecentAnalysisForCsv = ({
+      commands: [],
+      labware: [],
+      result: 'parameter-value-required',
+    } as unknown) as CompletedProtocolAnalysis
+    const mockCSVData = {
+      file: { id: 'test', file: { name: 'mock.csv' } as File },
+      displayName: 'My CSV File',
+      variableName: 'CSVFILE',
+      description: 'CSV File for a protocol',
+      type: 'csv_file' as const,
+    } as RunTimeParameter
+    const mockRunTimeParameterDataForCsv = [
+      ...mockRunTimeParameterData,
+      mockCSVData,
+    ]
+
+    render({
+      ...props,
+      runTimeParameters: mockRunTimeParameterDataForCsv,
+      mostRecentAnalysis: mockMostRecentAnalysisForCsv,
+    })
+    screen.getByText('CSV File')
+    screen.getByText('Required')
+    const button = screen.getByRole('button', { name: 'Confirm values' })
+    expect(button).toBeDisabled()
+  })
+
+  it.todo(
+    'render csv file name when a protocol analysis result is not parameter-value-required'
+  )
 })

app/src/organisms/ProtocolSetupParameters/index.tsx

@@ -24,8 +24,10 @@ import { ChildNavigation } from '../ChildNavigation'
 import { ResetValuesModal } from './ResetValuesModal'
 import { ChooseEnum } from './ChooseEnum'
 import { ChooseNumber } from './ChooseNumber'
+import { useFeatureFlag } from '../../redux/config'
 
 import type {
+  CompletedProtocolAnalysis,
   ChoiceParameter,
   NumberParameter,
   RunTimeParameter,
@@ -37,14 +39,17 @@ interface ProtocolSetupParametersProps {
   protocolId: string
   runTimeParameters: RunTimeParameter[]
   labwareOffsets?: LabwareOffsetCreateData[]
+  mostRecentAnalysis?: CompletedProtocolAnalysis | null
 }
 
 export function ProtocolSetupParameters({
   protocolId,
   labwareOffsets,
   runTimeParameters,
+  mostRecentAnalysis,
 }: ProtocolSetupParametersProps): JSX.Element {
   const { t } = useTranslation('protocol_setup')
+  const enableCsvFile = useFeatureFlag('enableCsvFile')
   const history = useHistory()
   const host = useHost()
   const queryClient = useQueryClient()
@@ -157,6 +162,10 @@ export function ProtocolSetupParameters({
         }}
         onClickButton={handleConfirmValues}
         buttonText={t('confirm_values')}
+        buttonIsDisabled={
+          enableCsvFile &&
+          mostRecentAnalysis?.result === 'parameter-value-required'
+        }
         iconName={isLoading || startSetup ? 'ot-spinner' : undefined}
         iconPlacement="startIcon"
         secondaryButtonProps={{
@@ -178,21 +187,44 @@ export function ProtocolSetupParameters({
       >
         {sortRuntimeParameters(runTimeParametersOverrides).map(
           (parameter, index) => {
+            const detailLabelForCsv =
+              mostRecentAnalysis?.result === 'parameter-value-required'
+                ? t('required')
+                : parameter.displayName
+
+            let setupStatus: 'ready' | 'not ready' | 'general' | 'inform' =
+              'inform'
+            if (
+              enableCsvFile &&
+              parameter.type === 'csv_file' &&
+              mostRecentAnalysis?.result === 'parameter-value-required'
+            ) {
+              setupStatus = 'not ready'
+            }
+            if (
+              enableCsvFile &&
+              parameter.type === 'csv_file' &&
+              mostRecentAnalysis?.result === 'ok'
+            ) {
+              setupStatus = 'ready'
+            }
             return (
               <React.Fragment key={`${parameter.displayName}_${index}`}>
                 <ProtocolSetupStep
                   hasRightIcon={!(parameter.type === 'bool')}
                   hasLeftIcon={false}
-                  status={
-                    parameter.type === 'csv_file' ? 'not ready' : 'inform'
+                  status={setupStatus}
+                  title={
+                    parameter.type === 'csv_file'
+                      ? t('csv_file')
+                      : parameter.displayName
                   }
-                  title={parameter.displayName}
                   onClickSetupStep={() => {
                     handleSetParameter(parameter)
                   }}
                   detail={
-                    parameter.type === 'csv_file'
-                      ? t('required')
+                    enableCsvFile && parameter.type === 'csv_file'
+                      ? detailLabelForCsv
                       : formatRunTimeParameterValue(parameter, t)
                   }
                   description={

app/src/pages/ProtocolDetails/index.tsx

@@ -459,6 +459,7 @@ export function ProtocolDetails(): JSX.Element | null {
       protocolId={protocolId}
       labwareOffsets={labwareOffsets}
       runTimeParameters={runTimeParameters}
+      mostRecentAnalysis={mostRecentAnalysis}
     />
   ) : (
     <>