+
+
{{i18n this.suggestedTitleLabel}}
diff --git a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
index 5df744c1df1..3899944af3f 100644
--- a/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs
@@ -29,6 +29,10 @@
{{#if this.showNotificationsButton}}
+ {{#if this.showNotificationUserTip}}
+
+ {{/if}}
+
{{/if}}
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index daba9abda38..216f9445d29 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -211,8 +211,9 @@ createWidget("header-notifications", {
contentText: I18n.t("user_tips.first_notification.content"),
reference: document
- .querySelector(".badge-notification")
+ .querySelector(".d-header .badge-notification")
?.parentElement?.querySelector(".avatar"),
+ appendTo: document.querySelector(".d-header .panel"),
placement: "bottom-end",
});
diff --git a/app/assets/javascripts/discourse/app/widgets/post-menu.js b/app/assets/javascripts/discourse/app/widgets/post-menu.js
index aa7df8b2235..acb62372224 100644
--- a/app/assets/javascripts/discourse/app/widgets/post-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/post-menu.js
@@ -711,6 +711,10 @@ export default createWidget("post-menu", {
},
showMoreActions() {
+ if (this.currentUser) {
+ this.currentUser.hideUserTipForever("post_menu");
+ }
+
this.state.collapsed = false;
const likesPromise = !this.state.likedUsers.length
? this.getWhoLiked()
@@ -730,6 +734,8 @@ export default createWidget("post-menu", {
keyValueStore &&
keyValueStore.set({ key: "likedPostId", value: attrs.id });
return this.sendWidgetAction("showLogin");
+ } else {
+ this.currentUser.hideUserTipForever("post_menu");
}
if (this.capabilities.canVibrate && !isTesting()) {
diff --git a/app/assets/javascripts/discourse/app/widgets/post.js b/app/assets/javascripts/discourse/app/widgets/post.js
index 275b98c7c12..7ba5afe0b06 100644
--- a/app/assets/javascripts/discourse/app/widgets/post.js
+++ b/app/assets/javascripts/discourse/app/widgets/post.js
@@ -25,6 +25,7 @@ import { transformBasicPost } from "discourse/lib/transform-post";
import autoGroupFlairForUser from "discourse/lib/avatar-flair";
import showModal from "discourse/lib/show-modal";
import { nativeShare } from "discourse/lib/pwa-utils";
+import { hideUserTip } from "discourse/lib/user-tips";
function transformWithCallbacks(post) {
let transformed = transformBasicPost(post);
@@ -593,6 +594,10 @@ createWidget("post-contents", {
},
share() {
+ if (this.currentUser) {
+ this.currentUser.hideUserTipForever("post_menu");
+ }
+
const post = this.findAncestorModel();
nativeShare(this.capabilities, { url: post.shareUrl }).catch(() => {
const topic = post.topic;
@@ -928,4 +933,34 @@ export default createWidget("post", {
kvs.set({ key: "lastWarnedLikes", value: Date.now() });
}
},
+
+ didRenderWidget() {
+ if (!this.currentUser || !this.siteSettings.enable_user_tips) {
+ return;
+ }
+
+ const reference = document.querySelector(
+ ".post-controls .actions .show-more-actions"
+ );
+
+ this.currentUser.showUserTip({
+ id: "post_menu",
+
+ titleText: I18n.t("user_tips.post_menu.title"),
+ contentText: I18n.t("user_tips.post_menu.content"),
+
+ reference,
+ appendTo: reference?.closest(".post-controls"),
+
+ placement: "top",
+ });
+ },
+
+ destroy() {
+ hideUserTip("post_menu");
+ },
+
+ willRerenderWidget() {
+ hideUserTip("post_menu");
+ },
});
diff --git a/app/assets/javascripts/discourse/app/widgets/topic-timeline.js b/app/assets/javascripts/discourse/app/widgets/topic-timeline.js
index 8d4566757e7..45a24e1ad2e 100644
--- a/app/assets/javascripts/discourse/app/widgets/topic-timeline.js
+++ b/app/assets/javascripts/discourse/app/widgets/topic-timeline.js
@@ -612,6 +612,7 @@ export default createWidget("topic-timeline", {
contentText: I18n.t("user_tips.topic_timeline.content"),
reference: document.querySelector("div.timeline-scrollarea-wrapper"),
+ appendTo: document.querySelector("div.topic-timeline"),
placement: "left",
});
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js
new file mode 100644
index 00000000000..3ae693249ff
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js
@@ -0,0 +1,96 @@
+import { visit } from "@ember/test-helpers";
+import { hideAllUserTips } from "discourse/lib/user-tips";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import I18n from "I18n";
+import { test } from "qunit";
+
+acceptance("User Tips - first_notification", function (needs) {
+ needs.user({ unread_high_priority_notifications: 1 });
+ needs.site({ user_tips: { first_notification: 1 } });
+
+ needs.hooks.beforeEach(() => hideAllUserTips());
+ needs.hooks.afterEach(() => hideAllUserTips());
+
+ test("Shows first notification user tip", async function (assert) {
+ this.siteSettings.enable_user_tips = true;
+
+ await visit("/t/internationalization-localization/280");
+ assert.equal(
+ query(".user-tip-title").textContent.trim(),
+ I18n.t("user_tips.first_notification.title")
+ );
+ });
+});
+
+acceptance("User Tips - topic_timeline", function (needs) {
+ needs.user();
+ needs.site({ user_tips: { topic_timeline: 2 } });
+
+ needs.hooks.beforeEach(() => hideAllUserTips());
+ needs.hooks.afterEach(() => hideAllUserTips());
+
+ test("Shows topic timeline user tip", async function (assert) {
+ this.siteSettings.enable_user_tips = true;
+
+ await visit("/t/internationalization-localization/280");
+ assert.equal(
+ query(".user-tip-title").textContent.trim(),
+ I18n.t("user_tips.topic_timeline.title")
+ );
+ });
+});
+
+acceptance("User Tips - post_menu", function (needs) {
+ needs.user();
+ needs.site({ user_tips: { post_menu: 3 } });
+
+ needs.hooks.beforeEach(() => hideAllUserTips());
+ needs.hooks.afterEach(() => hideAllUserTips());
+
+ test("Shows post menu user tip", async function (assert) {
+ this.siteSettings.enable_user_tips = true;
+
+ await visit("/t/internationalization-localization/280");
+ assert.equal(
+ query(".user-tip-title").textContent.trim(),
+ I18n.t("user_tips.post_menu.title")
+ );
+ });
+});
+
+acceptance("User Tips - topic_notification_levels", function (needs) {
+ needs.user();
+ needs.site({ user_tips: { topic_notification_levels: 4 } });
+
+ needs.hooks.beforeEach(() => hideAllUserTips());
+ needs.hooks.afterEach(() => hideAllUserTips());
+
+ test("Shows post menu user tip", async function (assert) {
+ this.siteSettings.enable_user_tips = true;
+
+ await visit("/t/internationalization-localization/280");
+
+ assert.equal(
+ query(".user-tip-title").textContent.trim(),
+ I18n.t("user_tips.topic_notification_levels.title")
+ );
+ });
+});
+
+acceptance("User Tips - suggested_topics", function (needs) {
+ needs.user();
+ needs.site({ user_tips: { suggested_topics: 5 } });
+
+ needs.hooks.beforeEach(() => hideAllUserTips());
+ needs.hooks.afterEach(() => hideAllUserTips());
+
+ test("Shows post menu user tip", async function (assert) {
+ this.siteSettings.enable_user_tips = true;
+
+ await visit("/t/internationalization-localization/280");
+ assert.equal(
+ query(".user-tip-title").textContent.trim(),
+ I18n.t("user_tips.suggested_topics.title")
+ );
+ });
+});
diff --git a/app/assets/stylesheets/common/base/user-tips.scss b/app/assets/stylesheets/common/base/user-tips.scss
index a20bc51ccef..ae1f511825a 100644
--- a/app/assets/stylesheets/common/base/user-tips.scss
+++ b/app/assets/stylesheets/common/base/user-tips.scss
@@ -23,6 +23,12 @@
left: 11px;
}
+.tippy-box[data-theme~="user-tips"][data-placement^="top"]
+ > .tippy-svg-arrow
+ > svg {
+ top: 11px;
+}
+
.tippy-box[data-theme~="user-tips"][data-placement^="bottom"]
> .tippy-svg-arrow
> svg {
diff --git a/app/models/user.rb b/app/models/user.rb
index 59a881e6f48..4045830007c 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -288,6 +288,9 @@ class User < ActiveRecord::Base
@user_tips ||= Enum.new(
first_notification: 1,
topic_timeline: 2,
+ post_menu: 3,
+ topic_notification_levels: 4,
+ suggested_topics: 5,
)
end
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 14efad7f912..709b79f8e2f 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1838,6 +1838,18 @@ en:
title: "Topic timeline"
content: "Scroll quickly through a post using the topic timeline."
+ post_menu:
+ title: "Post menu"
+ content: "See how else you can interact with the post by clicking the three dots!"
+
+ topic_notification_levels:
+ title: "You are now following this topic"
+ content: "Look for this bell to adjust your notification preferences for specific topics or whole categories."
+
+ suggested_topics:
+ title: "Keep reading!"
+ content: "Here are some topics we think you might like to read next."
+
loading: "Loading..."
errors:
prev_page: "while trying to load"
diff --git a/db/migrate/20221114215902_hide_user_tips_3_to_5_for_existing_users.rb b/db/migrate/20221114215902_hide_user_tips_3_to_5_for_existing_users.rb
new file mode 100644
index 00000000000..b4aa179946b
--- /dev/null
+++ b/db/migrate/20221114215902_hide_user_tips_3_to_5_for_existing_users.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class HideUserTips3To5ForExistingUsers < ActiveRecord::Migration[7.0]
+ def up
+ execute "UPDATE user_options SET seen_popups = seen_popups || '{3, 4, 5}'"
+ end
+
+ def down
+ execute "UPDATE user_options SET seen_popups = array_remove(array_remove(array_remove(seen_popups, 3), 4), 5)"
+ end
+end