[$500] Android - The toggle attribution button is not placed on the right position

[kbecciv]

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 request money
2. Change the tab to distance
3. Notice the toggle attribution button

Expected Result:

The toggle attribution button should be on the bottom right corner of the map

Actual Result:

The toggle attribution button is next to mapbox button

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.3.66.3
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: Any additional supporting documentation

Expensify/Expensify Issue URL:
Issue reported by: @jo-ui
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693920729499719

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01635cf17e44f76483
• Upwork Job ID: 1700897704277868544
• Last Price Increase: 2023-09-10
• Automatic offers:
• jjcoffee | Reviewer | 26641403
• ZhenjaHorbach | Contributor | 26641406
• jo-ui | Reporter | 26641407

[melvin-bot]

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

[melvin-bot]

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

[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

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Wrong position for toggle attribution button

What is the root cause of that problem?

We don't pass parameters for the button location
And by default the button is located on the left

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

App/src/components/MapView/MapView.tsx

Lines 62 to 69 in b11bddc

	<Mapbox.MapView
	style={{flex: 1}}
	styleURL={styleURL}
	onMapIdle={setMapIdle}
	pitchEnabled={pitchEnabled}
	// eslint-disable-next-line
	{...responder.panHandlers}
	>

We just need to set attributionPosition props for Mapbox.MapView

For example:
attributionPosition={{ ...styles.r2, ...styles.b2 }}

And to make everything look as symmetrical and beautiful as possible, we can set the position for the MapBox icon.

logoPosition={{ ...styles.l2, ...styles.b2 }}

What alternative solutions did you explore? (Optional)

NA

[pradeepmdk]

Proposal

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

The toggle attribution button is not placed on the right position

What is the root cause of that problem?

This is Mapbox issue by default in Android bottom left

https://docs.mapbox.com/help/getting-started/attribution/#mapbox-maps-sdk-for-android

  /**
   * Adds attribution offset, e.g. `{top: 8, left: 8}` will put attribution button in top-left corner of the map. By default on Android, the attribution with information icon (i) will be on the bottom left, while on iOS the mapbox logo will be on bottom left with information icon (i) on bottom right. Read more about mapbox attribution [here](https://docs.mapbox.com/help/getting-started/attribution/)
   */
  attributionPosition?: OrnamentPositonProp;

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

we can pass attributionPosition { right : 8, bottom : 8 }

if we need hide this attribution
attributionEnabled false on native
attributionControl false on web

[PiyushChandra17]

Proposal

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

The toggle attribution information(i) button is placed in wrong position

What is the root cause of that problem?

By default, the position of toggle attribution information(i) button is bottom left on android, we are missing the attributionPosition props in MapView component (attributionPosition: OrnamentPositonProp). Hence this is the root cause.

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

In MapView, We should apply the following changes:

1. import Platform module from react-native
2. Add the attributionPosition prop and set it to {bottom: 8, right: 8} in <Mapbox.MapView /> component.

<Mapbox.MapView
    style={{flex: 1}}
    styleURL={styleURL}
    onMapIdle={setMapIdle}
    pitchEnabled={pitchEnabled}
    attributionPosition={Platform.OS === "android" ? {bottom: 8, right: 8} : {bottom: 8, right: 8}}
    // eslint-disable-next-line
    {...responder.panHandlers}           
>

What alternative solutions did you explore? (Optional)

NA

Result:

[jjcoffee]

All the proposals here are essentially the same, identifying the correct RCA that the default on Android is to display the attribution toggle on the left with the logo (pretty strange inconsistency on Mapbox's part! 😄).

@ZhenjaHorbach's proposal was first, so happy to go with them! It also makes sense to me to explicitly set the positions of both logo and toggle now, in case Mapbox ever change their mind in the future and we end up with a new "bug" to fix!

🎀👀🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @jjcoffee 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[melvin-bot]

📣 @jo-ui 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[ZhenjaHorbach]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer 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 📖

PR is ready for review.

[melvin-bot]

🎯 ⚡️ Woah @jjcoffee / @ZhenjaHorbach, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

• when @ZhenjaHorbach got assigned: 2023-09-12 22:34:25 Z
• when the PR got merged: 2023-09-13 15:31:57 UTC

On to the next one 🚀

[CortneyOfstad]

@Christinadobrzyn there is a known issue with double-assignments when the external label is applied (more info here). Unassigning myself as the second assignee 👍

[melvin-bot]

This issue has not been updated in over 15 days. @AndrewGable, @jjcoffee, @Christinadobrzyn, @ZhenjaHorbach eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[jjcoffee]

Hmm looks like the automation failed here. This was deployed to production Sept 18, so should be ready for payment @Christinadobrzyn.

[jjcoffee]

• The PR that introduced the bug has been identified. Link to the PR: N/A - this has existed since the beginning of the implementation
• 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: N/A
• 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
• Determine if we should create a regression test for this bug. No - pretty low impact
• 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.

[jjcoffee]

@Christinadobrzyn I realised there was no checklist either, so I've added that. Also, friendly bump on payment!

[Christinadobrzyn]

well that's annoying that this didn't become daily to remind me! Sorry for the delay here.

Payouts due:

Issue Reporter: $50 @jo-ui (Paid in Upwork)
Contributor: $500 + $250 bonus @ZhenjaHorbach (Paid in Upwork)
Contributor+: $500 + $250 bonus @jjcoffee (Paid in Upwork)

Eligible for 50% #urgency bonus? Y - #27111 (comment)

Upwork job is here (job is closed so I think that means it can't be viewed externally).

Closing!