(multiple issues) Fix UI flow and debug dashboard location input form

[jywarren]

We have a feature where you can add your location from the dashboard -- https://publiclab.org/dashboard (while logged in):

You click "Add your location" and a modal popup appears, prompting you:

Unfortunately, as @Tlazypanda noted, this doesn't really work smoothly, both due to possible UI design gaps (no notification to the user when tags are created) and possibly bugs. @Tlazypanda noted:

• clicking "Save" doesn't apparently do anything, because you're just dropped back on the dashboard
• On adding location modal, the slider works by zooming in but when we save it and check it out in the profile page it is saved without any zoom.
• Also after adding your location it still shows add location on dashboard
• This is invoked by adding location from dashboard but on clicking share location from profile page nothing happens.
• Also after adding location for first time, it doesn't seem to update for a second time

Even after fixing this, we also ought to add a system test for adding profile tags - like, one of these modified for the dashboard!

plots2/test/system/post_test.rb

Lines 188 to 211 in 86776c2

	test 'adding a location to the wiki' do
	visit '/wiki/wiki-page-path/'
	# Toggle "Add location" modal
	find('a.btn-location').click()
	# Enter a location
	find('#map_content #coord_button').click()
	find('#map_content #lat').set("22")
	find('#map_content #lng').set("76")
	# Save the location
	find('#blurred-location-modal .btn-primary').click()
	# Wait for the location to be added
	wait_for_ajax
	# there should also be a page reload now, because we want to reload to see the sidebar mini-map
	find('a#tags-open').click()
	# Make sure proper latitude and longitude tags are added
	assert_selector('.tags-list .badge a[href="/tag/lat:22"]', text: "lat:22")
	assert_selector('.tags-list .badge a[href="/tag/lon:76"]', text: "lon:76")
	end

We could add one of these assertions afterwards that checks that the profile tags are properly created:

plots2/test/system/tag_test.rb

Lines 40 to 51 in 86776c2

	test 'adding a tag to a user profile' do
	visit "/profile/jeff"
	# run the javascript function
	page.evaluate_script("addTag('specialgroup', '/profile/tags/create/2')")
	find('#tags-section').click
	# check that the tag showed up on the page - check last tag in list
	within('.tags-list') do
	assert_equal('specialgroup', all('.tag-name').last.text.rstrip.lstrip)
	end

Intended workflow

The ideal intended workflow is:

1. See "add a location" on dashboard, click it
2. See modal and check content of one or more of the inputs
3. enter lat/lon and zoom, or use the slider
4. press Save and see an alert (maybe?) that says "profile location was saved. Learn more about location privacy" - linking to https://publiclab.org/location-privacy
5. confirm dashboard button now says "View nearby content
6. confirm tags were added and appear on profile page

[khadija-nur]

Hi can I work on this issue?

[tawahpeggy]

@khadija-nur have you started working on this issue already? if yes we can work on it together since the issue's description is kind of lengthy. why don't we use this issue as a means of starting our pair pogramming journey.

[aissshah]

This looks interesting and I would like to team up as well! @khadija-nur @tawahpeggy

[tawahpeggy]

ok @aissshah that will be awesome. i guess we are both waiting on @khadija-nur to confirm.

[khadija-nur]

Sorry I've already started working on it with others @tawahpeggy Hopefully another issue comes up soon

[tawahpeggy]

Ok no problem. Hopefully I'll find an issue

…

On Wed, Oct 14, 2020, 5:46 PM khadija ***@***.***> wrote: Sorry I've already started working on it with others @tawahpeggy <https://github.com/tawahpeggy> Hopefully another issue comes up soon — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#8566 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJT4KDWBZJ5CHMLKSIXDXUTSKXIWDANCNFSM4SPUGEXQ> .

[jywarren]

Hi all! Thank you so much for your help. I think this may best be completed in a few different parts:

• clicking "Save" doesn't apparently do anything, because you're just dropped back on the dashboard: let's ensure we add a flash[:notice] telling the user that the location was saved! Or, it may require the use of the noty helper to make an alert appear in pure Javascript:

  plots2/app/views/spam2/_nodes.html.erb

  Lines 118 to 122 in baa7e7c

  	notyNotification('relax', 3000, 'danger', 'topRight', 'Node deleted');
  	});
  	$('#n<%= node.id %> .publish').bind('ajax:success', function(e){
  	$('#n<%= node.id %>').hide()
  	notyNotification('relax', 3000, 'success', 'topRight', 'Node published');

• ensuring that a tag such as zoom:_____ (like, zoom:8) is saved on the profile page once this form is submitted - should be done in this controller, i believe!
• after adding your location it still shows add location on dashboard - we should check if lat:____ and lon:____ user tags exist and switch to a button saying Nearby activity, linking to a page like https://publiclab.org/map/#6/18/-66 (with zoom/lat/lon built into the URL (template here:

  plots2/app/views/sidebar/_dashboard.html.erb

  Lines 20 to 28 in 27a3839

  	<% if current_user %>
  	<div style="margin: 2.2rem 0;">
  	<a class="btn btn-lg btn-outline-secondary blurred-location-input" submit_to="/profile/tags/create/<%= current_user.uid %>"><i class="fa fa-map-marker" style="color:#c40;"></i> Add your location</a>
  	<p style="font-size: smaller; margin: 0.3rem 0;">
  	Add your location to see work near you<br>
  	<a href="https://publiclab.org/location-privacy" target="_blank">About location privacy »</a>
  	</p>
  	</div>
  	<% end %>

  )
• on clicking share location from profile page nothing happens - let's ensure the button on /profile works too, and write a test to protect it
• after adding location for first time, it doesn't seem to update for a second time - so, let's be sure that in https://github.com/publiclab/plots2/blob/main/app/controllers/user_tags_controller.rb#L35, we /replace/ location tags, perhaps? this is probably a big enough issue to break out by itself.

Each of these may need a test to protect it, so take a look at the example tests and assertions above!

I recommend folks pick one, and we'll coordinate from here!

[khadija-nur]

Thanks for the additional info @jywarren, they're super helpful

[gauravahlawat81]

I would like to work on this issue if it's not assigned to someone else. CC: @jywarren

[gauravahlawat81]

@jywarren When we click Add location on dashboard, the location doesn't get saved, but when we go on the profile page and the location isn't added yet, Share your Location will prompt you to add the location first,after adding location, it indeed saves the location. This seems weird and I will be looking into this deeply!

[Manasa2850]

@jywarren clicking on the Share your Location button in the profile page does not do anything. (4th item in your checklist)
I would like to take this up and try to fix it.

[coder645]

@Manasa2850 sure go ahead! Good luck!

[gauravahlawat81]

Hey @Manasa2850 , thanks for the help, I have already started working on this and I would love to collaborate! 👍

[Manasa2850]

Awesome @gauravahlawat81! I just saw your PR regarding saving the location.
Could I work on enabling the Share your Location button from the profile page?

[coder645]

Sure @Manasa2850 please go ahead and take that up!
Cheers!

[Manasa2850]

Thanks @coder645. I'll start working on it then!

[gauravahlawat81]

Could I work on enabling the Share your Location button from the profile page?

Sure no problem, I am currently working on displaying Nearby Activity button if the location exists!

[gauravahlawat81]

@Manasa2850 could you please help me with writing tests for the code that I have written till now ? It seems to me that you are very well versed with writing tests! 😄

[gauravahlawat81]

We can work together on this and I will get to learn a lot from you, I believe! 🤓

[coder645]

@gauravahlawat81 I can help you with that mate! ❤️

[gauravahlawat81]

Thanks @coder645 !

[Manasa2850]

Sure @gauravahlawat81. I'm not an expert in this too but I'll definitely try to help!

[coder645]

@gauravahlawat81 please be respectful of others.
Not everyone who contributes here is there on Gitter.

[coder645]

@cesswairimu could we have some sort of mechanism / code of conduct to ensure people (here @gauravahlawat81 and maybe some other time myself) don't make disrespectful comments and then delete it?
Cheers!

[cesswairimu]

We do have a code of conduct, you can find it in the documentation... Cheers

[coder645]

@gauravahlawat81 I suggest that you take a look at that and not make disrespectful comments from next time onwards.
Cheers!

Thanks @cesswairimu 👍

[cesswairimu]

Great collaboration here @Manasa2850 @gauravahlawat81 🎉 🎉