Bug 1556862 - Localizing empty discovery stream messages (#5179)

* Bug 1556862 - Localizing empty discovery stream messages

* Resolving nits, adding comment for timed out fluent id

* Should use unicode elipsis over manual dots

.eslintrc.js

@@ -48,7 +48,8 @@ module.exports = {
         "content-src/asrouter/templates/StartupOverlay/StartupOverlay.jsx",
         "content-src/components/TopSites/**",
         "content-src/components/MoreRecommendations/MoreRecommendations.jsx",
-        "content-src/components/CollapsibleSection/CollapsibleSection.jsx"
+        "content-src/components/CollapsibleSection/CollapsibleSection.jsx",
+        "content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState.jsx"
       ],
       "rules": {
         "jsx-a11y/anchor-has-content": 0,

content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState.jsx

@@ -52,13 +52,20 @@ export class DSEmptyState extends React.PureComponent {
 
   renderButton() {
     if (this.props.status === "waiting" || this.state.waiting) {
-      return <button className="try-again-button waiting">Loading...</button>;
+      return (
+        <button
+          className="try-again-button waiting"
+          data-l10n-id="newtab-discovery-empty-section-topstories-loading"
+        />
+      );
     }
 
     return (
-      <button className="try-again-button" onClick={this.onReset}>
+      <button
-        Try Again
+        className="try-again-button"
-      </button>
+        onClick={this.onReset}
+        data-l10n-id="newtab-discovery-empty-section-topstories-try-again-button"
+      />
     );
   }
 
@@ -66,7 +73,7 @@ export class DSEmptyState extends React.PureComponent {
     if (this.props.status === "waiting" || this.props.status === "failed") {
       return (
         <React.Fragment>
-          <h2>Oops! We almost loaded this section, but not quite.</h2>
+          <h2 data-l10n-id="newtab-discovery-empty-section-topstories-timed-out" />
           {this.renderButton()}
         </React.Fragment>
       );
@@ -74,8 +81,8 @@ export class DSEmptyState extends React.PureComponent {
 
     return (
       <React.Fragment>
-        <h2>You are caught up!</h2>
+        <h2 data-l10n-id="newtab-discovery-empty-section-topstories-header" />
-        <p>Check back later for more stories.</p>
+        <p data-l10n-id="newtab-discovery-empty-section-topstories-content" />
       </React.Fragment>
     );
   }

locales-src/newtab.ftl

@@ -148,6 +148,16 @@ newtab-empty-section-highlights = Start browsing, and we’ll show some of the g
 #  $provider (String): Name of the content provider for this section, e.g "Pocket".
 newtab-empty-section-topstories = You’ve caught up. Check back later for more top stories from { $provider }. Can’t wait? Select a popular topic to find more great stories from around the web.
 
+
+## Empty Section (Content Discovery Experience). These show when there are no more stories or when some stories fail to load.
+
+newtab-discovery-empty-section-topstories-header = You are caught up!
+newtab-discovery-empty-section-topstories-content = Check back later for more stories.
+newtab-discovery-empty-section-topstories-try-again-button = Try Again
+newtab-discovery-empty-section-topstories-loading = Loading…
+# Displays when a layout in a section took too long to fetch articles.
+newtab-discovery-empty-section-topstories-timed-out = Oops! We almost loaded this section, but not quite.
+
 ## Pocket Content Section.
 
 # This is shown at the bottom of the trending stories section and precedes a list of links to popular topics.

test/unit/content-src/components/DiscoveryStreamComponents/DSEmptyState.test.jsx

@@ -16,18 +16,33 @@ describe("<DSEmptyState>", () => {
 
   it("should render defaultempty state message", () => {
     assert.ok(wrapper.find(".empty-state-message").exists());
-    assert.ok(wrapper.find("h2").exists());
+    const header = wrapper.find(
-    assert.ok(wrapper.find("p").exists());
+      "h2[data-l10n-id='newtab-discovery-empty-section-topstories-header']"
+    );
+    const paragraph = wrapper.find(
+      "p[data-l10n-id='newtab-discovery-empty-section-topstories-content']"
+    );
+
+    assert.ok(header.exists());
+    assert.ok(paragraph.exists());
   });
 
   it("should render failed state message", () => {
     wrapper = shallow(<DSEmptyState status="failed" />);
-    assert.ok(wrapper.find("button.try-again-button").exists());
+    const button = wrapper.find(
+      "button[data-l10n-id='newtab-discovery-empty-section-topstories-try-again-button']"
+    );
+
+    assert.ok(button.exists());
   });
 
   it("should render waiting state message", () => {
     wrapper = shallow(<DSEmptyState status="waiting" />);
-    assert.ok(wrapper.find("button.try-again-button.waiting").exists());
+    const button = wrapper.find(
+      "button[data-l10n-id='newtab-discovery-empty-section-topstories-loading']"
+    );
+
+    assert.ok(button.exists());
   });
 
   it("should dispatch DISCOVERY_STREAM_RETRY_FEED on failed state button click", () => {