DEV: Upgrade post menu buttons to the Glimmer API (#22)

.discourse-compatibility

@@ -1,2 +1,3 @@
+< 3.4.0.beta3-dev: 7ee4963dbcfb9daa1d9391cf9f917b19b7be8ef7
 < 3.4.0.beta1-dev: ebdcb7c5fd4fed3beaa4f96a535a038dcfabaa1c
 < 3.3.0.beta1-dev: 68e25649fb16deba5caab0e63e37103fedd8313e

README.md

@@ -1 +1,5 @@
-# raw-post-button
+# ** raw-post-button **
+
+Raw Post Button will add a button to the post menu. When you click the button, you’ll get a modal / popover with the raw (markdown) version of the post.
+
+For more information, please see: https://meta.discourse.org/t/raw-post-button/152542

javascripts/discourse/api-initializers/initialize-for-raw-post-button.js

@@ -1,9 +1,7 @@
-import FullscreenCode from "discourse/components/modal/fullscreen-code";
-import { ajax } from "discourse/lib/ajax";
-import { popupAjaxError } from "discourse/lib/ajax-error";
 import { apiInitializer } from "discourse/lib/api";
+import ShowRawButton from "../components/show-raw-button";
 
-export default apiInitializer("0.8", (api) => {
+export default apiInitializer("1.34.0", (api) => {
   const currentUser = api.getCurrentUser();
   if (!currentUser) {
     return;
@@ -15,24 +13,16 @@ export default apiInitializer("0.8", (api) => {
     return;
   }
 
-  api.addPostMenuButton("show-raw", () => ({
-    async action({ post }) {
-      try {
-        const response = await ajax(`/posts/${post.id}/raw`, {
-          dataType: "text",
-        });
-        api.container.lookup("service:modal").show(FullscreenCode, {
-          model: {
-            code: response,
-          },
-        });
-      } catch (e) {
-        popupAjaxError(e);
-      }
-    },
-    icon: "file-alt",
-    className: "raw-post",
-    title: themePrefix("button_title"),
-    position: "second-last-hidden",
-  }));
+  api.registerValueTransformer(
+    "post-menu-buttons",
+    ({
+      value: dag,
+      context: { lastHiddenButtonKey, secondLastHiddenButtonKey },
+    }) => {
+      dag.add("show-raw", ShowRawButton, {
+        before: lastHiddenButtonKey,
+        after: secondLastHiddenButtonKey,
+      });
+    }
+  );
 });

javascripts/discourse/components/show-raw-button.gjs

@@ -0,0 +1,40 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
+import FullscreenCode from "discourse/components/modal/fullscreen-code";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
+
+export default class ShowRawButton extends Component {
+  static hidden = true;
+
+  @service modal;
+
+  @action
+  async showRaw() {
+    try {
+      const response = await ajax(`/posts/${this.args.post.id}/raw`, {
+        dataType: "text",
+      });
+      await this.modal.show(FullscreenCode, {
+        model: {
+          code: response,
+        },
+      });
+    } catch (e) {
+      popupAjaxError(e);
+    }
+  }
+
+  <template>
+    <DButton
+      class="post-action-menu__raw-post raw-post"
+      ...attributes
+      @action={{this.showRaw}}
+      @icon="file-lines"
+      @label={{if @showLabel (themePrefix "button_label")}}
+      @title={{themePrefix "button_title"}}
+    />
+  </template>
+}

locales/en.yml

@@ -1,2 +1,3 @@
 en:
+  button_label: "Raw Post"
   button_title: "Raw Post"

spec/system/raw_post_button_spec.rb

@@ -11,7 +11,12 @@
     sign_in user
     visit "/t/#{post.topic_id}"
 
-    find(".extra-buttons .raw-post").click
+    # test if the button is hidden by default
+    expect(page).to have_no_css(".post-controls .actions .post-action-menu__raw-post")
+
+    # expand the buttons and click in raw post
+    find(".post-controls .actions .post-action-menu__show-more").click
+    find(".post-controls .actions .post-action-menu__raw-post").click
 
     expect(page).to have_css(".fullscreen-code-modal")
     expect(find(".fullscreen-code-modal code")).to have_text("**This is a test post**")