DEV: Added compatibility with the Glimmer Post Menu (#599)

Author: megothss

assets/javascripts/discourse/components/assign-button.gjs

@@ -0,0 +1,66 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+
+export default class AssignButton extends Component {
+  static shouldRender(args) {
+    return !args.post.firstPost;
+  }
+
+  static hidden(args) {
+    return args.post.assigned_to_user?.id !== args.state.currentUser.id;
+  }
+
+  @service taskActions;
+
+  get icon() {
+    return this.isAssigned ? "user-times" : "user-plus";
+  }
+
+  get isAssigned() {
+    return this.args.post.assigned_to_user || this.args.post.assigned_to_group;
+  }
+
+  get title() {
+    return this.isAssigned
+      ? "discourse_assign.unassign_post.title"
+      : "discourse_assign.assign_post.title";
+  }
+
+  @action
+  acceptAnswer() {
+    if (this.isAssigned) {
+      unassignPost(this.args.post, this.taskActions);
+    } else {
+      assignPost(this.args.post, this.taskActions);
+    }
+  }
+
+  <template>
+    <DButton
+      class={{if
+        this.isAssigned
+        "post-action-menu__unassign-post unassign-post"
+        "post-action-menu__assign-post assign-post"
+      }}
+      ...attributes
+      @action={{this.acceptAnswer}}
+      @icon={{this.icon}}
+      @title={{this.title}}
+    />
+  </template>
+}
+
+// TODO (glimmer-post-menu): Remove these exported functions and move the code into the button action after the widget code is removed
+export function assignPost(post, taskActions) {
+  taskActions.showAssignModal(post, {
+    isAssigned: false,
+    targetType: "Post",
+  });
+}
+
+export async function unassignPost(post, taskActions) {
+  await taskActions.unassign(post.id, "Post");
+  delete post.topic.indirectly_assigned_to[post.id];
+}

assets/javascripts/discourse/initializers/extend-for-assigns.js

@@ -10,10 +10,15 @@ import { registerTopicFooterDropdown } from "discourse/lib/register-topic-footer
 import { escapeExpression } from "discourse/lib/utilities";
 import RawHtml from "discourse/widgets/raw-html";
 import RenderGlimmer from "discourse/widgets/render-glimmer";
+import { withSilencedDeprecations } from "discourse-common/lib/deprecated";
 import getURL from "discourse-common/lib/get-url";
 import { iconHTML, iconNode } from "discourse-common/lib/icon-library";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
+import AssignButton, {
+  assignPost,
+  unassignPost,
+} from "../components/assign-button";
 import BulkActionsAssignUser from "../components/bulk-actions/bulk-assign-user";
 import EditTopicAssignments from "../components/modal/edit-topic-assignments";
 import TopicLevelAssignMenu from "../components/topic-level-assign-menu";
@@ -314,47 +319,9 @@ function initialize(api) {
       },
       before: "top",
     });
-    if (api.getCurrentUser()?.can_assign) {
-      api.addPostMenuButton("assign", (post) => {
-        if (post.firstPost) {
-          return;
-        }
-        if (post.assigned_to_user || post.assigned_to_group) {
-          return {
-            action: "unassignPost",
-            icon: "user-times",
-            className: "unassign-post",
-            title: "discourse_assign.unassign_post.title",
-            position:
-              post.assigned_to_user?.id === api.getCurrentUser().id
-                ? "first"
-                : "second-last-hidden",
-          };
-        } else {
-          return {
-            action: "assignPost",
-            icon: "user-plus",
-            className: "assign-post",
-            title: "discourse_assign.assign_post.title",
-            position: "second-last-hidden",
-          };
-        }
-      });
 
-      api.attachWidgetAction("post", "assignPost", function () {
-        const taskActions = getOwner(this).lookup("service:task-actions");
-        taskActions.showAssignModal(this.model, {
-          isAssigned: false,
-          targetType: "Post",
-        });
-      });
-
-      api.attachWidgetAction("post", "unassignPost", function () {
-        const taskActions = getOwner(this).lookup("service:task-actions");
-        taskActions.unassign(this.model.id, "Post").then(() => {
-          delete this.model.topic.indirectly_assigned_to[this.model.id];
-        });
-      });
+    if (api.getCurrentUser()?.can_assign) {
+      customizePostMenu(api);
     }
   }
 
@@ -528,7 +495,9 @@ function initialize(api) {
       return new RenderGlimmer(
         this,
         "p.assigned-to",
-        hbs`<AssignedToPost @assignedToUser={{@data.assignedToUser}} @assignedToGroup={{@data.assignedToGroup}} @href={{@data.href}} @post={{@data.post}} />`,
+        hbs`
+          <AssignedToPost @assignedToUser={{@data.assignedToUser}} @assignedToGroup={{@data.assignedToGroup}}
+                          @href={{@data.href}} @post={{@data.post}} />`,
         {
           assignedToUser: attrs.post.assigned_to_user,
           assignedToGroup: attrs.post.assigned_to_group,
@@ -755,6 +724,76 @@ function initialize(api) {
   api.addKeyboardShortcut("g a", "", { path: "/my/activity/assigned" });
 }
 
+function customizePostMenu(api) {
+  const transformerRegistered = api.registerValueTransformer(
+    "post-menu-buttons",
+    ({
+      value: dag,
+      context: {
+        post,
+        state,
+        firstButtonKey,
+        lastHiddenButtonKey,
+        secondLastHiddenButtonKey,
+      },
+    }) => {
+      dag.add(
+        "assign",
+        AssignButton,
+        post.assigned_to_user?.id === state.currentUser.id
+          ? {
+              before: firstButtonKey,
+            }
+          : {
+              before: lastHiddenButtonKey,
+              after: secondLastHiddenButtonKey,
+            }
+      );
+    }
+  );
+
+  const silencedKey =
+    transformerRegistered && "discourse.post-menu-widget-overrides";
+
+  withSilencedDeprecations(silencedKey, () => customizeWidgetPostMenu(api));
+}
+
+function customizeWidgetPostMenu(api) {
+  api.addPostMenuButton("assign", (post) => {
+    if (post.firstPost) {
+      return;
+    }
+    if (post.assigned_to_user || post.assigned_to_group) {
+      return {
+        action: "unassignPost",
+        icon: "user-times",
+        className: "unassign-post",
+        title: "discourse_assign.unassign_post.title",
+        position:
+          post.assigned_to_user?.id === api.getCurrentUser().id
+            ? "first"
+            : "second-last-hidden",
+      };
+    } else {
+      return {
+        action: "assignPost",
+        icon: "user-plus",
+        className: "assign-post",
+        title: "discourse_assign.assign_post.title",
+        position: "second-last-hidden",
+      };
+    }
+  });
+
+  api.attachWidgetAction("post", "assignPost", function () {
+    assignPost(this.model, getOwner(this).lookup("service:task-actions"));
+  });
+
+  api.attachWidgetAction("post", "unassignPost", function () {
+    unassignPost(this.model, getOwner(this).lookup("service:task-actions"));
+  });
+}
+
 const REGEXP_USERNAME_PREFIX = /^(assigned:)/gi;
 
 export default {
@@ -794,7 +833,7 @@ export default {
       });
     }
 
-    withPluginApi("0.13.0", (api) => {
+    withPluginApi("1.34.0", (api) => {
       extendTopicModel(api, PLUGIN_ID);
       initialize(api);
       registerTopicFooterButtons(api);

test/javascripts/acceptance/assign-enabled-test.js

@@ -15,7 +15,7 @@ import { cloneJSON } from "discourse-common/lib/object";
 acceptance("Discourse Assign | Assign mobile", function (needs) {
   needs.user();
   needs.mobileView();
-  needs.settings({ assign_enabled: true });
+  needs.settings({ glimmer_post_menu_mode: "enabled", assign_enabled: true });
 
   needs.pretender((server, helper) => {
     server.get("/assign/suggestions", () => {
@@ -52,7 +52,7 @@ acceptance("Discourse Assign | Assign desktop", function (needs) {
   needs.user({
     can_assign: true,
   });
-  needs.settings({ assign_enabled: true });
+  needs.settings({ glimmer_post_menu_mode: "enabled", assign_enabled: true });
 
   needs.pretender((server, helper) => {
     server.get("/assign/suggestions", () => {
@@ -77,15 +77,15 @@ acceptance("Discourse Assign | Assign desktop", function (needs) {
     await visit("/t/internationalization-localization/280");
 
     assert
-      .dom("#post_2 .extra-buttons .d-icon-user-plus")
+      .dom("#post_2 .post-action-menu__assign-post")
       .doesNotExist("assign to post button is hidden");
 
     await click("#post_2 button.show-more-actions");
     assert
-      .dom("#post_2 .extra-buttons .d-icon-user-plus")
+      .dom("#post_2 .post-action-menu__assign-post")
       .exists("assign to post button exists");
 
-    await click("#post_2 .extra-buttons .d-icon-user-plus");
+    await click("#post_2 .post-action-menu__assign-post");
     assert.dom(".assign.d-modal").exists("assign modal opens");
 
     const menu = selectKit(".assign.d-modal .user-chooser");
@@ -126,6 +126,7 @@ acceptance("Discourse Assign | Assign Status enabled", function (needs) {
     can_assign: true,
   });
   needs.settings({
+    glimmer_post_menu_mode: "enabled",
     assign_enabled: true,
     enable_assign_status: true,
     assign_statuses: "New|In Progress|Done",
@@ -187,7 +188,11 @@ acceptance("Discourse Assign | Assign Status disabled", function (needs) {
   needs.user({
     can_assign: true,
   });
-  needs.settings({ assign_enabled: true, enable_assign_status: false });
+  needs.settings({
+    glimmer_post_menu_mode: "enabled",
+    assign_enabled: true,
+    enable_assign_status: false,
+  });
 
   needs.pretender((server, helper) => {
     server.get("/assign/suggestions", () => {
@@ -245,6 +250,7 @@ const remindersFrequency = [
 acceptance("Discourse Assign | User preferences", function (needs) {
   needs.user({ can_assign: true, reminders_frequency: remindersFrequency });
   needs.settings({
+    glimmer_post_menu_mode: "enabled",
     assign_enabled: true,
     remind_assigns_frequency: 43200,
   });
@@ -291,6 +297,7 @@ acceptance(
   function (needs) {
     needs.user({ can_assign: true, reminders_frequency: remindersFrequency });
     needs.settings({
+      glimmer_post_menu_mode: "enabled",
       assign_enabled: true,
       remind_assigns_frequency: 43200,
     });