[Task]: Move Report this add-on link on AMO listing page

[abyrne-moz]

Description

Remove the Report this add-on button from the Rate your Experience card, and create a text link for this called Report this add-on under the Version listing in the More Information card.

Acceptance Criteria

  ### Milestones/checkpoints
  - [ ] Report this add-on button removed from Rate your Experience card
  - [ ] Report this add-on text link under the `Version` listing in the `More Information` card
  - [ ] Update [SUMO page](https://support.mozilla.org/en-US/kb/reporting-extensions-and-themes-abuse) with new UI

Checks

• [x] If I have identified that the work is specific to a repository, I have removed "repository:addons-server" or "repository:addons-frontend"

┆Issue is synchronized with this Jira Task

[diox]

Note: for consistency, we should probably also make the other "Report this XXX" (user, collection) links instead of buttons

[KevinMind]

@abyrne-moz are you suggesting that the link be added "under the version" or in a new section, that is under the version? Could you share a screenshot of the expected UI?

Specifically, adding a non-version specific link in between version specific information can be confusing as you are not reporting a version but the addon itself.

[KevinMind]

@topotropic can you update the screenshot and verify the positioning of the link?

[abyrne-moz]

[diox]

@abyrne-moz see comment above:

Specifically, adding a non-version specific link in between version specific information can be confusing as you are not reporting a version but the addon itself.

The "Report this add-on" applies to the entire add-on, especially when you are on the listing page on AMO. It's not necessarily related to the specific version of the add-on.

This is why we suggested to move the link to the very bottom, perhaps with an additional margin to separate it from the whatever is at the bottom of that card (depends on the add-on).

[abyrne-moz]

Oh, I thought it reported a version. Moving it to the very bottom is fine by me!

[diox]

Basic implementation proposal from me:

• Reuse ReportAbuseButton but make it a link, change the name
• Add it to AddonMoreInfo component at the end inside an (addon && ...) block
• Add a margin-top of ~~15px~~ 24px to the style (to separate from the rest and be consistent with other margins)
• Downgrade the header in the success message shown in case the user visits the detail page again to a <h4>.

It should look something like this:

[KevinMind]

In the screenshot the link is styled as clicked.. What would the style be when it is not yet clicked? normal blue? I would consider maybe a bold grey as it is not really "info" related to the addon but a different kind of link for you to do something.

[diox]

I had already visited the link when I made the screenshot 😅

I'm no UX person but given that there are already grey/black text in that box I'm not sure it would be an improvement. The figma for the new design also uses the regular blue w/ underline style.

[diox]

We should note when this goes to prod to see if we noticed a difference in incoming reports.

[abyrne-moz]

We should note when this goes to prod to see if we noticed a difference in incoming reports.

Is there a way I can watch the patch to see when it lands?

[diox]

All changes that land are available on dev within a few minutes of the issue being closed (and then are available on stage on Tuesday evening CET the week before the deploy to production). QA will also comment on the ticket when they verify on these envs.

[ioanarusiczki]

I am not sure how this is possible but atm I see this change on -stage but not on -dev ?

[ioanarusiczki]

Lgtm on -stage on Win, macOS, Android.

[diox]

Yeah dev frontend deploys are a bit broken right now following some changes in the way we deploy dev.

[ioanarusiczki]

Now, it's on dev too.