FIX: better message if request for report is rate limited (#6298)

app/assets/javascripts/admin/components/admin-report.js.es6

@@ -43,6 +43,7 @@ export default Ember.Component.extend({
   isEnabled: true,
   disabledLabel: "admin.dashboard.disabled",
   isLoading: false,
+  rateLimitationString: null,
   dataSourceName: null,
   report: null,
   model: null,
@@ -303,7 +304,7 @@ export default Ember.Component.extend({
   _fetchReport() {
     this._super();
 
-    this.set("isLoading", true);
+    this.setProperties({ isLoading: true, rateLimitationString: null });
 
     let payload = this._buildPayload(["prev_period"]);
 
@@ -315,6 +316,12 @@ export default Ember.Component.extend({
           console.log("failed loading", this.get("dataSource"));
         }
       })
+      .catch(data => {
+        if (data.jqXHR && data.jqXHR.status === 429) {
+          const error = data.jqXHR.responseJSON.errors[0];
+          this.set("rateLimitationString", error);
+        }
+      })
       .finally(() => {
         if (this.element && !this.isDestroying && !this.isDestroyed) {
           this.set("isLoading", false);

app/assets/javascripts/admin/templates/components/admin-report.hbs

@@ -56,6 +56,12 @@
               {{admin-report showFilteringUI=false dataSourceName=model.relatedReport.type}}
             {{/if}}
           {{/if}}
+        {{else}}
+          {{#if rateLimitationString}}
+            <div class="alert alert-error report-alert rate-limited">
+              {{d-icon "thermometer-three-quarters"}}
+              <span>{{rateLimitationString}}</span>
+            </div>
           {{else}}
             <div class="alert alert-info report-alert no-data">
               {{d-icon "pie-chart"}}
@@ -73,6 +79,7 @@
               {{/if}}
             </div>
           {{/if}}
+        {{/if}}
       {{else}}
         {{#if showTimeoutError}}
           <div class="alert alert-error report-alert timeout">

app/assets/stylesheets/common/admin/admin_report.scss

@@ -96,12 +96,17 @@
       display: block;
     }
 
-    &.no-data {
+    &.no-data,
+    &.rate-limited {
       background: $secondary;
       border-color: $primary-low;
       color: $primary-low-mid;
     }
 
+    &.rate-limited .d-icon {
+      color: $danger;
+    }
+
     &.timeout,
     &.exception {
       border-color: $danger-low;

app/assets/stylesheets/common/admin/dashboard_next.scss

@@ -309,6 +309,7 @@
     flex-direction: row;
     padding: 0.5em 0.25em;
     align-items: center;
+    text-align: left;
     border: 0;
 
     &:hover {

test/javascripts/components/admin-report-test.js.es6

@@ -130,3 +130,25 @@ componentTest("exception", {
     assert.ok(exists(".alert-error.exception"), "it displays an error");
   }
 });
+
+componentTest("rate limited", {
+  beforeEach() {
+    const response = object => {
+      return [429, { "Content-Type": "application/json" }, object];
+    };
+
+    // prettier-ignore
+    server.get("/admin/reports/signups_rate_limited", () => { //eslint-disable-line
+      return response({"errors":["You’ve performed this action too many times. Please wait 10 seconds before trying again."],"error_type":"rate_limit","extras":{"wait_seconds":10}});
+    });
+  },
+
+  template: "{{admin-report dataSourceName='signups_rate_limited'}}",
+
+  test(assert) {
+    assert.ok(
+      exists(".alert-error.rate-limited"),
+      "it displays a rate limited error"
+    );
+  }
+});