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

@@ -57,21 +57,28 @@
             {{/if}}
           {{/if}}
         {{else}}
-          <div class="alert alert-info report-alert no-data">
-            {{d-icon "pie-chart"}}
-            {{#if model.reportUrl}}
-              <a href="{{model.reportUrl}}" class="report-url">
-                <span>
-                  {{#if model.title}}
-                    {{model.title}} — 
-                  {{/if}}
-                  {{i18n "admin.dashboard.reports.no_data"}}
-                </span>
-              </a>
-            {{else}}
-              <span>{{i18n "admin.dashboard.reports.no_data"}}</span>
-            {{/if}}
-          </div>
+          {{#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"}}
+              {{#if model.reportUrl}}
+                <a href="{{model.reportUrl}}" class="report-url">
+                  <span>
+                    {{#if model.title}}
+                      {{model.title}} —
+                    {{/if}}
+                    {{i18n "admin.dashboard.reports.no_data"}}
+                  </span>
+                </a>
+              {{else}}
+                <span>{{i18n "admin.dashboard.reports.no_data"}}</span>
+              {{/if}}
+            </div>
+          {{/if}}
         {{/if}}
       {{else}}
         {{#if showTimeoutError}}

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"
+    );
+  }
+});