Adjust rating card layout and show rating breakdown (#13661)

* Adjust rating card layout and show rating breakdown

* simplify header code in Addon card; localize "Click to Rate"

* add a consistent gap around rating review buttons/ui

* add flex-wrap, to account for smaller RatingManager widths

Author: eviljeff

src/amo/components/AddonReviewCard/styles.scss

@@ -166,6 +166,7 @@
 
   .AddonReviewCard-confirmDeleteDialog {
     margin-top: 12px;
+    margin-bottom: 6px;
     text-align: center;
     width: 100%;
 
@@ -216,6 +217,7 @@
     background-color: transparentize($blue-50, 0.95);
     border-radius: $border-radius-default;
     padding: 12px;
+    margin-bottom: 6px;
 
     @include respond-to(medium) {
       padding: 12px 24px;

src/amo/components/Rating/styles.scss

@@ -21,15 +21,14 @@ $icon-small: 13px;
   // The width of large rating stars are controlled by the container.
   &.Rating--large {
     grid-column-gap: 6px;
-    max-width: 300px;
-    min-height: 64px;
+    max-width: 250px;
+    min-height: 32px;
     width: 100%;
   }
 
   @include respond-to(extraExtraLarge) {
     &.Rating--large {
       grid-column-gap: 12px;
-      max-width: none;
     }
   }
 }

src/amo/components/RatingManager/index.js

@@ -16,6 +16,7 @@ import {
 import AddonReviewCard from 'amo/components/AddonReviewCard';
 import AddonReviewManagerRating from 'amo/components/AddonReviewManagerRating';
 import RatingManagerNotice from 'amo/components/RatingManagerNotice';
+import RatingsByStar from 'amo/components/RatingsByStar';
 import { selectLatestUserReview } from 'amo/reducers/reviews';
 import AuthenticateButton from 'amo/components/AuthenticateButton';
 import {
@@ -189,14 +190,14 @@ export class RatingManagerBase extends React.Component<InternalProps> {
           'Are you sure you want to delete your rating of %(addonName)s?',
         );
       }
-    } else {
-      prompt = i18n.gettext('How are you enjoying %(addonName)s?');
     }
 
-    const promptHTML = sanitizeHTML(
-      i18n.sprintf(prompt, { addonName: `<b>${addon.name}</b>` }),
-      ['b'],
-    );
+    const promptHTML = prompt
+      ? sanitizeHTML(
+          i18n.sprintf(prompt, { addonName: `<b>${addon.name}</b>` }),
+          ['b'],
+        )
+      : null;
 
     return (
       <form action="">
@@ -209,6 +210,7 @@ export class RatingManagerBase extends React.Component<InternalProps> {
           {/* eslint-enable react/no-danger */}
           <div className="RatingManager-ratingControl">
             {!this.isSignedIn() ? this.renderLogInToRate() : null}
+            {i18n.gettext('Click to rate:')}
             {userReview && onDeleteScreen ? (
               <AddonReviewManagerRating
                 className="RatingManager-AddonReviewManagerRating"
@@ -267,6 +269,7 @@ export class RatingManagerBase extends React.Component<InternalProps> {
             slim
           />
         )}
+        <RatingsByStar addon={addon} />
       </div>
     );
   }

src/amo/components/RatingManager/styles.scss

@@ -3,7 +3,8 @@
 .RatingManager-ratingControl {
   align-items: center;
   display: flex;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 6px;
   position: relative;
 }
 
@@ -19,6 +20,10 @@
 }
 
 .RatingManager {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
   fieldset {
     // Prevent content overflow.
     min-width: 0;
@@ -32,10 +37,6 @@
   }
 }
 
-.RatingManager-UserRating {
-  margin: 12px;
-}
-
 .RatingManager-savedRating-withReview {
   margin-bottom: 12px;
 }

src/amo/pages/Addon/index.js

@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 
 import { setViewContext } from 'amo/actions/viewContext';
 import AddAddonToCollection from 'amo/components/AddAddonToCollection';
-import AddonBadges from 'amo/components/AddonBadges';
+import AddonBadges, { roundToOneDigit } from 'amo/components/AddonBadges';
 import AddonCompatibilityError from 'amo/components/AddonCompatibilityError';
 import AddonHead from 'amo/components/AddonHead';
 import AddonInstallError from 'amo/components/AddonInstallError';
@@ -244,17 +244,35 @@ export class AddonBase extends React.Component {
       content = i18n.gettext('No reviews yet');
     }
 
+    let header;
+    if (addon && addon.ratings && addon.ratings.count !== undefined) {
+      const roundedAverage = roundToOneDigit(addon.ratings.average);
+      const ratingCount = addon.ratings.count;
+      header = i18n.sprintf(
+        // eslint-disable-next-line max-len
+        // L10n: ratingAverage is a number rounded to one digit, such as 4.5 in English or ٤٫٧ in Arabic.
+        i18n.ngettext(
+          'Rated %(ratingAverage)s by 1 reviewer',
+          'Rated %(ratingAverage)s by %(ratingCount)s reviewers',
+          ratingCount,
+        ),
+        {
+          ratingAverage: i18n.formatNumber(roundedAverage),
+          ratingCount: i18n.formatNumber(ratingCount),
+        },
+      );
+    } else {
+      header = <LoadingText minWidth={30} />;
+    }
+
     const props = {
       [footerPropName]: (
         <div className="Addon-read-reviews-footer">{content}</div>
       ),
     };
+
     return (
-      <Card
-        header={i18n.gettext('Rate your experience')}
-        className="Addon-overall-rating"
-        {...props}
-      >
+      <Card header={header} className="Addon-overall-rating" {...props}>
         {ratingManager}
       </Card>
     );

tests/unit/amo/components/TestRatingManager.js

@@ -110,7 +110,7 @@ describe(__filename, () => {
     return { addon, review };
   };
 
-  it('prompts you to rate the add-on by name', () => {
+  it('doesnt show any prompt when not deleting', () => {
     const name = 'Some Add-on';
     render({
       addon: createInternalAddonWithLang({
@@ -119,9 +119,7 @@ describe(__filename, () => {
       }),
     });
 
-    expect(
-      screen.getByTextAcrossTags(`How are you enjoying ${name}?`),
-    ).toBeInTheDocument();
+    expect(screen.queryByText(`of ${name}?`)).not.toBeInTheDocument();
   });
 
   it('dispatches fetchLatestUserReview on construction', () => {
@@ -534,4 +532,15 @@ describe(__filename, () => {
       expect(screen.getAllByTitle('Rated 3 out of 5')).toHaveLength(6);
     });
   });
+
+  it('renders RatingsByStar with an add-on', () => {
+    const addon = fakeAddon;
+    render({ addon });
+
+    // Do a sanity check to make sure the right add-on was used.
+    expect(screen.getByTitle('There are no five-star reviews')).toHaveAttribute(
+      'href',
+      `/en-US/android/addon/${addon.slug}/reviews/?score=5`,
+    );
+  });
 });

tests/unit/amo/pages/TestAddon.js

@@ -386,7 +386,7 @@ describe(__filename, () => {
   it('renders without an add-on', () => {
     render();
 
-    expect(screen.getAllByRole('alert')).toHaveLength(6);
+    expect(screen.getAllByRole('alert')).toHaveLength(7);
   });
 
   it('renders without a version', () => {
@@ -1021,6 +1021,33 @@ describe(__filename, () => {
     expect(content).toHaveTextContent('100 Users');
   });
 
+  describe('ratings count header', () => {
+    const renderWithRatings = (average, count) => {
+      addon.ratings = { ...fakeAddon.ratings, count, average };
+      renderWithAddon();
+    };
+
+    it('mentions a single reviewer when there is only one rating', () => {
+      renderWithRatings(3, 1);
+
+      expect(screen.getByText('Rated 3 by 1 reviewer')).toBeInTheDocument();
+    });
+
+    it('mentions a multiple reviewers when there are many ratings', () => {
+      renderWithRatings(2.4, 5);
+
+      expect(screen.getByText('Rated 2.4 by 5 reviewers')).toBeInTheDocument();
+    });
+
+    it('localizes the review count', () => {
+      renderWithRatings(2.4, 10000);
+
+      expect(
+        screen.getByText('Rated 2.4 by 10,000 reviewers'),
+      ).toBeInTheDocument();
+    });
+  });
+
   describe('read reviews footer', () => {
     const renderWithRatings = (count) => {
       addon.ratings = { ...fakeAddon.ratings, count };