diff --git a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx index 7973023d184..fa8da0e1859 100644 --- a/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/__tests__/ChooseProtocolSlideout.test.tsx @@ -150,6 +150,28 @@ describe('ChooseProtocolSlideout', () => { screen.getByText('Restore default values') }) + it('shows tooltip when disabled Restore default values link is clicked', () => { + const protocolDataWithoutRunTimeParameter = { + ...storedProtocolDataFixture, + } + vi.mocked(getStoredProtocols).mockReturnValue([ + protocolDataWithoutRunTimeParameter, + ]) + + render({ + robot: mockConnectableRobot, + onCloseClick: vi.fn(), + showSlideout: true, + }) + const proceedButton = screen.getByRole('button', { + name: 'Continue to parameters', + }) + fireEvent.click(proceedButton) + const restoreValuesLink = screen.getByText('Restore default values') + fireEvent.click(restoreValuesLink) + screen.getByText('No custom values specified') + }) + // ToDo (kk:04/18/2024) I will update test for RTP /* it('renders error state when there is a run creation error', () => { diff --git a/app/src/organisms/ChooseProtocolSlideout/index.tsx b/app/src/organisms/ChooseProtocolSlideout/index.tsx index 98dc980c113..16976d007aa 100644 --- a/app/src/organisms/ChooseProtocolSlideout/index.tsx +++ b/app/src/organisms/ChooseProtocolSlideout/index.tsx @@ -26,7 +26,7 @@ import { SecondaryButton, StyledText, TYPOGRAPHY, - useHoverTooltip, + useTooltip, } from '@opentrons/components' import { ApiHostProvider } from '@opentrons/react-api-client' @@ -63,6 +63,8 @@ export const CARD_OUTLINE_BORDER_STYLE = css` } ` +const TOOLTIP_DELAY_MS = 2000 + const _getFileBaseName = (filePath: string): string => { return filePath.split('/').reverse()[0] } @@ -78,7 +80,11 @@ export function ChooseProtocolSlideoutComponent( const { t } = useTranslation(['device_details', 'shared']) const history = useHistory() const logger = useLogger(new URL('', import.meta.url).pathname) - const [targetProps, tooltipProps] = useHoverTooltip() + const [targetProps, tooltipProps] = useTooltip() + const [ + showRestoreValuesTooltip, + setShowRestoreValuesTooltip, + ] = React.useState(false) const { robot, showSlideout, onCloseClick } = props const { name } = robot @@ -351,16 +357,35 @@ export function ChooseProtocolSlideoutComponent( css={ isRestoreDefaultsLinkEnabled ? ENABLED_LINK_CSS : DISABLED_LINK_CSS } - onClick={resetRunTimeParameters} + onClick={() => { + if (isRestoreDefaultsLinkEnabled) { + resetRunTimeParameters?.() + } else { + setShowRestoreValuesTooltip(true) + setTimeout( + () => setShowRestoreValuesTooltip(false), + TOOLTIP_DELAY_MS + ) + } + }} + paddingBottom={SPACING.spacing10} {...targetProps} > {t('protocol_details:restore_defaults')} - {!isRestoreDefaultsLinkEnabled && ( - - {t('protocol_details:no_custom_values')} - - )} + + {t('protocol_details:no_custom_values')} + {' '} {runTimeParametersInputs} diff --git a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx index 19500166410..4b0bb9bcdef 100644 --- a/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx +++ b/app/src/organisms/ChooseRobotSlideout/__tests__/ChooseRobotSlideout.test.tsx @@ -310,4 +310,22 @@ describe('ChooseRobotSlideout', () => { }) expect(mockSetSelectedRobot).toBeCalledWith(null) }) + + it('shows tooltip when disabled Restore default values link is clicked', () => { + render({ + onCloseClick: vi.fn(), + isExpanded: true, + isSelectedRobotOnDifferentSoftwareVersion: false, + selectedRobot: null, + setSelectedRobot: mockSetSelectedRobot, + title: 'choose robot slideout title', + robotType: OT2_ROBOT_TYPE, + multiSlideout: { currentPage: 2 }, + runTimeParametersOverrides: mockRunTimeParameters, + }) + + const restoreValuesLink = screen.getByText('Restore default values') + fireEvent.click(restoreValuesLink) + screen.getByText('No custom values specified') + }) }) diff --git a/app/src/organisms/ChooseRobotSlideout/index.tsx b/app/src/organisms/ChooseRobotSlideout/index.tsx index 520b73a3633..055ded35886 100644 --- a/app/src/organisms/ChooseRobotSlideout/index.tsx +++ b/app/src/organisms/ChooseRobotSlideout/index.tsx @@ -24,7 +24,7 @@ import { SPACING, StyledText, TYPOGRAPHY, - useHoverTooltip, + useTooltip, } from '@opentrons/components' import { FLEX_ROBOT_TYPE, OT2_ROBOT_TYPE } from '@opentrons/shared-data' @@ -63,6 +63,8 @@ export const CARD_OUTLINE_BORDER_STYLE = css` } ` +const TOOLTIP_DELAY_MS = 2000 + interface RobotIsBusyAction { type: 'robotIsBusy' robotName: string @@ -145,7 +147,11 @@ export function ChooseRobotSlideout( const dispatch = useDispatch() const isScanning = useSelector((state: State) => getScanning(state)) - const [targetProps, tooltipProps] = useHoverTooltip() + const [targetProps, tooltipProps] = useTooltip() + const [ + showRestoreValuesTooltip, + setShowRestoreValuesTooltip, + ] = React.useState(false) const [isInputFocused, setIsInputFocused] = React.useState(false) const unhealthyReachableRobots = useSelector((state: State) => @@ -512,16 +518,35 @@ export function ChooseRobotSlideout( ? ENABLED_LINK_CSS : DISABLED_LINK_CSS } - onClick={() => resetRunTimeParameters?.()} + onClick={() => { + if (isRestoreDefaultsLinkEnabled) { + resetRunTimeParameters?.() + } else { + setShowRestoreValuesTooltip(true) + setTimeout( + () => setShowRestoreValuesTooltip(false), + TOOLTIP_DELAY_MS + ) + } + }} + paddingBottom={SPACING.spacing10} {...targetProps} > {t('restore_defaults')} - {!isRestoreDefaultsLinkEnabled && ( - - {t('no_custom_values')} - - )} + + {t('no_custom_values')} + {runTimeParameters}