UX: multiple drafts menu improvements (#31195)

This change includes the following updates:

- Rename view all to view all drafts
- Remove view all link from drop-down when all drafts are displayed in
the menu
- Different icon for draft topics and PMs (adds envelope for PMs)
- Disable drop-down when New Topic button is disabled (private
categories etc)
- Improve drafts drop-down loading (no longer disables the trigger btn
on click)

app/assets/javascripts/discourse/app/components/create-topic-button.hbs

@@ -18,6 +18,6 @@
   </DButtonTooltip>
 
   {{#if @showDrafts}}
-    <TopicDraftsDropdown />
+    <TopicDraftsDropdown @disabled={{this.disabled}} />
   {{/if}}
 {{/if}}

app/assets/javascripts/discourse/app/components/topic-drafts-dropdown.gjs

@@ -7,6 +7,10 @@ import { or } from "truth-helpers";
 import DButton from "discourse/components/d-button";
 import DropdownMenu from "discourse/components/dropdown-menu";
 import DiscourseURL from "discourse/lib/url";
+import {
+  NEW_PRIVATE_MESSAGE_KEY,
+  NEW_TOPIC_KEY,
+} from "discourse/models/composer";
 import { i18n } from "discourse-i18n";
 import DMenu from "float-kit/components/d-menu";
 
@@ -35,6 +39,20 @@ export default class TopicDraftsDropdown extends Component {
       : "";
   }
 
+  draftIcon(item) {
+    if (item.draft_key.startsWith(NEW_TOPIC_KEY)) {
+      return "layer-group";
+    } else if (item.draft_key.startsWith(NEW_PRIVATE_MESSAGE_KEY)) {
+      return "envelope";
+    } else {
+      return "reply";
+    }
+  }
+
+  get showViewAll() {
+    return this.draftCount > DRAFTS_LIMIT;
+  }
+
   @action
   onRegisterApi(api) {
     this.dMenu = api;
@@ -42,6 +60,10 @@ export default class TopicDraftsDropdown extends Component {
 
   @action
   async onShowMenu() {
+    if (this.loading) {
+      return;
+    }
+
     this.loading = true;
 
     try {
@@ -82,7 +104,7 @@ export default class TopicDraftsDropdown extends Component {
       @onShow={{this.onShowMenu}}
       @onRegisterApi={{this.onRegisterApi}}
       @modalForMobile={{true}}
-      @disabled={{this.loading}}
+      @disabled={{@disabled}}
       class="btn-small btn-default"
     >
       <:content>
@@ -91,7 +113,7 @@ export default class TopicDraftsDropdown extends Component {
             <dropdown.item class="topic-drafts-item">
               <DButton
                 @action={{fn this.resumeDraft draft}}
-                @icon={{if draft.topic_id "reply" "layer-group"}}
+                @icon={{this.draftIcon draft}}
                 @translatedLabel={{or
                   draft.title
                   (i18n "drafts.dropdown.untitled")
@@ -101,6 +123,7 @@ export default class TopicDraftsDropdown extends Component {
             </dropdown.item>
           {{/each}}
 
+          {{#if this.showViewAll}}
             <dropdown.divider />
 
             <dropdown.item>
@@ -115,6 +138,7 @@ export default class TopicDraftsDropdown extends Component {
                 <span>{{i18n "drafts.dropdown.view_all"}}</span>
               </DButton>
             </dropdown.item>
+          {{/if}}
         </DropdownMenu>
       </:content>
     </DMenu>

app/assets/stylesheets/desktop/components/drafts-dropdown-menu.scss

@@ -1,3 +1,4 @@
 .topic-drafts-menu-content .dropdown-menu {
-  max-width: 300px;
+  max-width: 350px;
+  min-width: 275px;
 }

config/locales/client.en.yml

@@ -500,7 +500,7 @@ en:
       dropdown:
         title: "Open the latest drafts menu"
         untitled: "Untitled draft"
-        view_all: "view all"
+        view_all: "view all drafts"
         other_drafts:
           one: "+%{count} other draft"
           other: "+%{count} other drafts"

spec/system/drafts_dropdown_spec.rb

@@ -64,5 +64,57 @@ describe "Drafts dropdown", type: :system do
       expect(drafts_dropdown.draft_item_count).to eq(4)
       expect(drafts_dropdown.other_drafts_count).to eq(1)
     end
+
+    it "shows the view all drafts when there are other drafts to display" do
+      page.visit "/"
+      drafts_dropdown.open
+
+      expect(drafts_dropdown).to be_open
+      expect(drafts_dropdown).to have_view_all_link
+    end
+
+    it "does not show the view all drafts link when all drafts are displayed" do
+      Draft.where(user_id: user.id).order("created_at DESC").limit(2).destroy_all
+
+      page.visit "/"
+      drafts_dropdown.open
+
+      expect(drafts_dropdown).to be_open
+      expect(drafts_dropdown).to have_no_view_all_link
+    end
+  end
+
+  describe "with private category" do
+    fab!(:group)
+    fab!(:group_user) { Fabricate(:group_user, user: user, group: group) }
+    fab!(:category) { Fabricate(:private_category, group: group, permission_type: 3) }
+    fab!(:subcategory) do
+      Fabricate(
+        :private_category,
+        parent_category_id: category.id,
+        group: group,
+        permission_type: 1,
+      )
+    end
+
+    let(:category_page) { PageObjects::Pages::Category.new }
+
+    before do
+      SiteSetting.default_subcategory_on_read_only_category = false
+
+      Draft.set(
+        user,
+        Draft::NEW_TOPIC,
+        0,
+        { title: "This is a test topic", reply: "Lorem ipsum dolor sit amet" }.to_json,
+      )
+    end
+
+    it "disables the drafts dropdown menu when new topic button is disabled" do
+      category_page.visit(category)
+
+      expect(category_page).to have_button("New Topic", disabled: true)
+      expect(drafts_dropdown).to be_disabled
+    end
   end
 end

spec/system/page_objects/components/drafts_menu.rb

@@ -13,6 +13,10 @@ module PageObjects
         has_no_css?(MENU_SELECTOR + "-trigger")
       end
 
+      def disabled?
+        find(MENU_SELECTOR + "-trigger")["disabled"]
+      end
+
       def open?
         has_css?(MENU_SELECTOR + "-content")
       end
@@ -21,6 +25,14 @@ module PageObjects
         has_no_css?(MENU_SELECTOR + "-content")
       end
 
+      def has_view_all_link?
+        has_css?(MENU_SELECTOR + "-content .view-all-drafts")
+      end
+
+      def has_no_view_all_link?
+        has_no_css?(MENU_SELECTOR + "-content .view-all-drafts")
+      end
+
       def open
         find(MENU_SELECTOR + "-trigger").click
       end