FEATURE: add the set user status button to the new user menu (#18079)

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.hbs

@@ -1,4 +1,25 @@
 <ul>
+  {{#if this.siteSettings.enable_user_status}}
+    <li class="set-user-status">
+      <DButton @class="btn-flat profile-tab-btn" @action={{this.setUserStatusClick}}>
+        {{#if this.currentUser.status}}
+          {{emoji this.currentUser.status.emoji}}
+          <span class="item-label">
+            {{this.currentUser.status.description}}
+            {{#if this.currentUser.status.ends_at}}
+              {{format-age this.currentUser.status.ends_at}}
+            {{/if}}
+          </span>
+        {{else}}
+          {{d-icon "plus-circle"}}
+          <span class="item-label">
+            {{i18n "user_status.set_custom_status"}}
+          </span>
+        {{/if}}
+      </DButton>
+    </li>
+  {{/if}}
+
   <li class="summary">
     <LinkTo @route="user.summary" @model={{this.currentUser}}>
       {{d-icon "user"}}

app/assets/javascripts/discourse/app/components/user-menu/profile-tab-content.js

@@ -60,4 +60,12 @@ export default class UserMenuProfileTabContent extends Component {
       showModal("do-not-disturb");
     }
   }
+
+  @action
+  setUserStatusClick() {
+    showModal("user-status", {
+      title: "user_status.set_custom_status",
+      modalClass: "user-status",
+    });
+  }
 }

app/assets/javascripts/discourse/tests/acceptance/user-status-test.js

@@ -80,8 +80,9 @@ acceptance("User Status", function (needs) {
     await click(".menu-links-row .user-preferences-link");
 
     assert.equal(
-      query("div.quick-access-panel li.user-status span.d-button-label")
-        .innerText,
+      query(
+        "div.quick-access-panel li.user-status span.d-button-label"
+      ).textContent.trim(),
       userStatus,
       "shows user status description on the menu"
     );
@@ -177,8 +178,9 @@ acceptance("User Status", function (needs) {
     await click(".header-dropdown-toggle.current-user");
     await click(".menu-links-row .user-preferences-link");
     assert.equal(
-      query("div.quick-access-panel li.user-status span.d-button-label")
-        .innerText,
+      query(
+        "div.quick-access-panel li.user-status span.d-button-label"
+      ).textContent.trim(),
       userStatus,
       "shows user status description on the menu"
     );
@@ -205,8 +207,9 @@ acceptance("User Status", function (needs) {
     await click(".header-dropdown-toggle.current-user");
     await click(".menu-links-row .user-preferences-link");
     assert.equal(
-      query("div.quick-access-panel li.user-status span.d-button-label")
-        .innerText,
+      query(
+        "div.quick-access-panel li.user-status span.d-button-label"
+      ).textContent.trim(),
       updatedStatus,
       "shows user status description on the menu"
     );
@@ -243,8 +246,9 @@ acceptance("User Status", function (needs) {
     await click(".menu-links-row .user-preferences-link");
 
     assert.equal(
-      query("div.quick-access-panel li.user-status span.relative-date")
-        .innerText,
+      query(
+        "div.quick-access-panel li.user-status span.relative-date"
+      ).textContent.trim(),
       "1h",
       "shows user status timer on the menu"
     );
@@ -340,3 +344,83 @@ acceptance("User Status", function (needs) {
     );
   });
 });
+
+acceptance("User Status - new user menu", function (needs) {
+  const userStatus = "off to dentist";
+  const userStatusEmoji = "tooth";
+  const userId = 1;
+  const userTimezone = "UTC";
+
+  needs.user({
+    id: userId,
+    timezone: userTimezone,
+    redesigned_user_menu_enabled: true,
+  });
+
+  needs.pretender((server, helper) => {
+    server.put("/user-status.json", () => {
+      publishToMessageBus(`/user-status/${userId}`, {
+        description: userStatus,
+        emoji: userStatusEmoji,
+      });
+      return helper.response({ success: true });
+    });
+    server.delete("/user-status.json", () => {
+      publishToMessageBus(`/user-status/${userId}`, null);
+      return helper.response({ success: true });
+    });
+  });
+
+  test("doesn't show the user status button on the menu by default", async function (assert) {
+    this.siteSettings.enable_user_status = false;
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click("#user-menu-button-profile");
+
+    assert.notOk(exists("li.set-user-status"));
+  });
+
+  test("shows the user status button on the menu when enabled in settings", async function (assert) {
+    this.siteSettings.enable_user_status = true;
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click("#user-menu-button-profile");
+
+    assert.ok(exists("li.set-user-status .btn"), "shows the button");
+    assert.ok(
+      exists("li.set-user-status svg.d-icon-plus-circle"),
+      "shows the icon on the button"
+    );
+  });
+
+  test("shows user status on the button", async function (assert) {
+    this.siteSettings.enable_user_status = true;
+    updateCurrentUser({
+      status: { description: userStatus, emoji: userStatusEmoji },
+    });
+
+    await visit("/");
+    await click(".header-dropdown-toggle.current-user");
+    await click("#user-menu-button-profile");
+
+    assert.equal(
+      query("li.set-user-status .item-label").textContent.trim(),
+      userStatus,
+      "shows user status description on the menu"
+    );
+
+    assert.equal(
+      query("li.set-user-status .emoji").alt,
+      `${userStatusEmoji}`,
+      "shows user status emoji on the menu"
+    );
+
+    assert.equal(
+      query(".header-dropdown-toggle .user-status-background img.emoji").alt,
+      `:${userStatusEmoji}:`,
+      "shows user status emoji on the user avatar in the header"
+    );
+  });
+});

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

@@ -208,7 +208,18 @@
   #quick-access-profile {
     display: inline;
 
+    .set-user-status {
+      .emoji {
+        padding-top: 0;
+      }
+    }
+
     .profile-tab-btn {
+      .relative-date {
+        font-size: $font-down-3;
+        color: var(--primary-medium);
+      }
+
       justify-content: unset;
       line-height: $line-height-large;
       width: 100%;
@@ -219,11 +230,6 @@
     }
 
     .do-not-disturb {
-      .relative-date {
-        font-size: $font-down-3;
-        color: var(--primary-medium);
-      }
-
       .d-icon-toggle-on {
         color: var(--tertiary);
       }