FEATURE: improve blank page syndrome on the user activity pages (#14311)

FEATURE: improve blank page syndrome on the user activity pages (#14311)

This improves blank page syndrome on the next pages:

  • activity
  • activity/replies
  • activity/drafts
  • activity/likes-given
diff --git a/app/assets/javascripts/discourse/app/models/user-drafts-stream.js b/app/assets/javascripts/discourse/app/models/user-drafts-stream.js
index 00d6f04..d58437c 100644
--- a/app/assets/javascripts/discourse/app/models/user-drafts-stream.js
+++ b/app/assets/javascripts/discourse/app/models/user-drafts-stream.js
@@ -60,10 +60,6 @@ export default RestModel.extend({
           return;
         }
 
-        if (result.no_results_help) {
-          this.set("noContentHelp", result.no_results_help);
-        }
-
         if (!result.drafts) {
           return;
         }
diff --git a/app/assets/javascripts/discourse/app/models/user-stream.js b/app/assets/javascripts/discourse/app/models/user-stream.js
index 21b6b53..014e787 100644
--- a/app/assets/javascripts/discourse/app/models/user-stream.js
+++ b/app/assets/javascripts/discourse/app/models/user-stream.js
@@ -81,9 +81,6 @@ export default RestModel.extend({
     if (this.filterParam) {
       findUrl += `&filter=${this.filterParam}`;
     }
-    if (this.noContentHelpKey) {
-      findUrl += `&no_results_help_key=${this.noContentHelpKey}`;
-    }
 
     if (this.actingUsername) {
       findUrl += `&acting_username=${this.actingUsername}`;
@@ -102,9 +99,6 @@ export default RestModel.extend({
     this.set("loading", true);
     return ajax(findUrl)
       .then((result) => {
-        if (result && result.no_results_help) {
-          this.set("noContentHelp", result.no_results_help);
-        }
         if (result && result.user_actions) {
           const copy = A();
           result.user_actions.forEach((action) => {
diff --git a/app/assets/javascripts/discourse/app/routes/discourse.js b/app/assets/javascripts/discourse/app/routes/discourse.js
index 3625b6e..eb2b4f3 100644
--- a/app/assets/javascripts/discourse/app/routes/discourse.js
+++ b/app/assets/javascripts/discourse/app/routes/discourse.js
@@ -74,6 +74,14 @@ const DiscourseRoute = Route.extend({
     }
   },
 
+  isAnotherUsersPage(user) {
+    if (!this.currentUser) {
+      return true;
+    }
+
+    return user.username !== this.currentUser.username;
+  },
+
   isPoppedState(transition) {
     return !transition._discourse_intercepted && !!transition.intent.url;
   },
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-bookmarks.js b/app/assets/javascripts/discourse/app/routes/user-activity-bookmarks.js
index 2a82c1f..00ae1a9 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-bookmarks.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-bookmarks.js
@@ -1,8 +1,6 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
 export default DiscourseRoute.extend({
-  noContentHelpKey: "user_activity.no_bookmarks",
-
   queryParams: {
     acting_username: { refreshModel: true },
   },
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js b/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js
index 1116dee..97e4970 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-drafts.js
@@ -1,10 +1,19 @@
 import DiscourseRoute from "discourse/routes/discourse";
+import I18n from "I18n";
 
 export default DiscourseRoute.extend({
   model() {
-    const model = this.modelFor("user").get("userDraftsStream");
-    model.reset();
-    return model.findItems(this.site).then(() => model);
+    const user = this.modelFor("user");
+    const draftsStream = user.get("userDraftsStream");
+    draftsStream.reset();
+
+    return draftsStream.findItems(this.site).then(() => {
+      return {
+        stream: draftsStream,
+        isAnotherUsersPage: this.isAnotherUsersPage(user),
+        emptyState: this.emptyState(),
+      };
+    });
   },
 
   renderTemplate() {
@@ -15,6 +24,12 @@ export default DiscourseRoute.extend({
     controller.set("model", model);
   },
 
+  emptyState() {
+    const title = I18n.t("user_activity.no_drafts_title");
+    const body = I18n.t("user_activity.no_drafts_body");
+    return { title, body };
+  },
+
   activate() {
     this.appEvents.on("draft:destroyed", this, this.refresh);
   },
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-index.js b/app/assets/javascripts/discourse/app/routes/user-activity-index.js
index ce06e95..435f5a7 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-index.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-index.js
@@ -1,5 +1,20 @@
 import UserActivityStreamRoute from "discourse/routes/user-activity-stream";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import getURL from "discourse-common/lib/get-url";
+import I18n from "I18n";
 
 export default UserActivityStreamRoute.extend({
   userActionType: null,
+
+  emptyState() {
+    const title = I18n.t("user_activity.no_activity_title");
+    const body = I18n.t("user_activity.no_activity_body", {
+      topUrl: getURL("/top"),
+      categoriesUrl: getURL("/categories"),
+      preferencesUrl: getURL("/my/preferences"),
+      heartIcon: iconHTML("heart"),
+    }).htmlSafe();
+
+    return { title, body };
+  },
 });
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js b/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js
index 6c3ef6b..2bed585 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-likes-given.js
@@ -1,9 +1,20 @@
 import UserAction from "discourse/models/user-action";
 import UserActivityStreamRoute from "discourse/routes/user-activity-stream";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import I18n from "I18n";
 
 export default UserActivityStreamRoute.extend({
   userActionType: UserAction.TYPES["likes_given"],
-  noContentHelpKey: "user_activity.no_likes_given",
+  emptyStateOthers: I18n.t("user_activity.no_likes_others"),
+
+  emptyState() {
+    const title = I18n.t("user_activity.no_likes_title");
+    const body = I18n.t("user_activity.no_likes_body", {
+      heartIcon: iconHTML("heart"),
+    }).htmlSafe();
+
+    return { title, body };
+  },
 
   actions: {
     didTransition() {
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-replies.js b/app/assets/javascripts/discourse/app/routes/user-activity-replies.js
index ec530a4..1b929ab 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-replies.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-replies.js
@@ -1,9 +1,16 @@
 import UserAction from "discourse/models/user-action";
 import UserActivityStreamRoute from "discourse/routes/user-activity-stream";
+import I18n from "I18n";
 
 export default UserActivityStreamRoute.extend({
   userActionType: UserAction.TYPES["posts"],
-  noContentHelpKey: "user_activity.no_replies",
+  emptyStateOthers: I18n.t("user_activity.no_replies_others"),
+
+  emptyState() {
+    const title = I18n.t("user_activity.no_replies_title");
+    const body = "";
+    return { title, body };
+  },
 
   actions: {
     didTransition() {
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-stream.js b/app/assets/javascripts/discourse/app/routes/user-activity-stream.js
index dd6908e..69fabb3 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-stream.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-stream.js
@@ -1,19 +1,30 @@
 import DiscourseRoute from "discourse/routes/discourse";
 import ViewingActionType from "discourse/mixins/viewing-action-type";
+import { action } from "@ember/object";
+import I18n from "I18n";
 
 export default DiscourseRoute.extend(ViewingActionType, {
   queryParams: {
     acting_username: { refreshModel: true },
   },
 
+  emptyStateOthers: I18n.t("user_activity.no_activity_others"),
+
   model() {
-    return this.modelFor("user").get("stream");

[... diff too long, it was truncated ...]

GitHub sha: 477bbc372e35927688fb624362b2d0a39d154ad1

This commit appears in #14311 which was approved by tgxworld. It was merged by AndrewPrigorshnev.