Addons-frontend: Collapse text in long add-on reviews

[kumar303]

Describe the problem and steps to reproduce it:

• Write a really long add-on review
• As a developer of the same add-on, reply to that review with a really long response

What happened?

It looks pretty bad on the detail page:

Full page screenshot

What did you expect to happen?

The text should be collapsed with a Read more link

Anything else we should know?

This also looks pretty bad on the review listing pages.

We should be able to use ShowMoreCard for this.

[biskit1]

Hey, can I work on this?

[caitmuenster]

Go for it, @biskit1!

[kumar303]

Hi @biskit1 -- let me know if you have any questions. I know you've already landed a few patches (thanks!) so you probably have things set up.

[biskit1]

Hi everyone,
Just wanted to post an update and say that I haven't forgotten about this. Been a little bogged down with school work, but aiming to open a PR within the next week or so and will post any questions I have over there once it's open.

Thanks!

[SeanPrashad]

@biskit1 To make sure you're not wasting any time Chaya, this is still (_unfortunately_) reproducible 😓:

Finding the problematic code

I know you still have more assignments to do so I did some digging using the React developer tools for FF and found the code that renders a users' review:

https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/amo/components/AddonReviewCard/index.js#L472-L478

Notice the review prop? It has a body field which contains the text a reviewer writes:

https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/ui/components/UserReview/index.js#L101

Finding a solution

Over in the ShowMoreCard, it looks like the contents of the card (_aka. we want this to be the user review from {body} above_) is found here:

https://github.com/mozilla/addons-frontend/blob/f71a19331ba96d409ea4d91b0f89a65a383198c9/src/ui/components/ShowMoreCard/index.js#L149-L154

Ok, this is good - I think we have found most of the puzzle pieces to begin swapping out some code 😺

I always like reading what's in the existing codebase as it gives a ton of hints on what the devs have done. For instance, how in the world would you or I know how to use the ShowMoreCard component? Well, we can see how it's being used currently for starters:

https://github.com/mozilla/addons-frontend/blob/46153975233548acd64239dad5c5b39ede3e71a8/src/amo/pages/Addon/index.js#L344-L352

I hope this helps to get you going!! ✌🏽

[suhailsinghbains]

Hi, Can I please work on this bug?
Thanks

[Shubhamchinda]

Hey @kumar303 , Can I give it try?

I see @biskit1 did a great job. I only need to add the test case now, right?

Thanks!

[biskit1]

Hey @Shubhamchinda, I don’t have time to finish this up, but yes, it just needs a test case.
Good luck! 👊🏼

[kumar303]

@Shubhamchinda thanks for jumping in. Let me know if you have any questions.

[TheSTL]

I'm working on this issue.

[ioanarusiczki]

@bobsilverberg Verified on dev with FF73(Win10) and FF68.4.2 (Android 9.0). - looks good to me

Addon detail page

Reviews detail page