FEATURE: improve blank page syndrome (#187)

assets/javascripts/discourse-assign/controllers/user-activity-assigned.js.es6

@@ -5,6 +5,9 @@ import { INPUT_DELAY } from "discourse-common/config/environment";
 import { inject as controller } from "@ember/controller";
 import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
+import getURL from "discourse-common/lib/get-url";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import I18n from "I18n";
 
 export default UserTopicsList.extend({
   user: controller(),
@@ -19,6 +22,19 @@ export default UserTopicsList.extend({
     return search;
   },
 
+  @discourseComputed("model.topics.length", "search")
+  doesntHaveAssignments(topicsLength, search) {
+    return !search && !topicsLength;
+  },
+
+  @discourseComputed
+  emptyStateBody() {
+    return I18n.t("user.no_assignments_body", {
+      preferencesUrl: getURL("/my/preferences/notifications"),
+      icon: iconHTML("user-plus"),
+    }).htmlSafe();
+  },
+
   _setSearchTerm(searchTerm) {
     this.set("search", searchTerm);
     this.refreshModel();

assets/javascripts/discourse/templates/user-assigned-topics.hbs

@@ -1,32 +1,42 @@
-<div class="topic-search-div">
-  <div class="form-horizontal bookmark-search-form">
-    {{input
-      class="no-blur"
-      value=searchTerm
-      placeholder=(i18n "discourse_assign.topic_search_placeholder")
-      input=(action "onChangeFilter" value="target.value")
-      autocomplete="discourse"
-    }}
+{{#if doesntHaveAssignments}}
+  <div class="empty-state">
+    <span class="empty-state-title">{{i18n "user.no_assignments_title"}}</span>
+    <div class="empty-state-body">
+      <p>{{emptyStateBody}}</p>
+    </div>
+  </div>
+{{else}}
+  <div class="topic-search-div">
+    <div class="form-horizontal bookmark-search-form">
+      {{input
+        class="no-blur"
+        value=searchTerm
+        placeholder=(i18n "discourse_assign.topic_search_placeholder")
+        input=(action "onChangeFilter" value="target.value")
+        autocomplete="discourse"
+      }}
+    </div>
   </div>
-</div>
 
-{{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list tr" action=(action "loadMore")}}
-  {{basic-assigned-topic-list
-    topicList=model
-    hideCategory=hideCategory
-    showPosters=showPosters
-    bulkSelectEnabled=bulkSelectEnabled
-    selected=selected
-    hasIncoming=hasIncoming
-    incomingCount=incomingCount
-    showInserted=(action "showInserted")
-    tagsForUser=tagsForUser
-    changeSort=(action "changeSort")
-    unassign=(action "unassign")
-    reassign=(action "reassign")
-    onScroll=saveScrollPosition
-    scrollOnLoad=true
-  }}
+  {{#load-more class="paginated-topics-list" selector=".paginated-topics-list .topic-list tr" action=(action "loadMore")}}
+    {{basic-assigned-topic-list
+      topicList=model
+      hideCategory=hideCategory
+      showPosters=showPosters
+      bulkSelectEnabled=bulkSelectEnabled
+      selected=selected
+      hasIncoming=hasIncoming
+      incomingCount=incomingCount
+      showInserted=(action "showInserted")
+      tagsForUser=tagsForUser
+      changeSort=(action "changeSort")
+      unassign=(action "unassign")
+      reassign=(action "reassign")
+      onScroll=saveScrollPosition
+      scrollOnLoad=true
+    }}
+
+    {{conditional-loading-spinner condition=model.loadingMore}}
+  {{/load-more}}
+{{/if}}
 
-  {{conditional-loading-spinner condition=model.loadingMore}}
-{{/load-more}}

test/javascripts/acceptance/assign-disabled-test.js.es6

@@ -7,7 +7,7 @@ import { visit } from "@ember/test-helpers";
 import { clearTopicFooterButtons } from "discourse/lib/register-topic-footer-button";
 import { test } from "qunit";
 
-acceptance("Assign disabled mobile", function (needs) {
+acceptance("Discourse Assign | Assign disabled mobile", function (needs) {
   needs.user();
   needs.mobileView();
   needs.settings({ assign_enabled: false });

test/javascripts/acceptance/un-assign-from-list-test.js.es6

@@ -1,25 +0,0 @@
-import selectKit from "discourse/tests/helpers/select-kit-helper";
-import { acceptance, count } from "discourse/tests/helpers/qunit-helpers";
-import { visit } from "@ember/test-helpers";
-import AssignedTopics from "../fixtures/assigned-topics-fixtures";
-import { test } from "qunit";
-
-acceptance("Discourse Assign | UnAssign/Re-assign from the topics list", function (needs) {
-  needs.user();
-  needs.settings({ assign_enabled: true, assigns_user_url_path: "/" });
-  needs.pretender((server, helper) => {
-    const messagesPath = "/topics/messages-assigned/eviltrout.json";
-    const assigns = AssignedTopics[messagesPath];
-    server.get(messagesPath, () => helper.response(assigns));
-  });
-
-  test("Unassign/Re-assign options are visible", async (assert) => {
-    const options = selectKit(".assign-actions-dropdown");
-
-    await visit("/u/eviltrout/activity/assigned");
-    await options.expand();
-
-    assert.equal(count("li[data-value='unassign']"), 1);
-    assert.equal(count("li[data-value='reassign']"), 1);
-  });
-});

test/javascripts/acceptance/user-assignments-list.js.es6

@@ -0,0 +1,47 @@
+import selectKit from "discourse/tests/helpers/select-kit-helper";
+import {acceptance, count, exists} from "discourse/tests/helpers/qunit-helpers";
+import {visit} from "@ember/test-helpers";
+import AssignedTopics from "../fixtures/assigned-topics-fixtures";
+import {test} from "qunit";
+
+acceptance("Discourse Assign | UnAssign/Re-assign from the topics list", function (needs) {
+  needs.user();
+  needs.settings({ assign_enabled: true, assigns_user_url_path: "/" });
+  needs.pretender((server, helper) => {
+    const messagesPath = "/topics/messages-assigned/eviltrout.json";
+    const assigns = AssignedTopics[messagesPath];
+    server.get(messagesPath, () => helper.response(assigns));
+  });
+
+  test("Unassign/Re-assign options are visible", async (assert) => {
+    const options = selectKit(".assign-actions-dropdown");
+
+    await visit("/u/eviltrout/activity/assigned");
+    await options.expand();
+
+    assert.equal(count("li[data-value='unassign']"), 1);
+    assert.equal(count("li[data-value='reassign']"), 1);
+  });
+});
+
+acceptance("Discourse Assign | A user doesn't have assignments", function (needs) {
+  needs.user();
+  needs.settings({ assign_enabled: true, assigns_user_url_path: "/" });
+  needs.pretender((server, helper) => {
+    const assignments = AssignedTopics["/topics/messages-assigned/eviltrout.json"];
+    assignments.topic_list.topics = [];
+    server.get(
+      "/topics/messages-assigned/eviltrout.json",
+      () => helper.response(assignments));
+  });
+
+  test("It renders the empty state panel", async function (assert) {
+    await visit("/u/eviltrout/activity/assigned");
+    assert.ok(exists("div.empty-state"));
+  });
+
+  test("It does not render the search form", async function (assert) {
+    await visit("/u/eviltrout/activity/assigned");
+    assert.notOk(exists("div.topic-search-div"));
+  });
+});