FEATURE: improve blank page syndrome on the activity/topics, activity/read and group messages pages (#14313)
This commit is contained in:
parent
d5424161f8
commit
804274af47
|
@ -20,9 +20,9 @@ export default Controller.extend(BulkTopicSelection, {
|
||||||
tagsForUser: null,
|
tagsForUser: null,
|
||||||
incomingCount: reads("pmTopicTrackingState.newIncoming.length"),
|
incomingCount: reads("pmTopicTrackingState.newIncoming.length"),
|
||||||
|
|
||||||
@discourseComputed("emptyState", "model.topics.length", "incomingCount")
|
@discourseComputed("model.topics.length", "incomingCount")
|
||||||
showEmptyStatePlaceholder(emptyState, topicsLength, incomingCount) {
|
noContent(topicsLength, incomingCount) {
|
||||||
return emptyState && topicsLength === 0 && incomingCount === 0;
|
return topicsLength === 0 && incomingCount === 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
saveScrollPosition() {
|
saveScrollPosition() {
|
||||||
|
|
|
@ -14,7 +14,14 @@ export default (type) => {
|
||||||
if (this._isArchive()) {
|
if (this._isArchive()) {
|
||||||
filter = `${filter}/archive`;
|
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() {
|
setupController() {
|
||||||
|
@ -40,6 +47,13 @@ export default (type) => {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
emptyState() {
|
||||||
|
return {
|
||||||
|
title: I18n.t("no_group_messages_title"),
|
||||||
|
body: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
_isArchive() {
|
_isArchive() {
|
||||||
return type === "archive";
|
return type === "archive";
|
||||||
},
|
},
|
||||||
|
|
|
@ -40,7 +40,16 @@ export default (inboxType, path, filter) => {
|
||||||
|
|
||||||
return lastTopicList
|
return lastTopicList
|
||||||
? 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() {
|
setupController() {
|
||||||
|
@ -61,7 +70,6 @@ export default (inboxType, path, filter) => {
|
||||||
filter: filter,
|
filter: filter,
|
||||||
group: null,
|
group: null,
|
||||||
inbox: inboxType,
|
inbox: inboxType,
|
||||||
emptyState: this.emptyState(),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
userTopicsListController.subscribe();
|
userTopicsListController.subscribe();
|
||||||
|
|
|
@ -1,14 +1,36 @@
|
||||||
import UserAction from "discourse/models/user-action";
|
import UserAction from "discourse/models/user-action";
|
||||||
import UserTopicListRoute from "discourse/routes/user-topic-list";
|
import UserTopicListRoute from "discourse/routes/user-topic-list";
|
||||||
import { action } from "@ember/object";
|
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({
|
export default UserTopicListRoute.extend({
|
||||||
userActionType: UserAction.TYPES.topics,
|
userActionType: UserAction.TYPES.topics,
|
||||||
|
|
||||||
model() {
|
model() {
|
||||||
return this.store.findFiltered("topicList", {
|
return this.store
|
||||||
filter: "read",
|
.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
|
@action
|
||||||
|
|
|
@ -1,15 +1,32 @@
|
||||||
import UserAction from "discourse/models/user-action";
|
import UserAction from "discourse/models/user-action";
|
||||||
import UserTopicListRoute from "discourse/routes/user-topic-list";
|
import UserTopicListRoute from "discourse/routes/user-topic-list";
|
||||||
import { action } from "@ember/object";
|
import { action } from "@ember/object";
|
||||||
|
import I18n from "I18n";
|
||||||
|
|
||||||
export default UserTopicListRoute.extend({
|
export default UserTopicListRoute.extend({
|
||||||
userActionType: UserAction.TYPES.topics,
|
userActionType: UserAction.TYPES.topics,
|
||||||
|
|
||||||
model: function () {
|
model: function () {
|
||||||
return this.store.findFiltered("topicList", {
|
return this.store
|
||||||
filter:
|
.findFiltered("topicList", {
|
||||||
"topics/created-by/" + this.modelFor("user").get("username_lower"),
|
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
|
@action
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
{{#if showEmptyStatePlaceholder}}
|
{{#if noContent}}
|
||||||
<div class="empty-state">
|
<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">
|
<div class="empty-state-body">
|
||||||
<p>{{emptyState.body}}</p>
|
<p>{{model.emptyState.body}}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
|
|
@ -2,6 +2,7 @@ import {
|
||||||
acceptance,
|
acceptance,
|
||||||
count,
|
count,
|
||||||
exists,
|
exists,
|
||||||
|
query,
|
||||||
queryAll,
|
queryAll,
|
||||||
} from "discourse/tests/helpers/qunit-helpers";
|
} from "discourse/tests/helpers/qunit-helpers";
|
||||||
import { click, visit } from "@ember/test-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']");
|
await click(".nav-pills li a[title='Messages']");
|
||||||
|
|
||||||
assert.equal(
|
assert.equal(
|
||||||
queryAll(".alert").text().trim(),
|
query("span.empty-state-title").innerText.trim(),
|
||||||
I18n.t("choose_topic.none_found"),
|
I18n.t("no_group_messages_title"),
|
||||||
"it should display the right alert"
|
"it should display the right text"
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { acceptance, exists } from "../helpers/qunit-helpers";
|
||||||
|
import { test } from "qunit";
|
||||||
|
import { visit } from "@ember/test-helpers";
|
||||||
|
|
||||||
|
acceptance("User Activity / Read - empty state", function (needs) {
|
||||||
|
needs.user();
|
||||||
|
|
||||||
|
needs.pretender((server, helper) => {
|
||||||
|
const emptyResponse = {
|
||||||
|
topic_list: {
|
||||||
|
topics: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
server.get("/read.json", () => {
|
||||||
|
return helper.response(emptyResponse);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("It renders the empty state panel", async function (assert) {
|
||||||
|
await visit("/u/charlie/activity/read");
|
||||||
|
assert.ok(exists("div.empty-state"));
|
||||||
|
});
|
||||||
|
});
|
|
@ -0,0 +1,24 @@
|
||||||
|
import { acceptance, exists } from "../helpers/qunit-helpers";
|
||||||
|
import { test } from "qunit";
|
||||||
|
import { visit } from "@ember/test-helpers";
|
||||||
|
|
||||||
|
acceptance("User Activity / Topics - empty state", function (needs) {
|
||||||
|
needs.user();
|
||||||
|
|
||||||
|
needs.pretender((server, helper) => {
|
||||||
|
const emptyResponse = {
|
||||||
|
topic_list: {
|
||||||
|
topics: [],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
server.get("/topics/created-by/:username.json", () => {
|
||||||
|
return helper.response(emptyResponse);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
test("It renders the empty state panel", async function (assert) {
|
||||||
|
await visit("/u/charlie/activity/topics");
|
||||||
|
assert.ok(exists("div.empty-state"));
|
||||||
|
});
|
||||||
|
});
|
|
@ -3866,6 +3866,13 @@ en:
|
||||||
no_likes_title: "You haven’t liked any topics yet"
|
no_likes_title: "You haven’t liked any topics yet"
|
||||||
no_likes_body: "A great way to jump in and start contributing is to start reading conversations that have already taken place, and select the %{heartIcon} on posts that you like!"
|
no_likes_body: "A great way to jump in and start contributing is to start reading conversations that have already taken place, and select the %{heartIcon} on posts that you like!"
|
||||||
no_likes_others: "No liked posts."
|
no_likes_others: "No liked posts."
|
||||||
|
no_topics_title: "You have not started any topics yet"
|
||||||
|
no_read_topics_title: "You haven’t read any topics yet"
|
||||||
|
no_read_topics_body: "Once you start reading discussions, you’ll see a list here. To start reading, look for topics that interest you in <a href='%{topUrl}'>Top</a> or <a href='%{categoriesUrl}'>Categories</a> or search by keyword %{searchIcon}"
|
||||||
|
|
||||||
|
no_group_messages_title: "No group messages found"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
# This section is exported to the javascript for i18n in the admin section
|
# This section is exported to the javascript for i18n in the admin section
|
||||||
admin_js:
|
admin_js:
|
||||||
|
|
Loading…
Reference in New Issue