From 2a9dcade0aa8ad0ecb752de8faaf55dcac6ca375 Mon Sep 17 00:00:00 2001
From: Krzysztof Kotlarek <kotlarek.krzysztof@gmail.com>
Date: Mon, 29 Jul 2024 14:20:12 +1000
Subject: [PATCH] UX: group admin new features by month (#28106)

Display new features grouped by month and show additional information about the version.
---
 .../components/admin-config-area-card.gjs     | 11 ++++--
 .../components/dashboard-new-feature-item.gjs |  5 +++
 .../components/dashboard-new-features.gjs     | 35 +++++++++++++++---
 .../templates/dashboard-new-features.hbs      |  7 ++--
 .../admin/addon/templates/whats-new.hbs       |  7 ++--
 .../stylesheets/common/admin/dashboard.scss   | 24 ++++++++++---
 app/assets/stylesheets/mobile/dashboard.scss  |  9 +++++
 config/locales/client.en.yml                  |  1 +
 .../admin_dashboard_new_features_spec.rb      | 36 ++++++++++++++++---
 .../pages/admin_dashboard_new_features.rb     | 10 ++++++
 10 files changed, 126 insertions(+), 19 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs b/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs
index 78ad09b7af8..d2b5e0af90d 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs
@@ -1,13 +1,20 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import i18n from "discourse-common/helpers/i18n";
+import I18n from "discourse-i18n";
 
 export default class AdminConfigAreaCard extends Component {
   @tracked collapsed = false;
 
+  get computedHeading() {
+    if (this.args.heading) {
+      return I18n.t(this.args.heading);
+    }
+    return this.args.translatedHeading;
+  }
+
   <template>
     <section class="admin-config-area-card" ...attributes>
-      <h3 class="admin-config-area-card__title">{{i18n @heading}}</h3>
+      <h3 class="admin-config-area-card__title">{{this.computedHeading}}</h3>
       <div class="admin-config-area-card__content">
         {{yield}}
       </div>
diff --git a/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs b/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
index 193408c3657..793f79ae229 100644
--- a/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
+++ b/app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs
@@ -14,6 +14,11 @@ const DashboardNewFeatureItem = <template>
         <h3>
           {{@item.title}}
         </h3>
+        {{#if @item.discourse_version}}
+          <div class="admin-new-feature-item__new-feature-version">
+            {{@item.discourse_version}}
+          </div>
+        {{/if}}
       </div>
 
       {{#if @item.screenshot_url}}
diff --git a/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs b/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
index 4dd0c41c8be..508469e671f 100644
--- a/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
+++ b/app/assets/javascripts/admin/addon/components/dashboard-new-features.gjs
@@ -1,21 +1,42 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { ajax } from "discourse/lib/ajax";
 import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
+import AdminConfigAreaCard from "admin/components/admin-config-area-card";
 import DashboardNewFeatureItem from "admin/components/dashboard-new-feature-item";
 
 export default class DashboardNewFeatures extends Component {
+  @service currentUser;
+
   @tracked newFeatures = null;
+  @tracked groupedNewFeatures = null;
   @tracked isLoaded = false;
 
   @bind
   loadNewFeatures() {
     ajax("/admin/dashboard/whats-new.json")
       .then((json) => {
-        this.newFeatures = json.new_features;
+        const items = json.new_features.reduce((acc, feature) => {
+          const key = moment(feature.released_at || feature.created_at).format(
+            "YYYY-MM"
+          );
+          acc[key] = acc[key] || [];
+          acc[key].push(feature);
+          return acc;
+        }, {});
+
+        this.groupedNewFeatures = Object.keys(items).map((date) => {
+          return {
+            date: moment
+              .tz(date, this.currentUser.user_option.timezone)
+              .format("MMMM YYYY"),
+            features: items[date],
+          };
+        });
         this.isLoaded = true;
       })
       .finally(() => {
@@ -24,10 +45,14 @@ export default class DashboardNewFeatures extends Component {
   }
 
   <template>
-    <div class="section-body" {{didInsert this.loadNewFeatures}}>
-      {{#if this.newFeatures}}
-        {{#each this.newFeatures as |feature|}}
-          <DashboardNewFeatureItem @item={{feature}} />
+    <div class="admin-config-area" {{didInsert this.loadNewFeatures}}>
+      {{#if this.groupedNewFeatures}}
+        {{#each this.groupedNewFeatures as |groupedFeatures|}}
+          <AdminConfigAreaCard @translatedHeading={{groupedFeatures.date}}>
+            {{#each groupedFeatures.features as |feature|}}
+              <DashboardNewFeatureItem @item={{feature}} />
+            {{/each}}
+          </AdminConfigAreaCard>
         {{/each}}
       {{else if this.isLoaded}}
         {{htmlSafe
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard-new-features.hbs b/app/assets/javascripts/admin/addon/templates/dashboard-new-features.hbs
index 8924d2646f5..129ed90ceb9 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard-new-features.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard-new-features.hbs
@@ -1,4 +1,7 @@
 <ConditionalLoadingSpinner @condition={{this.isLoading}}>
-  <h2>{{i18n "admin.dashboard.new_features.title"}}</h2>
-  <DashboardNewFeatures />
+  <div class="admin-config-area">
+    <h2>{{i18n "admin.dashboard.new_features.title"}}</h2>
+    <p>{{html-safe (i18n "admin.dashboard.new_features.subtitle")}}</p>
+    <DashboardNewFeatures />
+  </div>
 </ConditionalLoadingSpinner>
\ No newline at end of file
diff --git a/app/assets/javascripts/admin/addon/templates/whats-new.hbs b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
index d67434a1fb2..485551e211f 100644
--- a/app/assets/javascripts/admin/addon/templates/whats-new.hbs
+++ b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
@@ -1,2 +1,5 @@
-<h2>{{i18n "admin.new_features.title"}}</h2>
-<DashboardNewFeatures />
\ No newline at end of file
+<div class="admin-config-area">
+  <h2>{{i18n "admin.dashboard.new_features.title"}}</h2>
+  <p>{{html-safe (i18n "admin.dashboard.new_features.subtitle")}}</p>
+  <DashboardNewFeatures />
+</div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss
index 5d8569b12f3..ebf811cc8d7 100644
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@@ -644,13 +644,26 @@
   }
 }
 
+.whats-new,
+.dashboard {
+  .admin-config-area-card__title {
+    font-size: var(--font-up-1);
+    margin-bottom: 1em;
+  }
+  .admin-new-feature-item__learn-more {
+    margin-bottom: 1em;
+    display: inline-block;
+  }
+}
+
 .admin-new-feature-item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 1.5em;
-  background-color: var(--primary-very-low);
-  padding: 1em;
-  max-width: 45rem;
+  border-bottom: 1px solid var(--primary-low);
+  &:last-child {
+    border-bottom: none;
+  }
 
   &__new-feature-emoji {
     font-size: 1.2em;
@@ -665,11 +678,14 @@
   &__header {
     display: flex;
     align-items: flex-start;
-    font-size: var(--font-up-1);
     font-weight: bold;
     margin-bottom: 0.5em;
   }
   &__screenshot {
     width: 100%;
   }
+  &__new-feature-version {
+    margin-left: auto;
+    color: var(--primary-low-mid);
+  }
 }
diff --git a/app/assets/stylesheets/mobile/dashboard.scss b/app/assets/stylesheets/mobile/dashboard.scss
index a3db0de171f..f7143d41355 100644
--- a/app/assets/stylesheets/mobile/dashboard.scss
+++ b/app/assets/stylesheets/mobile/dashboard.scss
@@ -21,3 +21,12 @@
     }
   }
 }
+
+.admin-new-feature-item {
+  h3 {
+    margin-right: 0.5em;
+  }
+  &__new-feature-version {
+    font-size: var(--font-down-1);
+  }
+}
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index b7a4562ea9c..f5da82d509e 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -5010,6 +5010,7 @@ en:
         problems_found: "Some advice based on your current site settings"
         new_features:
           title: "What's new"
+          subtitle: "For even more detail about new features and improvements we are adding all the time, see <a href='https://meta.discourse.org/tags/c/announcements/67/release-notes' target='_blank'>Release notes</a>."
           previous_announcements: "You can see previous new feature announcements on <a href='%{url}' target='_blank'>Discourse Meta</a>"
           learn_more: "Learn more..."
         last_checked: "Last checked"
diff --git a/spec/system/admin_dashboard_new_features_spec.rb b/spec/system/admin_dashboard_new_features_spec.rb
index 05211f1c929..3fde15e6b35 100644
--- a/spec/system/admin_dashboard_new_features_spec.rb
+++ b/spec/system/admin_dashboard_new_features_spec.rb
@@ -17,19 +17,47 @@ describe "Admin Dashboard New Features Page", type: :system do
           "description" => "New feature description",
           "link" => "https://meta.discourse.org",
           "tier" => [],
-          "discourse_version" => "",
+          "discourse_version" => "3.3.0.beta4",
           "created_at" => "2023-11-10T02:52:41.462Z",
           "updated_at" => "2023-11-10T04:28:47.020Z",
           "screenshot_url" =>
             "/uploads/default/original/1X/bab053dc94dc4e0d357b0e777e3357bb1ac99e12.jpeg",
         },
+        {
+          "id" => 8,
+          "user_id" => 1,
+          "emoji" => "🐼",
+          "title" => "New feature from previous release",
+          "description" => "New feature description",
+          "link" => "https://meta.discourse.org",
+          "tier" => [],
+          "discourse_version" => "3.3.0.beta3",
+          "created_at" => "2023-09-10T02:52:41.462Z",
+          "updated_at" => "2023-09-10T04:28:47.020Z",
+          "released_at" => "2023-08-10T04:28:47.020Z",
+          "screenshot_url" =>
+            "/uploads/default/original/1X/bab054dc94dc4e0d357b0e777e3357bb1ac99e13.jpeg",
+        },
       ],
     )
 
     new_features_page.visit
-    expect(new_features_page).to have_screenshot
-    expect(new_features_page).to have_learn_more_link
-    expect(new_features_page).to have_no_emoji
+
+    within find(".admin-config-area-card:first-child") do
+      expect(new_features_page).to have_screenshot
+      expect(new_features_page).to have_learn_more_link
+      expect(new_features_page).to have_no_emoji
+      expect(new_features_page).to have_date("November 2023")
+      expect(new_features_page).to have_version("3.3.0.beta4")
+    end
+
+    within find(".admin-config-area-card:last-child") do
+      expect(new_features_page).to have_screenshot
+      expect(new_features_page).to have_learn_more_link
+      expect(new_features_page).to have_no_emoji
+      expect(new_features_page).to have_date("August 2023")
+      expect(new_features_page).to have_version("3.3.0.beta3")
+    end
   end
 
   it "displays new features with emoji when no screenshot" do
diff --git a/spec/system/page_objects/pages/admin_dashboard_new_features.rb b/spec/system/page_objects/pages/admin_dashboard_new_features.rb
index 21ace47e677..3b7ed50ce38 100644
--- a/spec/system/page_objects/pages/admin_dashboard_new_features.rb
+++ b/spec/system/page_objects/pages/admin_dashboard_new_features.rb
@@ -27,6 +27,16 @@ module PageObjects
       def has_no_emoji?
         page.has_no_css?(".admin-new-feature-item__new-feature-emoji")
       end
+
+      def has_version?(version)
+        element = find(".admin-new-feature-item__new-feature-version")
+        element.has_text?(version)
+      end
+
+      def has_date?(date)
+        element = find(".admin-config-area-card__title")
+        element.has_text?(date)
+      end
     end
   end
 end