fix(app): fix tooltip behavior for disabled Restore default value on …

…RTP slideout (#15071)
Opentrons · May 3, 2024 · dfd0f31 · dfd0f31
1 parent d6472ae
commit dfd0f31
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 16 deletions.
diff --git 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
@@ -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<boolean>(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')}
         </LinkComponent>
-        {!isRestoreDefaultsLinkEnabled && (
-          <Tooltip tooltipProps={tooltipProps}>
-            {t('protocol_details:no_custom_values')}
-          </Tooltip>
-        )}
+        <Tooltip
+          tooltipProps={{
+            ...tooltipProps,
+            visible: showRestoreValuesTooltip,
+          }}
+          css={css`
+            &:hover {
+              cursor: auto;
+            }
+          `}
+        >
+          {t('protocol_details:no_custom_values')}
+        </Tooltip>{' '}
       </Flex>
       <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
         {runTimeParametersInputs}

diff --git 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
@@ -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<Dispatch>()
   const isScanning = useSelector((state: State) => getScanning(state))
-  const [targetProps, tooltipProps] = useHoverTooltip()
+  const [targetProps, tooltipProps] = useTooltip()
+  const [
+    showRestoreValuesTooltip,
+    setShowRestoreValuesTooltip,
+  ] = React.useState<boolean>(false)
   const [isInputFocused, setIsInputFocused] = React.useState<boolean>(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')}
           </Link>
-          {!isRestoreDefaultsLinkEnabled && (
-            <Tooltip tooltipProps={tooltipProps}>
-              {t('no_custom_values')}
-            </Tooltip>
-          )}
+          <Tooltip
+            tooltipProps={{
+              ...tooltipProps,
+              visible: showRestoreValuesTooltip,
+            }}
+            css={css`
+              &:hover {
+                cursor: auto;
+              }
+            `}
+          >
+            {t('no_custom_values')}
+          </Tooltip>
         </Flex>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
           {runTimeParameters}