[HOLD for payment 2023-06-05] [$1000] No hover effect on reactions list

[kavimuru]

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 group > send message > react with 2 or more accounts
2. hover over the members in list

Expected results:

hover effect should be there like other similar components in the app (like start a call menu). Additionally, open the user detail page when the user clicks on a user profile (more details here).

Actual results:

no hover effect

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.3.13.
Reproducible in staging?: y
Reproducible in production?:
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: Any additional supporting documentation

bandicam.2023-05-13.16-31-29-472.mp4

Expensify/Expensify Issue URL:
Issue reported by: @chiragxarora
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1683975718761019

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c0b60ca5f036fe39
• Upwork Job ID: 1658661267676348416
• Last Price Increase: 2023-05-17

[melvin-bot]

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

[melvin-bot]

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

[PrashantMangukiya]

Proposal

Posting proposal early as per new guidelines

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

No hover effect on reactions list

What is the root cause of that problem?

Reaction list render via OptionRow as shown below:

App/src/pages/home/report/ReactionList/BaseReactionList.js

Lines 43 to 63 in 148517a

	const renderItem = ({item}) => (
	<OptionRow
	item={item}
	boldStyle
	isDisabled
	style={{maxWidth: variables.mobileResponsiveWidthBreakpoint}}
	option={{
	text: Str.removeSMSDomain(item.displayName),
	alternateText: Str.removeSMSDomain(item.login),
	participantsList: [item],
	icons: [
	{
	source: ReportUtils.getAvatar(item.avatar, item.login),
	name: item.login,
	type: CONST.ICON_TYPE_AVATAR,
	},
	],
	keyForList: item.login,
	}}
	/>
	);

We can see hoverStyle not passed to OptionRow. So it will not show hover effect, this is the root cause of the problem.

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

We have to pass hoverStyle prop to OptionRow component as shown code below:

const renderItem = ({item}) => (
    <OptionRow
        hoverStyle={styles.hoveredComponentBG}   // ** ADD THIS ***
        ...
    />
);

This will solve the issue and show hover effect as shown in result.

What alternative solutions did you explore? (Optional)

None

Result

Web.mov

[dhairyasenjaliya]

Proposal

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

• No hover effect on reactions list

What is the root cause of that problem?

• The root cause is we using <OptionRow> with isDisable props that make it hover stated disable as well

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

• We have 2 option to solve this problem

Solution 1

• In order to show hover effect we can remove isDisable props and add hoverStyle={styles.hoveredComponentBG} inside BaseReactionList.js

• We also need to add blank onSelectRow() event (cursor disable style optionally)

• Also we can create new Props to show hovers state on disabled onSelectRow()

Solution 2

• While enabling the onSelectRow() We can open drawer with user details (drawer) onPress(onSelectRow) of particular user this is specially useful on larger group chat we can directly see user profile detail on press

• In order to open user detail drawer we need to add Navigation.navigate(ROUTES.getDetailsRoute(email)) to onSelectRow

What alternative solutions did you explore? (Optional)

• None

Result for Solution 2

Untitled.mp4

Result for Solution 1

onlyHovered.mov

[melvin-bot]

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.

[JmillsExpensify]

Hmm, this "bug" is debatable vs a new feature, though I'm triaging it to keep the issue moving while I'm at a conference.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dhairyasenjaliya]

Context regarding feature request here https://expensify.slack.com/archives/C01GTK53T8Q/p1684246281785029?thread_ts=1684246281.785029&cid=C01GTK53T8Q

[thesahindia]

This is expected. There is no hover effect because the contacts in the list aren't clickable.

@dhairyasenjaliya posted a feature request to make the items/contacts clickable and it looks like we agree with the feature.

We should close this bug and create a new ticket for the feature request because this is not a bug and the bug report is invalid, but since we already have a proposal here (solution 2) which looks good to me, let's assign @dhairyasenjaliya and update the OP. Also please add @dhairyasenjaliya as the reporter since they posted the feature request in the channel.

C+ reviewed 🎀👀🎀

cc: @marcochavezf @JmillsExpensify

[melvin-bot]

📣 @dhairyasenjaliya You have been assigned to this job by @marcochavezf!
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 📖

[dhairyasenjaliya]

hm do we create a new GH to handle this feature rather than modifying this bug GH? @thesahindia @marcochavezf

[JmillsExpensify]

Quick heads up that I'm out of office this week, so if someone from the BugZero team is needed then please re-apply the bug label.

[marcochavezf]

@thesahindia @dhairyasenjaliya let's re-use this GH atm. I agree that this can be debatable, and maybe we'd need to discuss it to define how we can consider this one since it was reported as a bug before the proposal (improvement) was reported/proposed. I will update the OP

[JmillsExpensify]

Ah yes, thanks. We still need to close out the BZ checklist first and agree on payment. @thesahindia would you mind helping us cross off everything but the last item in the checklist above?

[JmillsExpensify]

As for the payments, this is what I'm seeing:

Issue reporter: @chiragxarora $250
Contributor: @dhairyasenjaliya $1,000
Contributor+: @thesahindia $1,000

Are we aligned on the above before I issue contracts and what not in Upwork?

[dhairyasenjaliya]

@JmillsExpensify I believe this is eligible for an urgency bonus as well coz once the issue was assigned I was waiting for #18905 (comment) for a new GH since this bug report is not valid but we just continue here context here #18905 (comment) and I have posted this as a feature request https://expensify.slack.com/archives/C01GTK53T8Q/p1684246281785029

[thesahindia]

Yeah the bug report was invalid since it was not a bug. We just implemented a new feature that @dhairyasenjaliya had reported.

[thesahindia]

Since this was not a bug we can skip the first three items of the checklist and I think there is no test case needed for this but if we want we can use the steps below -

1. Go to a group chat > send message > react with 2 or more accounts
2. Right click on any reaction
3. Click on any user in the list
4. Verify you see the user details page

[chiragxarora]

Am I not eligible for the reporting bonus since one way or another the feature originated from this report only.
@JmillsExpensify ?

[chiragxarora]

Am I not eligible for the reporting bonus since one way or another the feature originated from this report only.
@JmillsExpensify ?

[chiragxarora]

Am I not eligible for the reporting bonus since one way or another the feature originated from this report only.
@JmillsExpensify ?

[dhairyasenjaliya]

Not sure since this bug was invalid at the first place as we don't have any click event there was no use of hover, and we were about to close this GH but instead we just re-use to save time

[JmillsExpensify]

@chiragxarora Sorry I'm not clear what you're referring to. The bonus only applies to PRs.

[JmillsExpensify]

As for the bonus, @marcochavezf can you please clear up the bonus before we issue payments? Let's make sure we're all on the same page.

[JmillsExpensify]

As for who to award the reporting payment to, can someone help me determine where @dhairyasenjaliya was the report and not @chiragxarora? Perhaps more importantly, we don't pay for feature requests, so if this is not a bug then there is no reporting payment either.

[dhairyasenjaliya]

alright then as I have made feature requests https://expensify.slack.com/archives/C01GTK53T8Q/p1684246281785029 and on this GH we have added that so there is no compensation due for reporting @JmillsExpensify

[melvin-bot]

@JmillsExpensify, @marcochavezf, @dhairyasenjaliya, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[marcochavezf]

@JmillsExpensify for this case, I also think it's appropriate to reward @chiragxarora as the issue reporter. This issue resides in a gray area between bug and improvement. However, since we have similar hover effects in other parts of the app, a natural solution would be to show a list of the reactions. Also, the issue was reported before (May 13) @dhairyasenjaliya reported the improvement (May 16).

Regarding the bonus for urgency, yeah I agree with it.

[dhairyasenjaliya]

bump on above replay @JmillsExpensify

[melvin-bot]

@JmillsExpensify, @marcochavezf, @dhairyasenjaliya, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@JmillsExpensify, @marcochavezf, @dhairyasenjaliya, @thesahindia Still overdue 6 days?! Let's take care of this!

[JmillsExpensify]

Ok thanks for walking me through this one.

So that leaves us:

Issue reporter: @chiragxarora $250
Contributor: @dhairyasenjaliya $1,500
Contributor+: @thesahindia $1,500

Upwork job is here. I'll issue bonuses on final payout.

[JmillsExpensify]

Everyone should have an offer in their Upwork inbox. Let me know if you don't.

[JmillsExpensify]

Contributor and issue reporter have been paid out. @thesahindia you have an offer outstanding in Upwork when you have a chance to get to it.

[thesahindia]

Accepted, thanks!

[JmillsExpensify]

Awesome! Everyone is now paid out. Closing this one out.