[HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android #27620

kavimuru · 2023-09-17T15:12:12Z

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:

Open request money
Change the tab to distance
Select a start or finish distance

Expected Result:

The map should show the scale control as in the android app or it should be removed from the android too

Actual Result:

The scale control is hidden on the map of the web and mweb

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?

Version Number: 1.3.70-5
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/p1694616305506719

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~010c8a9994720dfe80
Upwork Job ID: 1703426646592622592
Last Price Increase: 2023-09-17
Automatic offers:

ZhenjaHorbach | Contributor | 26813126
jo-ui | Reporter | 26813129

melvin-bot · 2023-09-17T15:12:17Z

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

melvin-bot · 2023-09-17T15:12:17Z

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

melvin-bot · 2023-09-17T15:12:19Z

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 · 2023-09-17T15:12:21Z

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

melvin-bot · 2023-09-17T15:12:26Z

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

ZhenjaHorbach · 2023-09-17T15:19:15Z

Proposal

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

ScaleControl doesn't show up in browsers

What is the root cause of that problem?

We don't pass ScaleControl component in MapView.web

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

We can add <ScaleControl /> for our MapView.web

Which we can get from 'react-map-gl' library

We just need to add <ScaleControl/> inside <Map></Map>

App/src/components/MapView/MapView.web.tsx

Lines 67 to 90 in c77814f

    
           <Map 
        
               ref={setRef} 
        
               mapboxAccessToken={accessToken} 
        
               initialViewState={{ 
        
                   longitude: initialState.location[0], 
        
                   latitude: initialState.location[1], 
        
                   zoom: initialState.zoom, 
        
               }} 
        
               mapStyle={styleURL} 
        
           > 
        
               {waypoints?.map(({coordinate, markerComponent, id}) => { 
        
                   const MarkerComponent = markerComponent; 
        
                   return ( 
        
                       <Marker 
        
                           key={id} 
        
                           longitude={coordinate[0]} 
        
                           latitude={coordinate[1]} 
        
                       > 
        
                           <MarkerComponent /> 
        
                       </Marker> 
        
                   ); 
        
               })} 
        
               {directionCoordinates && <Direction coordinates={directionCoordinates} />} 
        
           </Map>

<ScaleControl position='top-left'/>

Also we can use unit props to set which units of measurement to use (If it's necessary).

What alternative solutions did you explore? (Optional)

We can remove ScaleControl from mobile applications

We need to pass scaleBarEnabled={false} for <Mapbox.MapView/>

App/src/components/MapView/MapView.tsx

Lines 66 to 75 in c77814f

    
           <Mapbox.MapView 
        
               style={{flex: 1}} 
        
               styleURL={styleURL} 
        
               onMapIdle={setMapIdle} 
        
               pitchEnabled={pitchEnabled} 
        
               attributionPosition={{...styles.r2, ...styles.b2}} 
        
               logoPosition={{...styles.l2, ...styles.b2}} 
        
               // eslint-disable-next-line 
        
               {...responder.panHandlers} 
        
           >

desirekaleba · 2023-09-17T15:42:41Z

Proposal

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

The problem we are trying to solve is the absence of a scale control on the Mapbox map displayed within the MapView component in a React Native application using the react-map-gl library. A scale control is a useful feature for users to understand the map's scale and distance between points, enhancing the user experience and providing valuable geographical context.

What is the root cause of that problem?

The root cause of this problem is that the ScaleControl component was not integrated into the existing codebase for the MapView component. The absence of this component is the reason why the scale control is missing from the map.

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

To solve this problem, we propose the following changes:

Import the ScaleControl component from the react-map-gl library at the beginning of the MapView component file.
Insert the ScaleControl component within the Map component, allowing it to be displayed on the map.
Customize the appearance of the scale control by setting the maxWidth, unit, and the position props according to the desired design and unit preference.

These changes will add a scale control to the Mapbox map within the MapView component under src/components/MapView/MapView.web.tsx

What alternative solutions did you explore? (Optional)

N/A

melvin-bot · 2023-09-17T15:42:44Z

📣 @desirekaleba! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

desirekaleba · 2023-09-17T15:48:38Z

Contributor details
Your Expensify account email: desirekaleba@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0112ace296ad18280c

melvin-bot · 2023-09-17T15:48:40Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

desirekaleba · 2023-09-17T16:18:45Z

Contributor details
Your Expensify account email: desirekaleba@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0112ace296ad18280c

melvin-bot · 2023-09-17T16:18:47Z

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

PiyushChandra17 · 2023-09-17T16:25:29Z

Proposal

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

The scale control is hidden on the map of the web and mweb

What is the root cause of that problem?

We are not rendering any ScaleControl component here in Map

App/src/components/MapView/MapView.web.tsx

Line 67 in c77814f

<Map

Hence this is the root cause

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

We need to apply following changes:

import ScaleControl from 'react-map-gl'
Render this ScaleControl component anywhere in <Map />
We need to add position: "top-left", whereas maxWidth: "100" and unit: "metric" is set by default options

What alternative solutions did you explore? (Optional)

NA

Result:

sakluger · 2023-09-18T07:59:28Z

I posted in the Wave5 slack channel since this is related to distance requests.

arosiclair · 2023-09-20T04:34:30Z

Need to get these proposals reviewed ASAP assigning a new C+

melvin-bot · 2023-09-25T09:46:13Z

🎯 ⚡️ Woah @sobitneupane / @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-22 09:09:05 Z
when the PR got merged: 2023-09-25 09:46:12 UTC

On to the next one 🚀

melvin-bot · 2023-10-02T17:08:29Z

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

melvin-bot · 2023-10-02T17:08:33Z

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

The scale control is hidden on the map #28003

If no regressions arise, payment will be issued on 2023-10-09. 🎊

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

For reference, here are some details about the assignees on this issue:

@sobitneupane does not require payment (Eligible for Manual Requests)
@ZhenjaHorbach requires payment offer (Contributor)
@jo-ui requires payment offer (Reporter)

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

melvin-bot · 2023-10-02T17:08:35Z

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:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:
[@sobitneupane] 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:
[@sobitneupane] 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:
[@sobitneupane] Determine if we should create a regression test for this bug.
[@sobitneupane] 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.
[@sakluger] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

sobitneupane · 2023-10-09T08:09:04Z

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:

[@sobitneupane] The PR that introduced the bug has been identified. Link to the PR:

#25161

[@sobitneupane] 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:

This is a small UI inconsistency.

[@sobitneupane] 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

[@sobitneupane] Determine if we should create a regression test for this bug.

Yes.

[@sobitneupane] 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.

#27620 (comment)

sobitneupane · 2023-10-09T08:10:31Z

Regression Test Proposal

Open request money
Change the tab to distance
Verify that scale control is not displayed in top left corner of the map.

Do we agree 👍 or 👎

arosiclair · 2023-10-11T13:09:47Z

No need for a regression test for a small cosmetic change IMO

sakluger · 2023-10-12T06:03:50Z

Yeah we probably don't need a regression test for this.

Summarizing payouts for this issue:

Reporter: @jo-ui $50 (paid via Upwork)
Contributor: @ZhenjaHorbach $750 (paid via Upwork)
Contributor+: @sobitneupane $750 (payable via Manual Request)

Above payments include efficiency bonus 🎉
Upwork job: https://www.upwork.com/jobs/~010c8a9994720dfe80

sakluger · 2023-10-12T06:04:13Z

@sobitneupane can you let me know once you've submitted the manual request? I'll close the issue once that's done.

sakluger · 2023-10-16T17:32:31Z

@sobitneupane can you let me know if you need this to remain open, or if you are tracking outside of Expensify?

Switching this to a weekly for now to clean up my tasks list.

sakluger · 2023-10-19T17:43:25Z

I'm going to close this one out. I'll post in Slack to make sure @sobitneupane doesn't miss it for his payment. 👍

sobitneupane · 2023-10-30T14:02:27Z

#27620 (comment)

Requested payment on newDot.

JmillsExpensify · 2023-11-03T22:21:34Z

$750 payment approved for @sobitneupane based on this comment.

kavimuru added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 17, 2023

melvin-bot bot changed the title ~~[Distance] - The scale control is hidden on the map~~ [$500] [Distance] - The scale control is hidden on the map Sep 17, 2023

melvin-bot bot assigned sakluger Sep 17, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 17, 2023

melvin-bot bot assigned joekaufmanexpensify Sep 17, 2023

melvin-bot bot assigned eVoloshchak Sep 17, 2023

sakluger unassigned joekaufmanexpensify Sep 18, 2023

arosiclair self-assigned this Sep 19, 2023

arosiclair unassigned eVoloshchak Sep 20, 2023

arosiclair added External Added to denote the issue can be worked on by a contributor and removed External Added to denote the issue can be worked on by a contributor Help Wanted Apply this label when an issue is open to proposals by contributors labels Sep 20, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 20, 2023

neil-marcellini changed the title ~~[$500] [Distance] - The scale control is hidden on the map~~ 🟡 [$500] [Distance] - Hide the map scale control on Android Sep 25, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 2, 2023

melvin-bot bot changed the title ~~🟡 [$500] [Distance] - Hide the map scale control on Android~~ [HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android Oct 2, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Oct 2, 2023

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 Daily KSv2 labels Oct 9, 2023

melvin-bot bot removed the Overdue label Oct 11, 2023

melvin-bot bot added the Overdue label Oct 16, 2023

melvin-bot bot removed the Overdue label Oct 16, 2023

sakluger added Weekly KSv2 and removed Daily KSv2 labels Oct 16, 2023

sakluger closed this as completed Oct 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android #27620

[HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android #27620

kavimuru commented Sep 17, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

ZhenjaHorbach commented Sep 17, 2023 •

edited

Loading

desirekaleba commented Sep 17, 2023 •

edited

Loading

melvin-bot bot commented Sep 17, 2023

desirekaleba commented Sep 17, 2023 •

edited

Loading

melvin-bot bot commented Sep 17, 2023

desirekaleba commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

PiyushChandra17 commented Sep 17, 2023 •

edited

Loading

sakluger commented Sep 18, 2023

arosiclair commented Sep 20, 2023

melvin-bot bot commented Sep 25, 2023

melvin-bot bot commented Oct 2, 2023

melvin-bot bot commented Oct 2, 2023 •

edited by sakluger

Loading

melvin-bot bot commented Oct 2, 2023

sobitneupane commented Oct 9, 2023 •

edited

Loading

sobitneupane commented Oct 9, 2023

arosiclair commented Oct 11, 2023

sakluger commented Oct 12, 2023

sakluger commented Oct 12, 2023

sakluger commented Oct 16, 2023

sakluger commented Oct 19, 2023

sobitneupane commented Oct 30, 2023

JmillsExpensify commented Nov 3, 2023

[HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android #27620

[HOLD for payment 2023-10-09] 🟡 [$500] [Distance] - Hide the map scale control on Android #27620

Comments

kavimuru commented Sep 17, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

Bug0 Triage Checklist (Main S/O)

melvin-bot bot commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

ZhenjaHorbach commented Sep 17, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

desirekaleba commented Sep 17, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Sep 17, 2023

desirekaleba commented Sep 17, 2023 • edited Loading

melvin-bot bot commented Sep 17, 2023

desirekaleba commented Sep 17, 2023

melvin-bot bot commented Sep 17, 2023

PiyushChandra17 commented Sep 17, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result:

sakluger commented Sep 18, 2023

arosiclair commented Sep 20, 2023

melvin-bot bot commented Sep 25, 2023

melvin-bot bot commented Oct 2, 2023

melvin-bot bot commented Oct 2, 2023 • edited by sakluger Loading

melvin-bot bot commented Oct 2, 2023

sobitneupane commented Oct 9, 2023 • edited Loading

sobitneupane commented Oct 9, 2023

arosiclair commented Oct 11, 2023

sakluger commented Oct 12, 2023

sakluger commented Oct 12, 2023

sakluger commented Oct 16, 2023

sakluger commented Oct 19, 2023

sobitneupane commented Oct 30, 2023

JmillsExpensify commented Nov 3, 2023

kavimuru commented Sep 17, 2023 •

edited by melvin-bot bot

Loading

ZhenjaHorbach commented Sep 17, 2023 •

edited

Loading

desirekaleba commented Sep 17, 2023 •

edited

Loading

desirekaleba commented Sep 17, 2023 •

edited

Loading

PiyushChandra17 commented Sep 17, 2023 •

edited

Loading

melvin-bot bot commented Oct 2, 2023 •

edited by sakluger

Loading

sobitneupane commented Oct 9, 2023 •

edited

Loading