Openfoodnetwork: Instagram links not working

[sstead]

Description

In Enterprise Setting > Social there is a field to insert an Instagram link. This link will appear on enterprise profiles. If the instagram page is https://www.instagram.com/happyfarm/ the link needs to be in the format "happyfarm".

Currently there is no pointer telling the user that this is the required format. As a results, there are multiple different ways that people include the link, most of which lead to broken links on their profile.

Link formats that will work: happyfarm
Link formats that do not work: /happyfarm, @happyfarm, https://www.instagram.com/happyfarm/ and www.instagram.com/happyfarm/

Expected Behavior

Users can find out what format the link needs to be in.
If a user puts in a link in a format that's wrong, the link either corrects, or there is an error message.

Actual Behavior

Users don't know what to enter.
If they do enter an incorrect format there's no error message, so they don't know that the link will be broken. The link also doesn't autocorrect, so the instance can have many many profiles with broken links, which looks unprofessional.

Steps to Reproduce

1. Go to any enterprise settings, and go to the "social" tab
2. See instagram field, no suggestion is shown.
3. Try to put in an incorrect format. You'll notice that the link is accepted even if wrong. Look the result from frontend on your profile, you'll see the link is broken.
4. Try to put Instagram link in the "happyfarm" only format, and look the result on the frontend. Link works.

Context

This issue is leading to lots of broke links in the directory.
It's also frustrating for users who are creating their profile because they don't know what format we want the link in.

Severity

S4 (UX issue I would say as the software is working as expected but the user doesn't know what to do)

Your Environment

PC, French production, Chrome

Possible Fix

As at Noverber 9th 2018 the following fix has been decided. We tried to implement this fix via PRs https://github.com/openfoodfoundation/openfoodnetwork/pull/2859 and https://github.com/openfoodfoundation/openfoodnetwork/pull/2849, but as mentioned on 2849 there were some issues.

Fix 1

• When a user first enters their social media links, if the instagram link is in any of the following four formats (@happyfarm, /happyfarm, https://www.instagram.com/happyfarm/ or www.instagram.com/happyfarm/) the form should convert the link to the correct shorthand format (happyfarm)
• If the system can't recognise the link, and can't convert it, there should be an error message when the user saves the form.
  

Fix 2 -

• We should add a suggestion to the Instagram field so that the user knows what format to use.
  
• We should ensure that any pre-existing profiles that have links in any of the four formats (@happyfarm, /happyfarm, https://www.instagram.com/happyfarm/ or www.instagram.com/happyfarm/) are converted to the correct shorthand format (happyfarm)
• If a pre-existing profile has an instagram link in a format which cannot be converted, the next time that user tries to save their Enterprise settings, they should see the error message pictured above.

Note: Fix 1 and Fix 2 should be merged close to each other in time. If Fix 1 is merged without Fix 2, pre-existing profiles with incorrect links will get an error message without knowing what the correct format their link should be in.

[sineadfenton]

Instructions on social page

[sineadfenton]

Hey,

I'd agree here and think it would be a quick fix that saves a lot of support time (have spent a while rectify lots of enterprises who have got this wrong)

Our suggestions here are also to have the tooltip directing users how to enter this information

S

[dannyd4315]

Happy to pick this one up as a first commit, if thats ok?

[sauloperez]

Cool @dannyd4315 ! we're also experiencing the same problem while onboarding new enterprises in our OFN instance.

[lin-d-hop]

Thanks @dannyd4315 This is a great one to pick up.

I think it would be good to be consistent with the linkedin and facebook links and require the whole URL to be input. I think for twitter people are more used to referring to each other by only the handle so this can be different (eg @mytwitter rather than https://www.twitter.com/mytwitter)

-> Change field so that it does not replace "input" with "https://www.instagram.com/input"
-> Be sure that this does not break existing enterprises that might have put in full url or just the handle
-> Check we have a translatable string for the example "eg. https://www.instagram.com/myinstagrampage"

[dannyd4315]

@lin-d-hop There is actually already translatable placeholders in the locale files, so not sure why they were not in there, the instagram one isn't quite right however and breaks. So will clean that up. Also with regards to existing enterprises, I could build a rake task that checks and updates all existing enterprises inputs to the new format? Unless you another idea?

With regards to instagram, we currently ask for '@namegoeshere' would you prefer that or just the username without the '@'. It should really be consistent throughout the site. So will update all instances to reflect this.

Finally I am not too sure what you mean about the first point? - "-> Change field so that it does not replace "input" with "https://www.instagram.com/input" Could you confirm?

[dannyd4315]

On second thoughts the current plans shouldn't break full url's or handles for current enterprises. They would work in both instances. Or not work at all in both...

[lin-d-hop]

_I think it would be good to be consistent with the linkedin and facebook links and require the whole URL to be input._
So, let's just ask for the URL in the same way as we ask for it in the linkedin and facebook links.
Required Input format: "https://www.instagram.com/myinstagrampage"

_-> Change field so that it does not replace "input" with "https://www.instagram.com/input"_
By this I mean, now that we ask the user to input the whole URL we need to reflect this by not appending https://www.instagram.com/ in code.

For any that are in the DB already I agree that we build a rake task to fix any that are different to this format. This should fix links for any currently broken ones as well.

Does that make more sense?

[sauloperez]

For any that are in the DB already I agree that we build a rake task to fix any that are different to this format.

We should create a data migration instead.

Agree on @lin-d-hop 's over all feedback

[dannyd4315]

Cheers @lin-d-hop, makes sense.

[mkllnk]

Yes, I agree that we should use a data migration instead of a rake task.

What if people just put in their page name? Should we check for that and then save it in the database with the complete URL or not bother?

[sauloperez]

I'm not sure the extra logic to check the account is worth it @mkllnk

[dannyd4315]

@mkllnk and @sauloperez apologies, not sure why a data migration would be a better option than a rake task?

[sauloperez]

Migrations are designed to be the means of applying incremental changes on the database. Rails keeps them as a log of historicall changes so you can kind of reproduce the state of the database but also track what changes were applied (like Git).

It also ensures that each migration is only run once (although of course you can re run it if you need) and in every environment (dev, prod, staging) and OFN instance (Aus, Uk, France, etc.).

[mkllnk]

Okay, sure, not that important.

[myriamboure]

Ok so folks I have read all the comments and tried to clarify the options we have before we jump on a solution. Please read description and tell me if you agree with me that option 1 is the one to choose?
@sstead @lin-d-hop @sauloperez @mkllnk ?
I think it does the job, require much less work, and also is better UX regarding user habits about Instagram profile (more comparable to Twitter to me than Facebook or Linkedin).

Waiting for your feedback before deleting the option we don't keep so that the work to be done is clear.

[mkllnk]

Option 3

It does not matter if people enter their handle or the whole URL. If they enter the whole URL, we extract the handle and store only the handle in the database.

We don't need a database migration, but we could add one to search for URLs and convert them to handles to fix currently broken profiles. It's not that difficult.

[myriamboure]

I added your option 3 @mkllnk
@sstead can we have your preference on it ? Maybe also @sineadfenton ? @RachL ?
My vote still goes for option 1 as I think it's still much less work and we have lots of more important things to do. If we do the value matrix I guess option 1 is the one that adds most value for less work, even if others add a bit more value but more work too. But I'm not familiar with users habits on Instagram, almost no users use instagram in French instance for now, so if others have an opinion happy to follow them.

[sstead]

I had a look at 10 random profiles with instagram links and 3 of the 10 had put the full URL, so i suppose I can support option 1 for now, ideally option 3 one day.

[albarnaz]

If it`s ok I'm happy to work on option 1. Then you can see and decide if its the best solution.

[myriamboure]

Awesome @albarnaz ! If anything is unclear, please ask :-) Welcome to the OFN world !!!

[lin-d-hop]

Shopfront Instagram links not working

[reuschelcm]

My group and I have taken a look at it and could pick this issue up! It's been a while since it's been worked on, and I see that there's been a few ideas tossed around. I was wondering which of the options (1, 2 or 3) you would like to be implemented?

I see that 2 is more or less implemented with the sample text. I see that in earlier builds fix 1 was implemented in 'enterprise.rb', but had some issues and was removed. I know the plan before was to merge fixes 1 and 2. Is this still the case? I just am checking before I proceed!

[sigmundpetersen]

Hey @reuschelcm yes please go ahead! There was an attempt at solving this in #3238, please have a look at how far that got and maybe you would like to continue on what was done in that PR.

You're welcome to join our Slack https://openfoodnetwork.org/slack-invite and ask us anything

[mkllnk]

Yes, I think the tasks are:

• Provide a hint in the input field (not sure if that has been done).
• Validate format of input on the server (done).
• Convert valid formats to the one we use in the database, pseudo only (done).
• Migrate existing invalid entries to make them valid or remove (check migrations if this happened in the past, I don't think so).
• Bonus: use HTML5 input validation to give immediate feedback to the user.

[reuschelcm]

Thanks, sorry for the late response. I've been experimenting and trying to get a grasp on parts of the code.

I had a few questions about that checklist, as some of it seems conflicting, but I could be wrong

• _Provide a hint to the input field (not sure if that has been done)_
  This seems to be done on the current version? ie. eg: the_prof in the input field?

• _Validate format of the input on the server (done)_
  If I am correct, this was the case the version of OFN in issue #3238, but is no longer done now? It seems that when anything is entered to the Instagram field, it is accepted regardless of format. Unless I'm interpreting what's being validated incorrectly. I did see there was a validate statement used in the build for the referenced issue that did work for most cases, but not all. I did inject

• _Convert valid formats to the one we use in the database, pseudo only (done)_
  This also doesn't seem to be in the current version? The version in the referenced issue used a regex statement that worked for most cases, but failed in a few with the tests. I believe one of the updates requested for this was to remove the '@' if just the handle with the symbol was entered?

• _Migrate existing entries to make them valid or remove_
  It appears there was a migration attempt back in 2018 to try to make the links valid, but no attempt to remove invalid links that could not be converted. I'll definitely take a look at this.

• _Bonus: use HTML5 input validation to give immediate feedback to the user._
  This would be very useful to implement. I'll see if my team can get this implemented.

Thanks for your time. I just wanted to verify this list before I proceed further, to make sure the changes I implement are what is wanted.

[mkllnk]

Thank you for looking into this, @reuschelcm. And sorry for my confusing summary before.

Provide a hint to the input field

Right, this is done.

Validate format of the input on the server

You are right. That pull request was never merged and this is not done.

Convert valid formats to the one we use in the database, pseudo only

You are also right here. This needs doing.

Migrate existing entries to make them valid or remove

This needs to happen after all the validations are in place.

[reuschelcm]

@mkllnk no worries, thanks for the update. I'll continue to look at the regex and see if I can get it to pass for all the tests.

Once that's done, I'll then see if I can get those entries migrated

Also, after these changes are made, instagram will be the only social media that is validated. I assume in the future that we'd want to validate all social media in some way? (ie Twitter, facebook, etc.)

[mkllnk]

Yes, more validation would be awesome.

[daniellemoorhead]

Hiya @reuschelcm, just checking to see if you'll be working on this again? It's been a couple of weeks since last activity, would be great if you could push through a PR, or we can pop it back into Dev Ready for someone else to pick up.

Let us know 😄

[reuschelcm]

Apologies for the absence, current events have made progress a bit slow.

I am still working on the migration, but I have a working fix for the validation of the Instagram links, and accompanying tests. It'll just need to be checked so that it is up to standards of the code base.

I just need to resolve an issue with getting my branch to push with my team's fork. I should have a PR up within 24 hours. Thanks for your patience!

[daniellemoorhead]

Awesome!

On 23 Mar 2020, at 7:11 am, reuschelcm [e-mail] wrote:


Apologies for the absence, current events have made progress a bit slow.

I am still working on the migration, but I have a working fix for the validation of the Instagram links, and accompanying tests. It'll just need to be checked so that it is up to standards of the code base.

I just need to resolve an issue with getting my branch to push with my team's fork. I should have a PR up within 24 hours. Thanks for your patience!

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[marthaerm]

Hi everyone! I would like to pick this issue, I saw that this PR https://github.com/openfoodfoundation/openfoodnetwork/pull/5052 was opened and I would like to dig into it and continue working on the issue as my first contribution to this project :)

[mkllnk]

:wave: :sun_with_face: Welcome @marthaerm! It's awesome that you are picking this up. If you need any support, you can head to the #dev channel on Slack and ask your questions there. Let us know how you go.

[marthaerm]

@mkllnk Great! Thanks! I'll join that channel on Slack! And I'll give you any update!

[Matt-Yorkley]

Welcome @marthaerm :wave:

Just a quick heads-up; this issue is 3 years old and a lot has changed in that time. It might be worth pulling the master branch and checking if this issue can be replicated as a first step. It might be fixed already, in which case we can close it and you could grab another issue :smile:

[marthaerm]

@Matt-Yorkley ok! Thanks for the heads up, I'll start by replicating the issue!

[marthaerm]

Hey guys! I've been tryin to reproduce the error on the master branch, and yes, the issue is still there, i added this instaram link https://www.instagram.com/happyfarm/ and you can see in the image that is not converted.

I would like to continue with this https://github.com/openfoodfoundation/openfoodnetwork/issues/1760#issuecomment-590898986 approach, I see some of these things implemented on this PR #5052

[sauloperez]

All yours @marthaerm