[HOLD for payment 2025-01-28] [$250] Tooltips are missing in the create expense page for the tabs with no labels

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.82-6
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation (hyperlinked to channel name): expense

Action Performed:

1. Import perdiem in the workspace
2. Click create expense from the green +
3. Hover on the tabs which does not have labels

Expected Result:

Tooltip should present

Actual Result:

No tooltip

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence


View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021877745364229885332
• Upwork Job ID: 1877745364229885332
• Last Price Increase: 2025-01-10

Issue Owner

Current Issue Owner: @joekaufmanexpensify

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Krishna2323]

@m-natarajan @shawnborton which tooltip are you talking about? can you please share a screenshot or a video?

[github-actions]

Expensify Your proposal will be dismissed because you did not follow the proposal template.

[Shahidullah-Muffakir]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Tooltips are missing in the create expense page for the tabs with no labels

What is the root cause of that problem?

Here we haven't added the tooltip:

App/src/components/TabSelector/TabSelectorItem.tsx

Lines 51 to 52 in 027c4d6

	return (
	<AnimatedPressableWithFeedback

What changes do you think we should make in order to solve the problem?

Wrap the AnimatedPressableWithFeedback with Tooltip, and show the tooltip only if the !shouldShowLabelWhenInactive && !isActive is true

    return (
        <Tooltip
        shouldRender={!shouldShowLabelWhenInactive && !isActive}
        text={title}
    >
        <AnimatedPressableWithFeedback

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Test Scenarios to Prevent Regression:

1. Tooltip on hover for inactive tabs with hidden labels
   Ensure the tooltip appears when hovering over inactive tabs with with no label i.e., shouldShowLabelWhenInactive={false}.

2. No tooltip on hover for active tabs
   Confirm the tooltip does not appear when the tab is active (isActive={true}).

3. No tooltip when label is visible
   Make sure the tooltip doesn't appear when the label is visible (shouldShowLabelWhenInactive={true}).

What alternative solutions did you explore? (Optional)

Screen.Recording.2025-01-10.at.3.33.00.AM.mov

[shawnborton]

@Krishna2323 looks like @Shahidullah-Muffakir's video is exactly what I had in mind.

[huult]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Tooltips are missing in the create expense page for the tabs with no labels

What is the root cause of that problem?

We didn’t implement EducationalTooltip for TabSelectorItem, which is why the tooltip is not visible.

App/src/components/TabSelector/TabSelectorItem.tsx

Line 52 in 4f8b40c

<AnimatedPressableWithFeedback

What changes do you think we should make in order to solve the problem?

We should implement EducationalTooltip for the distance tab or any other tab item where we want to display it. As my proposal, I suggest starting with the distance tab for easier review. If we decide to update all tabs, I can make a small update later. For example, the initial change will focus on the distance tab to simplify the review process. Once the expected behavior is achieved, I will extend the implementation to other tabs.

Test branch

POC

Screen.Recording.2025-01-10.at.14.34.00.mp4

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is a UI bug, so I believe a unit test is not required.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021877745364229885332