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.

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) {}
   },
 });

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

@@ -39,14 +39,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());

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")}}

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>