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

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.

diff --git a/app/assets/javascripts/discourse/app/components/composer-user-selector.js b/app/assets/javascripts/discourse/app/components/composer-user-selector.js
index 1633794..fd7babb 100644
--- a/app/assets/javascripts/discourse/app/components/composer-user-selector.js
+++ b/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) : [];
   },
 
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js b/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
index 2f8db2d..a5505fa 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-messages.js
+++ b/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`;
diff --git a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js b/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
index 8e2c0c8..e866925 100644
--- a/app/assets/javascripts/discourse/app/widgets/quick-access-panel.js
+++ b/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 "";
     }
diff --git a/app/assets/stylesheets/common/base/_index.scss b/app/assets/stylesheets/common/base/_index.scss
index 449abc7..4ef29d0 100644
--- a/app/assets/stylesheets/common/base/_index.scss
+++ b/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";
diff --git a/app/assets/stylesheets/common/base/empty-state.scss b/app/assets/stylesheets/common/base/empty-state.scss
new file mode 100644
index 0000000..7d78720
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/assets/stylesheets/common/base/menu-panel.scss b/app/assets/stylesheets/common/base/menu-panel.scss
index 1723502..92b6058 100644
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/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;
diff --git a/app/serializers/current_user_serializer.rb b/app/serializers/current_user_serializer.rb
index 3435efa..8f1a9a8 100644
--- a/app/serializers/current_user_serializer.rb
+++ b/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
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 8f22a52..d1a3ba0 100644
--- a/config/locales/client.en.yml
+++ b/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:

GitHub sha: 28d67b45

This commit appears in #12564 which was approved by jjaffeux. It was merged by martin.