From fad0d2ec62187ce8ee749fd03fd7006a86f5c20f Mon Sep 17 00:00:00 2001 From: Keegan George Date: Thu, 7 Nov 2024 08:26:30 +0900 Subject: [PATCH] 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" --- .../components/dashboard-new-feature-item.gjs | 7 +++ .../stylesheets/common/admin/dashboard.scss | 10 +++++ config/locales/client.en.yml | 1 + lib/svg_sprite.rb | 1 + .../admin_dashboard_new_features_spec.rb | 43 +++++++++++++++++++ .../page_objects/pages/admin_new_features.rb | 8 ++++ 6 files changed, 70 insertions(+) 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 97ff49bd755..02d86fb6e89 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 @@ -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}}

{{@item.title}} + {{#if @item.experiment_setting}} + + {{dIcon "flask"}} + {{i18n "admin.dashboard.new_features.experimental"}} + + {{/if}}

{{#if @item.discourse_version}}
diff --git a/app/assets/stylesheets/common/admin/dashboard.scss b/app/assets/stylesheets/common/admin/dashboard.scss index da85e9d87ee..3a0777e7eea 100644 --- a/app/assets/stylesheets/common/admin/dashboard.scss +++ b/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; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index ce02d6b9c6a..6d2df1e5cb6 100644 --- a/config/locales/client.en.yml +++ b/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 Discourse Meta" 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." diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb index efc1fd771f2..d878324f4a6 100644 --- a/lib/svg_sprite.rb +++ b/lib/svg_sprite.rb @@ -146,6 +146,7 @@ module SvgSprite file-lines filter flag + flask folder folder-open forward diff --git a/spec/system/admin_dashboard_new_features_spec.rb b/spec/system/admin_dashboard_new_features_spec.rb index ff0ba2bd1cb..533e30b858d 100644 --- a/spec/system/admin_dashboard_new_features_spec.rb +++ b/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" diff --git a/spec/system/page_objects/pages/admin_new_features.rb b/spec/system/page_objects/pages/admin_new_features.rb index bad21317a89..14c52d7686f 100644 --- a/spec/system/page_objects/pages/admin_new_features.rb +++ b/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