feat(app): handle empty rtp file

app/src/assets/localization/en/protocol_details.json

@@ -1,5 +1,6 @@
 {
  "author": "author",
+ "add_required_csv_file": "Add the required CSV file to continue.",
  "both_mounts": "Both Mounts",
  "choices": "{{count}} choices",
  "choose_robot_to_run": "Choose Robot to Run\n{{protocol_name}}",

app/src/organisms/ChooseProtocolSlideout/index.tsx

@@ -27,6 +27,7 @@ import {
  StyledText,
  TYPOGRAPHY,
  useTooltip,
+ useHoverTooltip,
 } from '@opentrons/components'
 import { ApiHostProvider } from '@opentrons/react-api-client'
 import { sortRuntimeParameters } from '@opentrons/shared-data'
@@ -85,6 +86,7 @@ export function ChooseProtocolSlideoutComponent(
  const history = useHistory()
  const logger = useLogger(new URL('', import.meta.url).pathname)
  const [targetProps, tooltipProps] = useTooltip()
+ const [targetPropsHover, tooltipPropsHover] = useHoverTooltip()
  const [
  showRestoreValuesTooltip,
  setShowRestoreValuesTooltip,
@@ -103,6 +105,11 @@ export function ChooseProtocolSlideoutComponent(
  ] = React.useState<RunTimeParameter[]>([])
  const [currentPage, setCurrentPage] = React.useState<number>(1)
  const [hasParamError, setHasParamError] = React.useState<boolean>(false)
+ const [hasMissingFileParam, setHasMissingFileParam] = React.useState<boolean>(
+ runTimeParametersOverrides?.some(
+ parameter => parameter.type === 'csv_file'
+ ) ?? false
+ )
  const [isInputFocused, setIsInputFocused] = React.useState<boolean>(false)
  const enableCsvFile = useFeatureFlag('enableCsvFile')
 
@@ -113,6 +120,12 @@ export function ChooseProtocolSlideoutComponent(
  }, [selectedProtocol])
  React.useEffect(() => {
  setHasParamError(errors.length > 0)
+ setHasMissingFileParam(
+ runTimeParametersOverrides.some(
+ parameter =>
+ parameter.type === 'csv_file' && parameter.file?.file == null
+ )
+ )
  }, [runTimeParametersOverrides])
 
  const runTimeParametersFromAnalysis =
@@ -194,7 +207,7 @@ export function ChooseProtocolSlideoutComponent(
  const isRestoreDefaultsLinkEnabled =
  runTimeParametersOverrides?.some(parameter =>
  parameter.type === 'csv_file'
- ? true
+ ? parameter.file != null
  : parameter.value !== parameter.default
  ) ?? false
 
@@ -369,7 +382,7 @@ export function ChooseProtocolSlideoutComponent(
  const error =
  runtimeParam.file?.file?.type === 'text/csv'
  ? null
- : t('protocol_details:file_must_be_csv')
+ : t('protocol_details:csv_file_type_required')
  if (error != null) {
  errors.push(error)
  }
@@ -541,13 +554,19 @@ export function ChooseProtocolSlideoutComponent(
  width="49%"
  onClick={handleProceed}
  disabled={hasParamError}
+ {...targetPropsHover}
  >
  {isCreatingRun ? (
  <Icon name="ot-spinner" spin size="1rem" />
  ) : (
  t('shared:confirm_values')
  )}
  </PrimaryButton>
+ {hasMissingFileParam ? (
+ <Tooltip tooltipProps={tooltipPropsHover}>
+ {t('protocol_details:add_required_csv_file')}
+ </Tooltip>
+ ) : null}
  </Flex>
  )
 

app/src/organisms/ChooseRobotSlideout/index.tsx

@@ -123,6 +123,7 @@ interface ChooseRobotSlideoutProps
  multiSlideout?: { currentPage: number } | null
  setHasParamError?: (isError: boolean) => void
  resetRunTimeParameters?: () => void
+ setHasMissingFileParam?: (isMissing: boolean) => void
 }
 
 export function ChooseRobotSlideout(
@@ -150,6 +151,7 @@ export function ChooseRobotSlideout(
  setRunTimeParametersOverrides,
  setHasParamError,
  resetRunTimeParameters,
+ setHasMissingFileParam,
  } = props
  const enableCsvFile = useFeatureFlag('enableCsvFile')
 
@@ -520,6 +522,9 @@ export function ChooseRobotSlideout(
  </Flex>
  )
  } else if (runtimeParam.type === 'csv_file') {
+ if (runtimeParam.file?.file != null) {
+ setHasMissingFileParam?.(false)
+ }
  const error =
  runtimeParam.file?.file?.type === 'text/csv'
  ? null

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

@@ -27,7 +27,10 @@ import {
  mockUnreachableRobot,
 } from '../../../redux/discovery/__fixtures__'
 import { getNetworkInterfaces } from '../../../redux/networking'
-import { storedProtocolData as storedProtocolDataFixture } from '../../../redux/protocol-storage/__fixtures__'
+import {
+ storedProtocolData as storedProtocolDataFixture,
+ storedProtocolDataWithCsvRunTimeParameter,
+} from '../../../redux/protocol-storage/__fixtures__'
 import { useCreateRunFromProtocol } from '../useCreateRunFromProtocol'
 import { useOffsetCandidatesForAnalysis } from '../../ApplyHistoricOffsets/hooks/useOffsetCandidatesForAnalysis'
 import { ChooseRobotToRunProtocolSlideout } from '../'
@@ -125,6 +128,12 @@ describe('ChooseRobotToRunProtocolSlideout', () => {
  expect.any(String)
  )
  .thenReturn([])
+ when(vi.mocked(useOffsetCandidatesForAnalysis))
+ .calledWith(
+ storedProtocolDataWithCsvRunTimeParameter.mostRecentAnalysis,
+ expect.any(String)
+ )
+ .thenReturn([])
  when(vi.mocked(getNetworkInterfaces))
  .calledWith({} as State, expect.any(String))
  .thenReturn({ wifi: null, ethernet: null })
@@ -417,4 +426,23 @@ describe('ChooseRobotToRunProtocolSlideout', () => {
  'Labware offset data references previous protocol run labware locations to save you time. If all the labware in this protocol have been checked in previous runs, that data will be applied to this run.'
  )
  })
+
+ it('Disables confirm values button if file parameter missing', () => {
+ vi.mocked(useOffsetCandidatesForAnalysis).mockReturnValue([])
+ render({
+ storedProtocolData: storedProtocolDataWithCsvRunTimeParameter,
+ onCloseClick: vi.fn(),
+ showSlideout: true,
+ })
+ const proceedButton = screen.getByRole('button', {
+ name: 'Continue to parameters',
+ })
+ fireEvent.click(proceedButton)
+ const confirm = screen.getByRole('button', { name: 'Confirm values' })
+ fireEvent.mouseOver(confirm)
+ setTimeout(
+ () => screen.getByText('Add the required CSV file to continue.'),
+ 200 // for tooltip to show up
+ )
+ })
 })

app/src/organisms/ChooseRobotToRunProtocolSlideout/index.tsx

@@ -12,8 +12,10 @@ import {
  DIRECTION_ROW,
  SecondaryButton,
  SPACING,
+ useHoverTooltip,
 } from '@opentrons/components'
 
+import { Tooltip } from '../../atoms/Tooltip'
 import { getRobotUpdateDisplayInfo } from '../../redux/robot-update'
 import { OPENTRONS_USB } from '../../redux/discovery'
 import { appShellRequestor } from '../../redux/shell/remote'
@@ -67,6 +69,11 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
  setRunTimeParametersOverrides,
  ] = React.useState<RunTimeParameter[]>(runTimeParameters)
  const [hasParamError, setHasParamError] = React.useState<boolean>(false)
+ const [hasMissingFileParam, setHasMissingFileParam] = React.useState<boolean>(
+ runTimeParameters?.some(parameter => parameter.type === 'csv_file') ?? false
+ )
+
+ const [targetProps, tooltipProps] = useHoverTooltip()
 
  const offsetCandidates = useOffsetCandidatesForAnalysis(
  mostRecentAnalysis,
@@ -193,6 +200,64 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
  />
  )
 
+ const footer = (
+ <Flex flexDirection={DIRECTION_COLUMN}>
+ {hasRunTimeParameters ? (
+ currentPage === 1 ? (
+ <>
+ {offsetsComponent}
+ <PrimaryButton
+ onClick={() => {
+ setCurrentPage(2)
+ }}
+ width="100%"
+ disabled={
+ isCreatingRun ||
+ selectedRobot == null ||
+ isSelectedRobotOnDifferentSoftwareVersion
+ }
+ >
+ {t('shared:continue_to_param')}
+ </PrimaryButton>
+ </>
+ ) : (
+ <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_ROW}>
+ <SecondaryButton
+ onClick={() => {
+ setCurrentPage(1)
+ }}
+ width="50%"
+ >
+ {t('shared:change_robot')}
+ </SecondaryButton>
+ <PrimaryButton
+ width="50%"
+ onClick={handleProceed}
+ disabled={hasParamError || hasMissingFileParam}
+ {...targetProps}
+ >
+ {isCreatingRun ? (
+ <Icon name="ot-spinner" spin size="1rem" />
+ ) : (
+ t('shared:confirm_values')
+ )}
+ </PrimaryButton>
+ {hasMissingFileParam ? (
+ <Tooltip tooltipProps={tooltipProps}>
+ {t('add_required_csv_file')}
+ </Tooltip>
+ ) : null}
+ </Flex>
+ )
+ ) : (
+ <>
+ {offsetsComponent}
+ {singlePageButton}
+ </>
+ )}
+ </Flex>
+ )
+
  const resetRunTimeParameters = (): void => {
  const clone = runTimeParametersOverrides.map(parameter =>
  parameter.type === 'csv_file'
@@ -226,57 +291,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
  }
  runTimeParametersOverrides={runTimeParametersOverrides}
  setRunTimeParametersOverrides={setRunTimeParametersOverrides}
- footer={
- <Flex flexDirection={DIRECTION_COLUMN}>
- {hasRunTimeParameters ? (
- currentPage === 1 ? (
- <>
- {offsetsComponent}
- <PrimaryButton
- onClick={() => {
- setCurrentPage(2)
- }}
- width="100%"
- disabled={
- isCreatingRun ||
- selectedRobot == null ||
- isSelectedRobotOnDifferentSoftwareVersion
- }
- >
- {t('shared:continue_to_param')}
- </PrimaryButton>
- </>
- ) : (
- <Flex gridGap={SPACING.spacing8} flexDirection={DIRECTION_ROW}>
- <SecondaryButton
- onClick={() => {
- setCurrentPage(1)
- }}
- width="50%"
- >
- {t('shared:change_robot')}
- </SecondaryButton>
- <PrimaryButton
- width="50%"
- onClick={handleProceed}
- disabled={hasParamError}
- >
- {isCreatingRun ? (
- <Icon name="ot-spinner" spin size="1rem" />
- ) : (
- t('shared:confirm_values')
- )}
- </PrimaryButton>
- </Flex>
- )
- ) : (
- <>
- {offsetsComponent}
- {singlePageButton}
- </>
- )}
- </Flex>
- }
+ footer={footer}
  selectedRobot={selectedRobot}
  setSelectedRobot={setSelectedRobot}
  robotType={robotType}
@@ -287,6 +302,7 @@ export function ChooseRobotToRunProtocolSlideoutComponent(
  showIdleOnly
  setHasParamError={setHasParamError}
  resetRunTimeParameters={resetRunTimeParameters}
+ setHasMissingFileParam={setHasMissingFileParam}
  />
  )
 }

app/src/redux/protocol-storage/__fixtures__/index.ts

@@ -11,6 +11,26 @@ export const storedProtocolData: StoredProtocolData = {
  modified: 123456789,
 }
 
+export const storedProtocolDataWithCsvRunTimeParameter: StoredProtocolData = {
+ protocolKey: 'protocolKeyStub',
+ mostRecentAnalysis: ({
+ ...simpleAnalysisFileFixture,
+ runTimeParameters: [
+ ...simpleAnalysisFileFixture.runTimeParameters,
+ {
+ displayName: 'mock csv rtp',
+ variable_name: 'my_csv_param',
+ description: '',
+ type: 'csv_file',
+ file: null,
+ },
+ ],
+ } as any) as ProtocolAnalysisOutput,
+ srcFileNames: ['fakeSrcFileName'],
+ srcFiles: ['fakeSrcFile' as any],
+ modified: 123456789,
+}
+
 export const storedProtocolDataWithoutRunTimeParameters: StoredProtocolData = {
  protocolKey: 'protocolKeyStub',
  mostRecentAnalysis: ({