UX: Various improvements to welcome topic CTA (discourse#21010)

- Update welcome topic copy
- Edit the welcome topic automatically when the title or description changes
- Remove “Create your Welcome Topic” banner/CTA
- Add "edit welcome topic" user tip

app/assets/javascripts/discourse/app/components/user-tip.js

@@ -1,4 +1,5 @@
 import { action } from "@ember/object";
+import { schedule } from "@ember/runloop";
 import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
 import { hideUserTip } from "discourse/lib/user-tips";
@@ -13,19 +14,22 @@ export default class UserTip extends Component {
       return;
     }
 
-    const { id, selector, content, placement } = this.args;
-    this.currentUser.showUserTip({
-      id,
+    schedule("afterRender", () => {
+      const { id, selector, content, placement } = this.args;
+      this.currentUser.showUserTip({
+        id,
 
-      titleText: I18n.t(`user_tips.${id}.title`),
-      contentText: content || I18n.t(`user_tips.${id}.content`),
+        titleText: I18n.t(`user_tips.${id}.title`),
+        contentText: content || I18n.t(`user_tips.${id}.content`),
 
-      reference: selector
-        ? element.parentElement.querySelector(selector) || element.parentElement
-        : element,
-      appendTo: element.parentElement,
+        reference: selector
+          ? element.parentElement.querySelector(selector) ||
+            element.parentElement
+          : element,
+        appendTo: element.parentElement,
 
-      placement: placement || "top",
+        placement: placement || "top",
+      });
     });
   }
 

app/assets/javascripts/discourse/app/controllers/discovery.js

@@ -2,7 +2,6 @@ import Controller, { inject as controller } from "@ember/controller";
 import { alias, equal, not } from "@ember/object/computed";
 import { action } from "@ember/object";
 import Category from "discourse/models/category";
-import discourseComputed from "discourse-common/utils/decorators";
 import DiscourseURL from "discourse/lib/url";
 import { inject as service } from "@ember/service";
 
@@ -22,24 +21,6 @@ export default Controller.extend({
 
   loadedAllItems: not("discoveryTopics.model.canLoadMore"),
 
-  @discourseComputed(
-    "router.currentRouteName",
-    "router.currentRoute.queryParams.f",
-    "site.show_welcome_topic_banner"
-  )
-  showEditWelcomeTopicBanner(
-    currentRouteName,
-    hasParams,
-    showWelcomeTopicBanner
-  ) {
-    return (
-      this.currentUser?.staff &&
-      currentRouteName === "discovery.latest" &&
-      showWelcomeTopicBanner &&
-      !hasParams
-    );
-  },
-
   @action
   loadingBegan() {
     this.set("loading", true);

app/assets/javascripts/discourse/app/lib/user-tips.js

@@ -1,3 +1,4 @@
+import { isTesting } from "discourse-common/config/environment";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import I18n from "I18n";
 import { escape } from "pretty-text/sanitizer";
@@ -25,6 +26,7 @@ export function showUserTip(options) {
     trigger: "manual",
     theme: "user-tips",
     zIndex: "",
+    delay: isTesting() ? 0 : 100,
 
     // It must be interactive to make buttons work.
     interactive: true,

app/assets/javascripts/discourse/app/templates/discovery.hbs

@@ -28,10 +28,6 @@
   <PluginOutlet @name="discovery-above" @connectorTagName="div" />
 </span>
 
-{{#if this.showEditWelcomeTopicBanner}}
-  <WelcomeTopicBanner />
-{{/if}}
-
 <div class="container list-container {{if this.loading 'hidden'}}">
   <div class="row">
     <div class="full-width">

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -149,6 +149,14 @@
                 class="edit-topic"
                 title={{i18n "edit"}}
               >{{d-icon "pencil-alt"}}</a>
+
+              {{#if (eq this.siteSettings.welcome_topic_id this.model.id)}}
+                <UserTip
+                  @id="welcome_topic"
+                  @selector=".edit-topic"
+                  @placement="bottom"
+                />
+              {{/if}}
             {{/if}}
 
             <PluginOutlet

app/assets/stylesheets/common/base/user-tips.scss

@@ -3,6 +3,7 @@
 }
 
 .user-tip-container {
+  font-weight: normal;
   min-width: 300px;
   padding: 0.5em;
   text-align: left;

app/assets/stylesheets/desktop/topic-list.scss

@@ -249,21 +249,3 @@
 .container.list-container {
   position: relative;
 }
-
-.welcome-cta {
-  background-color: var(--secondary);
-  border: 1px solid var(--primary-low);
-  box-shadow: shadow("menu-panel");
-  border-radius: 4px;
-  padding: 12px 20px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  z-index: z("usercard");
-  &__content {
-    width: 70%;
-  }
-  &__button {
-    align-self: center;
-  }
-}

app/models/category.rb

@@ -420,10 +420,7 @@ def trash_category_definition
   end
 
   def clear_related_site_settings
-    if self.id == SiteSetting.general_category_id
-      SiteSetting.general_category_id = -1
-      Site.clear_show_welcome_topic_cache
-    end
+    SiteSetting.general_category_id = -1 if self.id == SiteSetting.general_category_id
   end
 
   def topic_url

app/models/site.rb

@@ -216,40 +216,4 @@ def self.clear_anon_cache!
     # the cache is validated based on the sequence
     MessageBus.publish(SITE_JSON_CHANNEL, "")
   end
-
-  def self.welcome_topic_banner_cache_key(user_id)
-    "show_welcome_topic_banner:#{user_id}"
-  end
-
-  def self.welcome_topic_exists_and_is_not_edited?
-    Post
-      .joins(:topic)
-      .where(
-        "topics.id = :topic_id AND topics.deleted_at IS NULL AND posts.post_number = 1 AND posts.version = 1 AND posts.created_at > :created_at",
-        topic_id: SiteSetting.welcome_topic_id,
-        created_at: 1.month.ago,
-      )
-      .exists?
-  end
-
-  def self.clear_show_welcome_topic_cache
-    Discourse
-      .cache
-      .keys("show_welcome_topic_banner:*")
-      .each { |key| Discourse.cache.redis.del(key) }
-  end
-
-  def self.show_welcome_topic_banner?(guardian)
-    return false if !guardian.is_admin?
-    return false if guardian.user.id != User.first_login_admin_id
-    user_id = guardian.user.id
-
-    show_welcome_topic_banner = Discourse.cache.read(welcome_topic_banner_cache_key(user_id))
-    return show_welcome_topic_banner unless show_welcome_topic_banner.nil?
-
-    show_welcome_topic_banner = welcome_topic_exists_and_is_not_edited?
-
-    Discourse.cache.write(welcome_topic_banner_cache_key(user_id), show_welcome_topic_banner)
-    show_welcome_topic_banner
-  end
 end

app/models/user.rb

@@ -355,6 +355,7 @@ def self.user_tips
         post_menu: 3,
         topic_notification_levels: 4,
         suggested_topics: 5,
+        welcome_topic: 6,
       )
   end
 

app/serializers/site_serializer.rb

@@ -37,7 +37,6 @@ class SiteSerializer < ApplicationSerializer
     :hashtag_configurations,
     :hashtag_icons,
     :displayed_about_plugin_stat_groups,
-    :show_welcome_topic_banner,
     :anonymous_default_sidebar_tags,
     :anonymous_sidebar_sections,
     :whispers_allowed_groups_names,
@@ -249,10 +248,6 @@ def displayed_about_plugin_stat_groups
     About.displayed_plugin_stat_groups
   end
 
-  def show_welcome_topic_banner
-    Site.show_welcome_topic_banner?(scope)
-  end
-
   def anonymous_default_sidebar_tags
     SiteSetting.default_sidebar_tags.split("|") - DiscourseTagging.hidden_tag_names(scope)
   end

config/initializers/014-track-setting-changes.rb

@@ -65,4 +65,22 @@
   end
 
   Emoji.clear_cache && Discourse.request_refresh! if name == :emoji_deny_list
+
+  if (name == :title || name == :site_description) &&
+       topic = Topic.find_by(id: SiteSetting.welcome_topic_id)
+    PostRevisor.new(topic.first_post, topic).revise!(
+      Discourse.system_user,
+      {
+        title: I18n.t("discourse_welcome_topic.title", site_title: SiteSetting.title),
+        raw:
+          I18n.t(
+            "discourse_welcome_topic.body",
+            base_path: Discourse.base_path,
+            site_title: SiteSetting.title,
+            site_description: SiteSetting.site_description,
+          ),
+      },
+      skip_revision: true,
+    )
+  end
 end

config/locales/client.en.yml

@@ -1930,6 +1930,10 @@ en:
         title: "Keep reading!"
         content: "Here are some topics we think you might like to read next."
 
+      welcome_topic:
+        title: "Edit the welcome topic"
+        content: "Help new members feel at home by customizing this topic to suit your community's needs."
+
     loading: "Loading..."
     errors:
       prev_page: "while trying to load"