UX: Introduce composer-actions when editing a post.

discourse · May 14, 2020 · d7e230c · jjaffeux · May 14, 2020 · d7e230c
1 parent 5b603cb
commit d7e230c
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 25 deletions.
diff --git a/app/assets/javascripts/discourse/app/components/composer-action-title.js b/app/assets/javascripts/discourse/app/components/composer-action-title.js
@@ -23,7 +23,6 @@ export default Component.extend({
   classNames: ["composer-action-title"],
   options: alias("model.replyOptions"),
   action: alias("model.action"),
-  isEditing: equal("action", EDIT),
 
   @discourseComputed("options", "action")
   actionTitle(opts, action) {

diff --git a/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs b/app/assets/javascripts/discourse/app/templates/components/composer-action-title.hbs
@@ -1,18 +1,14 @@
-{{#if isEditing}}
-  {{d-icon "pencil-alt"}}
-{{else}}
-  {{composer-actions
-    composerModel=model
-    replyOptions=model.replyOptions
-    canWhisper=canWhisper
-    openComposer=openComposer
-    closeComposer=closeComposer
-    action=model.action
-    tabindex=tabindex
-    topic=model.topic
-    post=model.post
-  }}
-{{/if}}
+{{composer-actions
+  composerModel=model
+  replyOptions=model.replyOptions
+  canWhisper=canWhisper
+  openComposer=openComposer
+  closeComposer=closeComposer
+  action=model.action
+  tabindex=tabindex
+  topic=model.topic
+  post=model.post
+}}
 
 <span class="action-title">
   {{actionTitle}}

diff --git a/app/assets/javascripts/select-kit/components/composer-actions.js b/app/assets/javascripts/select-kit/components/composer-actions.js
@@ -4,10 +4,12 @@ import {
   PRIVATE_MESSAGE,
   CREATE_TOPIC,
   CREATE_SHARED_DRAFT,
-  REPLY
+  REPLY,
+  EDIT
 } from "discourse/models/composer";
 import Draft from "discourse/models/draft";
 import { computed } from "@ember/object";
+import { equal } from "@ember/object/computed";
 import { camelize } from "@ember/string";
 import { isEmpty } from "@ember/utils";
 
@@ -24,13 +26,23 @@ export default DropdownSelectBoxComponent.extend({
   seq: 0,
   pluginApiIdentifiers: ["composer-actions"],
   classNames: ["composer-actions"],
+  isEditing: equal("action", EDIT),
 
   selectKitOptions: {
-    icon: "share",
+    icon: "iconForComposerAction",
     filterable: false,
     showFullTitle: false
   },
 
+  iconForComposerAction: computed("action", function() {
+    switch (this.action) {
+      case EDIT:
+        return "pencil-alt";
+      default:
+        return "share";
+    }
+  }),
+
   contentChanged() {
     this.set("seq", this.seq + 1);
   },
@@ -54,6 +66,11 @@ export default DropdownSelectBoxComponent.extend({
       this.contentChanged();
     }
 
+    this.set(
+      "selectKit.options.icon",
+      this.action === EDIT ? "pencil-alt" : "share"
+    );
+
     if (isEmpty(this.content)) {
       this.set("selectKit.isHidden", true);
     }
@@ -69,6 +86,7 @@ export default DropdownSelectBoxComponent.extend({
     if (
       this.action !== CREATE_TOPIC &&
       this.action !== CREATE_SHARED_DRAFT &&
+      !this.isEditing &&
       _topicSnapshot
     ) {
       items.push({
@@ -100,7 +118,8 @@ export default DropdownSelectBoxComponent.extend({
 
     if (
       this.siteSettings.enable_personal_messages &&
-      this.action !== PRIVATE_MESSAGE
+      this.action !== PRIVATE_MESSAGE &&
+      !this.isEditing
     ) {
       items.push({
         name: I18n.t(
@@ -115,12 +134,13 @@ export default DropdownSelectBoxComponent.extend({
     }
 
     if (
-      (this.action !== REPLY && _topicSnapshot) ||
-      (this.action === REPLY &&
-        _topicSnapshot &&
-        this.replyOptions.userAvatar &&
-        this.replyOptions.userLink &&
-        this.replyOptions.topicLink)
+      !this.isEditing &&
+      ((this.action !== REPLY && _topicSnapshot) ||
+        (this.action === REPLY &&
+          _topicSnapshot &&
+          this.replyOptions.userAvatar &&
+          this.replyOptions.userLink &&
+          this.replyOptions.topicLink))
     ) {
       items.push({
         name: I18n.t("composer.composer_actions.reply_to_topic.label"),

diff --git a/test/javascripts/acceptance/composer-actions-test.js b/test/javascripts/acceptance/composer-actions-test.js
@@ -339,6 +339,18 @@ QUnit.test(
   }
 );
 
+QUnit.test("editing post", async assert => {
+  const composerActions = selectKit(".composer-actions");
+
+  await visit("/t/internationalization-localization/280");
+  await click("article#post_1 button.show-more-actions");
+  await click("article#post_1 button.edit");
+  await composerActions.expand();
+
+  assert.equal(composerActions.rows().length, 1);
+  assert.equal(composerActions.rowByIndex(0).value(), "reply_to_post");
+});
+
 acceptance("Composer Actions With New Topic Draft", {
   loggedIn: true,
   settings: {