DEV: Convert messages user page nav to experimental redesign (#18456)

No tests are written for now as we're still in a highly iterative stage

app/assets/javascripts/discourse/app/components/user-nav/messages-groups-dropdown.js

@@ -0,0 +1,53 @@
+import { gte, reads } from "@ember/object/computed";
+import ComboBoxComponent from "select-kit/components/combo-box";
+import DiscourseURL from "discourse/lib/url";
+import I18n from "I18n";
+import { computed } from "@ember/object";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["messages-dropdown"],
+  classNames: ["message-dropdown"],
+  content: reads("groupsWithMessages"),
+  valueProperty: "name",
+  hasManyGroups: gte("content.length", 10),
+
+  selectKitOptions: {
+    caretDownIcon: "caret-right",
+    caretUpIcon: "caret-down",
+    filterable: "hasManyGroups",
+  },
+
+  groupsWithMessages: computed(function () {
+    const groups = [
+      {
+        name: I18n.t("user.messages.inbox"),
+      },
+    ];
+
+    this.user.groupsWithMessages.forEach((group) => {
+      groups.push({ name: group.name, icon: "inbox" });
+    });
+
+    if (this.pmTaggingEnabled) {
+      groups.push({ name: I18n.t("user.messages.tags") });
+    }
+
+    return groups;
+  }),
+
+  actions: {
+    onChange(item) {
+      let url;
+
+      if (this.user.groups.some((g) => g.name === item)) {
+        url = `/u/${this.user.username}/messages/group/${item}`;
+      } else if (item === I18n.t("user.messages.tags")) {
+        url = `/u/${this.user.username}/messages/tags`;
+      } else {
+        url = `/u/${this.user.username}/messages`;
+      }
+
+      DiscourseURL.routeToUrl(url);
+    },
+  },
+});

app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs

@@ -0,0 +1,105 @@
+<div class="user-navigation-container">
+  {{#if (gt @user.groupsWithMessages.length 0)}}
+    <ol class="category-breadcrumb">
+      <li>
+        <UserNav::MessagesGroupsDropdown @user={{@user}} @pmTaggingEnabled={{@pmTaggingEnabled}} @value={{this.messagesDropdownvalue}} />
+      </li>
+    </ol>
+  {{/if}}
+
+  <ul id="navigation-bar" class="messages-nav nav-pills action-list">
+    {{#if @isPersonal}}
+      <li>
+        <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
+          {{i18n "categories.latest"}}
+        </LinkTo>
+      </li>
+
+      <li class="archive">
+        <LinkTo @route="userPrivateMessages.sent" @model={{@user}}>
+          {{i18n "user.messages.sent"}}
+        </LinkTo>
+      </li>
+
+      {{#if @viewingSelf}}
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new">
+            {{@newLinkText}}
+          </LinkTo>
+        </li>
+
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread">
+            {{@unreadLinkText}}
+          </LinkTo>
+        </li>
+      {{/if}}
+
+      <li class="archive">
+        <LinkTo @route="userPrivateMessages.archive" @model={{@user}}>
+          {{i18n "user.messages.archive"}}
+        </LinkTo>
+      </li>
+    {{/if}}
+
+    {{#each @user.groups as |group|}}
+      {{#if (and @isGroup (eq @groupFilter group.name))}}
+        {{#if @viewingSelf}}
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
+              {{i18n "categories.latest"}}
+            </LinkTo>
+          </li>
+
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
+              {{@newLinkText}}
+            </LinkTo>
+          </li>
+
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
+              {{@unreadLinkText}}
+            </LinkTo>
+          </li>
+        {{/if}}
+
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
+            {{i18n "user.messages.archive"}}
+          </LinkTo>
+        </li>
+      {{/if}}
+    {{/each}}
+
+    {{#if this.displayTags}}
+      <li class="tags">
+        <LinkTo @route="userPrivateMessages.tags" @model={{@user}}>
+          {{i18n "user.messages.all_tags"}}
+        </LinkTo>
+      </li>
+
+      {{#if @tagId}}
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.tagsShow" @model={{@tagId}}>
+            {{@tagId}}
+          </LinkTo>
+        </li>
+      {{/if}}
+    {{/if}}
+
+    <PluginOutlet @name="user-messages-nav" @tagName="span" @connectorTagName="li" @args={{hash model=@user}} />
+  </ul>
+
+  {{#if this.site.desktopView}}
+    <div class="navigation-controls">
+      {{#if @isGroup}}
+        <GroupNotificationsButton @value={{@group.group_user.notification_level}} @onChange={{action @changeGroupNotificationLevel}} />
+      {{/if}}
+
+      {{#if @showNewPM}}
+        <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+      {{/if}}
+    </div>
+  {{/if}}
+</div>

app/assets/javascripts/discourse/app/components/user-nav/messages-nav.js

@@ -0,0 +1,24 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class UserNavMessagesNav extends Component {
+  @service site;
+
+  get messagesDropdownvalue() {
+    switch (this.args.currentRouteName) {
+      case "userPrivateMessages.tags":
+      case "userPrivateMessages.tagsShow":
+        return "tags";
+      default:
+        if (this.args.groupFilter) {
+          return this.args.groupFilter;
+        } else {
+          return "inbox";
+        }
+    }
+  }
+
+  get displayTags() {
+    return this.args.pmTaggingEnabled && this.messagesDropdownvalue === "tags";
+  }
+}

app/assets/javascripts/discourse/app/controllers/user-private-messages.js

@@ -1,6 +1,7 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { action } from "@ember/object";
-import { alias, and, equal } from "@ember/object/computed";
+import { inject as service } from "@ember/service";
+import { alias, and, equal, readOnly } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { VIEW_NAME_WARNINGS } from "discourse/routes/user-private-messages-warnings";
 import I18n from "I18n";
@@ -9,6 +10,7 @@ export const PERSONAL_INBOX = "__personal_inbox__";
 
 export default Controller.extend({
   user: controller(),
+  router: service(),
 
   pmView: false,
   viewingSelf: alias("user.viewingSelf"),
@@ -17,6 +19,7 @@ export default Controller.extend({
   group: null,
   groupFilter: alias("group.name"),
   currentPath: alias("router._router.currentPath"),
+  currentRouteName: readOnly("router.currentRouteName"),
   pmTaggingEnabled: alias("site.can_tag_pms"),
   tagId: null,
 

app/assets/javascripts/discourse/app/templates/user/messages.hbs

@@ -1,103 +1,124 @@
-<DSection @class="user-secondary-navigation" @pageClass="user-messages">
-  <MobileNav @class="messages-nav" @desktopClass="nav-stacked action-list">
-    <li>
-      <LinkTo @route="userPrivateMessages.index" @model={{this.model}}>
-        {{i18n "user.messages.inbox"}}
-      </LinkTo>
-    </li>
+{{#if this.currentUser.redesigned_user_page_nav_enabled}}
+  <DSection @pageClass="user-messages" />
 
-    {{#if this.isPersonal}}
-      <li class="archive">
-        <LinkTo @route="userPrivateMessages.sent" @model={{this.model}}>
-          {{i18n "user.messages.sent"}}
+  <UserNav::MessagesNav
+    @user={{this.model}}
+    @isPersonal={{this.isPersonal}}
+    @viewingSelf={{this.viewingSelf}}
+    @isGroup={{this.isGroup}}
+    @groupFilter={{this.groupFilter}}
+    @newLinkText={{this.newLinkText}}
+    @unreadLinkText={{this.unreadLinkText}}
+    @archiveLinkText={{this.archiveLinkText}}
+    @pmTaggingEnabled={{this.pmTaggingEnabled}}
+    @tagId={{this.tagId}}
+    @showNewPM={{this.showNewPM}}
+    @group={{this.group}}
+    @changeGroupNotificationLevel={{action "changeGroupNotificationLevel"}}
+    @currentRouteName={{this.currentRouteName}}
+  />
+{{else}}
+  <DSection @class="user-secondary-navigation" @pageClass="user-messages">
+    <MobileNav @class="messages-nav" @desktopClass="nav-stacked action-list">
+      <li>
+        <LinkTo @route="userPrivateMessages.index" @model={{this.model}}>
+          {{i18n "user.messages.inbox"}}
         </LinkTo>
       </li>
 
-      {{#if this.viewingSelf}}
+      {{#if this.isPersonal}}
         <li class="archive">
-          <LinkTo @route="userPrivateMessages.new" @model={{this.model}} class="new">
-            {{this.newLinkText}}
+          <LinkTo @route="userPrivateMessages.sent" @model={{this.model}}>
+            {{i18n "user.messages.sent"}}
           </LinkTo>
         </li>
 
+        {{#if this.viewingSelf}}
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.new" @model={{this.model}} class="new">
+              {{this.newLinkText}}
+            </LinkTo>
+          </li>
+
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.unread" @model={{this.model}} class="unread">
+              {{this.unreadLinkText}}
+            </LinkTo>
+          </li>
+        {{/if}}
+
         <li class="archive">
-          <LinkTo @route="userPrivateMessages.unread" @model={{this.model}} class="unread">
-            {{this.unreadLinkText}}
+          <LinkTo @route="userPrivateMessages.archive" @model={{this.model}}>
+            {{i18n "user.messages.archive"}}
           </LinkTo>
         </li>
       {{/if}}
 
-      <li class="archive">
-        <LinkTo @route="userPrivateMessages.archive" @model={{this.model}}>
-          {{i18n "user.messages.archive"}}
-        </LinkTo>
-      </li>
-    {{/if}}
+      {{#each this.model.groups as |group|}}
+        {{#if group.has_messages}}
+          <li>
+            <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
+              {{d-icon "users"}}
+              {{capitalize-string group.name}}
+            </LinkTo>
+          </li>
 
-    {{#each this.model.groups as |group|}}
-      {{#if group.has_messages}}
-        <li>
-          <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
-            {{d-icon "users"}}
-            {{capitalize-string group.name}}
-          </LinkTo>
-        </li>
+          {{#if (and this.isGroup (eq this.groupFilter group.name))}}
+            {{#if this.viewingSelf}}
+              <li class="archive">
+                <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
+                  {{this.newLinkText}}
+                </LinkTo>
+              </li>
 
-        {{#if (and this.isGroup (eq this.groupFilter group.name))}}
-          {{#if this.viewingSelf}}
-            <li class="archive">
-              <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
-                {{this.newLinkText}}
-              </LinkTo>
-            </li>
+              <li class="archive">
+                <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
+                  {{this.unreadLinkText}}
+                </LinkTo>
+              </li>
+            {{/if}}
 
             <li class="archive">
-              <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
-                {{this.unreadLinkText}}
+              <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
+                {{i18n "user.messages.archive"}}
               </LinkTo>
             </li>
           {{/if}}
-
-          <li class="archive">
-            <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
-              {{i18n "user.messages.archive"}}
-            </LinkTo>
-          </li>
         {{/if}}
+      {{/each}}
+
+      {{#if this.pmTaggingEnabled}}
+        <li class="tags">
+          <LinkTo @route="userPrivateMessages.tags" @model={{this.model}}>
+            {{i18n "user.messages.tags"}}
+          </LinkTo>
+
+          {{#if this.tagId}}
+            <li class="archive">
+              <LinkTo @route="userPrivateMessages.tagsShow" @model={{this.tagId}}>
+                {{this.tagId}}
+              </LinkTo>
+            </li>
+          {{/if}}
+        </li>
       {{/if}}
-    {{/each}}
 
-    {{#if this.pmTaggingEnabled}}
-      <li class="tags">
-        <LinkTo @route="userPrivateMessages.tags" @model={{this.model}}>
-          {{i18n "user.messages.tags"}}
-        </LinkTo>
+      <PluginOutlet @name="user-messages-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
+    </MobileNav>
+  </DSection>
 
-        {{#if this.tagId}}
-          <li class="archive">
-            <LinkTo @route="userPrivateMessages.tagsShow" @model={{this.tagId}}>
-              {{this.tagId}}
-            </LinkTo>
-          </li>
-        {{/if}}
-      </li>
-    {{/if}}
+  {{#unless this.site.mobileView}}
+    <section class="user-additional-controls">
+      {{#if this.group}}
+        <GroupNotificationsButton @value={{this.group.group_user.notification_level}} @onChange={{action "changeGroupNotificationLevel"}} />
+      {{/if}}
 
-    <PluginOutlet @name="user-messages-nav" @tagName="span" @connectorTagName="li" @args={{hash model=this.model}} />
-  </MobileNav>
-</DSection>
-
-{{#unless this.site.mobileView}}
-  <section class="user-additional-controls">
-    {{#if this.group}}
-      <GroupNotificationsButton @value={{this.group.group_user.notification_level}} @onChange={{action "changeGroupNotificationLevel"}} />
-    {{/if}}
-
-    {{#if this.showNewPM}}
-      <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
-    {{/if}}
-  </section>
-{{/unless}}
+      {{#if this.showNewPM}}
+        <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+      {{/if}}
+    </section>
+  {{/unless}}
+{{/if}}
 
 <section class="user-content">
   <div class="list-actions">

app/assets/stylesheets/desktop/new-user.scss

@@ -14,6 +14,23 @@
       grid-row-end: 2;
     }
 
+    .user-navigation-container {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 1;
+      grid-row-end: 2;
+
+      display: flex;
+      flex-direction: row;
+    }
+
+    .user-navigation-container ~ .user-content {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 2;
+      grid-row-end: 3;
+    }
+
     .user-content {
       grid-column-start: 1;
       grid-column-end: 3;

app/assets/stylesheets/mobile/new-user.scss

@@ -49,4 +49,17 @@
       @include ellipsis;
     }
   }
+
+  #navigation-bar {
+    margin-top: 1em;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+    margin-bottom: 0;
+    padding-bottom: 0.5em;
+    a {
+      white-space: nowrap;
+    }
+  }
 }

config/locales/client.en.yml

@@ -1275,6 +1275,7 @@ en:
         move_to_archive: "Archive"
         failed_to_move: "Failed to move selected messages (perhaps your network is down)"
         tags: "Tags"
+        all_tags: "All Tags"
         warnings: "Official Warnings"
         read_more_in_group: "Want to read more? Browse other messages in %{groupLink}."
         read_more: "Want to read more? Browse other messages in <a href='%{basePath}/u/%{username}/messages'>personal messages</a>."