UX: Composer actions menu header should display the icon of selected action (#12449)

See a video of the change in the PR: https://github.com/discourse/discourse/pull/12449.

app/assets/javascripts/discourse/app/controllers/composer.js

@@ -226,21 +226,31 @@ export default Controller.extend({
 
   isWhispering: or("replyingToWhisper", "model.whisper"),
 
-  @discourseComputed("model.action", "isWhispering")
+  @discourseComputed("model.action", "isWhispering", "model.privateMessage")
-  saveIcon(modelAction, isWhispering) {
+  saveIcon(modelAction, isWhispering, privateMessage) {
     if (isWhispering) {
       return "far-eye-slash";
     }
+    if (privateMessage) {
+      return "envelope";
+    }
 
     return SAVE_ICONS[modelAction];
   },
 
-  @discourseComputed("model.action", "isWhispering", "model.editConflict")
+  @discourseComputed(
-  saveLabel(modelAction, isWhispering, editConflict) {
+    "model.action",
+    "isWhispering",
+    "model.editConflict",
+    "model.privateMessage"
+  )
+  saveLabel(modelAction, isWhispering, editConflict, privateMessage) {
     if (editConflict) {
       return "composer.overwrite_edit";
     } else if (isWhispering) {
       return "composer.create_whisper";
+    } else if (privateMessage) {
+      return "composer.create_pm";
     }
 
     return SAVE_LABELS[modelAction];

app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs

@@ -8,6 +8,8 @@
   tabindex=tabindex
   topic=model.topic
   post=model.post
+  whisper=model.whisper
+  noBump=model.noBump
 }}
 
 <span class="action-title">

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -25,14 +25,13 @@
                 {{plugin-outlet name="composer-action-after" noTags=true args=(hash model=model)}}
 
                 {{#unless site.mobileView}}
-                  {{#if isWhispering}}
-                    <span class="whisper">{{d-icon "far-eye-slash"}}</span>
-                  {{/if}}
                   {{#if model.unlistTopic}}
                     <span class="unlist">({{i18n "composer.unlist"}})</span>
                   {{/if}}
-                  {{#if model.noBump}}
+                  {{#if isWhispering}}
-                    <span class="no-bump">{{d-icon "anchor"}}</span>
+                    {{#if model.noBump}}
+                      <span class="no-bump">{{d-icon "anchor"}}</span>
+                    {{/if}}
                   {{/if}}
                 {{/unless}}
 

app/assets/javascripts/discourse/tests/acceptance/composer-actions-test.js

@@ -110,11 +110,25 @@ acceptance("Composer Actions", function (needs) {
       "test replying as whisper to topic when initially not a whisper"
     );
 
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
+      "whisper icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_whisper");
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
+      "whisper icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
     );
   });
 
@@ -277,25 +291,75 @@ acceptance("Composer Actions", function (needs) {
     await click("article#post_3 button.reply");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 0,
+      queryAll(".composer-actions svg.d-icon-anchor").length === 0,
-      "no-bump text is not visible"
+      "no-bump icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
     );
 
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_topic_bump");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 1,
+      queryAll(".composer-actions svg.d-icon-anchor").length === 1,
       "no-bump icon is visible"
     );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
+    );
 
     await composerActions.expand();
     await composerActions.selectRowByValue("toggle_topic_bump");
 
     assert.ok(
-      queryAll(".composer-fields .no-bump").length === 0,
+      queryAll(".composer-actions svg.d-icon-anchor").length === 0,
       "no-bump icon is not visible"
     );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+  });
+
+  test("replying to post - whisper and no bump", async function (assert) {
+    const composerActions = selectKit(".composer-actions");
+
+    await visit("/t/internationalization-localization/280");
+    await click("article#post_3 button.reply");
+
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
+      "whisper icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-fields .whisper .d-icon-anchor").length === 0,
+      "no-bump icon is not visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 1,
+      "reply icon is visible"
+    );
+
+    await composerActions.expand();
+    await composerActions.selectRowByValue("toggle_topic_bump");
+    await composerActions.expand();
+    await composerActions.selectRowByValue("toggle_whisper");
+
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
+      "whisper icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-fields .no-bump .d-icon-anchor").length === 1,
+      "no-bump icon is visible"
+    );
+    assert.ok(
+      queryAll(".composer-actions svg.d-icon-share").length === 0,
+      "reply icon is not visible"
+    );
   });
 
   test("replying to post as staff", async function (assert) {
@@ -428,6 +492,10 @@ acceptance("Composer Actions With New Topic Draft", function (needs) {
         queryAll("#reply-control .btn-primary.create .d-button-label").text(),
         I18n.t("composer.create_shared_draft")
       );
+      assert.ok(
+        queryAll(".composer-actions svg.d-icon-far-clipboard").length === 1,
+        "shared draft icon is visible"
+      );
 
       assert.ok(queryAll("#reply-control.composing-shared-draft").length === 1);
       await click(".modal-footer .btn.btn-default");

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -460,7 +460,7 @@ acceptance("Composer", function (needs) {
     await menu.selectRowByValue("toggleWhisper");
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1,
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
       "it sets the post type to whisper"
     );
 
@@ -468,7 +468,7 @@ acceptance("Composer", function (needs) {
     await menu.selectRowByValue("toggleWhisper");
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 0,
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 0,
       "it removes the whisper mode"
     );
 
@@ -534,7 +534,7 @@ acceptance("Composer", function (needs) {
     );
 
     assert.ok(
-      queryAll(".composer-fields .whisper .d-icon-far-eye-slash").length === 1,
+      queryAll(".composer-actions svg.d-icon-far-eye-slash").length === 1,
       "it sets the post type to whisper"
     );
 
@@ -769,6 +769,21 @@ acceptance("Composer", function (needs) {
     );
   };
 
+  test("reply button has envelope icon when replying to private message", async function (assert) {
+    await visit("/t/34");
+    await click("article#post_3 button.reply");
+    assert.equal(
+      queryAll(".save-or-cancel button.create").text().trim(),
+      I18n.t("composer.create_pm"),
+      "reply button says Message"
+    );
+    assert.ok(
+      queryAll(".save-or-cancel button.create svg.d-icon-envelope").length ===
+        1,
+      "reply button has envelope icon"
+    );
+  });
+
   test("Image resizing buttons", async function (assert) {
     await visit("/");
     await click("#create-topic");

app/assets/javascripts/select-kit/addon/components/composer-actions.js

@@ -37,11 +37,19 @@ export default DropdownSelectBoxComponent.extend({
     showFullTitle: false,
   },
 
-  iconForComposerAction: computed("action", function () {
+  iconForComposerAction: computed("action", "whisper", "noBump", function () {
     if (this.isEditing) {
       return "pencil-alt";
     } else if (this.action === CREATE_TOPIC) {
       return "plus";
+    } else if (this.action === PRIVATE_MESSAGE) {
+      return "envelope";
+    } else if (this.action === CREATE_SHARED_DRAFT) {
+      return "far-clipboard";
+    } else if (this.whisper) {
+      return "far-eye-slash";
+    } else if (this.noBump) {
+      return "anchor";
     } else {
       return "share";
     }