UX: Add success state to copy button (#13691)

UX: Add success state to copy button (#13691)

Replaces the message “Topic link copied” with a more intuitive delayed change of the copy button to a success tick.

diff --git a/app/assets/javascripts/discourse/app/components/copy-button.js b/app/assets/javascripts/discourse/app/components/copy-button.js
index 8eae4c3..c1b7eb2 100644
--- a/app/assets/javascripts/discourse/app/components/copy-button.js
+++ b/app/assets/javascripts/discourse/app/components/copy-button.js
@@ -1,8 +1,11 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import discourseDebounce from "discourse-common/lib/debounce";
 
 export default Component.extend({
   tagName: "",
+  copyIcon: "copy",
+  copyClass: "btn-primary",
 
   @action
   copy() {
@@ -14,6 +17,17 @@ export default Component.extend({
       if (this.copied) {
         this.copied();
       }
+
+      this.set("copyIcon", "check");
+      this.set("copyClass", "btn-primary ok");
+
+      discourseDebounce(() => {
+        if (this.isDestroying || this.isDestroyed) {
+          return;
+        }
+        this.set("copyIcon", "copy");
+        this.set("copyClass", "btn-primary");
+      }, 3000);
     } catch (err) {}
   },
 });
diff --git a/app/assets/javascripts/discourse/app/controllers/share-topic.js b/app/assets/javascripts/discourse/app/controllers/share-topic.js
index c4ad16f..7f8d3e2 100644
--- a/app/assets/javascripts/discourse/app/controllers/share-topic.js
+++ b/app/assets/javascripts/discourse/app/controllers/share-topic.js
@@ -40,14 +40,6 @@ export default Controller.extend(
     },
 
     @action
-    copied() {
-      return this.appEvents.trigger("modal-body:flash", {
-        text: I18n.t("topic.share.copied"),
-        messageClass: "success",
-      });
-    },
-
-    @action
     onChangeUsers(usernames) {
       this.set("users", usernames.uniq());
     },
diff --git a/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs b/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
index 7ec679a..6a554d9 100644
--- a/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/copy-button.hbs
@@ -1 +1 @@
-{{d-button class="btn-default" icon="copy" action=(action "copy")}}
+{{d-button class=copyClass icon=copyIcon action=(action "copy")}}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
index 75f5a31..4df7297 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/share-topic.hbs
@@ -9,7 +9,7 @@
           value=topicUrl
           readonly=true
         }}
-        {{copy-button selector="input.invite-link" copied=(action "copied")}}
+        {{copy-button selector="input.invite-link"}}
       </div>
     </div>
 

GitHub sha: aebc6164fc988c674bdf98f05791a6838782763e

This commit appears in #13691 which was approved by CvX. It was merged by SamSaffron.