UX: reworks dashboard problems section to be in line with new style

app/assets/javascripts/admin/controllers/admin-dashboard-next.js.es6

@@ -23,18 +23,6 @@ export default Ember.Controller.extend({
     return this.currentUser.get("admin") && (problemsLength || 0) > 0;
   },
 
-  @computed("foundProblems")
-  thereWereProblems(foundProblems) {
-    if (!this.currentUser.get("admin")) { return false; }
-
-    if (foundProblems) {
-      this.set("hadProblems", true);
-      return true;
-    } else {
-      return this.get("hadProblems") || false;
-    }
-  },
-
   fetchDashboard() {
     if (this.get("isLoading")) return;
 

app/assets/javascripts/admin/templates/dashboard-problems.hbs

@@ -1,36 +1,27 @@
 {{#if foundProblems}}
-  <div class="dashboard-stats detected-problems">
-    <div class="problem-messages">
-      {{#conditional-loading-spinner condition=loadingProblems}}
-        <div>
-          <h3>
-            <span class="look-here">{{d-icon "exclamation-triangle"}}</span>
-            {{i18n 'admin.dashboard.problems_found'}}</h3>
-          <ul class="{{if loadingProblems 'invisible'}}">
+  <div class="section dashboard-problems">
+    <div class="section-title">
+      <h2>
+        {{d-icon "exclamation-triangle"}}
+        {{i18n 'admin.dashboard.problems_found'}}
+      </h2>
+    </div>
+
+    <div class="section-body">
+      {{#conditional-loading-section isLoading=loadingProblems}}
+        <div class="problem-messages">
+          <ul>
             {{#each problems as |problem|}}
               <li>{{{problem}}}</li>
             {{/each}}
           </ul>
         </div>
+
         <p class="actions">
           <small>{{i18n 'admin.dashboard.last_checked'}}: {{problemsTimestamp}}</small>
           {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}
         </p>
-      {{/conditional-loading-spinner}}
+      {{/conditional-loading-section}}
     </div>
-    <div class="clearfix"></div>
   </div>
-{{else}}
-  {{#if thereWereProblems}}
-    <div class="dashboard-stats detected-problems">
-      <div class="look-here">&nbsp;</div>
-      <div class="problem-messages">
-        <p>
-          {{i18n 'admin.dashboard.no_problems'}}
-          {{d-button action="refreshProblems" class="btn-small" icon="refresh" label="admin.dashboard.refresh_problems"}}
-        </p>
-      </div>
-      <div class="clearfix"></div>
-    </div>
-  {{/if}}
 {{/if}}

app/assets/javascripts/admin/templates/dashboard_next.hbs

@@ -1,14 +1,14 @@
 {{plugin-outlet name="admin-dashboard-top"}}
 
-<div class="section-top">
-  {{#if showVersionChecks}}
-  <div class="version-checks">
+{{#if showVersionChecks}}
+  <div class="section-top">
+    <div class="version-checks">
       {{partial 'admin/templates/version-checks'}}
-      {{partial 'admin/templates/dashboard-problems'}}
+    </div>
   </div>
-  {{/if}}
-  <div class='clearfix'></div>
-</div>
+{{/if}}
+
+{{partial 'admin/templates/dashboard-problems'}}
 
 <div class="community-health section">
   <div class="section-title">

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

@@ -177,6 +177,18 @@
       }
     }
   }
+
+  .dashboard-problems {
+    margin-bottom: 2em;
+
+    .d-icon-exclamation-triangle {
+      color: $danger;
+    }
+
+    .actions {
+      margin: 0;
+    }
+  }
 }
 
 .dashboard-mini-chart {

test/javascripts/acceptance/dashboard-next-test.js.es6

@@ -1,7 +1,4 @@
-import {
-  acceptance
-}
-from "helpers/qunit-helpers";
+import { acceptance } from "helpers/qunit-helpers";
 
 acceptance("Dashboard Next", {
   loggedIn: true
@@ -11,12 +8,33 @@ QUnit.test("Visit dashboard next page", assert => {
   visit("/admin");
 
   andThen(() => {
-    assert.ok($('.dashboard-next').length, "has dashboard-next class");
+    assert.ok($(".dashboard-next").length, "has dashboard-next class");
 
-    assert.ok($('.dashboard-mini-chart.signups').length, "has a signups chart");
-    assert.ok($('.dashboard-mini-chart.posts').length, "has a posts chart");
-    assert.ok($('.dashboard-mini-chart.dau_by_mau').length, "has a dau_by_mau chart");
-    assert.ok($('.dashboard-mini-chart.daily_engaged_users').length, "has a daily_engaged_users chart");
-    assert.ok($('.dashboard-mini-chart.new_contributors').length, "has a new_contributors chart");
+    assert.ok($(".dashboard-mini-chart.signups").length, "has a signups chart");
+
+    assert.ok($(".dashboard-mini-chart.posts").length, "has a posts chart");
+
+    assert.ok(
+      $(".dashboard-mini-chart.dau_by_mau").length,
+      "has a dau_by_mau chart"
+    );
+
+    assert.ok(
+      $(".dashboard-mini-chart.daily_engaged_users").length,
+      "has a daily_engaged_users chart"
+    );
+
+    assert.ok(
+      $(".dashboard-mini-chart.new_contributors").length,
+      "has a new_contributors chart"
+    );
+
+    assert.equal(
+      $(".section.dashboard-problems .problem-messages ul li:first-child")
+        .html()
+        .trim(),
+      "Houston...",
+      "displays problems"
+    );
   });
 });

test/javascripts/fixtures/problems.js.es6

@@ -1,4 +1,5 @@
 export default {
   "/admin/dashboard/problems.json": {
+    problems: ["Houston..."]
   }
 };