Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-04-03] [$1000] App displays 'reacted with emoji' tooltip even on emojis in message right click menu #16050

Closed
1 of 6 tasks
kavimuru opened this issue Mar 16, 2023 · 26 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor

Comments

@kavimuru
Copy link

kavimuru commented Mar 16, 2023

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


Action Performed:

  1. Open the app in mac safari, mac chrome, windows chrome
  2. Open any report
  3. Right click on any message
  4. Hover on 4 emojis available for reaction

Expected Result:

App should only display name of that emoji on hover of emojis in message right click menu

Actual Result:

App displays 'reacted with emoji' tooltip even on emojis in message right click menu (App should only display that tooltip on reacted emojis below the message)

Workaround:

unknown

Platforms:

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

  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop

Version Number: 1.2.86-1
Reproducible in staging?: y
Reproducible in production?: y
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
Notes/Photos/Videos:

reacted.with.emoji.tooltip.issue.mp4
Recording.1718.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1678951003713649

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~010dc0bb4e0b87c1dc
  • Upwork Job ID: 1636451067459960832
  • Last Price Increase: 2023-03-16
@kavimuru kavimuru added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Mar 16, 2023
@melvin-bot melvin-bot bot locked and limited conversation to collaborators Mar 16, 2023
@MelvinBot
Copy link

Triggered auto assignment to @bfitzexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

@MelvinBot
Copy link

MelvinBot commented Mar 16, 2023

Bug0 Triage Checklist (Main S/O)

  • This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
  • This bug is not a duplicate report (check E/App issues and #expensify-bugs)
    • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
  • This bug is reproducible using the reproduction steps in the OP. S/O
    • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
    • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
  • This issue is filled out as thoroughly and clearly as possible
    • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
  • I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

@bfitzexpensify bfitzexpensify added the External Added to denote the issue can be worked on by a contributor label Mar 16, 2023
@melvin-bot melvin-bot bot unlocked this conversation Mar 16, 2023
@melvin-bot melvin-bot bot changed the title App displays 'reacted with emoji' tooltip even on emojis in message right click menu [$1000] App displays 'reacted with emoji' tooltip even on emojis in message right click menu Mar 16, 2023
@MelvinBot
Copy link

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

@MelvinBot
Copy link

Current assignee @bfitzexpensify is eligible for the External assigner, not assigning anyone new.

@MelvinBot
Copy link

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External)

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 16, 2023
@MelvinBot
Copy link

Triggered auto assignment to @neil-marcellini (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

@Pujan92
Copy link
Contributor

Pujan92 commented Mar 16, 2023

Proposal

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

Reaction in the context menu shows 2 tooltips

What is the root cause of that problem?

We have 2 tooltips on reaction emoji bubbles in the context menu so it shows 2 tooltip(first the emoji name & then the renderTooltipContent)
1st tooltip - wrapper of the EmojiReactionBubble
2nd tooltip - direct child of the EmojiReactionBubble

<Tooltip text={`:${emoji.name}:`} key={emoji.name} focusable={false}>
<EmojiReactionBubble

<Tooltip
renderTooltipContent={() => (
<ReactionTooltipContent
emojiName={props.emojiName}
emojiCodes={props.emojiCodes}
accountIDs={props.reactionUsers}
/>
)}

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

Move the tooltip with renderTooltipContent from EmojiReactionBubble to ReportActionItemReactions and wrap it here

<EmojiReactionBubble
key={reaction.emoji}
count={reactionCount}
emojiName={reaction.emoji}
emojiCodes={emojiCodes}
onPress={onPress}
reactionUsers={reactionUsers}
/>

With that Context menu reactions will have a single tooltip and solves the issue.

Result

Screen.Recording.2023-03-17.at.1.36.50.AM.mov

@PrashantMangukiya
Copy link
Contributor

PrashantMangukiya commented Mar 16, 2023

Proposal

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

Within emoji reaction popover (when right click any message) it shows 'reacted with emoji' within tooltip content. It should only display emoji name on hover of that 4 emojis with Add reaction button. App should display tooltip with reacted user info for all reacted emojis listed below the message)

What is the root cause of that problem?

We are passing EmojiReactionBubble as tooltip child as shown below. Tooltip is used for both purpose i.e. to show tooltip over the 4 emojis with Add reaction button, and below message where reacted emoji etc.

<Tooltip text={`:${emoji.name}:`} key={emoji.name} focusable={false}>
<EmojiReactionBubble
emojiName={emoji.name}
emojiCodes={[getPreferredEmojiCode(emoji, props.preferredSkinTone)]}
sizeScale={EMOJI_BUBBLE_SCALE}
onPress={() => {
props.onEmojiSelected(emoji);
}}
/>
</Tooltip>

So at present there is not any provision to decide that reacted with info shown or not. This is the root cause of the problem.

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

Within src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js we have to pass new prop named showReactedInfo to <EmojiReactionBubble> as shown below.

<Tooltip text={`:${emoji.name}:`} key={emoji.name} focusable={false}> 
  <EmojiReactionBubble
    ...
   showReactedInfo={false} // *** ADD THIS ***
  />
</Tooltip> 

Within src/components/Reactions/EmojiReactionBubble.js file forward that prop to <Tooltip> as shown below:

<Tooltip
   showReactedInfo={props.showReactedInfo} // *** ADD THIS ***
   renderTooltipContent={() => (
      <ReactionTooltipContent
          emojiName={props.emojiName}
          emojiCodes={props.emojiCodes}
          accountIDs={props.reactionUsers}
      />
   )}
  ...
>

Within src/components/Tooltip/index.js change condition as shown below:

{this.state.isRendered && ( // *** OLD CODE ***
{this.state.isRendered && this.props.showReactedInfo && ( // *** UPDATED CODE ***
    <TooltipRenderedOnPageBody
      ...
    />
)}

Add propType and defaultProps within src/components/Tooltip/tooltipPropTypes.js as shown below:

const propTypes = {
  ...
  showReactedInfo: PropTypes.bool, // *** ADD THIS ***
};

const defaultProps = {
  ...
  showReactedInfo: true, // *** ADD THIS ***
};

So this will solve the problem.

Note: At present I decide prop name just to explain logic, we can change it as per suggestion.

What alternative solutions did you explore? (Optional)

None.

Result
tooltip-result.mov

@kaushiktd
Copy link
Contributor

Please re-state the problem that we are trying to solve in this issue.
App displays 'reacted with emoji' tooltip even on emojis in the message right-click menu

What is the root cause of that problem?
renderTooltipContent is not specified in BaseMiniContextMenuItem.js file tooltip for the mini icon on hover, this is the root cause of this problem in the below mention file.

<Tooltip text={props.tooltipText}>

What changes do you think we should make in order to solve the problem?
You need to add renderTooltipContent function in below mentioned file on line#50

<Tooltip text={props.tooltipText}>

<Tooltip text={props.tooltipText}
    renderTooltipContent={props.showReactedInfo ? () => (
        <ReactionTooltipContent
            emojiName={props.tooltipText}
            emojiCodes={props.emojiCodes}
            accountIDs={''}
        />
    ) : ''}
>

for the above function, you need to pass the following param to <BaseMiniContextMenuItem/> component in the below mentioned file:

onPress={() => props.onEmojiSelected(emoji)}

<BaseMiniContextMenuItem
    key={[emoji.name](http://emoji.name/)}
    isDelayButtonStateComplete={false}
    tooltipText={[emoji.name](http://emoji.name/)}
    onPress={() => props.onEmojiSelected(emoji)}
    emojiCodes={[getPreferredEmojiCode(emoji, props.preferredSkinTone)]}   // *** ADD THIS ***
    showReactedInfo={true}  // *** ADD THIS ***
>

also, you need to add params to below mention file after line#79 to remove confliction to other mini icon on hover like copy to clipboard, delete etc.

isDelayButtonStateComplete={this.props.isDelayButtonStateComplete}

<BaseMiniContextMenuItem
    tooltipText={text}
    onPress={this.triggerPressAndUpdateSuccess}
    isDelayButtonStateComplete={this.props.isDelayButtonStateComplete}
    showReactedInfo={false}     // *** ADD THIS ***
>

Video File:
https://drive.google.com/file/d/1RC2u1lHHubahSnZpMVGWrecX9PN5ohjZ/view?usp=share_link

@hoangzinh
Copy link
Contributor

hoangzinh commented Mar 17, 2023

Proposal

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

App displays 'reacted with emoji' tooltip even on emojis in message right click menu

What is the root cause of that problem?

Because the "right click" menu reuse the component EmojiReactionBubble, which is implemented to use in the "reaction" emoji history of a message (I don't know how to describe, but it's the menu in the bottom of each message if this message has any emoji reaction)

{_.map(CONST.QUICK_REACTIONS, emoji => (
// Note: focus is handled by the Pressable component in EmojiReactionBubble
<Tooltip text={`:${emoji.name}:`} key={emoji.name} focusable={false}>
<EmojiReactionBubble
emojiName={emoji.name}
emojiCodes={[getPreferredEmojiCode(emoji, props.preferredSkinTone)]}
sizeScale={EMOJI_BUBBLE_SCALE}
onPress={() => {
props.onEmojiSelected(emoji);
}}
/>
</Tooltip>
))}

Because component EmojiReactionBubble is implemented for that purpose, it contains a lot of reaction data like

That's reason, why we see "reacted with" text in the "right click" menu when hover in emoji.

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

The "right click" menu should not use component EmojiReactionBubble. But instead, we can add another component (I think can call it QuickEmojiReaction) which is a simplifier version of EmojiReactionBubble (remove all other unrelated data, just need Tooltip + Pressable), and use it for the "right click" menu

Something like this:

const QuickEmojiReaction = props => (
    <Tooltip text={`:${props.emojiName}:`}>
        <Pressable
            style={} # TBD, but style might same as EmojiReactionBubble
            onPress={props.onPress}
            onLongPress={props.onReactionListOpen}
        >
            <Text style={} > # TBD, but style might same as EmojiReactionBubble
                {props.preferredEmojiCode}
            </Text>
        </Pressable>
    </Tooltip>
);

What alternative solutions did you explore? (Optional)

  • Option 1: I think about add additional flag to EmojiReactionBubble to show on-off unrelated data for "right click" menu, but then EmojiReactionBubble looks messy with branches (if/else)
  • Option 2: Refactor whole Reactions's components.

Screenshot 2023-03-18 at 00 00 20

Those components looks messy, they can not share to each other , and not related together. For example:
  • MiniQuickEmojiReactions and QuickEmojiReactions, at a glance, I thought they are share logic together, just difference in styling. But the truth is they implement differently => that why in my proposal, I have to add another component.
  • getPreferredEmojiCode should move to utils folder under same dir, to don't mess with other React components
    ...
    But it's out of scope.

@Santhosh-Sellavel
Copy link
Collaborator

@Pujan92 proposal LGTM, is simple and straightforward to me.

Let me know your thoughts @neil-marcellini

C+ Reviewed
🎀 👀 🎀

@melvin-bot melvin-bot bot added the Overdue label Mar 20, 2023
@Santhosh-Sellavel
Copy link
Collaborator

Waiting for CME review!

@melvin-bot melvin-bot bot removed the Overdue label Mar 20, 2023
@neil-marcellini
Copy link
Contributor

Woah haha, I didn't even know that we had another menu show on right click. It seems kind of redundant to me. I asked about it in Slack here.

Assuming we do want to keep this menu, I'm happy with @Pujan92's proposal as well 👍

@melvin-bot melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Mar 20, 2023
@MelvinBot
Copy link

📣 @Pujan92 You have been assigned to this job by @neil-marcellini!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

@Pujan92
Copy link
Contributor

Pujan92 commented Mar 21, 2023

@Santhosh-Sellavel @neil-marcellini PR is ready for review.

@MelvinBot
Copy link

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Daily KSv2 labels Mar 27, 2023
@melvin-bot melvin-bot bot changed the title [$1000] App displays 'reacted with emoji' tooltip even on emojis in message right click menu [HOLD for payment 2023-04-03] [$1000] App displays 'reacted with emoji' tooltip even on emojis in message right click menu Mar 27, 2023
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Mar 27, 2023
@MelvinBot
Copy link

Reviewing label has been removed, please complete the "BugZero Checklist".

@MelvinBot
Copy link

MelvinBot commented Mar 27, 2023

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.2.89-0 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2023-04-03. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

  • External issue reporter
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

  • Merged PR within 3 business days of assignment - 50% bonus
  • Merged PR more than 9 business days after assignment - 50% penalty

@MelvinBot
Copy link

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

  • [@Santhosh-Sellavel / @neil-marcellini] The PR that introduced the bug has been identified. Link to the PR:
  • [@Santhosh-Sellavel / @neil-marcellini] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
  • [@Santhosh-Sellavel / @neil-marcellini] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
  • [@bfitzexpensify] Determine if we should create a regression test for this bug.
  • [@Santhosh-Sellavel] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
  • [@bfitzexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Apr 3, 2023
@bfitzexpensify
Copy link
Contributor

Sent offers out on upwork

@Santhosh-Sellavel
Copy link
Collaborator

Santhosh-Sellavel commented Apr 6, 2023

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

@melvin-bot melvin-bot bot added the Overdue label Apr 10, 2023
@MelvinBot
Copy link

@Pujan92, @neil-marcellini, @bfitzexpensify, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

1 similar comment
@MelvinBot
Copy link

@Pujan92, @neil-marcellini, @bfitzexpensify, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

@bfitzexpensify
Copy link
Contributor

I think we should add a regression test for this to this WIP planned 'Emoji Reactions & Emoji suggestions' test - https://github.com/Expensify/Expensify/issues/274613

@melvin-bot melvin-bot bot removed the Overdue label Apr 10, 2023
@isagoico
Copy link

@bfitzexpensify Added steps 4 and 5 to cover the tooltip here https://github.com/Expensify/Expensify/issues/274613.
image

@bfitzexpensify
Copy link
Contributor

Awesome thanks @isagoico! I think we are all done here then and can close this out.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests

10 participants