DEV: Introduce new 'glimmer topic list mode' site setting (#30375)

This replaces the previous group-based site setting

app/assets/javascripts/discourse/app/components/basic-topic-list.hbs

@@ -1,6 +1,6 @@
 <ConditionalLoadingSpinner @condition={{this.loading}}>
   {{#if this.topics}}
-    {{#if this.currentUser.canUseGlimmerTopicList}}
+    {{#if this.site.useGlimmerTopicList}}
       <TopicList::List
         @showPosters={{this.showPosters}}
         @hideCategory={{this.hideCategory}}

app/assets/javascripts/discourse/app/components/basic-topic-list.js

@@ -1,10 +1,13 @@
 import Component from "@ember/component";
 import { alias, not } from "@ember/object/computed";
+import { service } from "@ember/service";
 import { observes } from "@ember-decorators/object";
 import $ from "jquery";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 
 export default class BasicTopicList extends Component {
+  @service site;
+
   @alias("topicList.loadingMore") loadingMore;
 
   @not("loaded") loading;

app/assets/javascripts/discourse/app/components/categories-topic-list.hbs

@@ -8,7 +8,7 @@
 
 {{#if this.topics}}
   {{#each this.topics as |t|}}
-    {{#if this.currentUser.canUseGlimmerTopicList}}
+    {{#if this.site.useGlimmerTopicList}}
       <TopicList::LatestTopicListItem @topic={{t}} />
     {{else}}
       <LatestTopicListItem @topic={{t}} />

app/assets/javascripts/discourse/app/components/discovery/topics.hbs

@@ -7,7 +7,7 @@
 {{/if}}
 
 {{#if @model.sharedDrafts}}
-  {{#if this.currentUser.canUseGlimmerTopicList}}
+  {{#if this.site.useGlimmerTopicList}}
     <TopicList::List
       @listTitle="shared_drafts.title"
       @top={{this.top}}
@@ -88,7 +88,7 @@
   </span>
 
   {{#if this.hasTopics}}
-    {{#if this.currentUser.canUseGlimmerTopicList}}
+    {{#if this.site.useGlimmerTopicList}}
       <TopicList::List
         @highlightLastVisited={{true}}
         @top={{this.top}}

app/assets/javascripts/discourse/app/components/new-list-header-controls-wrapper.gjs

@@ -6,7 +6,7 @@ import NewListHeaderControls from "discourse/components/topic-list/new-list-head
 import raw from "discourse/helpers/raw";
 
 export default class NewListHeaderControlsWrapper extends Component {
-  @service currentUser;
+  @service site;
 
   @action
   click(e) {
@@ -21,7 +21,7 @@ export default class NewListHeaderControlsWrapper extends Component {
   }
 
   <template>
-    {{#if this.currentUser.canUseGlimmerTopicList}}
+    {{#if this.site.useGlimmerTopicList}}
       <div class="topic-replies-toggle-wrapper">
         <NewListHeaderControls
           @current={{@current}}

app/assets/javascripts/discourse/app/components/parent-category-row.hbs

@@ -187,7 +187,7 @@
         {{#if this.showTopics}}
           <td class="latest">
             {{#each this.category.featuredTopics as |t|}}
-              {{#if this.currentUser.canUseGlimmerTopicList}}
+              {{#if this.site.useGlimmerTopicList}}
                 <TopicList::FeaturedTopic @topic={{t}} />
               {{else}}
                 <FeaturedTopic @topic={{t}} />

app/assets/javascripts/discourse/app/models/site.js

@@ -1,6 +1,7 @@
 import { tracked } from "@glimmer/tracking";
 import EmberObject, { computed, get } from "@ember/object";
 import { alias, sort } from "@ember/object/computed";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { isEmpty } from "@ember/utils";
 import PreloadStore from "discourse/lib/preload-store";
@@ -12,6 +13,7 @@ import RestModel from "discourse/models/rest";
 import TrustLevel from "discourse/models/trust-level";
 import deprecated from "discourse-common/lib/deprecated";
 import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
+import { needsHbrTopicList } from "discourse-common/lib/raw-templates";
 import discourseComputed from "discourse-common/utils/decorators";
 
 export default class Site extends RestModel.extend().reopenClass(Singleton) {
@@ -75,12 +77,16 @@ export default class Site extends RestModel.extend().reopenClass(Singleton) {
     return result;
   }
 
+  @service siteSettings;
+
   @tracked categories;
 
   @alias("is_readonly") isReadOnly;
 
   @sort("categories", "topicCountDesc") categoriesByCount;
 
+  #glimmerTopicDecision;
+
   init() {
     super.init(...arguments);
 
@@ -88,6 +94,47 @@ export default class Site extends RestModel.extend().reopenClass(Singleton) {
     this.categories = this.categories || [];
   }
 
+  get useGlimmerTopicList() {
+    if (this.#glimmerTopicDecision !== undefined) {
+      // Caches the decision after the first call, and avoids re-printing the same message
+      return this.#glimmerTopicDecision;
+    }
+
+    let decision;
+
+    /* eslint-disable no-console */
+    const settingValue = this.siteSettings.glimmer_topic_list_mode;
+    if (settingValue === "enabled") {
+      if (needsHbrTopicList()) {
+        console.log(
+          "⚠️  Using the new 'glimmer' topic list, even though some themes/plugins are not ready"
+        );
+      } else {
+        console.log("✅  Using the new 'glimmer' topic list");
+      }
+
+      decision = true;
+    } else if (settingValue === "disabled") {
+      decision = false;
+    } else {
+      // auto
+      if (needsHbrTopicList()) {
+        console.log(
+          "⚠️  Detected themes/plugins which are incompatible with the new 'glimmer' topic-list. Falling back to old implementation."
+        );
+        decision = false;
+      } else {
+        console.log("✅  Using the new 'glimmer' topic list");
+        decision = true;
+      }
+    }
+    /* eslint-enable no-console */
+
+    this.#glimmerTopicDecision = decision;
+
+    return decision;
+  }
+
   @computed("categories.[]")
   get categoriesById() {
     const map = new Map();

app/assets/javascripts/discourse/app/models/user.js

@@ -38,7 +38,6 @@ import deprecated from "discourse-common/lib/deprecated";
 import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
 import getURL, { getURLWithCDN } from "discourse-common/lib/get-url";
 import discourseLater from "discourse-common/lib/later";
-import { needsHbrTopicList } from "discourse-common/lib/raw-templates";
 import discourseComputed from "discourse-common/utils/decorators";
 import { i18n } from "discourse-i18n";
 
@@ -1252,10 +1251,6 @@ export default class User extends RestModel.extend(Evented) {
   trackedTags(trackedTags, watchedTags, watchingFirstPostTags) {
     return [...trackedTags, ...watchedTags, ...watchingFirstPostTags];
   }
-
-  get canUseGlimmerTopicList() {
-    return this.use_glimmer_topic_list && !needsHbrTopicList();
-  }
 }
 
 User.reopenClass(Singleton, {

app/serializers/current_user_serializer.rb

@@ -75,7 +75,6 @@ class CurrentUserSerializer < BasicUserSerializer
              :new_new_view_enabled?,
              :use_admin_sidebar,
              :can_view_raw_email,
-             :use_glimmer_topic_list?,
              :login_method,
              :has_unseen_features,
              :can_see_emails
@@ -323,10 +322,6 @@ class CurrentUserSerializer < BasicUserSerializer
     scope.user.in_any_groups?(SiteSetting.view_raw_email_allowed_groups_map)
   end
 
-  def use_glimmer_topic_list?
-    scope.user.in_any_groups?(SiteSetting.experimental_glimmer_topic_list_groups_map)
-  end
-
   def do_not_disturb_channel_position
     MessageBus.last_id("/do-not-disturb/#{object.id}")
   end

config/locales/server.en.yml

@@ -2732,7 +2732,7 @@ en:
     default_navigation_menu_tags: "Selected tags will be displayed under Navigation Menu's Tags section by default."
     experimental_new_new_view_groups: 'Enable a new topics list that combines unread and new topics and make the "Everything" link in the sidebar link to it.'
     enable_experimental_lightbox: "Replace the default image lightbox with the revamped design."
-    experimental_glimmer_topic_list_groups: "Enable the new 'glimmer' topic list implementation. This implementation is under active development, and is not intended for production use. Do not develop themes/plugins against it until the implementation is finalized and announced."
+    glimmer_topic_list_mode: "Control whether the new 'glimmer' topic-list implementation is used. 'auto' will enable automatically once all your themes and plugins are ready. See https://meta.discourse.org/t/343404 for more info."
     glimmer_post_menu_mode: "Control whether the new 'glimmer' post menu implementation is used. 'auto' will enable automatically once all your themes and plugins are ready. This implementation is under active development, and is not intended for production use. Do not develop themes/plugins against it until the implementation is finalized and announced."
     glimmer_post_menu_groups: "Enable the new 'glimmer' post menu implementation in 'auto' mode for the specified user groups. This implementation is under active development, and is not intended for production use. Do not develop themes/plugins against it until the implementation is finalized and announced."
     experimental_form_templates: "Enable the form templates feature. <b>After enabled,</b> manage the templates at <a href='%{base_path}/admin/customize/form-templates'>Customize / Templates</a>."

config/site_settings.yml

@@ -3335,13 +3335,14 @@ experimental:
     default: ""
     allow_any: false
     refresh: true
-  experimental_glimmer_topic_list_groups:
+  glimmer_topic_list_mode:
     client: true
-    type: group_list
-    list_type: compact
-    default: ""
-    allow_any: false
-    refresh: true
+    type: enum
+    choices:
+      - disabled
+      - auto
+      - enabled
+    default: disabled
   glimmer_post_menu_mode:
     client: true
     type: enum

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/topic-list-item.hbs

@@ -31,7 +31,7 @@
 </StyleguideExample>
 
 <StyleguideExample @title="<TopicListItem> - latest" class="half-size">
-  {{#if this.currentUser.canUseGlimmerTopicList}}
+  {{#if this.site.useGlimmerTopicList}}
     <TopicList::LatestTopicListItem @topic={{@dummy.topic}} />
   {{else}}
     <LatestTopicListItem @topic={{@dummy.topic}} />

spec/system/topic_list/glimmer_spec.rb

@@ -7,7 +7,7 @@ describe "glimmer topic list", type: :system do
   let(:topic_page) { PageObjects::Pages::Topic.new }
 
   before do
-    SiteSetting.experimental_glimmer_topic_list_groups = Group::AUTO_GROUPS[:everyone]
+    SiteSetting.glimmer_topic_list_mode = "enabled"
     sign_in(user)
   end