search

Expensify / App

Welcome to New Expensify: a complete re-imagination of financial collaboration, centered around chat. Help us build the next generation of Expensify by sharing feedback and contributing to the code.
https://new.expensify.com
MIT License
3.54k stars 2.89k forks source link

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

Closed kavimuru closed 1 year ago

kavimuru commented 1 year ago

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?

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:

https://user-images.githubusercontent.com/43996225/225695715-0d1dae1f-b3e0-48be-a6f4-c9c5563ee405.mp4

https://user-images.githubusercontent.com/43996225/225696114-8eea62a8-65e9-44cc-9cc2-ea09149b8465.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
MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

Bug0 Triage Checklist (Main S/O)

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

Pujan92 commented 1 year ago

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 https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js#L45-L46 https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/Reactions/EmojiReactionBubble.js#L66-L73

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 https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/Reactions/ReportActionItemReactions.js#L71-L78 With that Context menu reactions will have a single tooltip and solves the issue.

Result

https://user-images.githubusercontent.com/14358475/225740703-d7be773b-81cb-440e-86ba-09db5052bc88.mov

PrashantMangukiya commented 1 year ago

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.

https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js#L45-L54

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 https://user-images.githubusercontent.com/7823358/225746125-35660f5e-1d4e-419a-a522-fddf940bba88.mov
kaushiktd commented 1 year ago

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. https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/BaseMiniContextMenuItem.js#L50

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 https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/BaseMiniContextMenuItem.js#L50

<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: https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/Reactions/MiniQuickEmojiReactions.js#L72

<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. https://github.com/Expensify/App/blob/0efe6acf41eb985a0d6e42b47a8d91ab9cef6559/src/components/ContextMenuItem.js#L79

<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 commented 1 year ago

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)

https://github.com/Expensify/App/blob/0b24114bfd99f92e24f849e46a7ed2622adbee7c/src/components/Reactions/QuickEmojiReactions/BaseQuickEmojiReactions.js#L42-L55

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)

Santhosh-Sellavel commented 1 year ago

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

Let me know your thoughts @neil-marcellini

C+ Reviewed 🎀 👀 🎀

Santhosh-Sellavel commented 1 year ago

Waiting for CME review!

neil-marcellini commented 1 year ago

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 👍

MelvinBot commented 1 year ago

📣 @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 commented 1 year ago

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

MelvinBot commented 1 year ago

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.

MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

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

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.

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

MelvinBot commented 1 year ago

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:

bfitzexpensify commented 1 year ago

Sent offers out on upwork

Santhosh-Sellavel commented 1 year ago

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:

  • [x] [@Santhosh-Sellavel / @neil-marcellini] The PR that introduced the bug has been identified. Link to the PR: https://github.com/Expensify/App/pull/15671
  • [x] [@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: https://github.com/Expensify/App/pull/15671#issuecomment-1499758304
  • [x] [@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: N/A as this could have been caught
  • [x] [@bfitzexpensify] Determine if we should create a regression test for this bug.
  • [x] [@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.
  • [x] [@bfitzexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:
MelvinBot commented 1 year ago

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

MelvinBot commented 1 year ago

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

bfitzexpensify commented 1 year ago

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

isagoico commented 1 year ago

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

bfitzexpensify commented 1 year ago

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