FEATURE: Replace share post popup with share modal (#15875)

This uniformizes the topic share modal and the post link popup. It also
introduces a new feature which can notify the user of a post.

app/assets/javascripts/discourse/app/controllers/share-topic.js

@@ -16,19 +16,31 @@ export default Controller.extend(
   bufferedProperty("invite"),
   {
     topic: null,
+    post: null,
+    allowInvites: false,
+    showNotifyUsers: false,
     restrictedGroups: null,
 
     onShow() {
-      this.set("showNotifyUsers", false);
+      this.setProperties({
+        topic: null,
+        post: null,
+        allowInvites: false,
+        showNotifyUsers: false,
+      });
 
       if (this.model && this.model.read_restricted) {
         this.restrictedGroupWarning();
       }
     },
 
-    @discourseComputed("topic.shareUrl")
-    topicUrl(url) {
-      return url ? getAbsoluteURL(url) : null;
+    @discourseComputed("post.shareUrl", "topic.shareUrl")
+    url(postUrl, topicUrl) {
+      if (postUrl) {
+        return getAbsoluteURL(postUrl);
+      } else if (topicUrl) {
+        return getAbsoluteURL(topicUrl);
+      }
     },
 
     @discourseComputed(
@@ -57,7 +69,7 @@ export default Controller.extend(
       this.set("showNotifyUsers", false);
       Sharing.shareSource(source, {
         title: this.topic.title,
-        url: this.topicUrl,
+        url: this.url,
       });
     },
 
@@ -81,7 +93,10 @@ export default Controller.extend(
 
       ajax(`/t/${this.topic.id}/invite-notify`, {
         type: "POST",
-        data: { usernames: this.users },
+        data: {
+          usernames: this.users,
+          post_number: this.post ? this.post.post_number : undefined,
+        },
       })
         .then(() => {
           this.setProperties({ showNotifyUsers: false });

app/assets/javascripts/discourse/app/initializers/topic-footer-buttons.js

@@ -18,7 +18,7 @@ export default {
       priority: SHARE_PRIORITY,
       label() {
         if (!this.get("topic.isPrivateMessage") || this.site.mobileView) {
-          return "topic.share.title";
+          return "footer_nav.share";
         }
       },
       title: "topic.share.help",

app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs

@@ -1,12 +1,14 @@
-{{#d-modal-body title="topic.share.title"}}
+{{#d-modal-body rawTitle=(if post (i18n "post.share.title" post_number=post.post_number) (i18n "topic.share.title"))}}
   <form>
     <div class="input-group invite-link">
-      <label for="invite-link">{{i18n "topic.share.instructions"}}</label>
+      <label for="invite-link">
+        {{if post (i18n "post.share.instructions" post_number=post.post_number) (i18n "topic.share.instructions")}}
+      </label>
       <div class="link-share-container">
         {{input
           name="invite-link"
           class="invite-link"
-          value=topicUrl
+          value=url
           readonly=true
         }}
         {{copy-button selector="input.invite-link"}}

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

@@ -414,6 +414,5 @@
     editPost=(action "editPost")
     topic=model
     composerVisible=composer.visible
-
   }}
 {{/discourse-topic}}

app/assets/javascripts/discourse/app/widgets/post-menu.js

@@ -271,16 +271,12 @@ registerButton("replies", (attrs, state, siteSettings) => {
   };
 });
 
-registerButton("share", (attrs) => {
+registerButton("share", () => {
   return {
     action: "share",
     className: "share",
     title: "post.controls.share",
     icon: "d-post-share",
-    data: {
-      "share-url": attrs.shareUrl,
-      "post-number": attrs.post_number,
-    },
   };
 });
 

app/assets/javascripts/discourse/app/widgets/post.js

@@ -21,6 +21,8 @@ import { prioritizeNameInUx } from "discourse/lib/settings";
 import { relativeAgeMediumSpan } from "discourse/lib/formatter";
 import { transformBasicPost } from "discourse/lib/transform-post";
 import autoGroupFlairForUser from "discourse/lib/avatar-flair";
+import showModal from "discourse/lib/show-modal";
+import { nativeShare } from "discourse/lib/pwa-utils";
 
 function transformWithCallbacks(post) {
   let transformed = transformBasicPost(post);
@@ -537,6 +539,15 @@ createWidget("post-contents", {
     const post = this.findAncestorModel();
     return post.expand().then(() => (this.state.expandedFirstPost = true));
   },
+
+  share() {
+    const post = this.findAncestorModel();
+    nativeShare(this.capabilities, { url: post.shareUrl }).catch(() => {
+      const topic = post.topic;
+      const controller = showModal("share-topic", { model: topic.category });
+      controller.setProperties({ topic, post });
+    });
+  },
 });
 
 createWidget("post-notice", {

app/assets/javascripts/discourse/tests/integration/widgets/post-test.js

@@ -229,10 +229,7 @@ discourseModule("Integration | Component | Widget | post", function (hooks) {
       this.set("args", { shareUrl: "http://share-me.example.com" });
     },
     test(assert) {
-      assert.ok(
-        exists(".actions button[data-share-url]"),
-        "it renders a share button"
-      );
+      assert.ok(exists(".actions button.share"), "it renders a share button");
     },
   });