FEATURE: Show an educational message in the quick access menu for personal messages when there are none (#12564)

If the user has not been sent any messages, show a message in the quick access menu with an educational message. If the user can send private messages, also show a link to open the "new message" composer:

This also adds a general improvement to the quick-access-panel, to be able to show an `emptyStateWidget` instead of just a message if there is nothing to show in the panel, as well as initial general styles for empty state.

app/assets/javascripts/discourse/app/components/composer-user-selector.js

@@ -18,6 +18,9 @@ export default Component.extend({
 
   @discourseComputed("recipients")
   splitRecipients(recipients) {
+    if (Array.isArray(recipients)) {
+      return recipients;
+    }
     return recipients ? recipients.split(",").filter(Boolean) : [];
   },
 

app/assets/javascripts/discourse/app/widgets/quick-access-messages.js

@@ -1,6 +1,11 @@
+import RawHtml from "discourse/widgets/raw-html";
+import { iconHTML } from "discourse-common/lib/icon-library";
+import { h } from "virtual-dom";
 import QuickAccessPanel from "discourse/widgets/quick-access-panel";
-import { createWidgetFrom } from "discourse/widgets/widget";
+import { createWidget, createWidgetFrom } from "discourse/widgets/widget";
 import { postUrl } from "discourse/lib/utilities";
+import getURL from "discourse-common/lib/get-url";
+import I18n from "I18n";
 
 const ICON = "notification.private_message";
 
@@ -20,9 +25,46 @@ function toItem(message) {
   };
 }
 
+createWidget("no-quick-access-messages", {
+  html() {
+    let privacyLink =
+      this.siteSettings.privacy_policy_url || getURL("/privacy");
+
+    let rawHtml = [
+      `<div class="empty-state-body">
+      <p>
+      ${I18n.t("user.no_messages_body", {
+        privacyLink,
+      }).htmlSafe()}</p>`,
+    ];
+
+    if (this.currentUser.can_send_private_messages) {
+      rawHtml.push(
+        `<p>
+          <a class="btn btn-primary btn-icon-text" href="${getURL(
+            ""
+          )}/new-message">
+            ${iconHTML("envelope")}${I18n.t(
+          "user.new_private_message"
+        ).htmlSafe()}
+          </a>
+        </p>`
+      );
+    }
+    rawHtml.push("</div>");
+
+    return h("div.empty-state", [
+      h("span.empty-state-title", I18n.t("user.no_messages_title")),
+      new RawHtml({
+        html: rawHtml.join(""),
+      }),
+    ]);
+  },
+});
+
 createWidgetFrom(QuickAccessPanel, "quick-access-messages", {
   buildKey: () => "quick-access-messages",
-  emptyStatePlaceholderItemKey: "choose_topic.none_found",
+  emptyStateWidget: "no-quick-access-messages",
 
   showAllHref() {
     return `${this.attrs.path}/messages`;

app/assets/javascripts/discourse/app/widgets/quick-access-panel.js

@@ -14,7 +14,8 @@ import { h } from "virtual-dom";
  */
 export default createWidget("quick-access-panel", {
   tagName: "div.quick-access-panel",
-  emptyStatePlaceholderItemKey: "",
+  emptyStatePlaceholderItemKey: null,
+  emptyStateWidget: null,
 
   buildKey: () => {
     throw Error('Cannot attach abstract widget "quick-access-panel".');
@@ -60,6 +61,8 @@ export default createWidget("quick-access-panel", {
   emptyStatePlaceholderItem() {
     if (this.emptyStatePlaceholderItemKey) {
       return h("li.read", I18n.t(this.emptyStatePlaceholderItemKey));
+    } else if (this.emptyStateWidget) {
+      return this.attach(this.emptyStateWidget);
     } else {
       return "";
     }

app/assets/stylesheets/common/base/_index.scss

@@ -16,6 +16,7 @@
 @import "discourse";
 @import "edit-category";
 @import "edit-topic-timer-modal";
+@import "empty-state";
 @import "ember-select";
 @import "emoji";
 @import "exception";

app/assets/stylesheets/common/base/empty-state.scss

@@ -0,0 +1,19 @@
+.empty-state {
+  background: var(--tertiary-low);
+  color: var(--primary);
+  margin: 0;
+  padding: 1em 1.5em;
+  display: flex;
+  flex-direction: column;
+
+  .empty-state-title {
+    font-weight: 700;
+    padding: 0 0 0.5em 0;
+    margin: 0;
+  }
+
+  .empty-state-body {
+    padding: 0;
+    margin: 0;
+  }
+}

app/assets/stylesheets/common/base/menu-panel.scss

@@ -224,6 +224,12 @@
       color: var(--primary-high);
     }
 
+    .btn-primary {
+      .d-icon {
+        color: var(--secondary);
+      }
+    }
+
     ul {
       display: flex;
       flex-flow: column wrap;

app/serializers/current_user_serializer.rb

@@ -19,6 +19,7 @@ class CurrentUserSerializer < BasicUserSerializer
              :dynamic_favicon,
              :trust_level,
              :can_send_private_email_messages,
+             :can_send_private_messages,
              :can_edit,
              :can_invite_to_forum,
              :no_password,
@@ -126,6 +127,10 @@ class CurrentUserSerializer < BasicUserSerializer
     scope.can_send_private_messages_to_email?
   end
 
+  def can_send_private_messages
+    scope.can_send_private_message?(Discourse.system_user)
+  end
+
   def can_edit
     true
   end

config/locales/client.en.yml

@@ -1022,6 +1022,10 @@ en:
       dismiss: "Dismiss"
       dismiss_notifications: "Dismiss All"
       dismiss_notifications_tooltip: "Mark all unread notifications as read"
+      no_messages_title: "You don’t have any messages"
+      no_messages_body: >
+        Moderators may send a personal message just to you with guidance on how to participate here. You can also send messages to moderators, to ask them for help or to ask questions, or to an individual or group of fellow users.<br><br>
+        Please contribute to this community by participating in public topics. Use messaging as a last resort when you want to reach a specific person. Please note: staff can read all messages. See <a href='%{privacyLink}' target='blank'>privacy policy</a>.
       first_notification: "Your first notification! Select it to begin."
       dynamic_favicon: "Show counts on browser icon"
       skip_new_user_tips: