UX: Changes to new features section in admin dashboard (#12029)

app/assets/javascripts/admin/addon/components/dashboard-new-features.js

@@ -1,9 +1,11 @@
 import Component from "@ember/component";
-import { action } from "@ember/object";
+import { action, computed } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
 export default Component.extend({
   newFeatures: null,
+  classNames: ["section", "dashboard-new-features"],
+  classNameBindings: ["hasUnseenFeatures:ordered-first"],
   releaseNotesLink: null,
 
   init() {
@@ -12,15 +14,20 @@ export default Component.extend({
     ajax("/admin/dashboard/new-features.json").then((json) => {
       this.setProperties({
         newFeatures: json.new_features,
+        hasUnseenFeatures: json.has_unseen_features,
         releaseNotesLink: json.release_notes_link,
       });
     });
   },
 
+  columnCountClass: computed("newFeatures", function () {
+    return this.newFeatures.length > 2 ? "three-or-more-items" : "";
+  }),
+
   @action
   dismissNewFeatures() {
     ajax("/admin/dashboard/mark-new-features-as-seen.json", {
       type: "PUT",
-    }).then(() => this.set("newFeatures", null));
+    }).then(() => this.set("hasUnseenFeatures", false));
   },
 });

app/assets/javascripts/admin/addon/templates/components/dashboard-new-features.hbs

@@ -1,21 +1,19 @@
 {{#if newFeatures}}
-  <div class="section dashboard-new-features">
-    <div class="section-title">
-      <h2>{{replace-emoji (i18n "admin.dashboard.new_features.title") }}</h2>
-    </div>
+  <div class="section-title">
+    <h2>{{replace-emoji (i18n "admin.dashboard.new_features.title") }}</h2>
+  </div>
 
-    <div class="section-body">
-      {{#each newFeatures as |feature|}}
-        {{dashboard-new-feature-item item=feature}}
-      {{/each}}
-    </div>
-    <div class="section-footer">
-      {{#if releaseNotesLink}}
-        <a rel="noopener noreferrer" target="_blank" href={{releaseNotesLink}} class="btn btn-primary new-features-release-notes">
-          {{i18n "admin.dashboard.new_features.learn_more"}}
-        </a>
-      {{/if}}
-      {{d-button label="admin.dashboard.new_features.dismiss" class="new-features-dismiss" action=dismissNewFeatures }}
-    </div>
+  <div class="section-body {{columnCountClass}}">
+    {{#each newFeatures as |feature|}}
+      {{dashboard-new-feature-item item=feature tagName=""}}
+    {{/each}}
+  </div>
+  <div class="section-footer">
+    {{#if releaseNotesLink}}
+      <a rel="noopener noreferrer" target="_blank" href={{releaseNotesLink}} class="btn btn-primary new-features-release-notes">
+        {{i18n "admin.dashboard.new_features.learn_more"}}
+      </a>
+    {{/if}}
+    {{d-button label="admin.dashboard.new_features.dismiss" class="new-features-dismiss" action=dismissNewFeatures }}
   </div>
 {{/if}}

app/assets/javascripts/admin/addon/templates/dashboard.hbs

@@ -1,5 +1,3 @@
-{{dashboard-new-features}}
-
 {{plugin-outlet name="admin-dashboard-top"}}
 
 {{#if showVersionChecks}}
@@ -52,4 +50,6 @@
 
 {{outlet}}
 
+{{dashboard-new-features tagName="div"}}
+
 {{plugin-outlet name="admin-dashboard-bottom"}}