Add related categories to "More Info" section on add-on details

[tofumatt]

Add related categories to "More Info" section on add-on details. Need to double-check if this has UX mocks, I don't recall them...

[muffinresearch]

Currently the data only has the slug. Filed https://github.com/mozilla/addons/issues/4781

[muffinresearch]

mozilla/addons#4781 was wont-fixed so we will be needing to make an additional call to get the categories for the add-on.

[muffinresearch]

@pwalm it doesn't look like add-on categories are currently represented in the more information panel

Ignore me - I didn't see them for looking. They are here:

[willdurand]

@muffinresearch is it still something we want to implement?

[jvillalobos]

Yes, we still want categories to be linked from the listing.

[muskangupta-iitr]

@willdurand @jvillalobos Can I take up this issue for adding related categories in More Information section of add-ons ?

[willdurand]

@willdurand @jvillalobos Can I take up this issue for adding related categories in More Information section of add-ons ?

Yep

[muskangupta-iitr]

@willdurand Just want to ask few doubts: For example: Categories for DuckDuckGo Plus looks like:

categories: {
       android: [
            'feeds-news-blogging',
            'security-privacy'
       ],
       firefox: [
            'privacy-security',
            'search-tools'
       ]
},

Just want to confirm that I have to first check the clientApp whether it is firefox or android and then list categories accordingly ? And only category slug is coming in the object, name is not there ? For UI, I am thinking to show categories as same as in the extension section. Any comments ?

[jvillalobos]

Just want to confirm that I have to first check the clientApp whether it is firefox or android and then list categories accordingly ?

Yes.

For UI, I am thinking to show categories as same as in the extension section. Any comments ?

See the mockup in this comment for how it should look.

[muskangupta-iitr]

categories: {
       android: [
            'feeds-news-blogging',
            'security-privacy'
       ],
       firefox: [
            'privacy-security',
            'search-tools'
       ]
},

And only category slug is coming in the object, name is not there ?

Any suggestion on this?

[muskangupta-iitr]

@willdurand @jvillalobos I have created a draft PR becuase currently category name is not coming with the object. Please review the current changes and how should we further proceed on this ?

[willdurand]

@willdurand @jvillalobos I have created a draft PR becuase currently category name is not coming with the object. Please review the current changes and how should we further proceed on this ?

Yeah, we'll have to look into the categories reducer to see if we have the categories loaded (and fetch them otherwise). This is going to be complex :)

[muskangupta-iitr]

@willdurand Can we fetch a category details individually using its slug? or Can we fetch all categories related to a addon separately? For solving this issue I gone through the backend and there are no api for fetching individual category or addon related category. I am really stuck at this moment, what should I do?

[willdurand]

@muskangupta-iitr so we can't fetch one category but we can fetch all the categories (once!) and then use them. This is how we do it for category pages: https://github.com/xlisachan/addons-frontend/blob/4c604542c6f8d785bfe7586df3d677f0355584fd/src/amo/components/Categories/index.js#L87

We will have to make sure that we only fetch the categories if we need to. There is a categories reducer that stores the categories by appName (so firefox or android) and then by addonType (extension, theme, etc.).

[muskangupta-iitr]

Ohk @willdurand I will update the PR with the suitable changes. Thanks :+1: But why can't we add a API for fetching a single category as it might be used in future or we can serialize the addon category with whole category serializer?

[muskangupta-iitr]

@willdurand For now I pushed a commit in which I am fetching categories in AddonMoreInfo component and it's working fine. But I am facing problems in writing its tests for categories.

[bobsilverberg]

@muskangupta-iitr I can help you with this. I'll take a look at the PR later and we can discuss it there.

[muskangupta-iitr]

@bobsilverberg Thanks! I will let you know if I get stuck anywhere.

[bobsilverberg]

Just a note: A lot of work was done towards this in https://github.com/mozilla/addons-frontend/pull/9253, which was unfortunately abandoned by the contributor. When this is next taken up by someone, it probably makes sense to use the code from that PR as a starting point, as it has already been heavily reviewed.

[xlisachan]

@bobsilverberg , can I work on this?

[bobsilverberg]

@xlisachan It looks like @eviljeff just added this to a project that he is working on for Q3, so I'm going to suggest you discuss it with him, in case it's something that he prefers to take on himself.

[eviljeff]

@xlisachan you can go ahead and work on it - I just added it to the project because Jorge mentioned it as something he'd like to be implemented while we're doing something similar with exposing tags in the add-on details section. But it's not connected to that work directly (and I appreciate it being taken off my plate 😄)

[ioanarusiczki]

@willdurand @xlisachan

• "Related categories" is present into "More information" card for extensions and static themes. Could not find UX issues while resizing the detail pages.
• as functionality, I think it works as expected, I chose 2 categories from dev hub, changed them and then checked if the URLs redirect correctly to those categories. I did not run into errors. Extensions can display 2 categories, themes have one option.
• looks good on Android too.