UX: Adding reports dashboard tab, new layout, report descriptions (#6790)

UX: Adding reports dashboard tab, new layout, report descriptions (#6790)

Co-Authored-By: Kris shout@k-ris.com

diff --git a/app/assets/javascripts/admin/controllers/admin-dashboard-next-reports.js.es6 b/app/assets/javascripts/admin/controllers/admin-dashboard-next-reports.js.es6
new file mode 100644
index 0000000..9c2eccd
--- /dev/null
+++ b/app/assets/javascripts/admin/controllers/admin-dashboard-next-reports.js.es6
@@ -0,0 +1,30 @@
+import computed from "ember-addons/ember-computed-decorators";
+const { get } = Ember;
+
+export default Ember.Controller.extend({
+  filter: null,
+
+  @computed("model.[]", "filter")
+  filterReports(reports, filter) {
+    if (filter) {
+      filter = filter.toLowerCase();
+      return reports.filter(report => {
+        return (
+          (get(report, "title") || "").toLowerCase().indexOf(filter) > -1 ||
+          (get(report, "description") || "").toLowerCase().indexOf(filter) > -1
+        );
+      });
+    }
+    return reports;
+  },
+
+  actions: {
+    filterReports(filter) {
+      Ember.run.debounce(this, this._performFiltering, filter, 250);
+    }
+  },
+
+  _performFiltering(filter) {
+    this.set("filter", filter);
+  }
+});
diff --git a/app/assets/javascripts/admin/routes/admin-dashboard-next-reports.js.es6 b/app/assets/javascripts/admin/routes/admin-dashboard-next-reports.js.es6
new file mode 100644
index 0000000..7aea901
--- /dev/null
+++ b/app/assets/javascripts/admin/routes/admin-dashboard-next-reports.js.es6
@@ -0,0 +1,11 @@
+import { ajax } from "discourse/lib/ajax";
+
+export default Discourse.Route.extend({
+  model() {
+    return ajax("/admin/reports").then(json => json);
+  },
+
+  setupController(controller, model) {
+    controller.setProperties({ model: model.reports, filter: null });
+  }
+});
diff --git a/app/assets/javascripts/admin/routes/admin-reports-index.js.es6 b/app/assets/javascripts/admin/routes/admin-reports-index.js.es6
index da0bda9..240efad 100644
--- a/app/assets/javascripts/admin/routes/admin-reports-index.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-reports-index.js.es6
@@ -1,13 +1,5 @@
-import { ajax } from "discourse/lib/ajax";
-
 export default Discourse.Route.extend({
-  model() {
-    return ajax("/admin/reports").then(json => {
-      return json;
-    });
-  },
-
-  setupController(controller, model) {
-    controller.setProperties({ model: model.reports });
+  beforeModel() {
+    this.transitionTo("admin.dashboardNextReports");
   }
 });
diff --git a/app/assets/javascripts/admin/routes/admin-route-map.js.es6 b/app/assets/javascripts/admin/routes/admin-route-map.js.es6
index 4ce0b8f..3ec2cc9 100644
--- a/app/assets/javascripts/admin/routes/admin-route-map.js.es6
+++ b/app/assets/javascripts/admin/routes/admin-route-map.js.es6
@@ -12,6 +12,10 @@ export default function() {
         path: "/dashboard/security",
         resetNamespace: true
       });
+      this.route("admin.dashboardNextReports", {
+        path: "/dashboard/reports",
+        resetNamespace: true
+      });
     });
 
     this.route(
diff --git a/app/assets/javascripts/admin/templates/components/admin-report.hbs b/app/assets/javascripts/admin/templates/components/admin-report.hbs
index 80f21c4..a7e7648 100644
--- a/app/assets/javascripts/admin/templates/components/admin-report.hbs
+++ b/app/assets/javascripts/admin/templates/components/admin-report.hbs
@@ -6,7 +6,7 @@
         <ul class="breadcrumb">
           {{#if showAllReportsLink}}
             <li class="item all-reports">
-              {{#link-to "adminReports" class="report-url"}}
+              {{#link-to "admin.dashboardNextReports" class="report-url"}}
                 {{i18n "admin.dashboard.all_reports"}}
               {{/link-to}}
             </li>
diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs
index e7b1e1c..9b0b2b4 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs
@@ -26,6 +26,11 @@
       {{i18n "admin.dashboard.security_tab"}}
     {{/link-to}}
   </li>
+  <li class="navigation-item reports">
+    {{#link-to "admin.dashboardNextReports" class="navigation-link"}}
+      {{i18n "admin.dashboard.reports_tab"}}
+    {{/link-to}}
+  </li>
 </ul>
 
 {{outlet}}
diff --git a/app/assets/javascripts/admin/templates/dashboard_next_general.hbs b/app/assets/javascripts/admin/templates/dashboard_next_general.hbs
index 5842f31..78970f7 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next_general.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next_general.hbs
@@ -5,7 +5,7 @@
     <div class="period-section">
       <div class="section-title">
         <h2>
-          <a href="{{get-url '/admin/reports'}}">
+          <a href="{{get-url '/admin/dashboard/reports'}}">
             {{i18n "admin.dashboard.community_health"}}
           </a>
         </h2>
@@ -85,10 +85,6 @@
             {{/each}}
           </div>
         </div>
-
-        {{#link-to "adminReports"}}
-          {{i18n "admin.dashboard.all_reports"}}
-        {{/link-to}}
       </div>
 
       <div class="user-metrics">
diff --git a/app/assets/javascripts/admin/templates/dashboard_next_moderation.hbs b/app/assets/javascripts/admin/templates/dashboard_next_moderation.hbs
index dbfbb02..8959bac 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next_moderation.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next_moderation.hbs
@@ -4,7 +4,7 @@
   <div class="moderators-activity section">
     <div class="section-title">
       <h2>
-        <a href="{{get-url '/admin/reports/moderators_activity'}}">
+        <a href="{{get-url '/admin/dashboard/reports/moderators_activity'}}">
           {{i18n "admin.dashboard.moderators_activity"}}
         </a>
       </h2>
diff --git a/app/assets/javascripts/admin/templates/dashboard_next_reports.hbs b/app/assets/javascripts/admin/templates/dashboard_next_reports.hbs
new file mode 100644
index 0000000..d6666ce
--- /dev/null
+++ b/app/assets/javascripts/admin/templates/dashboard_next_reports.hbs
@@ -0,0 +1,28 @@
+{{#conditional-loading-spinner condition=isLoading}}
+   <div class="reports-index section">
+     <div class="section-title">
+       <h2>{{i18n "admin.reports.title"}}</h2>
+      {{input
+        class="filter-reports-input"
+        input=(action "filterReports" value="target.value")
+        placeholder=(i18n "admin.dashboard.filter_reports")
+        autofocus=true}}
+    </div>
+
+    <ul class="reports-list">
+      {{#each filterReports as |report|}}
+        <li class="report">
+          {{#link-to 'adminReports.show' report.type}}
+            <h3 class="report-title">{{report.title}}</h3>
+
+            {{#if report.description}}
+            <p class="report-description">
+              {{report.description}}
+            </p>
+          {{/if}}
+          {{/link-to}}
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+{{/conditional-loading-spinner}}
diff --git a/app/assets/javascripts/admin/templates/reports-index.hbs b/app/assets/javascripts/admin/templates/reports-index.hbs
deleted file mode 100644
index 0c88b78..0000000
--- a/app/assets/javascripts/admin/templates/reports-index.hbs
+++ /dev/null
@@ -1,17 +0,0 @@
-<h3>{{i18n "admin.reports.title"}}</h3>
-
-<ul class="reports-list">
-  {{#each model as |report|}}
-    <li class="report">
-      {{#link-to 'adminReports.show' report.type}}
-        <h4 class="report-title">{{report.title}}</h4>
-      {{/link-to}}
-
-      {{#if report.description}}
-        <p class="report-description">
-          {{report.description}}
-        </p>
-      {{/if}}
-    </li>
-  {{/each}}
-</ul>
diff --git a/app/assets/stylesheets/common/admin/admin_reports.scss b/app/assets/stylesheets/common/admin/admin_reports.scss
index 137bf81..3dbd7f4 100644
--- a/app/assets/stylesheets/common/admin/admin_reports.scss
+++ b/app/assets/stylesheets/common/admin/admin_reports.scss
@@ -13,20 +13,6 @@
     height: 400px;
   }
 
-  .reports-list {
-    list-style: none;
-    margin: 0;
-
-    .report {
-      padding-bottom: 0.5em;

[... diff too long, it was truncated ...]

GitHub
sha: e655e186

2 Likes