UX: Improve quick access copy when no topics present (#151)

assets/javascripts/discourse/widgets/quick-access-assignments.js.es6

@@ -1,14 +1,43 @@
-import { createWidgetFrom, queryRegistry } from "discourse/widgets/widget";
+import RawHtml from "discourse/widgets/raw-html";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import {
+  createWidget,
+  createWidgetFrom,
+  queryRegistry,
+} from "discourse/widgets/widget";
+import getURL from "discourse-common/lib/get-url";
 import { postUrl } from "discourse/lib/utilities";
+import { h } from "virtual-dom";
+import I18n from "I18n";
 
 const ICON = "user-plus";
 
+createWidget("no-quick-access-assignments", {
+  html() {
+    return h("div.empty-state", [
+      h("span.empty-state-title", I18n.t("user.no_assignments_title")),
+      h(
+        "div.empty-state-body",
+        new RawHtml({
+          html:
+            "<p>" +
+            I18n.t("user.no_assignments_body", {
+              preferencesUrl: getURL("/my/preferences/notifications"),
+              icon: iconHTML(ICON),
+            }).htmlSafe() +
+            "</p>",
+        })
+      ),
+    ]);
+  },
+});
+
 const QuickAccessPanel = queryRegistry("quick-access-panel");
 
 if (QuickAccessPanel) {
   createWidgetFrom(QuickAccessPanel, "quick-access-assignments", {
     buildKey: () => "quick-access-assignments",
-    emptyStatePlaceholderItemKey: "choose_topic.none_found",
+    emptyStateWidget: "no-quick-access-assignments",
 
     showAllHref() {
       return `${this.attrs.path}/activity/assigned`;

config/locales/client.en.yml

@@ -48,6 +48,11 @@ en:
       messages:
         assigned_title: "Assigned (%{count})"
         assigned: "Assigned"
+      no_assignments_title: "You don’t have any assignments yet"
+      no_assignments_body: >
+        Your assigned topics and messages will be listed here. You will also receive a periodic reminder notification of your assignments, which you can adjust in your <a href='%{preferencesUrl}'>user preferences</a>.
+        <br><br>
+        To assign a topic or message to yourself or to someone else, look for the %{icon} assign button at the bottom.
     admin:
       web_hooks:
         assign_event: