Update map setting display

[LahuenGR]

PR Checklist

• - Commit messages are descriptive, it will be used in our Release Notes
• - Unit and e2e tests for the changes that have been added (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix (fixes an issue)
• Feature (adds functionality)
• Code style update
• Refactoring (no functional changes)
• Build related changes
• CI related changes
• Documentation changes
• Other... Please describe:

What is the current behavior?

Standard pin showing in the Map Settings and without relevant information

What is the new behavior?

1. Pin is now showing the profile type design and, when clicked, shows the popup with relevant information
2. Removed one-click option to move the pin and setted it to double-click, as it was not working well with the click-n-popup idea

Describe the new behaviour
If useful, provide screenshot or capture to highlight main changes

Does this PR introduce a breaking change?

• Yes
• No

Git Issues

Closes #3856

What happens next?

Thanks for the contribution! We try to make sure all PRs are reviewed ahead of our monthly maintainers call (first Monday of the month)

If the PR is working as intended it'll be merged and included in the next platform release, if not changes will be requested and re-reviewed once updated.

If you need more immediate feedback you can try reaching out on Discord in the Community Platform development channel.

[cypress]

onearmy-community-platform    Run #6341

Run Properties:   Failed #6341  •  4853c55064: feat(component): update map settings display

Project	onearmy-community-platform
Run status	Failed #6341
Run duration	05m 29s
Commit	4853c55064: feat(component): update map settings display
Committer	Lahuen Garcia
View all properties for this run ↗︎

---

Test results
Failures	2
Flaky	2
Pending	0
Skipped	0
Passing	73

---

Tests for review

  src/integration/settings.spec.ts • 2 failed tests • ci-chrome

View Output Video

Test		Artifacts
[Settings] > [Focus Member] > [Edit a new profile]		Test Replay Screenshots Video
[Settings] > [Focus Machine Builder] > [Edit a new profile]		Test Replay Screenshots Video

  src/integration/howto/write.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[How To] > [Create a how-to] > [Warning on leaving page]		Test Replay Screenshots Video

  src/integration/research/write.spec.ts • 1 flaky test • ci-chrome

View Output Video

Test		Artifacts
[Research] > [Displays draft updates for Author] > [By Authenticated]		Test Replay Screenshots Video

[benfurber]

Thanks @LahuenGR. I've added on quick style thing I could see but it's a little hard to review fully as you're pulling in unrelated commits from your other branch. Plus maybe some unrelated model changes?

Also. Have you looked into our cypress tests yet. Any ideas on how to test your change within the existing settings test(s)?

[github-actions]

Visit the preview URL for this PR (updated for commit 7ca811e):

https://onearmy-next--pr3862-update-map-setting-d-uvghrep1.web.app

_{(expires Sat, 26 Oct 2024 21:06:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 6d65e4f8fee2f6ab2da0c1c3b85b8797d66afa59}

[LahuenGR]

@benfurber I'm not sure why it dragged the commit from the other branch 🤔 let me try to fix it

What model changes are you referring to?

As for the cypress tool... nope, never used it hahaha, i'm going to need some help with that <3

Edit: I exported ILatLang type and removed one unused declaration, the last one i'm not sure why but seemed unnecessary there lol, could put it back there tho

[benfurber]

From QA.

1. Definitely need to increase the map height. If you change your profile type to something other than a member you'll see what I mean.
2. Add onblur to hide the pin when click/tapping the map. This is especially important for mobile.
3. Move the +/- controls to the bottom left, on mobile they nearly overlap with the search for address.
4. For pin onhover change the cursor to grab.
5. I don't think the explainer text is right because it is possible still to grab to move your pin. Let's go with: "To move your pin, grab it to move it or double click where you want it to go. Tap on your pin to see how it'll look on the map.

[LahuenGR]

Did i understand correctly? @benfurber

Demo.mp4

[benfurber]

Hey @LahuenGR I've sorted out the complex rebase that was needed on this branch after we merged in a big refactor.

I've run the branch locally and I think there's a couple more bits to finish. If you won't have time to do it, no worries, just let me know and I can finish it off.

1. Let's move those controls (+/- and location search) to the top.
2. For some reason the zoom out button doesn't work. Not sure if that relates to your branch or not but if you could take a look that would be awesome.

You're using ondragstart and ondragend for props with the map. On MapWithList, etc. we use the onclick prop to close a pin. Might be worth trying that?

[LahuenGR]

Hey @LahuenGR I've sorted out the complex rebase that was needed on this branch after we merged in a big refactor.

I've run the branch locally and I think there's a couple more bits to finish. If you won't have time to do it, no worries, just let me know and I can finish it off.

1. Let's move those controls (+/- and location search) to the top. 2. For some reason the zoom out button doesn't work. Not sure if that relates to your branch or not but if you could take a look that would be awesome.

You're using ondragstart and ondragend for props with the map. On MapWithList, etc. we use the onclick prop to close a pin. Might be worth trying that?

Hello sr!, i was waiting for your review hahaha

Nice, i'll be trying to solve those things <3