FEATURE: improve blank page syndrome on the activity/topics, activity/read and group messages pages (#14313)

FEATURE: improve blank page syndrome on the activity/topics, activity/read and group messages pages (#14313)

diff --git a/app/assets/javascripts/discourse/app/controllers/user-topics-list.js b/app/assets/javascripts/discourse/app/controllers/user-topics-list.js
index 55a9f77..c884703 100644
--- a/app/assets/javascripts/discourse/app/controllers/user-topics-list.js
+++ b/app/assets/javascripts/discourse/app/controllers/user-topics-list.js
@@ -20,9 +20,9 @@ export default Controller.extend(BulkTopicSelection, {
   tagsForUser: null,
   incomingCount: reads("pmTopicTrackingState.newIncoming.length"),
 
-  @discourseComputed("emptyState", "model.topics.length", "incomingCount")
-  showEmptyStatePlaceholder(emptyState, topicsLength, incomingCount) {
-    return emptyState && topicsLength === 0 && incomingCount === 0;
+  @discourseComputed("model.topics.length", "incomingCount")
+  noContent(topicsLength, incomingCount) {
+    return topicsLength === 0 && incomingCount === 0;
   },
 
   saveScrollPosition() {
diff --git a/app/assets/javascripts/discourse/app/routes/build-group-messages-route.js b/app/assets/javascripts/discourse/app/routes/build-group-messages-route.js
index cf42669..c366a4e 100644
--- a/app/assets/javascripts/discourse/app/routes/build-group-messages-route.js
+++ b/app/assets/javascripts/discourse/app/routes/build-group-messages-route.js
@@ -14,7 +14,14 @@ export default (type) => {
       if (this._isArchive()) {
         filter = `${filter}/archive`;
       }
-      return this.store.findFiltered("topicList", { filter });
+      return this.store.findFiltered("topicList", { filter }).then((model) => {
+        // andrei: we agreed that this is an anti pattern,
+        // it's better to avoid mutating a rest model like this
+        // this place we'll be refactored later
+        // see https://github.com/discourse/discourse/pull/14313#discussion_r708784704
+        model.set("emptyState", this.emptyState());
+        return model;
+      });
     },
 
     setupController() {
@@ -40,6 +47,13 @@ export default (type) => {
       });
     },
 
+    emptyState() {
+      return {
+        title: I18n.t("no_group_messages_title"),
+        body: "",
+      };
+    },
+
     _isArchive() {
       return type === "archive";
     },
diff --git a/app/assets/javascripts/discourse/app/routes/build-private-messages-route.js b/app/assets/javascripts/discourse/app/routes/build-private-messages-route.js
index 65a3cdd..e88c5a4 100644
--- a/app/assets/javascripts/discourse/app/routes/build-private-messages-route.js
+++ b/app/assets/javascripts/discourse/app/routes/build-private-messages-route.js
@@ -40,7 +40,16 @@ export default (inboxType, path, filter) => {
 
       return lastTopicList
         ? lastTopicList
-        : this.store.findFiltered("topicList", { filter: topicListFilter });
+        : this.store
+            .findFiltered("topicList", { filter: topicListFilter })
+            .then((model) => {
+              // andrei: we agreed that this is an anti pattern,
+              // it's better to avoid mutating a rest model like this
+              // this place we'll be refactored later
+              // see https://github.com/discourse/discourse/pull/14313#discussion_r708784704
+              model.set("emptyState", this.emptyState());
+              return model;
+            });
     },
 
     setupController() {
@@ -61,7 +70,6 @@ export default (inboxType, path, filter) => {
         filter: filter,
         group: null,
         inbox: inboxType,
-        emptyState: this.emptyState(),
       });
 
       userTopicsListController.subscribe();
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-read.js b/app/assets/javascripts/discourse/app/routes/user-activity-read.js
index 7622ea0..cceb733 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-read.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-read.js
@@ -1,14 +1,36 @@
 import UserAction from "discourse/models/user-action";
 import UserTopicListRoute from "discourse/routes/user-topic-list";
 import { action } from "@ember/object";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import getURL from "discourse-common/lib/get-url";
+import I18n from "I18n";
 
 export default UserTopicListRoute.extend({
   userActionType: UserAction.TYPES.topics,
 
   model() {
-    return this.store.findFiltered("topicList", {
-      filter: "read",
-    });
+    return this.store
+      .findFiltered("topicList", {
+        filter: "read",
+      })
+      .then((model) => {
+        // andrei: we agreed that this is an anti pattern,
+        // it's better to avoid mutating a rest model like this
+        // this place we'll be refactored later
+        // see https://github.com/discourse/discourse/pull/14313#discussion_r708784704
+        model.set("emptyState", this.emptyState());
+        return model;
+      });
+  },
+
+  emptyState() {
+    const title = I18n.t("user_activity.no_read_topics_title");
+    const body = I18n.t("user_activity.no_read_topics_body", {
+      topUrl: getURL("/top"),
+      categoriesUrl: getURL("/categories"),
+      searchIcon: iconHTML("search"),
+    }).htmlSafe();
+    return { title, body };
   },
 
   @action
diff --git a/app/assets/javascripts/discourse/app/routes/user-activity-topics.js b/app/assets/javascripts/discourse/app/routes/user-activity-topics.js
index 7a08b36..bea03cd 100644
--- a/app/assets/javascripts/discourse/app/routes/user-activity-topics.js
+++ b/app/assets/javascripts/discourse/app/routes/user-activity-topics.js
@@ -1,15 +1,32 @@
 import UserAction from "discourse/models/user-action";
 import UserTopicListRoute from "discourse/routes/user-topic-list";
 import { action } from "@ember/object";
+import I18n from "I18n";
 
 export default UserTopicListRoute.extend({
   userActionType: UserAction.TYPES.topics,
 
   model: function () {
-    return this.store.findFiltered("topicList", {
-      filter:
-        "topics/created-by/" + this.modelFor("user").get("username_lower"),
-    });
+    return this.store
+      .findFiltered("topicList", {
+        filter:
+          "topics/created-by/" + this.modelFor("user").get("username_lower"),
+      })
+      .then((model) => {
+        // andrei: we agreed that this is an anti pattern,
+        // it's better to avoid mutating a rest model like this
+        // this place we'll be refactored later
+        // see https://github.com/discourse/discourse/pull/14313#discussion_r708784704
+        model.set("emptyState", this.emptyState());
+        return model;
+      });
+  },
+
+  emptyState() {
+    return {
+      title: I18n.t("user_activity.no_topics_title"),
+      body: "",
+    };
   },
 
   @action
diff --git a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
index 7096fec..b507cb4 100644
--- a/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-topics-list.hbs
@@ -1,8 +1,8 @@
-{{#if showEmptyStatePlaceholder}}
+{{#if noContent}}
   <div class="empty-state">
-    <span class="empty-state-title">{{emptyState.title}}</span>
+    <span class="empty-state-title">{{model.emptyState.title}}</span>
     <div class="empty-state-body">
-      <p>{{emptyState.body}}</p>
+      <p>{{model.emptyState.body}}</p>
     </div>
   </div>
 {{else}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/group-test.js b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
index 17d6d9d..7c4c3eb 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/group-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/group-test.js
@@ -2,6 +2,7 @@ import {
   acceptance,
   count,
   exists,
+  query,
   queryAll,
 } from "discourse/tests/helpers/qunit-helpers";
 import { click, visit } from "@ember/test-helpers";
@@ -227,9 +228,9 @@ acceptance("Group - Authenticated", function (needs) {
     await click(".nav-pills li a[title='Messages']");
 
     assert.equal(

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

GitHub sha: 804274af47bb01e5bf91f3e1ca5a0550495740e1

This commit appears in #14313 which was approved by martin and tgxworld. It was merged by AndrewPrigorshnev.