REFACTOR: admin-customize-colors-show (#16525)

- native class
- drops jquery
- @action
- uses clipboardCopy
- filterBy

app/assets/javascripts/admin/addon/controllers/admin-customize-colors-show.js

@@ -3,36 +3,32 @@ import I18n from "I18n";
 import bootbox from "bootbox";
 import discourseComputed from "discourse-common/utils/decorators";
 import { later } from "@ember/runloop";
+import { action } from "@ember/object";
+import { clipboardCopy } from "discourse/lib/utilities";
 
-export default Controller.extend({
+export default class AdminCustomizeColorsShowController extends Controller {
   @discourseComputed("model.colors", "onlyOverridden")
   colors(allColors, onlyOverridden) {
     if (onlyOverridden) {
-      return allColors.filter((color) => color.get("overridden"));
+      return allColors.filterBy("overridden");
     } else {
       return allColors;
     }
-  },
+  }
 
-  actions: {
+  @action
   revert(color) {
     color.revert();
-    },
+  }
 
+  @action
   undo(color) {
     color.undo();
-    },
+  }
 
+  @action
   copyToClipboard() {
-      $(".table.colors").hide();
+    if (clipboardCopy(this.model.schemeJson())) {
-      let area = $("<textarea id='copy-range'></textarea>");
-      $(".table.colors").after(area);
-      area.text(this.model.schemeJson());
-      let range = document.createRange();
-      range.selectNode(area[0]);
-      window.getSelection().addRange(range);
-      let successful = document.execCommand("copy");
-      if (successful) {
       this.set(
         "model.savingStatus",
         I18n.t("admin.customize.copied_to_clipboard")
@@ -47,13 +43,9 @@ export default Controller.extend({
     later(() => {
       this.set("model.savingStatus", null);
     }, 2000);
+  }
 
-      window.getSelection().removeAllRanges();
+  @action
-
-      $(".table.colors").show();
-      $(area).remove();
-    },
-
   copy() {
     const newColorScheme = this.model.copy();
     newColorScheme.set(
@@ -66,31 +58,32 @@ export default Controller.extend({
       this.allColors.pushObject(newColorScheme);
       this.replaceRoute("adminCustomize.colors.show", newColorScheme);
     });
-    },
+  }
 
+  @action
   save() {
     this.model.save();
-    },
+  }
 
+  @action
   applyUserSelectable() {
     this.model.updateUserSelectable(this.get("model.user_selectable"));
-    },
+  }
 
+  @action
   destroy() {
-      const model = this.model;
     return bootbox.confirm(
       I18n.t("admin.customize.colors.delete_confirm"),
       I18n.t("no_value"),
       I18n.t("yes_value"),
       (result) => {
         if (result) {
-            model.destroy().then(() => {
+          this.model.destroy().then(() => {
-              this.allColors.removeObject(model);
+            this.allColors.removeObject(this.model);
             this.replaceRoute("adminCustomize.colors");
           });
         }
       }
     );
-    },
+  }
-  },
+}
-});