UX: New experimental features should be marked clearly (#29622)

This PR adds a small visual change to the new feature item on the `/admin/whats-new` page. When features are marked with an experimental site setting, they should show an indication on the feature item that it is "Experimental"

app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.gjs

@@ -9,6 +9,7 @@ import CookText from "discourse/components/cook-text";
 import DToggleSwitch from "discourse/components/d-toggle-switch";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
+import dIcon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
@@ -77,6 +78,12 @@ export default class DiscourseNewFeatureItem extends Component {
           {{/if}}
           <h3>
             {{@item.title}}
+            {{#if @item.experiment_setting}}
+              <span class="admin-new-feature-item__header-experimental">
+                {{dIcon "flask"}}
+                {{i18n "admin.dashboard.new_features.experimental"}}
+              </span>
+            {{/if}}
           </h3>
           {{#if @item.discourse_version}}
             <div class="admin-new-feature-item__new-feature-version">

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

@@ -659,6 +659,16 @@
   }
 }
 
+.admin-new-feature-item__header-experimental {
+  color: var(--tertiary);
+  background-color: var(--tertiary-very-low);
+  padding: 0.5em;
+  font-size: var(--font-down-3);
+  margin-left: 0.5rem;
+  font-weight: 400;
+  border-radius: var(--d-border-radius);
+}
+
 .admin-new-feature-item__body {
   display: flex;
   justify-content: space-between;

config/locales/client.en.yml

@@ -5118,6 +5118,7 @@ en:
           subtitle: "We are releasing new features and improvements all the time. This page covers the highlights, but you can click 'Learn more' to see extensive release notes."
           previous_announcements: "You can see previous new feature announcements on <a href='%{url}' target='_blank'>Discourse Meta</a>"
           learn_more: "Learn more..."
+          experimental: "Experimental"
           experiment_enabled: "You have enabled the experimental feature."
           experiment_disabled: "You have disabled the experimental feature."
           experiment_toggled_too_fast: "You have toggled the experimental feature too fast. Please wait a few seconds before trying again."

lib/svg_sprite.rb

@@ -146,6 +146,7 @@ module SvgSprite
         file-lines
         filter
         flag
+        flask
         folder
         folder-open
         forward

spec/system/admin_dashboard_new_features_spec.rb

@@ -112,6 +112,49 @@ describe "Admin New Features Page", type: :system do
     expect(new_features_page).to have_toggle_experiment_button
   end
 
+  it "displays experimental text next to feature title when feature is experimental" do
+    DiscourseUpdates.stubs(:new_features).returns(
+      [
+        {
+          "id" => 7,
+          "user_id" => 1,
+          "emoji" => "😍",
+          "title" => "New feature",
+          "description" => "New feature description",
+          "link" => "https://meta.discourse.org",
+          "tier" => [],
+          "discourse_version" => "",
+          "created_at" => "2023-11-10T02:52:41.462Z",
+          "updated_at" => "2023-11-10T04:28:47.020Z",
+          "experiment_setting" => "experimental_form_templates",
+        },
+      ],
+    )
+    new_features_page.visit
+    expect(new_features_page).to have_experimental_text
+  end
+
+  it "does not display experimental text next to feature title when feature is not experimental" do
+    DiscourseUpdates.stubs(:new_features).returns(
+      [
+        {
+          "id" => 7,
+          "user_id" => 1,
+          "emoji" => "😍",
+          "title" => "New feature",
+          "description" => "New feature description",
+          "link" => "https://meta.discourse.org",
+          "tier" => [],
+          "discourse_version" => "",
+          "created_at" => "2023-11-10T02:52:41.462Z",
+          "updated_at" => "2023-11-10T04:28:47.020Z",
+        },
+      ],
+    )
+    new_features_page.visit
+    expect(new_features_page).to have_no_experimental_text
+  end
+
   it "displays a new feature indicator on the sidebar and clears it when navigating to what's new" do
     DiscourseUpdates.stubs(:has_unseen_features?).returns(true)
     visit "/admin"

spec/system/page_objects/pages/admin_new_features.rb

@@ -41,6 +41,14 @@ module PageObjects
         element = find(".admin-config-area-card__title")
         element.has_text?(date)
       end
+
+      def has_experimental_text?
+        page.has_css?(".admin-new-feature-item__header-experimental")
+      end
+
+      def has_no_experimental_text?
+        page.has_no_css?(".admin-new-feature-item__header-experimental")
+      end
     end
   end
 end