UX: Fix chat separator alignment (#20669)

Also: work around 1px svg shift in scroll-to-bottom button

.github/workflows/tests.yml

@@ -159,6 +159,22 @@ jobs:
           path: tmp/turbo_rspec_runtime.log
           key: rspec-runtime-backend-core
 
+      - name: Run Zeitwerk check
+        if: matrix.build_type == 'backend'
+        env:
+          LOAD_PLUGINS: ${{ (matrix.target == 'plugins') && '1' || '0' }}
+        run: |
+          if ! bin/rails zeitwerk:check --trace; then
+            echo
+            echo "---------------------------------------------"
+            echo
+            echo "::error::'bin/rails zeitwerk:check' failed - the app will fail to boot with 'eager_load=true' (e.g. in production)."
+            echo "To reproduce locally, run 'bin/rails zeitwerk:check'."
+            echo "Alternatively, you can run your local server/tests with the 'DISCOURSE_ZEITWERK_EAGER_LOAD=1' environment variable."
+            echo
+            exit 1
+          fi
+
       - name: Core RSpec
         if: matrix.build_type == 'backend' && matrix.target == 'core'
         run: bin/turbo_rspec --verbose
@@ -182,11 +198,11 @@ jobs:
 
       - name: Core System Tests
         if: matrix.build_type == 'system' && matrix.target == 'core'
-        run: PARALLEL_TEST_PROCESSORS=1 bin/turbo_rspec --verbose spec/system
+        run: bin/rspec spec/system
 
       - name: Plugin System Tests
         if: matrix.build_type == 'system' && matrix.target == 'plugins'
-        run: LOAD_PLUGINS=1 PARALLEL_TEST_PROCESSORS=1 bin/turbo_rspec --verbose plugins/*/spec/system
+        run: LOAD_PLUGINS=1 bin/rspec plugins/*/spec/system
 
       - name: Upload failed system test screenshots
         uses: actions/upload-artifact@v3

Gemfile

@@ -18,7 +18,7 @@ else
   # this allows us to include the bits of rails we use without pieces we do not.
   #
   # To issue a rails update bump the version number here
-  rails_version = "7.0.4.1"
+  rails_version = "7.0.4.3"
   gem "actionmailer", rails_version
   gem "actionpack", rails_version
   gem "actionview", rails_version

Gemfile.lock

@@ -17,25 +17,25 @@ GIT
 GEM
   remote: https://rubygems.org/
   specs:
-    actionmailer (7.0.4.1)
-      actionpack (= 7.0.4.1)
-      actionview (= 7.0.4.1)
-      activejob (= 7.0.4.1)
-      activesupport (= 7.0.4.1)
+    actionmailer (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      actionview (= 7.0.4.3)
+      activejob (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
       mail (~> 2.5, >= 2.5.4)
       net-imap
       net-pop
       net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (7.0.4.1)
-      actionview (= 7.0.4.1)
-      activesupport (= 7.0.4.1)
+    actionpack (7.0.4.3)
+      actionview (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
       rack (~> 2.0, >= 2.2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actionview (7.0.4.1)
-      activesupport (= 7.0.4.1)
+    actionview (7.0.4.3)
+      activesupport (= 7.0.4.3)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
@@ -44,15 +44,15 @@ GEM
       actionview (>= 6.0.a)
     active_model_serializers (0.8.4)
       activemodel (>= 3.0)
-    activejob (7.0.4.1)
-      activesupport (= 7.0.4.1)
+    activejob (7.0.4.3)
+      activesupport (= 7.0.4.3)
       globalid (>= 0.3.6)
-    activemodel (7.0.4.1)
-      activesupport (= 7.0.4.1)
-    activerecord (7.0.4.1)
-      activemodel (= 7.0.4.1)
-      activesupport (= 7.0.4.1)
-    activesupport (7.0.4.1)
+    activemodel (7.0.4.3)
+      activesupport (= 7.0.4.3)
+    activerecord (7.0.4.3)
+      activemodel (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
+    activesupport (7.0.4.3)
       concurrent-ruby (~> 1.0, >= 1.0.2)
       i18n (>= 1.6, < 2)
       minitest (>= 5.1)
@@ -157,7 +157,7 @@ GEM
       faraday-net_http (>= 2.0, < 3.1)
       ruby2_keywords (>= 0.0.4)
     faraday-net_http (3.0.2)
-    faraday-retry (2.0.0)
+    faraday-retry (2.1.0)
       faraday (~> 2.0)
     fast_blank (1.0.1)
     fast_xs (0.8.0)
@@ -167,10 +167,11 @@ GEM
     gc_tracer (1.5.1)
     globalid (1.1.0)
       activesupport (>= 5.0)
-    google-protobuf (3.22.0)
-    google-protobuf (3.22.0-arm64-darwin)
-    google-protobuf (3.22.0-x86_64-darwin)
-    google-protobuf (3.22.0-x86_64-linux)
+    google-protobuf (3.22.2)
+    google-protobuf (3.22.2-aarch64-linux)
+    google-protobuf (3.22.2-arm64-darwin)
+    google-protobuf (3.22.2-x86_64-darwin)
+    google-protobuf (3.22.2-x86_64-linux)
     guess_html_encoding (0.0.11)
     hana (1.3.7)
     hashdiff (1.0.1)
@@ -218,7 +219,7 @@ GEM
     logstash-event (1.2.02)
     logstash-logger (0.26.1)
       logstash-event (~> 1.2)
-    logster (2.11.4)
+    logster (2.12.2)
     loofah (2.19.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -239,10 +240,10 @@ GEM
     mini_sql (1.4.0)
     mini_suffix (0.3.3)
       ffi (~> 1.9)
-    minitest (5.17.0)
+    minitest (5.18.0)
     mocha (2.0.2)
       ruby2_keywords (>= 0.0.5)
-    msgpack (1.6.0)
+    msgpack (1.6.1)
     multi_json (1.15.0)
     multi_xml (0.6.0)
     mustache (1.1.1)
@@ -311,10 +312,10 @@ GEM
     parallel (1.22.1)
     parallel_tests (4.2.0)
       parallel
-    parser (3.2.1.0)
+    parser (3.2.1.1)
       ast (~> 2.4.1)
     pg (1.4.6)
-    prettier_print (1.2.0)
+    prettier_print (1.2.1)
     progress (3.6.0)
     pry (0.14.2)
       coderay (~> 1.1)
@@ -328,12 +329,12 @@ GEM
     puma (6.1.1)
       nio4r (~> 2.0)
     racc (1.6.2)
-    rack (2.2.6.2)
+    rack (2.2.6.4)
     rack-mini-profiler (3.0.0)
       rack (>= 1.2.0)
     rack-protection (3.0.5)
       rack
-    rack-test (2.0.2)
+    rack-test (2.1.0)
       rack (>= 1.3)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
@@ -347,9 +348,9 @@ GEM
     rails_multisite (4.0.1)
       activerecord (> 5.0, < 7.1)
       railties (> 5.0, < 7.1)
-    railties (7.0.4.1)
-      actionpack (= 7.0.4.1)
-      activesupport (= 7.0.4.1)
+    railties (7.0.4.3)
+      actionpack (= 7.0.4.3)
+      activesupport (= 7.0.4.3)
       method_source
       rake (>= 12.2)
       thor (~> 1.0)
@@ -390,7 +391,7 @@ GEM
     rspec-html-matchers (0.10.0)
       nokogiri (~> 1)
       rspec (>= 3.0.0.a)
-    rspec-mocks (3.12.3)
+    rspec-mocks (3.12.4)
       diff-lcs (>= 1.2.0, < 2.0)
       rspec-support (~> 3.12.0)
     rspec-rails (6.0.1)
@@ -411,7 +412,7 @@ GEM
       rspec-core (>= 2.14)
     rtlcss (0.2.0)
       mini_racer (~> 0.6.3)
-    rubocop (1.47.0)
+    rubocop (1.48.1)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.2.0.0)
@@ -425,14 +426,14 @@ GEM
       parser (>= 3.2.1.0)
     rubocop-capybara (2.17.1)
       rubocop (~> 1.41)
-    rubocop-discourse (3.1.0)
+    rubocop-discourse (3.2.0)
       rubocop (>= 1.1.0)
       rubocop-rspec (>= 2.0.0)
-    rubocop-rspec (2.18.1)
+    rubocop-rspec (2.19.0)
       rubocop (~> 1.33)
       rubocop-capybara (~> 2.17)
     ruby-prof (1.6.1)
-    ruby-progressbar (1.12.0)
+    ruby-progressbar (1.13.0)
     ruby-readability (0.7.0)
       guess_html_encoding (>= 0.0.4)
       nokogiri (>= 1.6.0)
@@ -441,16 +442,16 @@ GEM
     sanitize (6.0.1)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    sass-embedded (1.58.3)
+    sass-embedded (1.59.2)
       google-protobuf (~> 3.21)
       rake (>= 10.0.0)
-    sass-embedded (1.58.3-aarch64-linux-gnu)
+    sass-embedded (1.59.2-aarch64-linux-gnu)
       google-protobuf (~> 3.21)
-    sass-embedded (1.58.3-arm64-darwin)
+    sass-embedded (1.59.2-arm64-darwin)
       google-protobuf (~> 3.21)
-    sass-embedded (1.58.3-x86_64-darwin)
+    sass-embedded (1.59.2-x86_64-darwin)
       google-protobuf (~> 3.21)
-    sass-embedded (1.58.3-x86_64-linux-gnu)
+    sass-embedded (1.59.2-x86_64-linux-gnu)
       google-protobuf (~> 3.21)
     selenium-webdriver (4.8.1)
       rexml (~> 3.2, >= 3.2.5)
@@ -477,7 +478,7 @@ GEM
       sprockets (>= 3.0.0)
     sshkey (2.0.0)
     stackprof (0.2.23)
-    syntax_tree (6.0.1)
+    syntax_tree (6.0.2)
       prettier_print (>= 1.2.0)
     syntax_tree-disable_ternary (1.0.0)
     test-prof (1.2.0)
@@ -533,14 +534,14 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  actionmailer (= 7.0.4.1)
-  actionpack (= 7.0.4.1)
-  actionview (= 7.0.4.1)
+  actionmailer (= 7.0.4.3)
+  actionpack (= 7.0.4.3)
+  actionview (= 7.0.4.3)
   actionview_precompiler
   active_model_serializers (~> 0.8.3)
-  activemodel (= 7.0.4.1)
-  activerecord (= 7.0.4.1)
-  activesupport (= 7.0.4.1)
+  activemodel (= 7.0.4.3)
+  activerecord (= 7.0.4.3)
+  activesupport (= 7.0.4.3)
   addressable
   annotate
   aws-sdk-s3
@@ -626,7 +627,7 @@ DEPENDENCIES
   rack-protection
   rails_failover
   rails_multisite
-  railties (= 7.0.4.1)
+  railties (= 7.0.4.3)
   rake
   rb-fsevent
   rbtrace

app/assets/javascripts/admin/addon/adapters/api-key.js

@@ -1,13 +1,13 @@
-import RESTAdapter from "discourse/adapters/rest";
+import RestAdapter from "discourse/adapters/rest";
 
-export default RESTAdapter.extend({
-  jsonMode: true,
+export default class ApiKey extends RestAdapter {
+  jsonMode = true;
 
   basePath() {
     return "/admin/api/";
-  },
+  }
 
   apiNameFor() {
     return "key";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/build-plugin.js

@@ -1,11 +1,11 @@
 import RestAdapter from "discourse/adapters/rest";
 
 export default function buildPluginAdapter(pluginName) {
-  return RestAdapter.extend({
+  return class extends RestAdapter {
     pathFor(store, type, findArgs) {
       return (
-        "/admin/plugins/" + pluginName + this._super(store, type, findArgs)
+        "/admin/plugins/" + pluginName + super.pathFor(store, type, findArgs)
       );
-    },
-  });
+    }
+  };
 }

app/assets/javascripts/admin/addon/adapters/customization-base.js

@@ -1,7 +1,7 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
+export default class CustomizationBase extends RestAdapter {
   basePath() {
     return "/admin/customize/";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/email-style.js

@@ -1,7 +1,7 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
+export default class EmailStyle extends RestAdapter {
   pathFor() {
     return "/admin/customize/email_style";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/embedding.js

@@ -1,7 +1,7 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
+export default class Embedding extends RestAdapter {
   pathFor() {
     return "/admin/customize/embedding";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/staff-action-log.js

@@ -1,7 +1,7 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
+export default class StaffActionLog extends RestAdapter {
   basePath() {
     return "/admin/logs/";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/tag-group.js

@@ -1,5 +1,5 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
-  jsonMode: true,
-});
+export default class TagGroup extends RestAdapter {
+  jsonMode = true;
+}

app/assets/javascripts/admin/addon/adapters/theme.js

@@ -1,9 +1,10 @@
 import RestAdapter from "discourse/adapters/rest";
 
-export default RestAdapter.extend({
+export default class Theme extends RestAdapter {
+  jsonMode = true;
   basePath() {
     return "/admin/";
-  },
+  }
 
   afterFindAll(results) {
     let map = {};
@@ -20,7 +21,5 @@ export default RestAdapter.extend({
       theme.set("parentThemes", mappedParents);
     });
     return results;
-  },
-
-  jsonMode: true,
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/web-hook-event.js

@@ -1,7 +1,7 @@
-import RESTAdapter from "discourse/adapters/rest";
+import RestAdapter from "discourse/adapters/rest";
 
-export default RESTAdapter.extend({
+export default class WebHookEvent extends RestAdapter {
   basePath() {
     return "/admin/api/";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/adapters/web-hook.js

@@ -1,7 +1,7 @@
-import RESTAdapter from "discourse/adapters/rest";
+import RestAdapter from "discourse/adapters/rest";
 
-export default RESTAdapter.extend({
+export default class WebHook extends RestAdapter {
   basePath() {
     return "/admin/api/";
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/components/themes-list.hbs

@@ -56,6 +56,7 @@
     {{#if this.hasInactiveThemes}}
       {{#each this.inactiveThemes as |theme|}}
         <ThemesListItem
+          @classNames="inactive-theme"
           @theme={{theme}}
           @navigateToTheme={{action "navigateToTheme" theme}}
         />

app/assets/javascripts/admin/addon/controllers/admin-api-keys-index.js

@@ -2,18 +2,18 @@ import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend({
-  loading: false,
+export default class AdminApiKeysIndexController extends Controller {
+  loading = false;
 
   @action
   revokeKey(key) {
     key.revoke().catch(popupAjaxError);
-  },
+  }
 
   @action
   undoRevokeKey(key) {
     key.undoRevoke().catch(popupAjaxError);
-  },
+  }
 
   @action
   loadMore() {
@@ -35,5 +35,5 @@ export default Controller.extend({
       .finally(() => {
         this.set("loading", false);
       });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-api-keys-new.js

@@ -1,37 +1,32 @@
+import { equal } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isBlank } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { action, get } from "@ember/object";
-import { equal } from "@ember/object/computed";
 import showModal from "discourse/lib/show-modal";
 import { ajax } from "discourse/lib/ajax";
 
-export default Controller.extend({
-  userModes: null,
-  scopeModes: null,
-  globalScopes: null,
-  scopes: null,
+export default class AdminApiKeysNewController extends Controller {
+  userModes = [
+    { id: "all", name: I18n.t("admin.api.all_users") },
+    { id: "single", name: I18n.t("admin.api.single_user") },
+  ];
+  scopeModes = [
+    { id: "granular", name: I18n.t("admin.api.scopes.granular") },
+    { id: "read_only", name: I18n.t("admin.api.scopes.read_only") },
+    { id: "global", name: I18n.t("admin.api.scopes.global") },
+  ];
+  globalScopes = null;
+  scopes = null;
+
+  @equal("userMode", "single") showUserSelector;
 
   init() {
-    this._super(...arguments);
-
-    this.set("userModes", [
-      { id: "all", name: I18n.t("admin.api.all_users") },
-      { id: "single", name: I18n.t("admin.api.single_user") },
-    ]);
-
-    this.set("scopeModes", [
-      { id: "granular", name: I18n.t("admin.api.scopes.granular") },
-      { id: "read_only", name: I18n.t("admin.api.scopes.read_only") },
-      { id: "global", name: I18n.t("admin.api.scopes.global") },
-    ]);
-
+    super.init(...arguments);
     this._loadScopes();
-  },
-
-  showUserSelector: equal("userMode", "single"),
+  }
 
   @discourseComputed("model.{description,username}", "showUserSelector")
   saveDisabled(model, showUserSelector) {
@@ -42,12 +37,12 @@ export default Controller.extend({
       return true;
     }
     return false;
-  },
+  }
 
   @action
   updateUsername(selected) {
     this.set("model.username", get(selected, "firstObject"));
-  },
+  }
 
   @action
   changeUserMode(userMode) {
@@ -55,12 +50,12 @@ export default Controller.extend({
       this.model.set("username", null);
     }
     this.set("userMode", userMode);
-  },
+  }
 
   @action
   changeScopeMode(scopeMode) {
     this.set("scopeMode", scopeMode);
-  },
+  }
 
   @action
   save() {
@@ -77,12 +72,12 @@ export default Controller.extend({
     }
 
     return this.model.save().catch(popupAjaxError);
-  },
+  }
 
   @action
   continue() {
     this.transitionToRoute("adminApiKeys.show", this.model.id);
-  },
+  }
 
   @action
   showURLs(urls) {
@@ -90,7 +85,7 @@ export default Controller.extend({
       admin: true,
       model: { urls },
     });
-  },
+  }
 
   _loadScopes() {
     return ajax("/admin/api/keys/scopes.json")
@@ -102,5 +97,5 @@ export default Controller.extend({
         this.set("scopes", data.scopes);
       })
       .catch(popupAjaxError);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-api-keys-show.js

@@ -1,66 +1,74 @@
+import { action } from "@ember/object";
+import { empty } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
-import { empty } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
 
-export default Controller.extend(bufferedProperty("model"), {
-  isNew: empty("model.id"),
+export default class AdminApiKeysShowController extends Controller.extend(
+  bufferedProperty("model")
+) {
+  @empty("model.id") isNew;
 
-  actions: {
-    saveDescription() {
-      const buffered = this.buffered;
-      const attrs = buffered.getProperties("description");
+  @action
+  saveDescription() {
+    const buffered = this.buffered;
+    const attrs = buffered.getProperties("description");
 
-      this.model
-        .save(attrs)
-        .then(() => {
-          this.set("editingDescription", false);
-          this.rollbackBuffer();
-        })
-        .catch(popupAjaxError);
-    },
-
-    cancel() {
-      const id = this.get("userField.id");
-      if (isEmpty(id)) {
-        this.destroyAction(this.userField);
-      } else {
+    this.model
+      .save(attrs)
+      .then(() => {
+        this.set("editingDescription", false);
         this.rollbackBuffer();
-        this.set("editing", false);
-      }
-    },
+      })
+      .catch(popupAjaxError);
+  }
 
-    editDescription() {
-      this.toggleProperty("editingDescription");
-      if (!this.editingDescription) {
-        this.rollbackBuffer();
-      }
-    },
+  @action
+  cancel() {
+    const id = this.get("userField.id");
+    if (isEmpty(id)) {
+      this.destroyAction(this.userField);
+    } else {
+      this.rollbackBuffer();
+      this.set("editing", false);
+    }
+  }
 
-    revokeKey(key) {
-      key.revoke().catch(popupAjaxError);
-    },
+  @action
+  editDescription() {
+    this.toggleProperty("editingDescription");
+    if (!this.editingDescription) {
+      this.rollbackBuffer();
+    }
+  }
 
-    deleteKey(key) {
-      key
-        .destroyRecord()
-        .then(() => this.transitionToRoute("adminApiKeys.index"))
-        .catch(popupAjaxError);
-    },
+  @action
+  revokeKey(key) {
+    key.revoke().catch(popupAjaxError);
+  }
 
-    undoRevokeKey(key) {
-      key.undoRevoke().catch(popupAjaxError);
-    },
+  @action
+  deleteKey(key) {
+    key
+      .destroyRecord()
+      .then(() => this.transitionToRoute("adminApiKeys.index"))
+      .catch(popupAjaxError);
+  }
 
-    showURLs(urls) {
-      return showModal("admin-api-key-urls", {
-        admin: true,
-        model: {
-          urls,
-        },
-      });
-    },
-  },
-});
+  @action
+  undoRevokeKey(key) {
+    key.undoRevoke().catch(popupAjaxError);
+  }
+
+  @action
+  showURLs(urls) {
+    return showModal("admin-api-key-urls", {
+      admin: true,
+      model: {
+        urls,
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-api-keys.js

@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend();
+export default class AdminApiKeysController extends Controller {}

app/assets/javascripts/admin/addon/controllers/admin-backups-index.js

@@ -1,19 +1,21 @@
-import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import { alias, equal } from "@ember/object/computed";
+import Controller, { inject as controller } from "@ember/controller";
 import { i18n, setting } from "discourse/lib/computed";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
 
 import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  adminBackups: controller(),
-  dialog: service(),
-  status: alias("adminBackups.model"),
-  uploadLabel: i18n("admin.backups.upload.label"),
-  backupLocation: setting("backup_location"),
-  localBackupStorage: equal("backupLocation", "local"),
+export default class AdminBackupsIndexController extends Controller {
+  @service dialog;
+  @controller adminBackups;
+
+  @alias("adminBackups.model") status;
+  @i18n("admin.backups.upload.label") uploadLabel;
+  @setting("backup_location") backupLocation;
+  @equal("backupLocation", "local") localBackupStorage;
 
   @discourseComputed("status.allowRestore", "status.isOperationRunning")
   restoreTitle(allowRestore, isOperationRunning) {
@@ -24,35 +26,35 @@ export default Controller.extend({
     } else {
       return "admin.backups.operations.restore.title";
     }
-  },
+  }
 
-  actions: {
-    toggleReadOnlyMode() {
-      if (!this.site.get("isReadOnly")) {
-        this.dialog.yesNoConfirm({
-          message: I18n.t("admin.backups.read_only.enable.confirm"),
-          didConfirm: () => {
-            this.set("currentUser.hideReadOnlyAlert", true);
-            this._toggleReadOnlyMode(true);
-          },
-        });
-      } else {
-        this._toggleReadOnlyMode(false);
-      }
-    },
+  @action
+  toggleReadOnlyMode() {
+    if (!this.site.get("isReadOnly")) {
+      this.dialog.yesNoConfirm({
+        message: I18n.t("admin.backups.read_only.enable.confirm"),
+        didConfirm: () => {
+          this.set("currentUser.hideReadOnlyAlert", true);
+          this._toggleReadOnlyMode(true);
+        },
+      });
+    } else {
+      this._toggleReadOnlyMode(false);
+    }
+  }
 
-    download(backup) {
-      const link = backup.get("filename");
-      ajax(`/admin/backups/${link}`, { type: "PUT" }).then(() =>
-        this.dialog.alert(I18n.t("admin.backups.operations.download.alert"))
-      );
-    },
-  },
+  @action
+  download(backup) {
+    const link = backup.get("filename");
+    ajax(`/admin/backups/${link}`, { type: "PUT" }).then(() =>
+      this.dialog.alert(I18n.t("admin.backups.operations.download.alert"))
+    );
+  }
 
   _toggleReadOnlyMode(enable) {
     ajax("/admin/backups/readonly", {
       type: "PUT",
       data: { enable },
     }).then(() => this.site.set("isReadOnly", enable));
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-backups-logs.js

@@ -1,13 +1,10 @@
-import Controller, { inject as controller } from "@ember/controller";
 import { alias } from "@ember/object/computed";
+import Controller, { inject as controller } from "@ember/controller";
 
-export default Controller.extend({
-  adminBackups: controller(),
-  status: alias("adminBackups.model"),
+export default class AdminBackupsLogsController extends Controller {
+  @controller adminBackups;
 
-  init() {
-    this._super(...arguments);
+  @alias("adminBackups.model") status;
 
-    this.logs = [];
-  },
-});
+  logs = [];
+}

app/assets/javascripts/admin/addon/controllers/admin-backups.js

@@ -1,11 +1,8 @@
 import { and, not } from "@ember/object/computed";
 import Controller from "@ember/controller";
-export default Controller.extend({
-  noOperationIsRunning: not("model.isOperationRunning"),
-  rollbackEnabled: and(
-    "model.canRollback",
-    "model.restoreEnabled",
-    "noOperationIsRunning"
-  ),
-  rollbackDisabled: not("rollbackEnabled"),
-});
+export default class AdminBackupsController extends Controller {
+  @not("model.isOperationRunning") noOperationIsRunning;
+  @not("rollbackEnabled") rollbackDisabled;
+  @and("model.canRollback", "model.restoreEnabled", "noOperationIsRunning")
+  rollbackEnabled;
+}

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

@@ -1,19 +1,19 @@
 import Controller from "@ember/controller";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import showModal from "discourse/lib/show-modal";
 
-export default Controller.extend({
+export default class AdminCustomizeColorsController extends Controller {
   @discourseComputed("model.@each.id")
   baseColorScheme() {
     return this.model.findBy("is_base", true);
-  },
+  }
 
   @discourseComputed("model.@each.id")
   baseColorSchemes() {
     return this.model.filterBy("is_base", true);
-  },
+  }
 
   @discourseComputed("baseColorScheme")
   baseColors(baseColorScheme) {
@@ -22,28 +22,28 @@ export default Controller.extend({
       baseColorsHash.set(color.get("name"), color);
     });
     return baseColorsHash;
-  },
+  }
 
-  actions: {
-    newColorSchemeWithBase(baseKey) {
-      const base = this.baseColorSchemes.findBy("base_scheme_id", baseKey);
-      const newColorScheme = base.copy();
-      newColorScheme.setProperties({
-        name: I18n.t("admin.customize.colors.new_name"),
-        base_scheme_id: base.get("base_scheme_id"),
-      });
-      newColorScheme.save().then(() => {
-        this.model.pushObject(newColorScheme);
-        newColorScheme.set("savingStatus", null);
-        this.replaceRoute("adminCustomize.colors.show", newColorScheme);
-      });
-    },
+  @action
+  newColorSchemeWithBase(baseKey) {
+    const base = this.baseColorSchemes.findBy("base_scheme_id", baseKey);
+    const newColorScheme = base.copy();
+    newColorScheme.setProperties({
+      name: I18n.t("admin.customize.colors.new_name"),
+      base_scheme_id: base.get("base_scheme_id"),
+    });
+    newColorScheme.save().then(() => {
+      this.model.pushObject(newColorScheme);
+      newColorScheme.set("savingStatus", null);
+      this.replaceRoute("adminCustomize.colors.show", newColorScheme);
+    });
+  }
 
-    newColorScheme() {
-      showModal("admin-color-scheme-select-base", {
-        model: this.baseColorSchemes,
-        admin: true,
-      });
-    },
-  },
-});
+  @action
+  newColorScheme() {
+    showModal("admin-color-scheme-select-base", {
+      model: this.baseColorSchemes,
+      admin: true,
+    });
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-email-style-edit.js

@@ -1,38 +1,38 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  dialog: service(),
+export default class AdminCustomizeEmailStyleEditController extends Controller {
+  @service dialog;
 
   @discourseComputed("model.isSaving")
   saveButtonText(isSaving) {
     return isSaving ? I18n.t("saving") : I18n.t("admin.customize.save");
-  },
+  }
 
   @discourseComputed("model.changed", "model.isSaving")
   saveDisabled(changed, isSaving) {
     return !changed || isSaving;
-  },
+  }
 
-  actions: {
-    save() {
-      if (!this.model.saving) {
-        this.set("saving", true);
-        this.model
-          .update(this.model.getProperties("html", "css"))
-          .catch((e) => {
-            const msg =
-              e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors
-                ? I18n.t("admin.customize.email_style.save_error_with_reason", {
-                    error: e.jqXHR.responseJSON.errors.join(". "),
-                  })
-                : I18n.t("generic_error");
-            this.dialog.alert(msg);
-          })
-          .finally(() => this.set("model.changed", false));
-      }
-    },
-  },
-});
+  @action
+  save() {
+    if (!this.model.saving) {
+      this.set("saving", true);
+      this.model
+        .update(this.model.getProperties("html", "css"))
+        .catch((e) => {
+          const msg =
+            e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors
+              ? I18n.t("admin.customize.email_style.save_error_with_reason", {
+                  error: e.jqXHR.responseJSON.errors.join(". "),
+                })
+              : I18n.t("generic_error");
+          this.dialog.alert(msg);
+        })
+        .finally(() => this.set("model.changed", false));
+    }
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates-edit.js

@@ -1,23 +1,26 @@
+import { inject as service } from "@ember/service";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import { action } from "@ember/object";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend(bufferedProperty("emailTemplate"), {
-  adminCustomizeEmailTemplates: controller(),
-  dialog: service(),
-  emailTemplate: null,
-  saved: false,
+export default class AdminCustomizeEmailTemplatesEditController extends Controller.extend(
+  bufferedProperty("emailTemplate")
+) {
+  @service dialog;
+  @controller adminCustomizeEmailTemplates;
+
+  emailTemplate = null;
+  saved = false;
 
   @discourseComputed("buffered.body", "buffered.subject")
   saveDisabled(body, subject) {
     return (
       this.emailTemplate.body === body && this.emailTemplate.subject === subject
     );
-  },
+  }
 
   @discourseComputed("buffered")
   hasMultipleSubjects(buffered) {
@@ -26,7 +29,7 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
     } else {
       return buffered.getProperties("id")["id"];
     }
-  },
+  }
 
   @action
   saveChanges() {
@@ -38,7 +41,7 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
         this.set("saved", true);
       })
       .catch(popupAjaxError);
-  },
+  }
 
   @action
   revertChanges() {
@@ -57,5 +60,5 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
           .catch(popupAjaxError);
       },
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates.js

@@ -1,18 +1,13 @@
+import { sort } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
-import { sort } from "@ember/object/computed";
 
-export default Controller.extend({
-  sortedTemplates: sort("emailTemplates", "titleSorting"),
-
-  init() {
-    this._super(...arguments);
-
-    this.set("titleSorting", ["title"]);
-  },
+export default class AdminCustomizeEmailTemplatesController extends Controller {
+  titleSorting = ["title"];
+  @sort("emailTemplates", "titleSorting") sortedTemplates;
 
   @action
   onSelectTemplate(template) {
     this.transitionToRoute("adminCustomizeEmailTemplates.edit", template);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-robots-txt.js

@@ -1,47 +1,52 @@
+import { action } from "@ember/object";
+import { not } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import { ajax } from "discourse/lib/ajax";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
-import { not } from "@ember/object/computed";
 import { propertyEqual } from "discourse/lib/computed";
 
-export default Controller.extend(bufferedProperty("model"), {
-  saved: false,
-  isSaving: false,
-  saveDisabled: propertyEqual("model.robots_txt", "buffered.robots_txt"),
-  resetDisabled: not("model.overridden"),
+export default class AdminCustomizeRobotsTxtController extends Controller.extend(
+  bufferedProperty("model")
+) {
+  saved = false;
+  isSaving = false;
 
-  actions: {
-    save() {
-      this.setProperties({
-        isSaving: true,
-        saved: false,
-      });
+  @propertyEqual("model.robots_txt", "buffered.robots_txt") saveDisabled;
 
-      ajax("robots.json", {
-        type: "PUT",
-        data: { robots_txt: this.buffered.get("robots_txt") },
+  @not("model.overridden") resetDisabled;
+
+  @action
+  save() {
+    this.setProperties({
+      isSaving: true,
+      saved: false,
+    });
+
+    ajax("robots.json", {
+      type: "PUT",
+      data: { robots_txt: this.buffered.get("robots_txt") },
+    })
+      .then((data) => {
+        this.commitBuffer();
+        this.set("saved", true);
+        this.set("model.overridden", data.overridden);
       })
-        .then((data) => {
-          this.commitBuffer();
-          this.set("saved", true);
-          this.set("model.overridden", data.overridden);
-        })
-        .finally(() => this.set("isSaving", false));
-    },
+      .finally(() => this.set("isSaving", false));
+  }
 
-    reset() {
-      this.setProperties({
-        isSaving: true,
-        saved: false,
-      });
-      ajax("robots.json", { type: "DELETE" })
-        .then((data) => {
-          this.buffered.set("robots_txt", data.robots_txt);
-          this.commitBuffer();
-          this.set("saved", true);
-          this.set("model.overridden", false);
-        })
-        .finally(() => this.set("isSaving", false));
-    },
-  },
-});
+  @action
+  reset() {
+    this.setProperties({
+      isSaving: true,
+      saved: false,
+    });
+    ajax("robots.json", { type: "DELETE" })
+      .then((data) => {
+        this.buffered.set("robots_txt", data.robots_txt);
+        this.commitBuffer();
+        this.set("saved", true);
+        this.set("model.overridden", false);
+      })
+      .finally(() => this.set("isSaving", false));
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-themes-edit.js

@@ -1,21 +1,24 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { url } from "discourse/lib/computed";
 
-export default Controller.extend({
-  section: null,
-  currentTarget: 0,
-  maximized: false,
-  previewUrl: url("model.id", "/admin/themes/%@/preview"),
-  showAdvanced: false,
-  editRouteName: "adminCustomizeThemes.edit",
-  showRouteName: "adminCustomizeThemes.show",
+export default class AdminCustomizeThemesEditController extends Controller {
+  section = null;
+  currentTarget = 0;
+  maximized = false;
+
+  @url("model.id", "/admin/themes/%@/preview") previewUrl;
+
+  showAdvanced = false;
+  editRouteName = "adminCustomizeThemes.edit";
+  showRouteName = "adminCustomizeThemes.show";
 
   setTargetName(name) {
     const target = this.get("model.targets").find((t) => t.name === name);
     this.set("currentTarget", target && target.id);
-  },
+  }
 
   @discourseComputed("currentTarget")
   currentTargetName(id) {
@@ -23,50 +26,52 @@ export default Controller.extend({
       (t) => t.id === parseInt(id, 10)
     );
     return target && target.name;
-  },
+  }
 
   @discourseComputed("model.isSaving")
   saveButtonText(isSaving) {
     return isSaving ? I18n.t("saving") : I18n.t("admin.customize.save");
-  },
+  }
 
   @discourseComputed("model.changed", "model.isSaving")
   saveDisabled(changed, isSaving) {
     return !changed || isSaving;
-  },
+  }
 
-  actions: {
-    save() {
-      this.set("saving", true);
-      this.model.saveChanges("theme_fields").finally(() => {
-        this.set("saving", false);
-      });
-    },
+  @action
+  save() {
+    this.set("saving", true);
+    this.model.saveChanges("theme_fields").finally(() => {
+      this.set("saving", false);
+    });
+  }
 
-    fieldAdded(target, name) {
-      this.replaceRoute(this.editRouteName, this.get("model.id"), target, name);
-    },
+  @action
+  fieldAdded(target, name) {
+    this.replaceRoute(this.editRouteName, this.get("model.id"), target, name);
+  }
 
-    onlyOverriddenChanged(onlyShowOverridden) {
-      if (onlyShowOverridden) {
-        if (!this.model.hasEdited(this.currentTargetName, this.fieldName)) {
-          let firstTarget = this.get("model.targets").find((t) => t.edited);
-          let firstField = this.get(`model.fields.${firstTarget.name}`).find(
-            (f) => f.edited
-          );
+  @action
+  onlyOverriddenChanged(onlyShowOverridden) {
+    if (onlyShowOverridden) {
+      if (!this.model.hasEdited(this.currentTargetName, this.fieldName)) {
+        let firstTarget = this.get("model.targets").find((t) => t.edited);
+        let firstField = this.get(`model.fields.${firstTarget.name}`).find(
+          (f) => f.edited
+        );
 
-          this.replaceRoute(
-            this.editRouteName,
-            this.get("model.id"),
-            firstTarget.name,
-            firstField.name
-          );
-        }
+        this.replaceRoute(
+          this.editRouteName,
+          this.get("model.id"),
+          firstTarget.name,
+          firstField.name
+        );
       }
-    },
+    }
+  }
 
-    goBack() {
-      this.replaceRoute(this.showRouteName, this.model.id);
-    },
-  },
-});
+  @action
+  goBack() {
+    this.replaceRoute(this.showRouteName, this.model.id);
+  }
+}

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

@@ -1,4 +1,4 @@
-import { COMPONENTS, THEMES } from "admin/models/theme";
+import { inject as service } from "@ember/service";
 import {
   empty,
   filterBy,
@@ -6,8 +6,9 @@ import {
   match,
   notEmpty,
 } from "@ember/object/computed";
+import { COMPONENTS, THEMES } from "admin/models/theme";
 import Controller from "@ember/controller";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
 import ThemeSettings from "admin/models/theme-settings";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -15,31 +16,35 @@ import { makeArray } from "discourse-common/lib/helpers";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import showModal from "discourse/lib/show-modal";
 import { url } from "discourse/lib/computed";
-import { inject as service } from "@ember/service";
 
 const THEME_UPLOAD_VAR = 2;
 
-export default Controller.extend({
-  dialog: service(),
-  downloadUrl: url("model.id", "/admin/customize/themes/%@/export"),
-  previewUrl: url("model.id", "/admin/themes/%@/preview"),
-  addButtonDisabled: empty("selectedChildThemeId"),
-  editRouteName: "adminCustomizeThemes.edit",
-  parentThemesNames: mapBy("model.parentThemes", "name"),
-  availableParentThemes: filterBy("allThemes", "component", false),
-  availableActiveParentThemes: filterBy("availableParentThemes", "isActive"),
-  availableThemesNames: mapBy("availableParentThemes", "name"),
-  availableActiveThemesNames: mapBy("availableActiveParentThemes", "name"),
-  availableActiveChildThemes: filterBy("availableChildThemes", "hasParents"),
-  availableComponentsNames: mapBy("availableChildThemes", "name"),
-  availableActiveComponentsNames: mapBy("availableActiveChildThemes", "name"),
-  childThemesNames: mapBy("model.childThemes", "name"),
-  extraFiles: filterBy("model.theme_fields", "target", "extra_js"),
+export default class AdminCustomizeThemesShowController extends Controller {
+  @service dialog;
+
+  editRouteName = "adminCustomizeThemes.edit";
+
+  @url("model.id", "/admin/customize/themes/%@/export") downloadUrl;
+  @url("model.id", "/admin/themes/%@/preview") previewUrl;
+  @empty("selectedChildThemeId") addButtonDisabled;
+  @mapBy("model.parentThemes", "name") parentThemesNames;
+  @filterBy("allThemes", "component", false) availableParentThemes;
+  @filterBy("availableParentThemes", "isActive") availableActiveParentThemes;
+  @mapBy("availableParentThemes", "name") availableThemesNames;
+  @mapBy("availableActiveParentThemes", "name") availableActiveThemesNames;
+  @filterBy("availableChildThemes", "hasParents") availableActiveChildThemes;
+  @mapBy("availableChildThemes", "name") availableComponentsNames;
+  @mapBy("availableActiveChildThemes", "name") availableActiveComponentsNames;
+  @mapBy("model.childThemes", "name") childThemesNames;
+  @filterBy("model.theme_fields", "target", "extra_js") extraFiles;
+  @notEmpty("settings") hasSettings;
+  @notEmpty("translations") hasTranslations;
+  @match("model.remote_theme.remote_url", /^http(s)?:\/\//) sourceIsHttp;
 
   @discourseComputed("model.component", "model.remote_theme")
   showCheckboxes() {
     return !this.model.component || this.model.remote_theme;
-  },
+  }
 
   @discourseComputed("model.editedFields")
   editedFieldsFormatted() {
@@ -57,13 +62,13 @@ export default Controller.extend({
       descriptions.push(resultString);
     });
     return descriptions;
-  },
+  }
 
   @discourseComputed("colorSchemeId", "model.color_scheme_id")
   colorSchemeChanged(colorSchemeId, existingId) {
     colorSchemeId = colorSchemeId === null ? null : parseInt(colorSchemeId, 10);
     return colorSchemeId !== existingId;
-  },
+  }
 
   @discourseComputed("availableChildThemes", "model.childThemes.[]", "model")
   selectableChildThemes(available, childThemes) {
@@ -73,7 +78,7 @@ export default Controller.extend({
         : available.filter((theme) => !childThemes.includes(theme));
       return themes.length === 0 ? null : themes;
     }
-  },
+  }
 
   @discourseComputed("model.parentThemes.[]")
   relativesSelectorSettingsForComponent() {
@@ -91,7 +96,7 @@ export default Controller.extend({
       allThemes: this.allThemes,
       setDefaultValuesLabel: I18n.t("admin.customize.theme.add_all_themes"),
     });
-  },
+  }
 
   @discourseComputed("model.parentThemes.[]")
   relativesSelectorSettingsForTheme() {
@@ -109,7 +114,7 @@ export default Controller.extend({
       allThemes: this.allThemes,
       setDefaultValuesLabel: I18n.t("admin.customize.theme.add_all"),
     });
-  },
+  }
 
   @discourseComputed("allThemes", "model.component", "model")
   availableChildThemes(allThemes) {
@@ -119,40 +124,36 @@ export default Controller.extend({
         (theme) => theme.get("id") !== themeId && theme.get("component")
       );
     }
-  },
+  }
 
   @discourseComputed("model.component")
   convertKey(component) {
     const type = component ? "component" : "theme";
     return `admin.customize.theme.convert_${type}`;
-  },
+  }
 
   @discourseComputed("model.component")
   convertIcon(component) {
     return component ? "cube" : "";
-  },
+  }
 
   @discourseComputed("model.component")
   convertTooltip(component) {
     const type = component ? "component" : "theme";
     return `admin.customize.theme.convert_${type}_tooltip`;
-  },
+  }
 
   @discourseComputed("model.settings")
   settings(settings) {
     return settings.map((setting) => ThemeSettings.create(setting));
-  },
-
-  hasSettings: notEmpty("settings"),
+  }
 
   @discourseComputed("model.translations")
   translations(translations) {
     return translations.map((setting) =>
       ThemeSettings.create({ ...setting, textarea: true })
     );
-  },
-
-  hasTranslations: notEmpty("translations"),
+  }
 
   @discourseComputed(
     "model.remote_theme.local_version",
@@ -161,12 +162,12 @@ export default Controller.extend({
   )
   hasOverwrittenHistory(localVersion, remoteVersion, commitsBehind) {
     return localVersion !== remoteVersion && commitsBehind === -1;
-  },
+  }
 
   @discourseComputed("model.remoteError", "updatingRemote")
   showRemoteError(errorMessage, updating) {
     return errorMessage && !updating;
-  },
+  }
 
   @discourseComputed(
     "model.remote_theme.remote_url",
@@ -175,13 +176,13 @@ export default Controller.extend({
   )
   finishInstall(remoteUrl, localVersion, commitsBehind) {
     return remoteUrl && !localVersion && !commitsBehind;
-  },
+  }
 
   editedFieldsForTarget(target) {
     return this.get("model.editedFields").filter(
       (field) => field.target === target
     );
-  },
+  }
 
   commitSwitchType() {
     const model = this.model;
@@ -222,7 +223,8 @@ export default Controller.extend({
         });
       })
       .catch(popupAjaxError);
-  },
+  }
+
   transitionToEditRoute() {
     this.transitionToRoute(
       this.editRouteName,
@@ -230,8 +232,7 @@ export default Controller.extend({
       "common",
       "scss"
     );
-  },
-  sourceIsHttp: match("model.remote_theme.remote_url", /^http(s)?:\/\//),
+  }
 
   @discourseComputed(
     "model.remote_theme.remote_url",
@@ -241,168 +242,186 @@ export default Controller.extend({
     return remoteThemeBranch
       ? `${remoteThemeUrl.replace(/\.git$/, "")}/tree/${remoteThemeBranch}`
       : remoteThemeUrl;
-  },
+  }
 
   @discourseComputed("model.user.id", "model.default")
   showConvert(userId, defaultTheme) {
     return userId > 0 && !defaultTheme;
-  },
+  }
 
-  actions: {
-    updateToLatest() {
-      this.set("updatingRemote", true);
-      this.model
-        .updateToLatest()
-        .catch(popupAjaxError)
-        .finally(() => {
-          this.set("updatingRemote", false);
-        });
-    },
-
-    checkForThemeUpdates() {
-      this.set("updatingRemote", true);
-      this.model
-        .checkForUpdates()
-        .catch(popupAjaxError)
-        .finally(() => {
-          this.set("updatingRemote", false);
-        });
-    },
-
-    addUploadModal() {
-      showModal("admin-add-upload", { admin: true, name: "" });
-    },
-
-    addUpload(info) {
-      let model = this.model;
-      model.setField("common", info.name, "", info.upload_id, THEME_UPLOAD_VAR);
-      model.saveChanges("theme_fields").catch((e) => popupAjaxError(e));
-    },
-
-    cancelChangeScheme() {
-      this.set("colorSchemeId", this.get("model.color_scheme_id"));
-    },
-    changeScheme() {
-      let schemeId = this.colorSchemeId;
-      this.set(
-        "model.color_scheme_id",
-        schemeId === null ? null : parseInt(schemeId, 10)
-      );
-      this.model.saveChanges("color_scheme_id");
-    },
-    startEditingName() {
-      this.set("oldName", this.get("model.name"));
-      this.set("editingName", true);
-    },
-    cancelEditingName() {
-      this.set("model.name", this.oldName);
-      this.set("editingName", false);
-    },
-    finishedEditingName() {
-      this.model.saveChanges("name");
-      this.set("editingName", false);
-    },
-
-    editTheme() {
-      if (this.get("model.remote_theme.is_git")) {
-        this.dialog.confirm({
-          message: I18n.t("admin.customize.theme.edit_confirm"),
-          didConfirm: () => this.transitionToEditRoute(),
-        });
-      } else {
-        this.transitionToEditRoute();
-      }
-    },
-
-    applyDefault() {
-      const model = this.model;
-      model.saveChanges("default").then(() => {
-        if (model.get("default")) {
-          this.allThemes.forEach((theme) => {
-            if (theme !== model && theme.get("default")) {
-              theme.set("default", false);
-            }
-          });
-        }
+  @action
+  updateToLatest() {
+    this.set("updatingRemote", true);
+    this.model
+      .updateToLatest()
+      .catch(popupAjaxError)
+      .finally(() => {
+        this.set("updatingRemote", false);
       });
-    },
+  }
 
-    applyUserSelectable() {
-      this.model.saveChanges("user_selectable");
-    },
-
-    applyAutoUpdateable() {
-      this.model.saveChanges("auto_update");
-    },
-
-    addChildTheme() {
-      let themeId = parseInt(this.selectedChildThemeId, 10);
-      let theme = this.allThemes.findBy("id", themeId);
-      this.model.addChildTheme(theme).then(() => this.store.findAll("theme"));
-    },
-
-    removeUpload(upload) {
-      return this.dialog.yesNoConfirm({
-        message: I18n.t("admin.customize.theme.delete_upload_confirm"),
-        didConfirm: () => this.model.removeField(upload),
+  @action
+  checkForThemeUpdates() {
+    this.set("updatingRemote", true);
+    this.model
+      .checkForUpdates()
+      .catch(popupAjaxError)
+      .finally(() => {
+        this.set("updatingRemote", false);
       });
-    },
+  }
 
-    removeChildTheme(theme) {
-      this.model
-        .removeChildTheme(theme)
-        .then(() => this.store.findAll("theme"));
-    },
+  @action
+  addUploadModal() {
+    showModal("admin-add-upload", { admin: true, name: "" });
+  }
 
-    destroy() {
-      return this.dialog.yesNoConfirm({
-        message: I18n.t("admin.customize.delete_confirm", {
-          theme_name: this.get("model.name"),
-        }),
-        didConfirm: () => {
-          const model = this.model;
-          model.setProperties({ recentlyInstalled: false });
-          model.destroyRecord().then(() => {
-            this.allThemes.removeObject(model);
-            this.transitionToRoute("adminCustomizeThemes");
-          });
-        },
+  @action
+  addUpload(info) {
+    let model = this.model;
+    model.setField("common", info.name, "", info.upload_id, THEME_UPLOAD_VAR);
+    model.saveChanges("theme_fields").catch((e) => popupAjaxError(e));
+  }
+
+  @action
+  cancelChangeScheme() {
+    this.set("colorSchemeId", this.get("model.color_scheme_id"));
+  }
+
+  @action
+  changeScheme() {
+    let schemeId = this.colorSchemeId;
+    this.set(
+      "model.color_scheme_id",
+      schemeId === null ? null : parseInt(schemeId, 10)
+    );
+    this.model.saveChanges("color_scheme_id");
+  }
+
+  @action
+  startEditingName() {
+    this.set("oldName", this.get("model.name"));
+    this.set("editingName", true);
+  }
+
+  @action
+  cancelEditingName() {
+    this.set("model.name", this.oldName);
+    this.set("editingName", false);
+  }
+
+  @action
+  finishedEditingName() {
+    this.model.saveChanges("name");
+    this.set("editingName", false);
+  }
+
+  @action
+  editTheme() {
+    if (this.get("model.remote_theme.is_git")) {
+      this.dialog.confirm({
+        message: I18n.t("admin.customize.theme.edit_confirm"),
+        didConfirm: () => this.transitionToEditRoute(),
       });
-    },
+    } else {
+      this.transitionToEditRoute();
+    }
+  }
 
-    switchType() {
-      const relatives = this.get("model.component")
-        ? this.get("model.parentThemes")
-        : this.get("model.childThemes");
-
-      let message = I18n.t(`${this.convertKey}_alert_generic`);
-
-      if (relatives && relatives.length > 0) {
-        message = I18n.t(`${this.convertKey}_alert`, {
-          relatives: relatives
-            .map((relative) => relative.get("name"))
-            .join(", "),
+  @action
+  applyDefault() {
+    const model = this.model;
+    model.saveChanges("default").then(() => {
+      if (model.get("default")) {
+        this.allThemes.forEach((theme) => {
+          if (theme !== model && theme.get("default")) {
+            theme.set("default", false);
+          }
         });
       }
+    });
+  }
 
-      return this.dialog.yesNoConfirm({
-        message,
-        didConfirm: () => this.commitSwitchType(),
+  @action
+  applyUserSelectable() {
+    this.model.saveChanges("user_selectable");
+  }
+
+  @action
+  applyAutoUpdateable() {
+    this.model.saveChanges("auto_update");
+  }
+
+  @action
+  addChildTheme() {
+    let themeId = parseInt(this.selectedChildThemeId, 10);
+    let theme = this.allThemes.findBy("id", themeId);
+    this.model.addChildTheme(theme).then(() => this.store.findAll("theme"));
+  }
+
+  @action
+  removeUpload(upload) {
+    return this.dialog.yesNoConfirm({
+      message: I18n.t("admin.customize.theme.delete_upload_confirm"),
+      didConfirm: () => this.model.removeField(upload),
+    });
+  }
+
+  @action
+  removeChildTheme(theme) {
+    this.model.removeChildTheme(theme).then(() => this.store.findAll("theme"));
+  }
+
+  @action
+  destroyTheme() {
+    return this.dialog.yesNoConfirm({
+      message: I18n.t("admin.customize.delete_confirm", {
+        theme_name: this.get("model.name"),
+      }),
+      didConfirm: () => {
+        const model = this.model;
+        model.setProperties({ recentlyInstalled: false });
+        model.destroyRecord().then(() => {
+          this.allThemes.removeObject(model);
+          this.transitionToRoute("adminCustomizeThemes");
+        });
+      },
+    });
+  }
+
+  @action
+  switchType() {
+    const relatives = this.get("model.component")
+      ? this.get("model.parentThemes")
+      : this.get("model.childThemes");
+
+    let message = I18n.t(`${this.convertKey}_alert_generic`);
+
+    if (relatives && relatives.length > 0) {
+      message = I18n.t(`${this.convertKey}_alert`, {
+        relatives: relatives.map((relative) => relative.get("name")).join(", "),
       });
-    },
+    }
 
-    enableComponent() {
-      this.model.set("enabled", true);
-      this.model
-        .saveChanges("enabled")
-        .catch(() => this.model.set("enabled", false));
-    },
+    return this.dialog.yesNoConfirm({
+      message,
+      didConfirm: () => this.commitSwitchType(),
+    });
+  }
 
-    disableComponent() {
-      this.model.set("enabled", false);
-      this.model
-        .saveChanges("enabled")
-        .catch(() => this.model.set("enabled", true));
-    },
-  },
-});
+  @action
+  enableComponent() {
+    this.model.set("enabled", true);
+    this.model
+      .saveChanges("enabled")
+      .catch(() => this.model.set("enabled", false));
+  }
+
+  @action
+  disableComponent() {
+    this.model.set("enabled", false);
+    this.model
+      .saveChanges("enabled")
+      .catch(() => this.model.set("enabled", true));
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-customize-themes.js

@@ -2,21 +2,21 @@ import Controller from "@ember/controller";
 import { THEMES } from "admin/models/theme";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  currentTab: THEMES,
+export default class AdminCustomizeThemesController extends Controller {
+  currentTab = THEMES;
 
   @discourseComputed("model", "model.@each.component")
   fullThemes(themes) {
     return themes.filter((t) => !t.get("component"));
-  },
+  }
 
   @discourseComputed("model", "model.@each.component")
   childThemes(themes) {
     return themes.filter((t) => t.get("component"));
-  },
+  }
 
   @discourseComputed("model.content")
   installedThemes(content) {
     return content || [];
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-dashboard-general.js

@@ -1,9 +1,9 @@
+import { computed } from "@ember/object";
 import Controller, { inject as controller } from "@ember/controller";
 import AdminDashboard from "admin/models/admin-dashboard";
 import I18n from "I18n";
 import PeriodComputationMixin from "admin/mixins/period-computation";
 import Report from "admin/models/report";
-import { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import getURL from "discourse-common/lib/get-url";
 import { makeArray } from "discourse-common/lib/helpers";
@@ -15,41 +15,49 @@ function staticReport(reportType) {
   });
 }
 
-export default Controller.extend(PeriodComputationMixin, {
-  isLoading: false,
-  dashboardFetchedAt: null,
-  exceptionController: controller("exception"),
-  logSearchQueriesEnabled: setting("log_search_queries"),
+export default class AdminDashboardGeneralController extends Controller.extend(
+  PeriodComputationMixin
+) {
+  @controller("exception") exceptionController;
+
+  isLoading = false;
+  dashboardFetchedAt = null;
+
+  @setting("log_search_queries") logSearchQueriesEnabled;
+
+  @staticReport("users_by_type") usersByTypeReport;
+  @staticReport("users_by_trust_level") usersByTrustLevelReport;
+  @staticReport("storage_report") storageReport;
 
   @discourseComputed("siteSettings.dashboard_general_tab_activity_metrics")
   activityMetrics(metrics) {
     return (metrics || "").split("|").filter(Boolean);
-  },
+  }
 
-  hiddenReports: computed("siteSettings.dashboard_hidden_reports", function () {
+  @computed("siteSettings.dashboard_hidden_reports")
+  get hiddenReports() {
     return (this.siteSettings.dashboard_hidden_reports || "")
       .split("|")
       .filter(Boolean);
-  }),
+  }
 
-  isActivityMetricsVisible: computed(
-    "activityMetrics",
-    "hiddenReports",
-    function () {
-      return (
-        this.activityMetrics.length &&
-        this.activityMetrics.some((x) => !this.hiddenReports.includes(x))
-      );
-    }
-  ),
+  @computed("activityMetrics", "hiddenReports")
+  get isActivityMetricsVisible() {
+    return (
+      this.activityMetrics.length &&
+      this.activityMetrics.some((x) => !this.hiddenReports.includes(x))
+    );
+  }
 
-  isSearchReportsVisible: computed("hiddenReports", function () {
+  @computed("hiddenReports")
+  get isSearchReportsVisible() {
     return ["top_referred_topics", "trending_search"].some(
       (x) => !this.hiddenReports.includes(x)
     );
-  }),
+  }
 
-  isCommunityHealthVisible: computed("hiddenReports", function () {
+  @computed("hiddenReports")
+  get isCommunityHealthVisible() {
     return [
       "consolidated_page_views",
       "signups",
@@ -59,7 +67,7 @@ export default Controller.extend(PeriodComputationMixin, {
       "daily_engaged_users",
       "new_contributors",
     ].some((x) => !this.hiddenReports.includes(x));
-  }),
+  }
 
   @discourseComputed
   activityMetricsFilters() {
@@ -67,14 +75,14 @@ export default Controller.extend(PeriodComputationMixin, {
       startDate: this.lastMonth,
       endDate: this.today,
     };
-  },
+  }
 
   @discourseComputed
   topReferredTopicsOptions() {
     return {
       table: { total: false, limit: 8 },
     };
-  },
+  }
 
   @discourseComputed
   topReferredTopicsFilters() {
@@ -82,7 +90,7 @@ export default Controller.extend(PeriodComputationMixin, {
       startDate: moment().subtract(6, "days").startOf("day"),
       endDate: this.today,
     };
-  },
+  }
 
   @discourseComputed
   trendingSearchFilters() {
@@ -90,25 +98,21 @@ export default Controller.extend(PeriodComputationMixin, {
       startDate: moment().subtract(1, "month").startOf("day"),
       endDate: this.today,
     };
-  },
+  }
 
   @discourseComputed
   trendingSearchOptions() {
     return {
       table: { total: false, limit: 8 },
     };
-  },
+  }
 
   @discourseComputed
   trendingSearchDisabledLabel() {
     return I18n.t("admin.dashboard.reports.trending_search.disabled", {
       basePath: getURL(""),
     });
-  },
-
-  usersByTypeReport: staticReport("users_by_type"),
-  usersByTrustLevelReport: staticReport("users_by_trust_level"),
-  storageReport: staticReport("storage_report"),
+  }
 
   fetchDashboard() {
     if (this.isLoading) {
@@ -137,14 +141,14 @@ export default Controller.extend(PeriodComputationMixin, {
         })
         .finally(() => this.set("isLoading", false));
     }
-  },
+  }
 
   @discourseComputed("startDate", "endDate")
   filters(startDate, endDate) {
     return { startDate, endDate };
-  },
+  }
 
   _reportsForPeriodURL(period) {
     return getURL(`/admin?period=${period}`);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-dashboard-moderation.js

@@ -1,10 +1,12 @@
+import { computed } from "@ember/object";
 import Controller from "@ember/controller";
 import PeriodComputationMixin from "admin/mixins/period-computation";
-import { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import getURL from "discourse-common/lib/get-url";
 
-export default Controller.extend(PeriodComputationMixin, {
+export default class AdminDashboardModerationController extends Controller.extend(
+  PeriodComputationMixin
+) {
   @discourseComputed
   flagsStatusOptions() {
     return {
@@ -13,17 +15,15 @@ export default Controller.extend(PeriodComputationMixin, {
         perPage: 10,
       },
     };
-  },
+  }
 
-  isModeratorsActivityVisible: computed(
-    "siteSettings.dashboard_hidden_reports",
-    function () {
-      return !(this.siteSettings.dashboard_hidden_reports || "")
-        .split("|")
-        .filter(Boolean)
-        .includes("moderators_activity");
-    }
-  ),
+  @computed("siteSettings.dashboard_hidden_reports")
+  get isModeratorsActivityVisible() {
+    return !(this.siteSettings.dashboard_hidden_reports || "")
+      .split("|")
+      .filter(Boolean)
+      .includes("moderators_activity");
+  }
 
   @discourseComputed
   userFlaggingRatioOptions() {
@@ -33,19 +33,19 @@ export default Controller.extend(PeriodComputationMixin, {
         perPage: 10,
       },
     };
-  },
+  }
 
   @discourseComputed("startDate", "endDate")
   filters(startDate, endDate) {
     return { startDate, endDate };
-  },
+  }
 
   @discourseComputed("lastWeek", "endDate")
   lastWeekfilters(startDate, endDate) {
     return { startDate, endDate };
-  },
+  }
 
   _reportsForPeriodURL(period) {
     return getURL(`/admin/dashboard/moderation?period=${period}`);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-dashboard-reports.js

@@ -2,10 +2,10 @@ import Controller from "@ember/controller";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseComputed from "discourse-common/utils/decorators";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { get } from "@ember/object";
+import { action, get } from "@ember/object";
 
-export default Controller.extend({
-  filter: null,
+export default class AdminDashboardReportsController extends Controller {
+  filter = null;
 
   @discourseComputed(
     "model.[]",
@@ -29,15 +29,14 @@ export default Controller.extend({
     reports = reports.filter((report) => !hiddenReports.includes(report.type));
 
     return reports;
-  },
+  }
 
-  actions: {
-    filterReports(filter) {
-      discourseDebounce(this, this._performFiltering, filter, INPUT_DELAY);
-    },
-  },
+  @action
+  filterReports(filter) {
+    discourseDebounce(this, this._performFiltering, filter, INPUT_DELAY);
+  }
 
   _performFiltering(filter) {
     this.set("filter", filter);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-dashboard.js

@@ -1,17 +1,19 @@
+import { action, computed } from "@ember/object";
 import Controller, { inject as controller } from "@ember/controller";
 import AdminDashboard from "admin/models/admin-dashboard";
 import VersionCheck from "admin/models/version-check";
-import { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import { setting } from "discourse/lib/computed";
 
 const PROBLEMS_CHECK_MINUTES = 1;
 
-export default Controller.extend({
-  isLoading: false,
-  dashboardFetchedAt: null,
-  exceptionController: controller("exception"),
-  showVersionChecks: setting("version_checks"),
+export default class AdminDashboardController extends Controller {
+  @controller("exception") exceptionController;
+
+  isLoading = false;
+  dashboardFetchedAt = null;
+
+  @setting("version_checks") showVersionChecks;
 
   @discourseComputed(
     "lowPriorityProblems.length",
@@ -21,25 +23,29 @@ export default Controller.extend({
     const problemsLength =
       lowPriorityProblemsLength + highPriorityProblemsLength;
     return this.currentUser.admin && problemsLength > 0;
-  },
+  }
 
-  visibleTabs: computed("siteSettings.dashboard_visible_tabs", function () {
+  @computed("siteSettings.dashboard_visible_tabs")
+  get visibleTabs() {
     return (this.siteSettings.dashboard_visible_tabs || "")
       .split("|")
       .filter(Boolean);
-  }),
+  }
 
-  isModerationTabVisible: computed("visibleTabs", function () {
+  @computed("visibleTabs")
+  get isModerationTabVisible() {
     return this.visibleTabs.includes("moderation");
-  }),
+  }
 
-  isSecurityTabVisible: computed("visibleTabs", function () {
+  @computed("visibleTabs")
+  get isSecurityTabVisible() {
     return this.visibleTabs.includes("security");
-  }),
+  }
 
-  isReportsTabVisible: computed("visibleTabs", function () {
+  @computed("visibleTabs")
+  get isReportsTabVisible() {
     return this.visibleTabs.includes("reports");
-  }),
+  }
 
   fetchProblems() {
     if (this.isLoadingProblems) {
@@ -53,7 +59,7 @@ export default Controller.extend({
     ) {
       this._loadProblems();
     }
-  },
+  }
 
   fetchDashboard() {
     const versionChecks = this.siteSettings.version_checks;
@@ -88,7 +94,7 @@ export default Controller.extend({
           this.set("isLoading", false);
         });
     }
-  },
+  }
 
   _loadProblems() {
     this.setProperties({
@@ -108,16 +114,15 @@ export default Controller.extend({
         );
       })
       .finally(() => this.set("loadingProblems", false));
-  },
+  }
 
   @discourseComputed("problemsFetchedAt")
   problemsTimestamp(problemsFetchedAt) {
     return moment(problemsFetchedAt).locale("en").format("LLL");
-  },
+  }
 
-  actions: {
-    refreshProblems() {
-      this._loadProblems();
-    },
-  },
-});
+  @action
+  refreshProblems() {
+    this._loadProblems();
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-advanced-test.js

@@ -1,31 +1,31 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend({
-  email: null,
-  text: null,
-  elided: null,
-  format: null,
-  loading: null,
+export default class AdminEmailAdvancedTestController extends Controller {
+  email = null;
+  text = null;
+  elided = null;
+  format = null;
+  loading = null;
 
-  actions: {
-    run() {
-      this.set("loading", true);
+  @action
+  run() {
+    this.set("loading", true);
 
-      ajax("/admin/email/advanced-test", {
-        type: "POST",
-        data: { email: this.email },
+    ajax("/admin/email/advanced-test", {
+      type: "POST",
+      data: { email: this.email },
+    })
+      .then((data) => {
+        this.setProperties({
+          text: data.text,
+          elided: data.elided,
+          format: data.format,
+        });
       })
-        .then((data) => {
-          this.setProperties({
-            text: data.text,
-            elided: data.elided,
-            format: data.format,
-          });
-        })
-        .catch(popupAjaxError)
-        .finally(() => this.set("loading", false));
-    },
-  },
-});
+      .catch(popupAjaxError)
+      .finally(() => this.set("loading", false));
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-bounced.js

@@ -1,18 +1,18 @@
 import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import { action } from "@ember/object";
 
-export default AdminEmailLogsController.extend({
+export default class AdminEmailBouncedController extends AdminEmailLogsController {
   @action
   handleShowIncomingEmail(id, event) {
     event?.preventDefault();
     this.send("showIncomingEmail", id);
-  },
+  }
 
   @observes("filter.{status,user,address,type}")
   filterEmailLogs() {
     discourseDebounce(this, this.loadLogs, INPUT_DELAY);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-index.js

@@ -1,21 +1,22 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { empty } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
-import { empty } from "@ember/object/computed";
-import { observes } from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
+import { observes } from "@ember-decorators/object";
 import { htmlSafe } from "@ember/template";
 import { escapeExpression } from "discourse/lib/utilities";
 
-export default Controller.extend({
-  dialog: service(),
+export default class AdminEmailIndexController extends Controller {
+  @service dialog;
 
   /**
     Is the "send test email" button disabled?
 
     @property sendTestEmailDisabled
   **/
-  sendTestEmailDisabled: empty("testEmailAddress"),
+  @empty("testEmailAddress") sendTestEmailDisabled;
 
   /**
     Clears the 'sentTestEmail' property on successful send.
@@ -25,43 +26,40 @@ export default Controller.extend({
   @observes("testEmailAddress")
   testEmailAddressChanged() {
     this.set("sentTestEmail", false);
-  },
+  }
 
-  actions: {
-    /**
-      Sends a test email to the currently entered email address
+  /**
+    Sends a test email to the currently entered email address
 
-      @method sendTestEmail
-    **/
-    sendTestEmail() {
-      this.setProperties({
-        sendingEmail: true,
-        sentTestEmail: false,
-      });
+    @method sendTestEmail
+  **/
+  @action
+  sendTestEmail() {
+    this.setProperties({
+      sendingEmail: true,
+      sentTestEmail: false,
+    });
 
-      ajax("/admin/email/test", {
-        type: "POST",
-        data: { email_address: this.testEmailAddress },
+    ajax("/admin/email/test", {
+      type: "POST",
+      data: { email_address: this.testEmailAddress },
+    })
+      .then((response) =>
+        this.set("sentTestEmailMessage", response.sent_test_email_message)
+      )
+      .catch((e) => {
+        if (e.jqXHR.responseJSON?.errors) {
+          this.dialog.alert({
+            message: htmlSafe(
+              I18n.t("admin.email.error", {
+                server_error: escapeExpression(e.jqXHR.responseJSON.errors[0]),
+              })
+            ),
+          });
+        } else {
+          this.dialog.alert({ message: I18n.t("admin.email.test_error") });
+        }
       })
-        .then((response) =>
-          this.set("sentTestEmailMessage", response.sent_test_email_message)
-        )
-        .catch((e) => {
-          if (e.jqXHR.responseJSON?.errors) {
-            this.dialog.alert({
-              message: htmlSafe(
-                I18n.t("admin.email.error", {
-                  server_error: escapeExpression(
-                    e.jqXHR.responseJSON.errors[0]
-                  ),
-                })
-              ),
-            });
-          } else {
-            this.dialog.alert({ message: I18n.t("admin.email.test_error") });
-          }
-        })
-        .finally(() => this.set("sendingEmail", false));
-    },
-  },
-});
+      .finally(() => this.set("sendingEmail", false));
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-logs.js

@@ -1,14 +1,11 @@
 import Controller from "@ember/controller";
 import EmailLog from "admin/models/email-log";
-import EmberObject from "@ember/object";
+import EmberObject, { action } from "@ember/object";
 
-export default Controller.extend({
-  loading: false,
+export default class AdminEmailLogsController extends Controller {
+  loading = false;
+  filter = EmberObject.create();
 
-  init() {
-    this._super(...arguments);
-    this.set("filter", EmberObject.create());
-  },
   loadLogs(sourceModel, loadMore) {
     if ((loadMore && this.loading) || this.get("model.allLoaded")) {
       return;
@@ -38,11 +35,10 @@ export default Controller.extend({
         }
       })
       .finally(() => this.set("loading", false));
-  },
+  }
 
-  actions: {
-    loadMore() {
-      this.loadLogs(EmailLog, true);
-    },
-  },
-});
+  @action
+  loadMore() {
+    this.loadLogs(EmailLog, true);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-preview-digest.js

@@ -1,66 +1,67 @@
+import { inject as service } from "@ember/service";
 import { empty, notEmpty, or } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import EmailPreview from "admin/models/email-preview";
 import { action, get } from "@ember/object";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  dialog: service(),
-  username: null,
-  lastSeen: null,
-  emailEmpty: empty("email"),
-  sendEmailDisabled: or("emailEmpty", "sendingEmail"),
-  showSendEmailForm: notEmpty("model.html_content"),
-  htmlEmpty: empty("model.html_content"),
+export default class AdminEmailPreviewDigestController extends Controller {
+  @service dialog;
+
+  username = null;
+  lastSeen = null;
+
+  @empty("email") emailEmpty;
+  @or("emailEmpty", "sendingEmail") sendEmailDisabled;
+  @notEmpty("model.html_content") showSendEmailForm;
+  @empty("model.html_content") htmlEmpty;
 
   @action
   toggleShowHtml(event) {
     event?.preventDefault();
     this.toggleProperty("showHtml");
-  },
+  }
 
-  actions: {
-    updateUsername(selected) {
-      this.set("username", get(selected, "firstObject"));
-    },
+  @action
+  updateUsername(selected) {
+    this.set("username", get(selected, "firstObject"));
+  }
 
-    refresh() {
-      const model = this.model;
+  @action
+  refresh() {
+    const model = this.model;
 
-      this.set("loading", true);
-      this.set("sentEmail", false);
+    this.set("loading", true);
+    this.set("sentEmail", false);
 
-      let username = this.username;
-      if (!username) {
-        username = this.currentUser.get("username");
-        this.set("username", username);
-      }
+    let username = this.username;
+    if (!username) {
+      username = this.currentUser.get("username");
+      this.set("username", username);
+    }
 
-      EmailPreview.findDigest(username, this.lastSeen).then((email) => {
-        model.setProperties(
-          email.getProperties("html_content", "text_content")
-        );
-        this.set("loading", false);
+    EmailPreview.findDigest(username, this.lastSeen).then((email) => {
+      model.setProperties(email.getProperties("html_content", "text_content"));
+      this.set("loading", false);
+    });
+  }
+
+  @action
+  sendEmail() {
+    this.set("sendingEmail", true);
+    this.set("sentEmail", false);
+
+    EmailPreview.sendDigest(this.username, this.lastSeen, this.email)
+      .then((result) => {
+        if (result.errors) {
+          this.dialog.alert(result.errors);
+        } else {
+          this.set("sentEmail", true);
+        }
+      })
+      .catch(popupAjaxError)
+      .finally(() => {
+        this.set("sendingEmail", false);
       });
-    },
-
-    sendEmail() {
-      this.set("sendingEmail", true);
-      this.set("sentEmail", false);
-
-      EmailPreview.sendDigest(this.username, this.lastSeen, this.email)
-        .then((result) => {
-          if (result.errors) {
-            this.dialog.alert(result.errors);
-          } else {
-            this.set("sentEmail", true);
-          }
-        })
-        .catch(popupAjaxError)
-        .finally(() => {
-          this.set("sendingEmail", false);
-        });
-    },
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-received.js

@@ -1,18 +1,18 @@
+import { action } from "@ember/object";
 import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import IncomingEmail from "admin/models/incoming-email";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
-export default AdminEmailLogsController.extend({
+export default class AdminEmailReceivedController extends AdminEmailLogsController {
   @observes("filter.{status,from,to,subject}")
   filterIncomingEmails() {
     discourseDebounce(this, this.loadLogs, IncomingEmail, INPUT_DELAY);
-  },
+  }
 
-  actions: {
-    loadMore() {
-      this.loadLogs(IncomingEmail, true);
-    },
-  },
-});
+  @action
+  loadMore() {
+    this.loadLogs(IncomingEmail, true);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-rejected.js

@@ -2,24 +2,23 @@ import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import IncomingEmail from "admin/models/incoming-email";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import { action } from "@ember/object";
 
-export default AdminEmailLogsController.extend({
+export default class AdminEmailRejectedController extends AdminEmailLogsController {
   @observes("filter.{status,from,to,subject,error}")
   filterIncomingEmails() {
     discourseDebounce(this, this.loadLogs, IncomingEmail, INPUT_DELAY);
-  },
+  }
 
   @action
   handleShowIncomingEmail(id, event) {
     event?.preventDefault();
     this.send("showIncomingEmail", id);
-  },
+  }
 
-  actions: {
-    loadMore() {
-      this.loadLogs(IncomingEmail, true);
-    },
-  },
-});
+  @action
+  loadMore() {
+    this.loadLogs(IncomingEmail, true);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-sent.js

@@ -1,11 +1,11 @@
 import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
-export default AdminEmailLogsController.extend({
+export default class AdminEmailSentController extends AdminEmailLogsController {
   @observes("filter.{status,user,address,type,reply_key}")
   filterEmailLogs() {
     discourseDebounce(this, this.loadLogs, INPUT_DELAY);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-email-skipped.js

@@ -1,11 +1,11 @@
 import AdminEmailLogsController from "admin/controllers/admin-email-logs";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
-export default AdminEmailLogsController.extend({
+export default class AdminEmailSkippedController extends AdminEmailLogsController {
   @observes("filter.{status,user,address,type}")
   filterEmailLogs() {
     discourseDebounce(this, this.loadLogs, INPUT_DELAY);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-embedding.js

@@ -1,17 +1,18 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend({
-  saved: false,
-  embedding: null,
+export default class AdminEmbeddingController extends Controller {
+  saved = false;
+  embedding = null;
 
   // show settings if we have at least one created host
   @discourseComputed("embedding.embeddable_hosts.@each.isCreated")
   showSecondary() {
     const hosts = this.get("embedding.embeddable_hosts");
     return hosts.length && hosts.findBy("isCreated");
-  },
+  }
 
   @discourseComputed("embedding.base_url")
   embeddingCode(baseUrl) {
@@ -33,27 +34,28 @@ export default Controller.extend({
 </script>`;
 
     return html;
-  },
+  }
 
-  actions: {
-    saveChanges() {
-      const embedding = this.embedding;
-      const updates = embedding.getProperties(embedding.get("fields"));
+  @action
+  saveChanges() {
+    const embedding = this.embedding;
+    const updates = embedding.getProperties(embedding.get("fields"));
 
-      this.set("saved", false);
-      this.embedding
-        .update(updates)
-        .then(() => this.set("saved", true))
-        .catch(popupAjaxError);
-    },
+    this.set("saved", false);
+    this.embedding
+      .update(updates)
+      .then(() => this.set("saved", true))
+      .catch(popupAjaxError);
+  }
 
-    addHost() {
-      const host = this.store.createRecord("embeddable-host");
-      this.get("embedding.embeddable_hosts").pushObject(host);
-    },
+  @action
+  addHost() {
+    const host = this.store.createRecord("embeddable-host");
+    this.get("embedding.embeddable_hosts").pushObject(host);
+  }
 
-    deleteHost(host) {
-      this.get("embedding.embeddable_hosts").removeObject(host);
-    },
-  },
-});
+  @action
+  deleteHost(host) {
+    this.get("embedding.embeddable_hosts").removeObject(host);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-emojis.js

@@ -1,49 +1,46 @@
+import { inject as service } from "@ember/service";
+import { sort } from "@ember/object/computed";
 import EmberObject, { action, computed } from "@ember/object";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
-import { sort } from "@ember/object/computed";
-import { inject as service } from "@ember/service";
 
 const ALL_FILTER = "all";
 
-export default Controller.extend({
-  dialog: service(),
-  filter: null,
-  sorting: null,
+export default class AdminEmojisController extends Controller {
+  @service dialog;
 
+  filter = null;
+  sorting = null;
+
+  @sort("filteredEmojis.[]", "sorting") sortedEmojis;
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.setProperties({
       filter: ALL_FILTER,
       sorting: ["group", "name"],
     });
-  },
+  }
 
-  sortedEmojis: sort("filteredEmojis.[]", "sorting"),
+  @computed("model")
+  get emojiGroups() {
+    return this.model.mapBy("group").uniq();
+  }
 
-  emojiGroups: computed("model", {
-    get() {
-      return this.model.mapBy("group").uniq();
-    },
-  }),
+  @computed("emojiGroups.[]")
+  get sortingGroups() {
+    return [ALL_FILTER].concat(this.emojiGroups);
+  }
 
-  sortingGroups: computed("emojiGroups.[]", {
-    get() {
-      return [ALL_FILTER].concat(this.emojiGroups);
-    },
-  }),
-
-  filteredEmojis: computed("model.[]", "filter", {
-    get() {
-      if (!this.filter || this.filter === ALL_FILTER) {
-        return this.model;
-      } else {
-        return this.model.filterBy("group", this.filter);
-      }
-    },
-  }),
+  @computed("model.[]", "filter")
+  get filteredEmojis() {
+    if (!this.filter || this.filter === ALL_FILTER) {
+      return this.model;
+    } else {
+      return this.model.filterBy("group", this.filter);
+    }
+  }
 
   _highlightEmojiList() {
     const customEmojiListEl = document.querySelector("#custom_emoji");
@@ -56,12 +53,12 @@ export default Controller.extend({
         customEmojiListEl.classList.remove("highlighted");
       });
     }
-  },
+  }
 
   @action
   filterGroups(value) {
     this.set("filter", value);
-  },
+  }
 
   @action
   emojiUploaded(emoji, group) {
@@ -69,7 +66,7 @@ export default Controller.extend({
     emoji.group = group;
     this.model.pushObject(EmberObject.create(emoji));
     this._highlightEmojiList();
-  },
+  }
 
   @action
   destroyEmoji(emoji) {
@@ -85,5 +82,5 @@ export default Controller.extend({
         });
       },
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-logs-screened-emails.js

@@ -1,23 +1,24 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import ScreenedEmail from "admin/models/screened-email";
 import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 
-export default Controller.extend({
-  loading: false,
+export default class AdminLogsScreenedEmailsController extends Controller {
+  loading = false;
 
-  actions: {
-    clearBlock(row) {
-      row.clearBlock().then(function () {
-        // feeling lazy
-        window.location.reload();
-      });
-    },
+  @action
+  clearBlock(row) {
+    row.clearBlock().then(function () {
+      // feeling lazy
+      window.location.reload();
+    });
+  }
 
-    exportScreenedEmailList() {
-      exportEntity("screened_email").then(outputExportResult);
-    },
-  },
+  @action
+  exportScreenedEmailList() {
+    exportEntity("screened_email").then(outputExportResult);
+  }
 
   show() {
     this.set("loading", true);
@@ -25,5 +26,5 @@ export default Controller.extend({
       this.set("model", result);
       this.set("loading", false);
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-logs-screened-ip-addresses.js

@@ -1,31 +1,32 @@
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import ScreenedIpAddress from "admin/models/screened-ip-address";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { exportEntity } from "discourse/lib/export-csv";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import { outputExportResult } from "discourse/lib/export-result";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  dialog: service(),
-  loading: false,
-  filter: null,
-  savedIpAddress: null,
+export default class AdminLogsScreenedIpAddressesController extends Controller {
+  @service dialog;
+
+  loading = false;
+  filter = null;
+  savedIpAddress = null;
 
   _debouncedShow() {
     this.set("loading", true);
     ScreenedIpAddress.findAll(this.filter).then((result) => {
       this.setProperties({ model: result, loading: false });
     });
-  },
+  }
 
   @observes("filter")
   show() {
     discourseDebounce(this, this._debouncedShow, INPUT_DELAY);
-  },
+  }
 
   @action
   edit(record, event) {
@@ -34,81 +35,86 @@ export default Controller.extend({
       this.set("savedIpAddress", record.get("ip_address"));
     }
     record.set("editing", true);
-  },
+  }
 
-  actions: {
-    allow(record) {
-      record.set("action_name", "do_nothing");
-      record.save();
-    },
+  @action
+  allow(record) {
+    record.set("action_name", "do_nothing");
+    record.save();
+  }
 
-    block(record) {
-      record.set("action_name", "block");
-      record.save();
-    },
+  @action
+  block(record) {
+    record.set("action_name", "block");
+    record.save();
+  }
 
-    cancel(record) {
-      const savedIpAddress = this.savedIpAddress;
-      if (savedIpAddress && record.get("editing")) {
-        record.set("ip_address", savedIpAddress);
-      }
-      record.set("editing", false);
-    },
+  @action
+  cancel(record) {
+    const savedIpAddress = this.savedIpAddress;
+    if (savedIpAddress && record.get("editing")) {
+      record.set("ip_address", savedIpAddress);
+    }
+    record.set("editing", false);
+  }
 
-    save(record) {
-      const wasEditing = record.get("editing");
-      record.set("editing", false);
-      record
-        .save()
-        .then(() => this.set("savedIpAddress", null))
-        .catch((e) => {
-          if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
+  @action
+  save(record) {
+    const wasEditing = record.get("editing");
+    record.set("editing", false);
+    record
+      .save()
+      .then(() => this.set("savedIpAddress", null))
+      .catch((e) => {
+        if (e.jqXHR.responseJSON && e.jqXHR.responseJSON.errors) {
+          this.dialog.alert(
+            I18n.t("generic_error_with_reason", {
+              error: e.jqXHR.responseJSON.errors.join(". "),
+            })
+          );
+        } else {
+          this.dialog.alert(I18n.t("generic_error"));
+        }
+        if (wasEditing) {
+          record.set("editing", true);
+        }
+      });
+  }
+
+  @action
+  destroyRecord(record) {
+    return this.dialog.yesNoConfirm({
+      message: I18n.t("admin.logs.screened_ips.delete_confirm", {
+        ip_address: record.get("ip_address"),
+      }),
+      didConfirm: () => {
+        return record
+          .destroy()
+          .then((deleted) => {
+            if (deleted) {
+              this.model.removeObject(record);
+            } else {
+              this.dialog.alert(I18n.t("generic_error"));
+            }
+          })
+          .catch((e) => {
             this.dialog.alert(
               I18n.t("generic_error_with_reason", {
-                error: e.jqXHR.responseJSON.errors.join(". "),
+                error: `http: ${e.status} - ${e.body}`,
               })
             );
-          } else {
-            this.dialog.alert(I18n.t("generic_error"));
-          }
-          if (wasEditing) {
-            record.set("editing", true);
-          }
-        });
-    },
+          });
+      },
+    });
+  }
 
-    destroy(record) {
-      return this.dialog.yesNoConfirm({
-        message: I18n.t("admin.logs.screened_ips.delete_confirm", {
-          ip_address: record.get("ip_address"),
-        }),
-        didConfirm: () => {
-          return record
-            .destroy()
-            .then((deleted) => {
-              if (deleted) {
-                this.model.removeObject(record);
-              } else {
-                this.dialog.alert(I18n.t("generic_error"));
-              }
-            })
-            .catch((e) => {
-              this.dialog.alert(
-                I18n.t("generic_error_with_reason", {
-                  error: `http: ${e.status} - ${e.body}`,
-                })
-              );
-            });
-        },
-      });
-    },
+  @action
+  recordAdded(arg) {
+    this.model.unshiftObject(arg);
+  }
 
-    recordAdded(arg) {
-      this.model.unshiftObject(arg);
-    },
-
-    exportScreenedIpList() {
-      exportEntity("screened_ip").then(outputExportResult);
-    },
-  },
-});
+  @action
+  exportScreenedIpList() {
+    exportEntity("screened_ip").then(outputExportResult);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-logs-screened-urls.js

@@ -1,10 +1,11 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import ScreenedUrl from "admin/models/screened-url";
 import { exportEntity } from "discourse/lib/export-csv";
 import { outputExportResult } from "discourse/lib/export-result";
 
-export default Controller.extend({
-  loading: false,
+export default class AdminLogsScreenedUrlsController extends Controller {
+  loading = false;
 
   show() {
     this.set("loading", true);
@@ -12,11 +13,10 @@ export default Controller.extend({
       this.set("model", result);
       this.set("loading", false);
     });
-  },
+  }
 
-  actions: {
-    exportScreenedUrlList() {
-      exportEntity("screened_url").then(outputExportResult);
-    },
-  },
-});
+  @action
+  exportScreenedUrlList() {
+    exportEntity("screened_url").then(outputExportResult);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-logs-staff-action-logs.js

@@ -7,22 +7,21 @@ import { outputExportResult } from "discourse/lib/export-result";
 import { scheduleOnce } from "@ember/runloop";
 import showModal from "discourse/lib/show-modal";
 
-export default Controller.extend({
-  queryParams: ["filters"],
-
-  model: null,
-  filters: null,
-  userHistoryActions: null,
+export default class AdminLogsStaffActionLogsController extends Controller {
+  queryParams = ["filters"];
+  model = null;
+  filters = null;
+  userHistoryActions = null;
 
   @discourseComputed("filters.action_name")
   actionFilter(name) {
     return name ? I18n.t("admin.logs.staff_actions.actions." + name) : null;
-  },
+  }
 
   @discourseComputed("filters")
   filtersExists(filters) {
     return filters && Object.keys(filters).length > 0;
-  },
+  }
 
   _refresh() {
     this.store.findAll("staff-action-log", this.filters).then((result) => {
@@ -44,11 +43,11 @@ export default Controller.extend({
         );
       }
     });
-  },
+  }
 
   scheduleRefresh() {
     scheduleOnce("afterRender", this, this._refresh);
-  },
+  }
 
   resetFilters() {
     this.setProperties({
@@ -56,7 +55,7 @@ export default Controller.extend({
       filters: EmberObject.create(),
     });
     this.scheduleRefresh();
-  },
+  }
 
   changeFilters(props) {
     this.set("model", EmberObject.create({ loadingMore: true }));
@@ -76,7 +75,7 @@ export default Controller.extend({
 
     this.send("onFiltersChange", this.filters);
     this.scheduleRefresh();
-  },
+  }
 
   @action
   filterActionIdChanged(filterActionId) {
@@ -87,7 +86,7 @@ export default Controller.extend({
           .action_id,
       });
     }
-  },
+  }
 
   @action
   clearFilter(key, event) {
@@ -102,14 +101,14 @@ export default Controller.extend({
     } else {
       this.changeFilters({ [key]: null });
     }
-  },
+  }
 
   @action
   clearAllFilters(event) {
     event?.preventDefault();
     this.set("filterActionId", null);
     this.resetFilters();
-  },
+  }
 
   @action
   filterByAction(logItem, event) {
@@ -119,35 +118,35 @@ export default Controller.extend({
       action_id: logItem.get("action"),
       custom_type: logItem.get("custom_type"),
     });
-  },
+  }
 
   @action
   filterByStaffUser(acting_user, event) {
     event?.preventDefault();
     this.changeFilters({ acting_user: acting_user.username });
-  },
+  }
 
   @action
   filterByTargetUser(target_user, event) {
     event?.preventDefault();
     this.changeFilters({ target_user: target_user.username });
-  },
+  }
 
   @action
   filterBySubject(subject, event) {
     event?.preventDefault();
     this.changeFilters({ subject });
-  },
+  }
 
   @action
   exportStaffActionLogs() {
     exportEntity("staff_action").then(outputExportResult);
-  },
+  }
 
   @action
   loadMore() {
     this.model.loadMore();
-  },
+  }
 
   @action
   showDetailsModal(model, event) {
@@ -157,7 +156,7 @@ export default Controller.extend({
       admin: true,
       modalClass: "log-details-modal",
     });
-  },
+  }
 
   @action
   showCustomDetailsModal(model, event) {
@@ -168,5 +167,5 @@ export default Controller.extend({
       modalClass: "history-modal",
     });
     modal.loadDiff();
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-permalinks.js

@@ -1,59 +1,63 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { or } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import Permalink from "admin/models/permalink";
 import discourseDebounce from "discourse-common/lib/debounce";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import { clipboardCopy } from "discourse/lib/utilities";
-import { inject as service } from "@ember/service";
-import { or } from "@ember/object/computed";
 
-export default Controller.extend({
-  dialog: service(),
-  loading: false,
-  filter: null,
-  showSearch: or("model.length", "filter"),
+export default class AdminPermalinksController extends Controller {
+  @service dialog;
+
+  loading = false;
+  filter = null;
+
+  @or("model.length", "filter") showSearch;
 
   _debouncedShow() {
     Permalink.findAll(this.filter).then((result) => {
       this.set("model", result);
       this.set("loading", false);
     });
-  },
+  }
 
   @observes("filter")
   show() {
     discourseDebounce(this, this._debouncedShow, INPUT_DELAY);
-  },
+  }
 
-  actions: {
-    recordAdded(arg) {
-      this.model.unshiftObject(arg);
-    },
+  @action
+  recordAdded(arg) {
+    this.model.unshiftObject(arg);
+  }
 
-    copyUrl(pl) {
-      let linkElement = document.querySelector(`#admin-permalink-${pl.id}`);
-      clipboardCopy(linkElement.textContent);
-    },
+  @action
+  copyUrl(pl) {
+    let linkElement = document.querySelector(`#admin-permalink-${pl.id}`);
+    clipboardCopy(linkElement.textContent);
+  }
 
-    destroy(record) {
-      return this.dialog.yesNoConfirm({
-        message: I18n.t("admin.permalink.delete_confirm"),
-        didConfirm: () => {
-          return record.destroy().then(
-            (deleted) => {
-              if (deleted) {
-                this.model.removeObject(record);
-              } else {
-                this.dialog.alert(I18n.t("generic_error"));
-              }
-            },
-            function () {
+  @action
+  destroyRecord(record) {
+    return this.dialog.yesNoConfirm({
+      message: I18n.t("admin.permalink.delete_confirm"),
+      didConfirm: () => {
+        return record.destroy().then(
+          (deleted) => {
+            if (deleted) {
+              this.model.removeObject(record);
+            } else {
               this.dialog.alert(I18n.t("generic_error"));
             }
-          );
-        },
-      });
-    },
-  },
-});
+          },
+          function () {
+            this.dialog.alert(I18n.t("generic_error"));
+          }
+        );
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-plugins.js

@@ -1,18 +1,18 @@
-import Controller from "@ember/controller";
 import { inject as service } from "@ember/service";
+import Controller from "@ember/controller";
 
-export default Controller.extend({
-  router: service(),
+export default class AdminPluginsController extends Controller {
+  @service router;
 
   get adminRoutes() {
     return this.allAdminRoutes.filter((r) => this.routeExists(r.full_location));
-  },
+  }
 
   get brokenAdminRoutes() {
     return this.allAdminRoutes.filter(
       (r) => !this.routeExists(r.full_location)
     );
-  },
+  }
 
   get allAdminRoutes() {
     return this.model
@@ -21,7 +21,7 @@ export default Controller.extend({
         return p.admin_route;
       })
       .filter(Boolean);
-  },
+  }
 
   routeExists(routeName) {
     try {
@@ -30,5 +30,5 @@ export default Controller.extend({
     } catch (e) {
       return false;
     }
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-reports-show.js

@@ -1,12 +1,12 @@
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  queryParams: ["start_date", "end_date", "filters", "chart_grouping", "mode"],
-  start_date: null,
-  end_date: null,
-  filters: null,
-  chart_grouping: null,
+export default class AdminReportsShowController extends Controller {
+  queryParams = ["start_date", "end_date", "filters", "chart_grouping", "mode"];
+  start_date = null;
+  end_date = null;
+  filters = null;
+  chart_grouping = null;
 
   @discourseComputed("model.type")
   reportOptions(type) {
@@ -19,5 +19,5 @@ export default Controller.extend({
     options.chartGrouping = this.chart_grouping;
 
     return options;
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-search-logs-index.js

@@ -2,24 +2,19 @@ import Controller from "@ember/controller";
 import I18n from "I18n";
 export const DEFAULT_PERIOD = "yearly";
 
-export default Controller.extend({
-  loading: false,
-  period: DEFAULT_PERIOD,
-  searchType: "all",
-
-  init() {
-    this._super(...arguments);
-
-    this.searchTypeOptions = [
-      {
-        id: "all",
-        name: I18n.t("admin.logs.search_logs.types.all_search_types"),
-      },
-      { id: "header", name: I18n.t("admin.logs.search_logs.types.header") },
-      {
-        id: "full_page",
-        name: I18n.t("admin.logs.search_logs.types.full_page"),
-      },
-    ];
-  },
-});
+export default class AdminSearchLogsIndexController extends Controller {
+  loading = false;
+  period = DEFAULT_PERIOD;
+  searchType = "all";
+  searchTypeOptions = [
+    {
+      id: "all",
+      name: I18n.t("admin.logs.search_logs.types.all_search_types"),
+    },
+    { id: "header", name: I18n.t("admin.logs.search_logs.types.header") },
+    {
+      id: "full_page",
+      name: I18n.t("admin.logs.search_logs.types.full_page"),
+    },
+  ];
+}

app/assets/javascripts/admin/addon/controllers/admin-search-logs-term.js

@@ -2,29 +2,24 @@ import Controller from "@ember/controller";
 import { DEFAULT_PERIOD } from "admin/controllers/admin-search-logs-index";
 import I18n from "I18n";
 
-export default Controller.extend({
-  loading: false,
-  term: null,
-  period: DEFAULT_PERIOD,
-  searchType: "all",
-
-  init() {
-    this._super(...arguments);
-
-    this.searchTypeOptions = [
-      {
-        id: "all",
-        name: I18n.t("admin.logs.search_logs.types.all_search_types"),
-      },
-      { id: "header", name: I18n.t("admin.logs.search_logs.types.header") },
-      {
-        id: "full_page",
-        name: I18n.t("admin.logs.search_logs.types.full_page"),
-      },
-      {
-        id: "click_through_only",
-        name: I18n.t("admin.logs.search_logs.types.click_through_only"),
-      },
-    ];
-  },
-});
+export default class AdminSearchLogsTermController extends Controller {
+  loading = false;
+  term = null;
+  period = DEFAULT_PERIOD;
+  searchType = "all";
+  searchTypeOptions = [
+    {
+      id: "all",
+      name: I18n.t("admin.logs.search_logs.types.all_search_types"),
+    },
+    { id: "header", name: I18n.t("admin.logs.search_logs.types.header") },
+    {
+      id: "full_page",
+      name: I18n.t("admin.logs.search_logs.types.full_page"),
+    },
+    {
+      id: "click_through_only",
+      name: I18n.t("admin.logs.search_logs.types.click_through_only"),
+    },
+  ];
+}

app/assets/javascripts/admin/addon/controllers/admin-site-settings-category.js

@@ -1,17 +1,18 @@
 import Controller, { inject as controller } from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend({
-  adminSiteSettings: controller(),
-  categoryNameKey: null,
+export default class AdminSiteSettingsCategoryController extends Controller {
+  @controller adminSiteSettings;
+
+  categoryNameKey = null;
 
   @discourseComputed("adminSiteSettings.visibleSiteSettings", "categoryNameKey")
   category(categories, nameKey) {
     return (categories || []).findBy("nameKey", nameKey);
-  },
+  }
 
   @discourseComputed("category")
   filteredContent(category) {
     return category ? category.siteSettings : [];
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-site-settings.js

@@ -1,16 +1,19 @@
+import { alias } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { INPUT_DELAY } from "discourse-common/config/environment";
-import { alias } from "@ember/object/computed";
 import { isEmpty } from "@ember/utils";
-import { debounce, observes } from "discourse-common/utils/decorators";
+import { debounce } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import { action } from "@ember/object";
 
-export default Controller.extend({
-  filter: null,
-  allSiteSettings: alias("model"),
-  visibleSiteSettings: null,
-  onlyOverridden: false,
+export default class AdminSiteSettingsController extends Controller {
+  filter = null;
+
+  @alias("model") allSiteSettings;
+
+  visibleSiteSettings = null;
+  onlyOverridden = false;
 
   filterContentNow(category) {
     // If we have no content, don't bother filtering anything
@@ -109,9 +112,13 @@ export default Controller.extend({
       "adminSiteSettingsCategory",
       category || "all_results"
     );
-  },
+  }
 
   @observes("filter", "onlyOverridden", "model")
+  optsChanged() {
+    this.filterContent();
+  }
+
   @debounce(INPUT_DELAY)
   filterContent() {
     if (this._skipBounce) {
@@ -119,12 +126,12 @@ export default Controller.extend({
     } else {
       this.filterContentNow(this.categoryNameKey);
     }
-  },
+  }
 
   @action
   clearFilter() {
     this.setProperties({ filter: "", onlyOverridden: false });
-  },
+  }
 
   @action
   toggleMenu() {
@@ -132,5 +139,5 @@ export default Controller.extend({
     ["mobile-closed", "mobile-open"].forEach((state) => {
       adminDetail.classList.toggle(state);
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-site-text-index.js

@@ -1,23 +1,23 @@
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import discourseDebounce from "discourse-common/lib/debounce";
 let lastSearch;
 
-export default Controller.extend({
-  searching: false,
-  siteTexts: null,
-  preferred: false,
-  queryParams: ["q", "overridden", "locale"],
-  locale: null,
-
-  q: null,
-  overridden: false,
+export default class AdminSiteTextIndexController extends Controller {
+  searching = false;
+  siteTexts = null;
+  preferred = false;
+  queryParams = ["q", "overridden", "locale"];
+  locale = null;
+  q = null;
+  overridden = false;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.set("locale", this.siteSettings.default_locale);
-  },
+  }
 
   _performSearch() {
     this.store
@@ -26,12 +26,12 @@ export default Controller.extend({
         this.set("siteTexts", results);
       })
       .finally(() => this.set("searching", false));
-  },
+  }
 
   @discourseComputed()
   availableLocales() {
     return JSON.parse(this.siteSettings.available_locales);
-  },
+  }
 
   @discourseComputed("locale")
   fallbackLocaleFullName() {
@@ -40,39 +40,41 @@ export default Controller.extend({
         return l.value === this.siteTexts.extras.fallback_locale;
       }).name;
     }
-  },
+  }
 
-  actions: {
-    edit(siteText) {
-      this.transitionToRoute("adminSiteText.edit", siteText.get("id"), {
-        queryParams: {
-          locale: this.locale,
-        },
-      });
-    },
+  @action
+  edit(siteText) {
+    this.transitionToRoute("adminSiteText.edit", siteText.get("id"), {
+      queryParams: {
+        locale: this.locale,
+      },
+    });
+  }
 
-    toggleOverridden() {
-      this.toggleProperty("overridden");
+  @action
+  toggleOverridden() {
+    this.toggleProperty("overridden");
+    this.set("searching", true);
+    discourseDebounce(this, this._performSearch, 400);
+  }
+
+  @action
+  search() {
+    const q = this.q;
+    if (q !== lastSearch) {
       this.set("searching", true);
       discourseDebounce(this, this._performSearch, 400);
-    },
+      lastSearch = q;
+    }
+  }
 
-    search() {
-      const q = this.q;
-      if (q !== lastSearch) {
-        this.set("searching", true);
-        discourseDebounce(this, this._performSearch, 400);
-        lastSearch = q;
-      }
-    },
+  @action
+  updateLocale(value) {
+    this.setProperties({
+      searching: true,
+      locale: value,
+    });
 
-    updateLocale(value) {
-      this.setProperties({
-        searching: true,
-        locale: value,
-      });
-
-      discourseDebounce(this, this._performSearch, 400);
-    },
-  },
-});
+    discourseDebounce(this, this._performSearch, 400);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-user-badges.js

@@ -1,25 +1,25 @@
-import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import { alias, sort } from "@ember/object/computed";
+import Controller, { inject as controller } from "@ember/controller";
 import GrantBadgeController from "discourse/mixins/grant-badge-controller";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { next } from "@ember/runloop";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend(GrantBadgeController, {
-  adminUser: controller(),
-  dialog: service(),
-  user: alias("adminUser.model"),
-  userBadges: alias("model"),
-  allBadges: alias("badges"),
-  sortedBadges: sort("model", "badgeSortOrder"),
+export default class AdminUserBadgesController extends Controller.extend(
+  GrantBadgeController
+) {
+  @service dialog;
+  @controller adminUser;
 
-  init() {
-    this._super(...arguments);
+  @alias("adminUser.model") user;
+  @alias("model") userBadges;
+  @alias("badges") allBadges;
+  @sort("model", "badgeSortOrder") sortedBadges;
 
-    this.badgeSortOrder = ["granted_at:desc"];
-  },
+  badgeSortOrder = ["granted_at:desc"];
 
   @discourseComputed("model", "model.[]", "model.expandedBadges.[]")
   groupedBadges() {
@@ -59,46 +59,47 @@ export default Controller.extend(GrantBadgeController, {
     });
 
     return expanded.sortBy("granted_at").reverse();
-  },
+  }
 
-  actions: {
-    expandGroup(userBadge) {
-      const model = this.model;
-      model.set("expandedBadges", model.get("expandedBadges") || []);
-      model.get("expandedBadges").pushObject(userBadge.badge.id);
-    },
+  @action
+  expandGroup(userBadge) {
+    const model = this.model;
+    model.set("expandedBadges", model.get("expandedBadges") || []);
+    model.get("expandedBadges").pushObject(userBadge.badge.id);
+  }
 
-    grantBadge() {
-      this.grantBadge(
-        this.selectedBadgeId,
-        this.get("user.username"),
-        this.badgeReason
-      ).then(
-        () => {
-          this.set("badgeReason", "");
-          next(() => {
-            // Update the selected badge ID after the combobox has re-rendered.
-            const newSelectedBadge = this.grantableBadges[0];
-            if (newSelectedBadge) {
-              this.set("selectedBadgeId", newSelectedBadge.get("id"));
-            }
-          });
-        },
-        function (error) {
-          popupAjaxError(error);
-        }
-      );
-    },
+  @action
+  grantBadge() {
+    this.grantBadge(
+      this.selectedBadgeId,
+      this.get("user.username"),
+      this.badgeReason
+    ).then(
+      () => {
+        this.set("badgeReason", "");
+        next(() => {
+          // Update the selected badge ID after the combobox has re-rendered.
+          const newSelectedBadge = this.grantableBadges[0];
+          if (newSelectedBadge) {
+            this.set("selectedBadgeId", newSelectedBadge.get("id"));
+          }
+        });
+      },
+      function (error) {
+        popupAjaxError(error);
+      }
+    );
+  }
 
-    revokeBadge(userBadge) {
-      return this.dialog.yesNoConfirm({
-        message: I18n.t("admin.badges.revoke_confirm"),
-        didConfirm: () => {
-          return userBadge.revoke().then(() => {
-            this.model.removeObject(userBadge);
-          });
-        },
-      });
-    },
-  },
-});
+  @action
+  revokeBadge(userBadge) {
+    return this.dialog.yesNoConfirm({
+      message: I18n.t("admin.badges.revoke_confirm"),
+      didConfirm: () => {
+        return userBadge.revoke().then(() => {
+          this.model.removeObject(userBadge);
+        });
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-user-fields.js

@@ -1,73 +1,74 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import { gte, sort } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
 const MAX_FIELDS = 30;
 
-export default Controller.extend({
-  dialog: service(),
-  fieldTypes: null,
-  createDisabled: gte("model.length", MAX_FIELDS),
-  sortedFields: sort("model", "fieldSortOrder"),
+export default class AdminUserFieldsController extends Controller {
+  @service dialog;
 
-  init() {
-    this._super(...arguments);
+  fieldTypes = null;
 
-    this.fieldSortOrder = ["position"];
-  },
+  @gte("model.length", MAX_FIELDS) createDisabled;
+  @sort("model", "fieldSortOrder") sortedFields;
 
-  actions: {
-    createField() {
-      const f = this.store.createRecord("user-field", {
-        field_type: "text",
-        position: MAX_FIELDS,
+  fieldSortOrder = ["position"];
+
+  @action
+  createField() {
+    const f = this.store.createRecord("user-field", {
+      field_type: "text",
+      position: MAX_FIELDS,
+    });
+    this.model.pushObject(f);
+  }
+
+  @action
+  moveUp(f) {
+    const idx = this.sortedFields.indexOf(f);
+    if (idx) {
+      const prev = this.sortedFields.objectAt(idx - 1);
+      const prevPos = prev.get("position");
+
+      prev.update({ position: f.get("position") });
+      f.update({ position: prevPos });
+    }
+  }
+
+  @action
+  moveDown(f) {
+    const idx = this.sortedFields.indexOf(f);
+    if (idx > -1) {
+      const next = this.sortedFields.objectAt(idx + 1);
+      const nextPos = next.get("position");
+
+      next.update({ position: f.get("position") });
+      f.update({ position: nextPos });
+    }
+  }
+
+  @action
+  destroyField(f) {
+    const model = this.model;
+
+    // Only confirm if we already been saved
+    if (f.get("id")) {
+      this.dialog.yesNoConfirm({
+        message: I18n.t("admin.user_fields.delete_confirm"),
+        didConfirm: () => {
+          return f
+            .destroyRecord()
+            .then(function () {
+              model.removeObject(f);
+            })
+            .catch(popupAjaxError);
+        },
       });
-      this.model.pushObject(f);
-    },
-
-    moveUp(f) {
-      const idx = this.sortedFields.indexOf(f);
-      if (idx) {
-        const prev = this.sortedFields.objectAt(idx - 1);
-        const prevPos = prev.get("position");
-
-        prev.update({ position: f.get("position") });
-        f.update({ position: prevPos });
-      }
-    },
-
-    moveDown(f) {
-      const idx = this.sortedFields.indexOf(f);
-      if (idx > -1) {
-        const next = this.sortedFields.objectAt(idx + 1);
-        const nextPos = next.get("position");
-
-        next.update({ position: f.get("position") });
-        f.update({ position: nextPos });
-      }
-    },
-
-    destroy(f) {
-      const model = this.model;
-
-      // Only confirm if we already been saved
-      if (f.get("id")) {
-        this.dialog.yesNoConfirm({
-          message: I18n.t("admin.user_fields.delete_confirm"),
-          didConfirm: () => {
-            return f
-              .destroyRecord()
-              .then(function () {
-                model.removeObject(f);
-              })
-              .catch(popupAjaxError);
-          },
-        });
-      } else {
-        model.removeObject(f);
-      }
-    },
-  },
-});
+    } else {
+      model.removeObject(f);
+    }
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-user.js

@@ -1,2 +1,2 @@
 import Controller from "@ember/controller";
-export default Controller.extend();
+export default class AdminUserController extends Controller {}

app/assets/javascripts/admin/addon/controllers/admin-users-list-show.js

@@ -1,4 +1,6 @@
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
+import discourseComputed from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import AdminUser from "admin/models/admin-user";
 import CanCheckEmails from "discourse/mixins/can-check-emails";
 import Controller from "@ember/controller";
@@ -7,29 +9,28 @@ import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { i18n } from "discourse/lib/computed";
 
-export default Controller.extend(CanCheckEmails, {
-  model: null,
-  query: null,
-  order: null,
-  asc: null,
-  showEmails: false,
-  refreshing: false,
-  listFilter: null,
-  selectAll: false,
-  searchHint: i18n("search_hint"),
+export default class AdminUsersListShowController extends Controller.extend(
+  CanCheckEmails
+) {
+  model = null;
+  query = null;
+  order = null;
+  asc = null;
+  showEmails = false;
+  refreshing = false;
+  listFilter = null;
+  selectAll = false;
 
-  init() {
-    this._super(...arguments);
+  @i18n("search_hint") searchHint;
 
-    this._page = 1;
-    this._results = [];
-    this._canLoadMore = true;
-  },
+  _page = 1;
+  _results = [];
+  _canLoadMore = true;
 
   @discourseComputed("query")
   title(query) {
     return I18n.t("admin.users.titles." + query);
-  },
+  }
 
   @discourseComputed("showEmails")
   columnCount(showEmails) {
@@ -44,19 +45,19 @@ export default Controller.extend(CanCheckEmails, {
     }
 
     return colCount;
-  },
+  }
 
   @observes("listFilter")
   _filterUsers() {
     discourseDebounce(this, this.resetFilters, INPUT_DELAY);
-  },
+  }
 
   resetFilters() {
     this._page = 1;
     this._results = [];
     this._canLoadMore = true;
     this._refreshUsers();
-  },
+  }
 
   _refreshUsers() {
     if (!this._canLoadMore) {
@@ -84,17 +85,17 @@ export default Controller.extend(CanCheckEmails, {
       .finally(() => {
         this.set("refreshing", false);
       });
-  },
+  }
 
-  actions: {
-    loadMore() {
-      this._page += 1;
-      this._refreshUsers();
-    },
+  @action
+  loadMore() {
+    this._page += 1;
+    this._refreshUsers();
+  }
 
-    toggleEmailVisibility() {
-      this.toggleProperty("showEmails");
-      this.resetFilters();
-    },
-  },
-});
+  @action
+  toggleEmailVisibility() {
+    this.toggleProperty("showEmails");
+    this.resetFilters();
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-watched-words-action.js

@@ -1,32 +1,35 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { or } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import WatchedWord from "admin/models/watched-word";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
-import { or } from "@ember/object/computed";
 import { schedule } from "@ember/runloop";
 import showModal from "discourse/lib/show-modal";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  adminWatchedWords: controller(),
-  actionNameKey: null,
-  dialog: service(),
-  downloadLink: fmt(
-    "actionNameKey",
-    "/admin/customize/watched_words/action/%@/download"
-  ),
-  showWordsList: or("adminWatchedWords.showWords", "adminWatchedWords.filter"),
+export default class AdminWatchedWordsActionController extends Controller {
+  @service dialog;
+  @controller adminWatchedWords;
+
+  actionNameKey = null;
+
+  @fmt("actionNameKey", "/admin/customize/watched_words/action/%@/download")
+  downloadLink;
+
+  @or("adminWatchedWords.showWords", "adminWatchedWords.filter")
+  showWordsList;
 
   findAction(actionName) {
     return (this.adminWatchedWords.model || []).findBy("nameKey", actionName);
-  },
+  }
 
   @discourseComputed("actionNameKey", "adminWatchedWords.model")
   currentAction(actionName) {
     return this.findAction(actionName);
-  },
+  }
 
   @discourseComputed("currentAction.words.[]")
   regexpError(words) {
@@ -37,78 +40,81 @@ export default Controller.extend({
         return I18n.t("admin.watched_words.invalid_regex", { word });
       }
     }
-  },
+  }
 
   @discourseComputed("actionNameKey")
   actionDescription(actionNameKey) {
     return I18n.t("admin.watched_words.action_descriptions." + actionNameKey);
-  },
+  }
 
-  actions: {
-    recordAdded(arg) {
-      const action = this.findAction(this.actionNameKey);
-      if (!action) {
-        return;
-      }
+  @action
+  recordAdded(arg) {
+    const foundAction = this.findAction(this.actionNameKey);
+    if (!foundAction) {
+      return;
+    }
 
-      action.words.unshiftObject(arg);
-      schedule("afterRender", () => {
-        // remove from other actions lists
-        let match = null;
-        this.adminWatchedWords.model.forEach((otherAction) => {
+    foundAction.words.unshiftObject(arg);
+    schedule("afterRender", () => {
+      // remove from other actions lists
+      let match = null;
+      this.adminWatchedWords.model.forEach((otherAction) => {
+        if (match) {
+          return;
+        }
+
+        if (otherAction.nameKey !== this.actionNameKey) {
+          match = otherAction.words.findBy("id", arg.id);
           if (match) {
-            return;
+            otherAction.words.removeObject(match);
           }
+        }
+      });
+    });
+  }
 
-          if (otherAction.nameKey !== this.actionNameKey) {
-            match = otherAction.words.findBy("id", arg.id);
-            if (match) {
-              otherAction.words.removeObject(match);
-            }
+  @action
+  recordRemoved(arg) {
+    if (this.currentAction) {
+      this.currentAction.words.removeObject(arg);
+    }
+  }
+
+  @action
+  uploadComplete() {
+    WatchedWord.findAll().then((data) => {
+      this.adminWatchedWords.set("model", data);
+    });
+  }
+
+  @action
+  test() {
+    WatchedWord.findAll().then((data) => {
+      this.adminWatchedWords.set("model", data);
+      showModal("admin-watched-word-test", {
+        admin: true,
+        model: this.currentAction,
+      });
+    });
+  }
+
+  @action
+  clearAll() {
+    const actionKey = this.actionNameKey;
+    this.dialog.yesNoConfirm({
+      message: I18n.t("admin.watched_words.clear_all_confirm", {
+        action: I18n.t("admin.watched_words.actions." + actionKey),
+      }),
+      didConfirm: () => {
+        ajax(`/admin/customize/watched_words/action/${actionKey}.json`, {
+          type: "DELETE",
+        }).then(() => {
+          const foundAction = this.findAction(actionKey);
+          if (foundAction) {
+            foundAction.set("words", []);
           }
         });
-      });
-    },
-
-    recordRemoved(arg) {
-      if (this.currentAction) {
-        this.currentAction.words.removeObject(arg);
-      }
-    },
-
-    uploadComplete() {
-      WatchedWord.findAll().then((data) => {
-        this.adminWatchedWords.set("model", data);
-      });
-    },
-
-    test() {
-      WatchedWord.findAll().then((data) => {
-        this.adminWatchedWords.set("model", data);
-        showModal("admin-watched-word-test", {
-          admin: true,
-          model: this.currentAction,
-        });
-      });
-    },
-
-    clearAll() {
-      const actionKey = this.actionNameKey;
-      this.dialog.yesNoConfirm({
-        message: I18n.t("admin.watched_words.clear_all_confirm", {
-          action: I18n.t("admin.watched_words.actions." + actionKey),
-        }),
-        didConfirm: () => {
-          ajax(`/admin/customize/watched_words/action/${actionKey}.json`, {
-            type: "DELETE",
-          }).then(() => {
-            const action = this.findAction(actionKey);
-            if (action) {
-              action.set("words", []);
-            }
-          });
-        },
-      });
-    },
-  },
-});
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-watched-words.js

@@ -3,11 +3,11 @@ import EmberObject, { action } from "@ember/object";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { isEmpty } from "@ember/utils";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
-export default Controller.extend({
-  filter: null,
-  showWords: false,
+export default class AdminWatchedWordsController extends Controller {
+  filter = null;
+  showWords = false;
 
   _filterContent() {
     if (isEmpty(this.allWatchedWords)) {
@@ -36,17 +36,17 @@ export default Controller.extend({
       );
     });
     this.set("model", model);
-  },
+  }
 
   @observes("filter")
   filterContent() {
     discourseDebounce(this, this._filterContent, INPUT_DELAY);
-  },
+  }
 
   @action
   clearFilter() {
     this.set("filter", "");
-  },
+  }
 
   @action
   toggleMenu() {
@@ -54,5 +54,5 @@ export default Controller.extend({
     ["mobile-closed", "mobile-open"].forEach((state) => {
       adminDetail.classList.toggle(state);
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-web-hooks-edit.js

@@ -1,23 +1,24 @@
+import { inject as service } from "@ember/service";
+import { alias } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import EmberObject, { action } from "@ember/object";
 import I18n from "I18n";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  adminWebHooks: controller(),
-  dialog: service(),
-  eventTypes: alias("adminWebHooks.eventTypes"),
-  defaultEventTypes: alias("adminWebHooks.defaultEventTypes"),
-  contentTypes: alias("adminWebHooks.contentTypes"),
+export default class AdminWebHooksEditController extends Controller {
+  @service dialog;
+  @controller adminWebHooks;
+
+  @alias("adminWebHooks.eventTypes") eventTypes;
+  @alias("adminWebHooks.defaultEventTypes") defaultEventTypes;
+  @alias("adminWebHooks.contentTypes") contentTypes;
 
   @discourseComputed
   showTagsFilter() {
     return this.siteSettings.tagging_enabled;
-  },
+  }
 
   @discourseComputed("model.isSaving", "saved", "saveButtonDisabled")
   savingStatus(isSaving, saved, saveButtonDisabled) {
@@ -29,14 +30,14 @@ export default Controller.extend({
     // Use side effect of validation to clear saved text
     this.set("saved", false);
     return "";
-  },
+  }
 
   @discourseComputed("model.isNew")
   saveButtonText(isNew) {
     return isNew
       ? I18n.t("admin.web_hooks.create")
       : I18n.t("admin.web_hooks.save");
-  },
+  }
 
   @discourseComputed("model.secret")
   secretValidation(secret) {
@@ -55,7 +56,7 @@ export default Controller.extend({
         });
       }
     }
-  },
+  }
 
   @discourseComputed("model.wildcard_web_hook", "model.web_hook_event_types.[]")
   eventTypeValidation(isWildcard, eventTypes) {
@@ -65,7 +66,7 @@ export default Controller.extend({
         reason: I18n.t("admin.web_hooks.event_type_missing"),
       });
     }
-  },
+  }
 
   @discourseComputed(
     "model.isSaving",
@@ -82,7 +83,7 @@ export default Controller.extend({
     return isSaving
       ? false
       : secretValidation || eventTypeValidation || isEmpty(payloadUrl);
-  },
+  }
 
   @action
   async save() {
@@ -97,5 +98,5 @@ export default Controller.extend({
     } catch (e) {
       popupAjaxError(e);
     }
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-web-hooks-index.js

@@ -1,18 +1,19 @@
+import { inject as service } from "@ember/service";
+import { alias } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 import { action } from "@ember/object";
-import { alias } from "@ember/object/computed";
 
-export default Controller.extend({
-  adminWebHooks: controller(),
-  dialog: service(),
-  contentTypes: alias("adminWebHooks.contentTypes"),
-  defaultEventTypes: alias("adminWebHooks.defaultEventTypes"),
-  deliveryStatuses: alias("adminWebHooks.deliveryStatuses"),
-  eventTypes: alias("adminWebHooks.eventTypes"),
-  model: alias("adminWebHooks.model"),
+export default class AdminWebHooksIndexController extends Controller {
+  @service dialog;
+  @controller adminWebHooks;
+
+  @alias("adminWebHooks.contentTypes") contentTypes;
+  @alias("adminWebHooks.defaultEventTypes") defaultEventTypes;
+  @alias("adminWebHooks.deliveryStatuses") deliveryStatuses;
+  @alias("adminWebHooks.eventTypes") eventTypes;
+  @alias("adminWebHooks.model") model;
 
   @action
   destroy(webhook) {
@@ -27,10 +28,10 @@ export default Controller.extend({
         }
       },
     });
-  },
+  }
 
   @action
   loadMore() {
     this.model.loadMore();
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-web-hooks-show.js

@@ -1,18 +1,18 @@
+import { inject as service } from "@ember/service";
 import Controller, { inject as controller } from "@ember/controller";
 import { action } from "@ember/object";
 import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  adminWebHooks: controller(),
-  dialog: service(),
-  router: service(),
+export default class AdminWebHooksShowController extends Controller {
+  @service dialog;
+  @service router;
+  @controller adminWebHooks;
 
   @action
   edit() {
     return this.router.transitionTo("adminWebHooks.edit", this.model);
-  },
+  }
 
   @action
   destroy() {
@@ -28,5 +28,5 @@ export default Controller.extend({
         }
       },
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-web-hooks.js

@@ -1,3 +1,3 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({});
+export default class AdminWebHooksController extends Controller {}

app/assets/javascripts/admin/addon/controllers/admin.js

@@ -1,20 +1,20 @@
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import { dasherize } from "@ember/string";
 import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend({
-  router: service(),
+export default class AdminController extends Controller {
+  @service router;
 
   @discourseComputed("siteSettings.enable_group_directory")
   showGroups(enableGroupDirectory) {
     return !enableGroupDirectory;
-  },
+  }
 
   @discourseComputed("siteSettings.enable_badges")
   showBadges(enableBadges) {
     return this.currentUser.get("admin") && enableBadges;
-  },
+  }
 
   @discourseComputed("router._router.currentPath")
   adminContentsClassName(currentPath) {
@@ -37,5 +37,5 @@ export default Controller.extend({
     }
 
     return cssClasses;
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-add-upload.js

@@ -1,6 +1,8 @@
-import Controller, { inject as controller } from "@ember/controller";
+import { action } from "@ember/object";
 import { and, not } from "@ember/object/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import Controller, { inject as controller } from "@ember/controller";
+import discourseComputed from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { ajax } from "discourse/lib/ajax";
@@ -53,18 +55,20 @@ const SCSS_VARIABLE_NAMES = [
   "love-low",
 ];
 
-export default Controller.extend(ModalFunctionality, {
-  adminCustomizeThemesShow: controller(),
+export default class AdminAddUploadController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminCustomizeThemesShow;
 
-  uploadUrl: "/admin/themes/upload_asset",
+  uploadUrl = "/admin/themes/upload_asset";
+
+  @and("nameValid", "fileSelected") enabled;
+  @not("enabled") disabled;
 
   onShow() {
     this.set("name", null);
     this.set("fileSelected", false);
-  },
-
-  enabled: and("nameValid", "fileSelected"),
-  disabled: not("enabled"),
+  }
 
   @discourseComputed("name", "adminCustomizeThemesShow.model.theme_fields")
   errorMessage(name, themeFields) {
@@ -89,54 +93,54 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     return null;
-  },
+  }
 
   @discourseComputed("errorMessage")
   nameValid(errorMessage) {
     return null === errorMessage;
-  },
+  }
 
   @observes("name")
   uploadChanged() {
     const file = $("#file-input")[0];
     this.set("fileSelected", file && file.files[0]);
-  },
+  }
 
-  actions: {
-    updateName() {
-      let name = this.name;
-      if (isEmpty(name)) {
-        name = $("#file-input")[0].files[0].name;
-        this.set("name", name.split(".")[0]);
-      }
-      this.uploadChanged();
-    },
+  @action
+  updateName() {
+    let name = this.name;
+    if (isEmpty(name)) {
+      name = $("#file-input")[0].files[0].name;
+      this.set("name", name.split(".")[0]);
+    }
+    this.uploadChanged();
+  }
 
-    upload() {
-      const file = $("#file-input")[0].files[0];
+  @action
+  upload() {
+    const file = $("#file-input")[0].files[0];
 
-      const options = {
-        type: "POST",
-        processData: false,
-        contentType: false,
-        data: new FormData(),
-      };
+    const options = {
+      type: "POST",
+      processData: false,
+      contentType: false,
+      data: new FormData(),
+    };
 
-      options.data.append("file", file);
+    options.data.append("file", file);
 
-      ajax(this.uploadUrl, options)
-        .then((result) => {
-          const upload = {
-            upload_id: result.upload_id,
-            name: this.name,
-            original_filename: file.name,
-          };
-          this.adminCustomizeThemesShow.send("addUpload", upload);
-          this.send("closeModal");
-        })
-        .catch((e) => {
-          popupAjaxError(e);
-        });
-    },
-  },
-});
+    ajax(this.uploadUrl, options)
+      .then((result) => {
+        const upload = {
+          upload_id: result.upload_id,
+          name: this.name,
+          original_filename: file.name,
+        };
+        this.adminCustomizeThemesShow.send("addUpload", upload);
+        this.send("closeModal");
+      })
+      .catch((e) => {
+        popupAjaxError(e);
+      });
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-badge-preview.js

@@ -4,39 +4,12 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { escapeExpression } from "discourse/lib/utilities";
 
-export default Controller.extend({
-  sample: alias("model.sample"),
-  errors: alias("model.errors"),
-  count: alias("model.grant_count"),
+export default class AdminBadgePreviewController extends Controller {
+  @alias("model.sample") sample;
+  @alias("model.errors") errors;
+  @alias("model.grant_count") count;
 
-  @discourseComputed("count", "sample.length")
-  countWarning(count, sampleLength) {
-    if (count <= 10) {
-      return sampleLength !== count;
-    } else {
-      return sampleLength !== 10;
-    }
-  },
-
-  @discourseComputed("model.query_plan")
-  hasQueryPlan(queryPlan) {
-    return !!queryPlan;
-  },
-
-  @discourseComputed("model.query_plan")
-  queryPlanHtml(queryPlan) {
-    let output = `<pre class="badge-query-plan">`;
-
-    queryPlan.forEach((linehash) => {
-      output += escapeExpression(linehash["QUERY PLAN"]);
-      output += "<br>";
-    });
-
-    output += "</pre>";
-    return output;
-  },
-
-  processedSample: map("model.sample", (grant) => {
+  @map("model.sample", (grant) => {
     let i18nKey = "admin.badges.preview.grant.with";
     const i18nParams = { username: escapeExpression(grant.username) };
 
@@ -55,5 +28,33 @@ export default Controller.extend({
     }
 
     return I18n.t(i18nKey, i18nParams);
-  }),
-});
+  })
+  processedSample;
+
+  @discourseComputed("count", "sample.length")
+  countWarning(count, sampleLength) {
+    if (count <= 10) {
+      return sampleLength !== count;
+    } else {
+      return sampleLength !== 10;
+    }
+  }
+
+  @discourseComputed("model.query_plan")
+  hasQueryPlan(queryPlan) {
+    return !!queryPlan;
+  }
+
+  @discourseComputed("model.query_plan")
+  queryPlanHtml(queryPlan) {
+    let output = `<pre class="badge-query-plan">`;
+
+    queryPlan.forEach((linehash) => {
+      output += escapeExpression(linehash["QUERY PLAN"]);
+      output += "<br>";
+    });
+
+    output += "</pre>";
+    return output;
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-color-scheme-select-base.js

@@ -1,27 +1,29 @@
+import { action } from "@ember/object";
 import Controller, { inject as controller } from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
-export default Controller.extend(ModalFunctionality, {
-  adminCustomizeColors: controller(),
+export default class AdminColorSchemeSelectBaseController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminCustomizeColors;
 
-  selectedBaseThemeId: null,
+  selectedBaseThemeId = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     const defaultScheme = this.get(
       "adminCustomizeColors.baseColorSchemes.0.base_scheme_id"
     );
     this.set("selectedBaseThemeId", defaultScheme);
-  },
+  }
 
-  actions: {
-    selectBase() {
-      this.adminCustomizeColors.send(
-        "newColorSchemeWithBase",
-        this.selectedBaseThemeId
-      );
-      this.send("closeModal");
-    },
-  },
-});
+  @action
+  selectBase() {
+    this.adminCustomizeColors.send(
+      "newColorSchemeWithBase",
+      this.selectedBaseThemeId
+    );
+    this.send("closeModal");
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-delete-posts-confirmation.js

@@ -1,18 +1,21 @@
+import { alias } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action } from "@ember/object";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend(ModalFunctionality, {
-  adminUserIndex: controller(),
-  username: alias("model.username"),
-  postCount: alias("model.post_count"),
+export default class AdminDeletePostsConfirmationController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminUserIndex;
+
+  @alias("model.username") username;
+  @alias("model.post_count") postCount;
 
   onShow() {
     this.set("value", null);
-  },
+  }
 
   @discourseComputed("username", "postCount")
   text(username, postCount) {
@@ -20,27 +23,27 @@ export default Controller.extend(ModalFunctionality, {
       username,
       postCount,
     });
-  },
+  }
 
   @discourseComputed("username")
   deleteButtonText(username) {
     return I18n.t(`admin.user.delete_posts.confirmation.delete`, {
       username,
     });
-  },
+  }
 
   @discourseComputed("value", "text")
   deleteDisabled(value, text) {
     return !value || text !== value;
-  },
+  }
 
   @action
   confirm() {
     this.adminUserIndex.send("deleteAllPosts");
-  },
+  }
 
   @action
   close() {
     this.send("closeModal");
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-delete-user-posts-progress.js

@@ -1,6 +1,8 @@
 import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
-export default Controller.extend(ModalFunctionality, {
-  deletedPercentage: 0,
-});
+export default class AdminDeleteUserPostsProgressController extends Controller.extend(
+  ModalFunctionality
+) {
+  deletedPercentage = 0;
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-edit-badge-groupings.js

@@ -1,13 +1,16 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import { A } from "@ember/array";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { ajax } from "discourse/lib/ajax";
 import { observes } from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend(ModalFunctionality, {
-  dialog: service(),
+export default class AdminEditBadgeGroupingsController extends Controller.extend(
+  ModalFunctionality
+) {
+  @service dialog;
 
   @observes("model")
   modelChanged() {
@@ -22,7 +25,7 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     this.set("workingCopy", copy);
-  },
+  }
 
   moveItem(item, delta) {
     const copy = this.workingCopy;
@@ -33,55 +36,68 @@ export default Controller.extend(ModalFunctionality, {
 
     copy.removeAt(index);
     copy.insertAt(index + delta, item);
-  },
+  }
 
-  actions: {
-    up(item) {
-      this.moveItem(item, -1);
-    },
-    down(item) {
-      this.moveItem(item, 1);
-    },
-    delete(item) {
-      this.workingCopy.removeObject(item);
-    },
-    cancel() {
-      this.setProperties({ model: null, workingCopy: null });
-      this.send("closeModal");
-    },
-    edit(item) {
-      item.set("editing", true);
-    },
-    save(item) {
-      item.set("editing", false);
-    },
-    add() {
-      const obj = this.store.createRecord("badge-grouping", {
-        editing: true,
-        name: I18n.t("admin.badges.badge_grouping"),
-      });
-      this.workingCopy.pushObject(obj);
-    },
-    saveAll() {
-      let items = this.workingCopy;
-      const groupIds = items.map((i) => i.get("id") || -1);
-      const names = items.map((i) => i.get("name"));
+  @action
+  up(item) {
+    this.moveItem(item, -1);
+  }
 
-      ajax("/admin/badges/badge_groupings", {
-        data: { ids: groupIds, names },
-        type: "POST",
-      }).then(
-        (data) => {
-          items = this.model;
-          items.clear();
-          data.badge_groupings.forEach((g) => {
-            items.pushObject(this.store.createRecord("badge-grouping", g));
-          });
-          this.setProperties({ model: null, workingCopy: null });
-          this.send("closeModal");
-        },
-        () => this.dialog.alert(I18n.t("generic_error"))
-      );
-    },
-  },
-});
+  @action
+  down(item) {
+    this.moveItem(item, 1);
+  }
+
+  @action
+  delete(item) {
+    this.workingCopy.removeObject(item);
+  }
+
+  @action
+  cancel() {
+    this.setProperties({ model: null, workingCopy: null });
+    this.send("closeModal");
+  }
+
+  @action
+  edit(item) {
+    item.set("editing", true);
+  }
+
+  @action
+  save(item) {
+    item.set("editing", false);
+  }
+
+  @action
+  add() {
+    const obj = this.store.createRecord("badge-grouping", {
+      editing: true,
+      name: I18n.t("admin.badges.badge_grouping"),
+    });
+    this.workingCopy.pushObject(obj);
+  }
+
+  @action
+  saveAll() {
+    let items = this.workingCopy;
+    const groupIds = items.map((i) => i.get("id") || -1);
+    const names = items.map((i) => i.get("name"));
+
+    ajax("/admin/badges/badge_groupings", {
+      data: { ids: groupIds, names },
+      type: "POST",
+    }).then(
+      (data) => {
+        items = this.model;
+        items.clear();
+        data.badge_groupings.forEach((g) => {
+          items.pushObject(this.store.createRecord("badge-grouping", g));
+        });
+        this.setProperties({ model: null, workingCopy: null });
+        this.send("closeModal");
+      },
+      () => this.dialog.alert(I18n.t("generic_error"))
+    );
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-incoming-email.js

@@ -5,15 +5,17 @@ import discourseComputed from "discourse-common/utils/decorators";
 import { longDate } from "discourse/lib/formatter";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Controller.extend(ModalFunctionality, {
+export default class AdminIncomingEmailController extends Controller.extend(
+  ModalFunctionality
+) {
   @discourseComputed("model.date")
   date(d) {
     return longDate(d);
-  },
+  }
 
   load(id) {
     return IncomingEmail.find(id).then((result) => this.set("model", result));
-  },
+  }
 
   loadFromBounced(id) {
     return IncomingEmail.findByBounced(id)
@@ -22,5 +24,5 @@ export default Controller.extend(ModalFunctionality, {
         this.send("closeModal");
         popupAjaxError(error);
       });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-install-theme.js

@@ -1,46 +1,46 @@
+import { alias, equal, match } from "@ember/object/computed";
 import { COMPONENTS, THEMES } from "admin/models/theme";
 import Controller, { inject as controller } from "@ember/controller";
-import { alias, equal, match } from "@ember/object/computed";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { POPULAR_THEMES } from "discourse-common/helpers/popular-themes";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import { set } from "@ember/object";
+import { action, set } from "@ember/object";
 
 const MIN_NAME_LENGTH = 4;
 
-export default Controller.extend(ModalFunctionality, {
-  adminCustomizeThemes: controller(),
-  themesController: controller("adminCustomizeThemes"),
-  popular: equal("selection", "popular"),
-  local: equal("selection", "local"),
-  remote: equal("selection", "remote"),
-  create: equal("selection", "create"),
-  directRepoInstall: equal("selection", "directRepoInstall"),
-  selection: "popular",
-  loading: false,
-  keyGenUrl: "/admin/themes/generate_key_pair",
-  importUrl: "/admin/themes/import",
-  recordType: "theme",
-  checkPrivate: match("uploadUrl", /^ssh:\/\/.+@.+$|.+@.+:.+$/),
-  localFile: null,
-  uploadUrl: null,
-  uploadName: null,
-  advancedVisible: false,
-  selectedType: alias("themesController.currentTab"),
-  component: equal("selectedType", COMPONENTS),
-  urlPlaceholder: "https://github.com/discourse/sample_theme",
+export default class AdminInstallThemeController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminCustomizeThemes;
+  @controller("adminCustomizeThemes") themesController;
 
-  init() {
-    this._super(...arguments);
+  @equal("selection", "popular") popular;
+  @equal("selection", "local") local;
+  @equal("selection", "remote") remote;
+  @equal("selection", "create") create;
+  @equal("selection", "directRepoInstall") directRepoInstall;
+  selection = "popular";
+  loading = false;
+  keyGenUrl = "/admin/themes/generate_key_pair";
+  importUrl = "/admin/themes/import";
+  recordType = "theme";
+  @match("uploadUrl", /^ssh:\/\/.+@.+$|.+@.+:.+$/) checkPrivate;
+  localFile = null;
+  uploadUrl = null;
+  uploadName = null;
+  advancedVisible = false;
+  @alias("themesController.currentTab") selectedType;
+  @equal("selectedType", COMPONENTS) component;
+  urlPlaceholder = "https://github.com/discourse/sample_theme";
 
-    this.createTypes = [
-      { name: I18n.t("admin.customize.theme.theme"), value: THEMES },
-      { name: I18n.t("admin.customize.theme.component"), value: COMPONENTS },
-    ];
-  },
+  createTypes = [
+    { name: I18n.t("admin.customize.theme.theme"), value: THEMES },
+    { name: I18n.t("admin.customize.theme.component"), value: COMPONENTS },
+  ];
 
   @discourseComputed("themesController.installedThemes")
   themes(installedThemes) {
@@ -52,7 +52,7 @@ export default Controller.extend(ModalFunctionality, {
       }
       return t;
     });
-  },
+  }
 
   @discourseComputed(
     "loading",
@@ -78,12 +78,12 @@ export default Controller.extend(ModalFunctionality, {
       (isLocal && !localFile) ||
       (isCreate && nameTooShort)
     );
-  },
+  }
 
   @discourseComputed("name")
   nameTooShort(name) {
     return !name || name.length < MIN_NAME_LENGTH;
-  },
+  }
 
   @discourseComputed("component")
   placeholder(component) {
@@ -92,7 +92,7 @@ export default Controller.extend(ModalFunctionality, {
     } else {
       return I18n.t("admin.customize.theme.theme_name");
     }
-  },
+  }
 
   @observes("checkPrivate")
   privateWasChecked() {
@@ -108,7 +108,7 @@ export default Controller.extend(ModalFunctionality, {
           this._keyLoading = false;
         });
     }
-  },
+  }
 
   @discourseComputed("selection", "themeCannotBeInstalled")
   submitLabel(selection, themeCannotBeInstalled) {
@@ -119,12 +119,12 @@ export default Controller.extend(ModalFunctionality, {
     return `admin.customize.theme.${
       selection === "create" ? "create" : "install"
     }`;
-  },
+  }
 
   @discourseComputed("checkPrivate", "publicKey")
   showPublicKey(checkPrivate, publicKey) {
     return checkPrivate && publicKey;
-  },
+  }
 
   onClose() {
     this.setProperties({
@@ -140,7 +140,7 @@ export default Controller.extend(ModalFunctionality, {
       repoName: null,
       repoUrl: null,
     });
-  },
+  }
 
   themeHasSameUrl(theme, url) {
     const themeUrl = theme.remote_theme && theme.remote_theme.remote_url;
@@ -149,100 +149,101 @@ export default Controller.extend(ModalFunctionality, {
       url &&
       url.replace(/\.git$/, "") === themeUrl.replace(/\.git$/, "")
     );
-  },
+  }
 
-  actions: {
-    uploadLocaleFile() {
-      this.set("localFile", $("#file-input")[0].files[0]);
-    },
+  @action
+  uploadLocaleFile() {
+    this.set("localFile", $("#file-input")[0].files[0]);
+  }
 
-    toggleAdvanced() {
-      this.toggleProperty("advancedVisible");
-    },
+  @action
+  toggleAdvanced() {
+    this.toggleProperty("advancedVisible");
+  }
 
-    installThemeFromList(url) {
-      this.set("uploadUrl", url);
-      this.send("installTheme");
-    },
-
-    installTheme() {
-      if (this.create) {
-        this.set("loading", true);
-        const theme = this.store.createRecord(this.recordType);
-        theme
-          .save({ name: this.name, component: this.component })
-          .then(() => {
-            this.themesController.send("addTheme", theme);
-            this.send("closeModal");
-          })
-          .catch(popupAjaxError)
-          .finally(() => this.set("loading", false));
-
-        return;
-      }
-
-      let options = {
-        type: "POST",
-      };
-
-      if (this.local) {
-        options.processData = false;
-        options.contentType = false;
-        options.data = new FormData();
-        options.data.append("theme", this.localFile);
-      }
-
-      if (this.remote || this.popular || this.directRepoInstall) {
-        const duplicate = this.themesController.model.content.find((theme) =>
-          this.themeHasSameUrl(theme, this.uploadUrl)
-        );
-        if (duplicate && !this.duplicateRemoteThemeWarning) {
-          const warning = I18n.t(
-            "admin.customize.theme.duplicate_remote_theme",
-            { name: duplicate.name }
-          );
-          this.set("duplicateRemoteThemeWarning", warning);
-          return;
-        }
-        options.data = {
-          remote: this.uploadUrl,
-          branch: this.branch,
-          public_key: this.publicKey,
-        };
-      }
-
-      // User knows that theme cannot be installed, but they want to continue
-      // to force install it.
-      if (this.themeCannotBeInstalled) {
-        options.data["force"] = true;
-      }
-
-      if (this.get("model.user_id")) {
-        // Used by theme-creator
-        options.data["user_id"] = this.get("model.user_id");
-      }
+  @action
+  installThemeFromList(url) {
+    this.set("uploadUrl", url);
+    this.send("installTheme");
+  }
 
+  @action
+  installTheme() {
+    if (this.create) {
       this.set("loading", true);
-      ajax(this.importUrl, options)
-        .then((result) => {
-          const theme = this.store.createRecord(this.recordType, result.theme);
-          this.adminCustomizeThemes.send("addTheme", theme);
+      const theme = this.store.createRecord(this.recordType);
+      theme
+        .save({ name: this.name, component: this.component })
+        .then(() => {
+          this.themesController.send("addTheme", theme);
           this.send("closeModal");
         })
-        .then(() => {
-          this.set("publicKey", null);
-        })
-        .catch((error) => {
-          if (!this.publicKey || this.themeCannotBeInstalled) {
-            return popupAjaxError(error);
-          }
-
-          this.set(
-            "themeCannotBeInstalled",
-            I18n.t("admin.customize.theme.force_install")
-          );
-        })
+        .catch(popupAjaxError)
         .finally(() => this.set("loading", false));
-    },
-  },
-});
+
+      return;
+    }
+
+    let options = {
+      type: "POST",
+    };
+
+    if (this.local) {
+      options.processData = false;
+      options.contentType = false;
+      options.data = new FormData();
+      options.data.append("theme", this.localFile);
+    }
+
+    if (this.remote || this.popular || this.directRepoInstall) {
+      const duplicate = this.themesController.model.content.find((theme) =>
+        this.themeHasSameUrl(theme, this.uploadUrl)
+      );
+      if (duplicate && !this.duplicateRemoteThemeWarning) {
+        const warning = I18n.t("admin.customize.theme.duplicate_remote_theme", {
+          name: duplicate.name,
+        });
+        this.set("duplicateRemoteThemeWarning", warning);
+        return;
+      }
+      options.data = {
+        remote: this.uploadUrl,
+        branch: this.branch,
+        public_key: this.publicKey,
+      };
+    }
+
+    // User knows that theme cannot be installed, but they want to continue
+    // to force install it.
+    if (this.themeCannotBeInstalled) {
+      options.data["force"] = true;
+    }
+
+    if (this.get("model.user_id")) {
+      // Used by theme-creator
+      options.data["user_id"] = this.get("model.user_id");
+    }
+
+    this.set("loading", true);
+    ajax(this.importUrl, options)
+      .then((result) => {
+        const theme = this.store.createRecord(this.recordType, result.theme);
+        this.adminCustomizeThemes.send("addTheme", theme);
+        this.send("closeModal");
+      })
+      .then(() => {
+        this.set("publicKey", null);
+      })
+      .catch((error) => {
+        if (!this.publicKey || this.themeCannotBeInstalled) {
+          return popupAjaxError(error);
+        }
+
+        this.set(
+          "themeCannotBeInstalled",
+          I18n.t("admin.customize.theme.force_install")
+        );
+      })
+      .finally(() => this.set("loading", false));
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-confirmation.js

@@ -1,18 +1,21 @@
+import { alias } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action } from "@ember/object";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend(ModalFunctionality, {
-  adminUserIndex: controller(),
-  username: alias("model.username"),
-  targetUsername: alias("model.targetUsername"),
+export default class AdminMergeUsersConfirmationController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminUserIndex;
+
+  @alias("model.username") username;
+  @alias("model.targetUsername") targetUsername;
 
   onShow() {
     this.set("value", null);
-  },
+  }
 
   @discourseComputed("username", "targetUsername")
   text(username, targetUsername) {
@@ -20,28 +23,28 @@ export default Controller.extend(ModalFunctionality, {
       username,
       targetUsername,
     });
-  },
+  }
 
   @discourseComputed("username")
   mergeButtonText(username) {
     return I18n.t(`admin.user.merge.confirmation.transfer_and_delete`, {
       username,
     });
-  },
+  }
 
   @discourseComputed("value", "text")
   mergeDisabled(value, text) {
     return !value || text !== value;
-  },
+  }
 
   @action
   confirm() {
     this.adminUserIndex.send("merge", this.targetUsername);
     this.send("closeModal");
-  },
+  }
 
   @action
   close() {
     this.send("closeModal");
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-progress.js

@@ -4,16 +4,18 @@ import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { bind } from "discourse-common/utils/decorators";
 
-export default Controller.extend(ModalFunctionality, {
-  message: I18n.t("admin.user.merging_user"),
+export default class AdminMergeUsersProgressController extends Controller.extend(
+  ModalFunctionality
+) {
+  message = I18n.t("admin.user.merging_user");
 
   onShow() {
     this.messageBus.subscribe("/merge_user", this.onMessage);
-  },
+  }
 
   onClose() {
     this.messageBus.unsubscribe("/merge_user", this.onMessage);
-  },
+  }
 
   @bind
   onMessage(data) {
@@ -30,5 +32,5 @@ export default Controller.extend(ModalFunctionality, {
     } else if (data.failed) {
       this.set("message", I18n.t("admin.user.merge_failed"));
     }
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-merge-users-prompt.js

@@ -1,43 +1,46 @@
+import { alias } from "@ember/object/computed";
 import Controller, { inject as controller } from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { action, get } from "@ember/object";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Controller.extend(ModalFunctionality, {
-  adminUserIndex: controller(),
-  username: alias("model.username"),
+export default class AdminMergeUsersPromptController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminUserIndex;
+
+  @alias("model.username") username;
 
   onShow() {
     this.set("targetUsername", null);
-  },
+  }
 
   @discourseComputed("username", "targetUsername")
   mergeDisabled(username, targetUsername) {
     return !targetUsername || username === targetUsername;
-  },
+  }
 
   @discourseComputed("username")
   mergeButtonText(username) {
     return I18n.t(`admin.user.merge.confirmation.transfer_and_delete`, {
       username,
     });
-  },
+  }
 
   @action
   showConfirmation() {
     this.send("closeModal");
     this.adminUserIndex.send("showMergeConfirmation", this.targetUsername);
-  },
+  }
 
   @action
   close() {
     this.send("closeModal");
-  },
+  }
 
   @action
   updateUsername(selected) {
     this.set("targetUsername", get(selected, "firstObject"));
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-penalize-user.js

@@ -1,29 +1,31 @@
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import { next } from "@ember/runloop";
-import { inject as service } from "@ember/service";
 import { isEmpty } from "@ember/utils";
 import discourseComputed from "discourse-common/utils/decorators";
 import { extractError } from "discourse/lib/ajax-error";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import I18n from "I18n";
 
-export default Controller.extend(ModalFunctionality, {
-  dialog: service(),
+export default class AdminPenalizeUserController extends Controller.extend(
+  ModalFunctionality
+) {
+  @service dialog;
 
-  loadingUser: false,
-  errorMessage: null,
-  penaltyType: null,
-  penalizeUntil: null,
-  reason: null,
-  message: null,
-  postId: null,
-  postAction: null,
-  postEdit: null,
-  user: null,
-  otherUserIds: null,
-  loading: false,
-  confirmClose: false,
+  loadingUser = false;
+  errorMessage = null;
+  penaltyType = null;
+  penalizeUntil = null;
+  reason = null;
+  message = null;
+  postId = null;
+  postAction = null;
+  postEdit = null;
+  user = null;
+  otherUserIds = null;
+  loading = false;
+  confirmClose = false;
 
   onShow() {
     this.setProperties({
@@ -44,11 +46,11 @@ export default Controller.extend(ModalFunctionality, {
       message: null,
       confirmClose: false,
     });
-  },
+  }
 
   finishedSetup() {
     this.set("penalizeUntil", this.user?.next_penalty);
-  },
+  }
 
   beforeClose() {
     if (this.confirmClose) {
@@ -73,7 +75,7 @@ export default Controller.extend(ModalFunctionality, {
 
       return false;
     }
-  },
+  }
 
   @discourseComputed("penaltyType")
   modalTitle(penaltyType) {
@@ -82,7 +84,7 @@ export default Controller.extend(ModalFunctionality, {
     } else if (penaltyType === "silence") {
       return "admin.user.silence_modal_title";
     }
-  },
+  }
 
   @discourseComputed("penaltyType")
   buttonLabel(penaltyType) {
@@ -91,7 +93,7 @@ export default Controller.extend(ModalFunctionality, {
     } else if (penaltyType === "silence") {
       return "admin.user.silence";
     }
-  },
+  }
 
   @discourseComputed(
     "user.penalty_counts.suspended",
@@ -102,7 +104,7 @@ export default Controller.extend(ModalFunctionality, {
       SUSPENDED: suspendedCount,
       SILENCED: silencedCount,
     });
-  },
+  }
 
   @discourseComputed("penaltyType", "user.canSuspend", "user.canSilence")
   canPenalize(penaltyType, canSuspend, canSilence) {
@@ -113,12 +115,12 @@ export default Controller.extend(ModalFunctionality, {
     }
 
     return false;
-  },
+  }
 
   @discourseComputed("penalizing", "penalizeUntil", "reason")
   submitDisabled(penalizing, penalizeUntil, reason) {
     return penalizing || isEmpty(penalizeUntil) || !reason || reason.length < 1;
-  },
+  }
 
   @action
   async penalizeUser() {
@@ -164,5 +166,5 @@ export default Controller.extend(ModalFunctionality, {
     } finally {
       this.set("penalizing", false);
     }
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-reseed.js

@@ -1,15 +1,19 @@
+import { action } from "@ember/object";
+import { inject as service } from "@ember/service";
 import Controller from "@ember/controller";
 import I18n from "I18n";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { ajax } from "discourse/lib/ajax";
-import { inject as service } from "@ember/service";
 
-export default Controller.extend(ModalFunctionality, {
-  dialog: service(),
-  loading: true,
-  reseeding: false,
-  categories: null,
-  topics: null,
+export default class AdminReseedController extends Controller.extend(
+  ModalFunctionality
+) {
+  @service dialog;
+
+  loading = true;
+  reseeding = false;
+  categories = null;
+  topics = null;
 
   onShow() {
     ajax("/admin/customize/reseed")
@@ -20,27 +24,26 @@ export default Controller.extend(ModalFunctionality, {
         });
       })
       .finally(() => this.set("loading", false));
-  },
+  }
 
   _extractSelectedIds(items) {
     return items.filter((item) => item.selected).map((item) => item.id);
-  },
+  }
 
-  actions: {
-    reseed() {
-      this.set("reseeding", true);
-      ajax("/admin/customize/reseed", {
-        data: {
-          category_ids: this._extractSelectedIds(this.categories),
-          topic_ids: this._extractSelectedIds(this.topics),
-        },
-        type: "POST",
-      })
-        .catch(() => this.dialog.alert(I18n.t("generic_error")))
-        .finally(() => {
-          this.set("reseeding", false);
-          this.send("closeModal");
-        });
-    },
-  },
-});
+  @action
+  reseed() {
+    this.set("reseeding", true);
+    ajax("/admin/customize/reseed", {
+      data: {
+        category_ids: this._extractSelectedIds(this.categories),
+        topic_ids: this._extractSelectedIds(this.topics),
+      },
+      type: "POST",
+    })
+      .catch(() => this.dialog.alert(I18n.t("generic_error")))
+      .finally(() => {
+        this.set("reseeding", false);
+        this.send("closeModal");
+      });
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-staff-action-log-details.js

@@ -1,4 +1,6 @@
 import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
-export default Controller.extend(ModalFunctionality);
+export default class AdminStaffActionLogDetailsController extends Controller.extend(
+  ModalFunctionality
+) {}

app/assets/javascripts/admin/addon/controllers/modals/admin-start-backup.js

@@ -1,35 +1,39 @@
+import { action } from "@ember/object";
 import Controller, { inject as controller } from "@ember/controller";
 import discourseComputed from "discourse-common/utils/decorators";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
-export default Controller.extend(ModalFunctionality, {
-  adminBackupsLogs: controller(),
+export default class AdminStartBackupController extends Controller.extend(
+  ModalFunctionality
+) {
+  @controller adminBackupsLogs;
 
   @discourseComputed
   warningMessage() {
     // this is never shown here, but we may want to show different
     // messages in plugins
     return "";
-  },
+  }
 
   @discourseComputed
   yesLabel() {
     return "yes_value";
-  },
+  }
 
-  actions: {
-    startBackupWithUploads() {
-      this.send("closeModal");
-      this.send("startBackup", true);
-    },
+  @action
+  startBackupWithUploads() {
+    this.send("closeModal");
+    this.send("startBackup", true);
+  }
 
-    startBackupWithoutUploads() {
-      this.send("closeModal");
-      this.send("startBackup", false);
-    },
+  @action
+  startBackupWithoutUploads() {
+    this.send("closeModal");
+    this.send("startBackup", false);
+  }
 
-    cancel() {
-      this.send("closeModal");
-    },
-  },
-});
+  @action
+  cancel() {
+    this.send("closeModal");
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-theme-change.js

@@ -2,7 +2,9 @@ import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import { ajax } from "discourse/lib/ajax";
 
-export default Controller.extend(ModalFunctionality, {
+export default class AdminThemeChangeController extends Controller.extend(
+  ModalFunctionality
+) {
   loadDiff() {
     this.set("loading", true);
     ajax(
@@ -11,5 +13,5 @@ export default Controller.extend(ModalFunctionality, {
       this.set("loading", false);
       this.set("diff", diff.side_by_side);
     });
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-uploaded-image-list.js

@@ -1,30 +1,32 @@
-import { observes, on } from "discourse-common/utils/decorators";
+import { observes, on } from "@ember-decorators/object";
 import Controller from "@ember/controller";
 import { action } from "@ember/object";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 
-export default Controller.extend(ModalFunctionality, {
+export default class AdminUploadedImageListController extends Controller.extend(
+  ModalFunctionality
+) {
   @on("init")
   @observes("model.value")
   _setup() {
     const value = this.get("model.value");
     this.set("images", value && value.length ? value.split("|") : []);
-  },
+  }
 
   @action
   remove(url, event) {
     event?.preventDefault();
     this.images.removeObject(url);
-  },
+  }
 
-  actions: {
-    uploadDone({ url }) {
-      this.images.addObject(url);
-    },
+  @action
+  uploadDone({ url }) {
+    this.images.addObject(url);
+  }
 
-    close() {
-      this.save(this.images.join("|"));
-      this.send("closeModal");
-    },
-  },
-});
+  @action
+  close() {
+    this.save(this.images.join("|"));
+    this.send("closeModal");
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/admin-watched-word-test.js

@@ -1,16 +1,19 @@
+import { equal } from "@ember/object/computed";
 import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import discourseComputed from "discourse-common/utils/decorators";
-import { equal } from "@ember/object/computed";
 import {
   createWatchedWordRegExp,
   toWatchedWord,
 } from "discourse-common/utils/watched-words";
 
-export default Controller.extend(ModalFunctionality, {
-  isReplace: equal("model.nameKey", "replace"),
-  isTag: equal("model.nameKey", "tag"),
-  isLink: equal("model.nameKey", "link"),
+export default class AdminWatchedWordTestController extends Controller.extend(
+  ModalFunctionality
+) {
+  @equal("model.nameKey", "replace") isReplace;
+
+  @equal("model.nameKey", "tag") isTag;
+  @equal("model.nameKey", "link") isLink;
 
   @discourseComputed(
     "value",
@@ -71,5 +74,5 @@ export default Controller.extend(ModalFunctionality, {
 
       return matches;
     }
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/controllers/modals/site-setting-default-categories.js

@@ -2,4 +2,7 @@ import Controller from "@ember/controller";
 import ModalFunctionality from "discourse/mixins/modal-functionality";
 import ModalUpdateExistingUsers from "discourse/mixins/modal-update-existing-users";
 
-export default Controller.extend(ModalFunctionality, ModalUpdateExistingUsers);
+export default class SiteSettingDefaultCategoriesController extends Controller.extend(
+  ModalFunctionality,
+  ModalUpdateExistingUsers
+) {}

app/assets/javascripts/admin/addon/helpers/disposition-icon.js

@@ -2,7 +2,7 @@ import Helper from "@ember/component/helper";
 import { iconHTML } from "discourse-common/lib/icon-library";
 import { htmlSafe } from "@ember/template";
 
-export default Helper.extend({
+export default class DispositionIcon extends Helper {
   compute([disposition]) {
     if (!disposition) {
       return null;
@@ -24,5 +24,5 @@ export default Helper.extend({
       }
     }
     return htmlSafe(iconHTML(icon, { title }));
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/models/admin-dashboard.js

@@ -7,19 +7,17 @@ const GENERAL_ATTRIBUTES = [
   "release_notes_link",
 ];
 
-const AdminDashboard = EmberObject.extend({});
-
-AdminDashboard.reopenClass({
-  fetch() {
+export default class AdminDashboard extends EmberObject {
+  static fetch() {
     return ajax("/admin/dashboard.json").then((json) => {
       const model = AdminDashboard.create();
       model.set("version_check", json.version_check);
 
       return model;
     });
-  },
+  }
 
-  fetchGeneral() {
+  static fetchGeneral() {
     return ajax("/admin/dashboard/general.json").then((json) => {
       const model = AdminDashboard.create();
 
@@ -34,15 +32,13 @@ AdminDashboard.reopenClass({
 
       return model;
     });
-  },
+  }
 
-  fetchProblems() {
+  static fetchProblems() {
     return ajax("/admin/dashboard/problems.json").then((json) => {
       const model = AdminDashboard.create(json);
       model.set("loaded", true);
       return model;
     });
-  },
-});
-
-export default AdminDashboard;
+  }
+}

app/assets/javascripts/admin/addon/models/admin-user.js

@@ -10,14 +10,30 @@ import { popupAjaxError } from "discourse/lib/ajax-error";
 import { propertyNotEqual } from "discourse/lib/computed";
 import { userPath } from "discourse/lib/url";
 
-const wrapAdmin = (user) => (user ? AdminUser.create(user) : null);
+export default class AdminUser extends User {
+  static find(user_id) {
+    return ajax(`/admin/users/${user_id}.json`).then((result) => {
+      result.loadedDetails = true;
+      return AdminUser.create(result);
+    });
+  }
 
-const AdminUser = User.extend({
-  adminUserView: true,
-  customGroups: filter("groups", (g) => !g.automatic && Group.create(g)),
-  automaticGroups: filter("groups", (g) => g.automatic && Group.create(g)),
+  static findAll(query, userFilter) {
+    return ajax(`/admin/users/list/${query}.json`, {
+      data: userFilter,
+    }).then((users) => users.map((u) => AdminUser.create(u)));
+  }
 
-  canViewProfile: or("active", "staged"),
+  adminUserView = true;
+
+  @filter("groups", (g) => !g.automatic && Group.create(g)) customGroups;
+  @filter("groups", (g) => g.automatic && Group.create(g)) automaticGroups;
+  @or("active", "staged") canViewProfile;
+  @gt("bounce_score", 0) canResetBounceScore;
+  @propertyNotEqual("originalTrustLevel", "trust_level") dirty;
+  @lt("trust_level", 4) canLockTrustLevel;
+  @not("staff") canSuspend;
+  @not("staff") canSilence;
 
   @discourseComputed("bounce_score", "reset_bounce_score_after")
   bounceScore(bounce_score, reset_bounce_score_after) {
@@ -28,7 +44,7 @@ const AdminUser = User.extend({
     } else {
       return bounce_score;
     }
-  },
+  }
 
   @discourseComputed("bounce_score")
   bounceScoreExplanation(bounce_score) {
@@ -39,14 +55,12 @@ const AdminUser = User.extend({
     } else {
       return I18n.t("admin.user.bounce_score_explanation.threshold_reached");
     }
-  },
+  }
 
   @discourseComputed
   bounceLink() {
     return getURL("/admin/email/bounced");
-  },
-
-  canResetBounceScore: gt("bounce_score", 0),
+  }
 
   resetBounceScore() {
     return ajax(`/admin/users/${this.id}/reset_bounce_score`, {
@@ -57,14 +71,14 @@ const AdminUser = User.extend({
         reset_bounce_score_after: null,
       })
     );
-  },
+  }
 
   groupAdded(added) {
     return ajax(`/admin/users/${this.id}/groups`, {
       type: "POST",
       data: { group_id: added.id },
     }).then(() => this.groups.pushObject(added));
-  },
+  }
 
   groupRemoved(groupId) {
     return ajax(`/admin/users/${this.id}/groups/${groupId}`, {
@@ -75,13 +89,13 @@ const AdminUser = User.extend({
         this.set("primary_group_id", null);
       }
     });
-  },
+  }
 
   deleteAllPosts() {
     return ajax(`/admin/users/${this.get("id")}/delete_posts_batch`, {
       type: "PUT",
     });
-  },
+  }
 
   revokeAdmin() {
     return ajax(`/admin/users/${this.id}/revoke_admin`, {
@@ -97,7 +111,7 @@ const AdminUser = User.extend({
         can_delete_all_posts: resp.can_delete_all_posts,
       });
     });
-  },
+  }
 
   grantAdmin(data) {
     return ajax(`/admin/users/${this.id}/grant_admin`, {
@@ -114,7 +128,7 @@ const AdminUser = User.extend({
 
       return resp;
     });
-  },
+  }
 
   revokeModeration() {
     return ajax(`/admin/users/${this.id}/revoke_moderation`, {
@@ -130,7 +144,7 @@ const AdminUser = User.extend({
         });
       })
       .catch(popupAjaxError);
-  },
+  }
 
   grantModeration() {
     return ajax(`/admin/users/${this.id}/grant_moderation`, {
@@ -146,7 +160,7 @@ const AdminUser = User.extend({
         });
       })
       .catch(popupAjaxError);
-  },
+  }
 
   disableSecondFactor() {
     return ajax(`/admin/users/${this.id}/disable_second_factor`, {
@@ -156,7 +170,7 @@ const AdminUser = User.extend({
         this.set("second_factor_enabled", false);
       })
       .catch(popupAjaxError);
-  },
+  }
 
   approve(approvedBy) {
     return ajax(`/admin/users/${this.id}/approve`, {
@@ -168,83 +182,76 @@ const AdminUser = User.extend({
         approved_by: approvedBy,
       });
     });
-  },
+  }
 
   setOriginalTrustLevel() {
     this.set("originalTrustLevel", this.trust_level);
-  },
-
-  dirty: propertyNotEqual("originalTrustLevel", "trust_level"),
+  }
 
   saveTrustLevel() {
     return ajax(`/admin/users/${this.id}/trust_level`, {
       type: "PUT",
       data: { level: this.trust_level },
     });
-  },
+  }
 
   restoreTrustLevel() {
     this.set("trust_level", this.originalTrustLevel);
-  },
+  }
 
   lockTrustLevel(locked) {
     return ajax(`/admin/users/${this.id}/trust_level_lock`, {
       type: "PUT",
       data: { locked: !!locked },
     });
-  },
-
-  canLockTrustLevel: lt("trust_level", 4),
-
-  canSuspend: not("staff"),
-  canSilence: not("staff"),
+  }
 
   @discourseComputed("suspended_till", "suspended_at")
   suspendDuration(suspendedTill, suspendedAt) {
     suspendedAt = moment(suspendedAt);
     suspendedTill = moment(suspendedTill);
     return suspendedAt.format("L") + " - " + suspendedTill.format("L");
-  },
+  }
 
   suspend(data) {
     return ajax(`/admin/users/${this.id}/suspend`, {
       type: "PUT",
       data,
     }).then((result) => this.setProperties(result.suspension));
-  },
+  }
 
   unsuspend() {
     return ajax(`/admin/users/${this.id}/unsuspend`, {
       type: "PUT",
     }).then((result) => this.setProperties(result.suspension));
-  },
+  }
 
   logOut() {
     return ajax("/admin/users/" + this.id + "/log_out", {
       type: "POST",
       data: { username_or_email: this.username },
     });
-  },
+  }
 
   impersonate() {
     return ajax("/admin/impersonate", {
       type: "POST",
       data: { username_or_email: this.username },
     });
-  },
+  }
 
   activate() {
     return ajax(`/admin/users/${this.id}/activate`, {
       type: "PUT",
     });
-  },
+  }
 
   deactivate() {
     return ajax(`/admin/users/${this.id}/deactivate`, {
       type: "PUT",
       data: { context: document.location.pathname },
     });
-  },
+  }
 
   unsilence() {
     this.set("silencingUser", true);
@@ -254,7 +261,7 @@ const AdminUser = User.extend({
     })
       .then((result) => this.setProperties(result.unsilence))
       .finally(() => this.set("silencingUser", false));
-  },
+  }
 
   silence(data) {
     this.set("silencingUser", true);
@@ -265,20 +272,20 @@ const AdminUser = User.extend({
     })
       .then((result) => this.setProperties(result.silence))
       .finally(() => this.set("silencingUser", false));
-  },
+  }
 
   sendActivationEmail() {
     return ajax(userPath("action/send_activation_email"), {
       type: "POST",
       data: { username: this.username },
     });
-  },
+  }
 
   anonymize() {
     return ajax(`/admin/users/${this.id}/anonymize.json`, {
       type: "PUT",
     });
-  },
+  }
 
   destroy(formData) {
     return ajax(`/admin/users/${this.id}.json`, {
@@ -295,14 +302,14 @@ const AdminUser = User.extend({
       .catch(() => {
         this.find(this.id).then((u) => this.setProperties(u));
       });
-  },
+  }
 
   merge(formData) {
     return ajax(`/admin/users/${this.id}/merge.json`, {
       type: "POST",
       data: formData,
     });
-  },
+  }
 
   loadDetails() {
     if (this.loadedDetails) {
@@ -313,23 +320,29 @@ const AdminUser = User.extend({
       const userProperties = Object.assign(result, { loadedDetails: true });
       this.setProperties(userProperties);
     });
-  },
+  }
 
   @discourseComputed("tl3_requirements")
   tl3Requirements(requirements) {
     if (requirements) {
       return this.store.createRecord("tl3Requirements", requirements);
     }
-  },
+  }
 
   @discourseComputed("suspended_by")
-  suspendedBy: wrapAdmin,
+  suspendedBy(user) {
+    return user ? AdminUser.create(user) : null;
+  }
 
   @discourseComputed("silenced_by")
-  silencedBy: wrapAdmin,
+  silencedBy(user) {
+    return user ? AdminUser.create(user) : null;
+  }
 
   @discourseComputed("approved_by")
-  approvedBy: wrapAdmin,
+  approvedBy(user) {
+    return user ? AdminUser.create(user) : null;
+  }
 
   deleteSSORecord() {
     return ajax(`/admin/users/${this.id}/sso_record.json`, {
@@ -339,22 +352,5 @@ const AdminUser = User.extend({
         this.set("single_sign_on_record", null);
       })
       .catch(popupAjaxError);
-  },
-});
-
-AdminUser.reopenClass({
-  find(user_id) {
-    return ajax(`/admin/users/${user_id}.json`).then((result) => {
-      result.loadedDetails = true;
-      return AdminUser.create(result);
-    });
-  },
-
-  findAll(query, userFilter) {
-    return ajax(`/admin/users/list/${query}.json`, {
-      data: userFilter,
-    }).then((users) => users.map((u) => AdminUser.create(u)));
-  },
-});
-
-export default AdminUser;
+  }
+}

app/assets/javascripts/admin/addon/models/api-key.js

@@ -1,24 +1,26 @@
+import { computed } from "@ember/object";
 import AdminUser from "admin/models/admin-user";
 import RestModel from "discourse/models/rest";
 import { ajax } from "discourse/lib/ajax";
-import { computed } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 
-const ApiKey = RestModel.extend({
-  user: computed("_user", {
-    get() {
-      return this._user;
-    },
-    set(key, value) {
-      if (value && !(value instanceof AdminUser)) {
-        this.set("_user", AdminUser.create(value));
-      } else {
-        this.set("_user", value);
-      }
-      return this._user;
-    },
-  }),
+export default class ApiKey extends RestModel {
+  @fmt("truncated_key", "%@...") truncatedKey;
+
+  @computed("_user")
+  get user() {
+    return this._user;
+  }
+
+  set user(value) {
+    if (value && !(value instanceof AdminUser)) {
+      this.set("_user", AdminUser.create(value));
+    } else {
+      this.set("_user", value);
+    }
+    return this._user;
+  }
 
   @discourseComputed("description")
   shortDescription(description) {
@@ -26,32 +28,28 @@ const ApiKey = RestModel.extend({
       return description;
     }
     return `${description.substring(0, 40)}...`;
-  },
-
-  truncatedKey: fmt("truncated_key", "%@..."),
+  }
 
   revoke() {
     return ajax(`${this.basePath}/revoke`, {
       type: "POST",
     }).then((result) => this.setProperties(result.api_key));
-  },
+  }
 
   undoRevoke() {
     return ajax(`${this.basePath}/undo-revoke`, {
       type: "POST",
     }).then((result) => this.setProperties(result.api_key));
-  },
+  }
 
   createProperties() {
     return this.getProperties("description", "username", "scopes");
-  },
+  }
 
   @discourseComputed()
   basePath() {
     return this.store
       .adapterFor("api-key")
       .pathFor(this.store, "api-key", this.id);
-  },
-});
-
-export default ApiKey;
+  }
+}

app/assets/javascripts/admin/addon/models/backup-status.js

@@ -1,12 +1,12 @@
+import { not } from "@ember/object/computed";
 import EmberObject from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
-import { not } from "@ember/object/computed";
 
-export default EmberObject.extend({
-  restoreDisabled: not("restoreEnabled"),
+export default class BackupStatus extends EmberObject {
+  @not("restoreEnabled") restoreDisabled;
 
   @discourseComputed("allowRestore", "isOperationRunning")
   restoreEnabled(allowRestore, isOperationRunning) {
     return allowRestore && !isOperationRunning;
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/models/backup.js

@@ -2,25 +2,12 @@ import EmberObject from "@ember/object";
 import MessageBus from "message-bus-client";
 import { ajax } from "discourse/lib/ajax";
 
-const Backup = EmberObject.extend({
-  destroy() {
-    return ajax("/admin/backups/" + this.filename, { type: "DELETE" });
-  },
-
-  restore() {
-    return ajax("/admin/backups/" + this.filename + "/restore", {
-      type: "POST",
-      data: { client_id: MessageBus.clientId },
-    });
-  },
-});
-
-Backup.reopenClass({
-  find() {
+export default class Backup extends EmberObject {
+  static find() {
     return ajax("/admin/backups.json");
-  },
+  }
 
-  start(withUploads) {
+  static start(withUploads) {
     if (withUploads === undefined) {
       withUploads = true;
     }
@@ -31,19 +18,28 @@ Backup.reopenClass({
         client_id: MessageBus.clientId,
       },
     });
-  },
+  }
 
-  cancel() {
+  static cancel() {
     return ajax("/admin/backups/cancel.json", {
       type: "DELETE",
     });
-  },
+  }
 
-  rollback() {
+  static rollback() {
     return ajax("/admin/backups/rollback.json", {
       type: "POST",
     });
-  },
-});
+  }
 
-export default Backup;
+  destroy() {
+    return ajax("/admin/backups/" + this.filename, { type: "DELETE" });
+  }
+
+  restore() {
+    return ajax("/admin/backups/" + this.filename + "/restore", {
+      type: "POST",
+      data: { client_id: MessageBus.clientId },
+    });
+  }
+}

app/assets/javascripts/admin/addon/models/color-scheme-color.js

@@ -1,19 +1,19 @@
-import discourseComputed, {
-  observes,
-  on,
-} from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
+import { observes, on } from "@ember-decorators/object";
 import EmberObject from "@ember/object";
 import I18n from "I18n";
 import { propertyNotEqual } from "discourse/lib/computed";
 
-const ColorSchemeColor = EmberObject.extend({
+export default class ColorSchemeColor extends EmberObject {
+  // Whether the current value is different than Discourse's default color scheme.
+  @propertyNotEqual("hex", "default_hex") overridden;
   @on("init")
   startTrackingChanges() {
     this.set("originals", { hex: this.hex || "FFFFFF" });
 
     // force changed property to be recalculated
     this.notifyPropertyChange("hex");
-  },
+  }
 
   // Whether value has changed since it was last saved.
   @discourseComputed("hex")
@@ -26,26 +26,23 @@ const ColorSchemeColor = EmberObject.extend({
     }
 
     return false;
-  },
-
-  // Whether the current value is different than Discourse's default color scheme.
-  overridden: propertyNotEqual("hex", "default_hex"),
+  }
 
   // Whether the saved value is different than Discourse's default color scheme.
   @discourseComputed("default_hex", "hex")
   savedIsOverriden(defaultHex) {
     return this.originals.hex !== defaultHex;
-  },
+  }
 
   revert() {
     this.set("hex", this.default_hex);
-  },
+  }
 
   undo() {
     if (this.originals) {
       this.set("hex", this.originals.hex);
     }
-  },
+  }
 
   @discourseComputed("name")
   translatedName(name) {
@@ -54,7 +51,7 @@ const ColorSchemeColor = EmberObject.extend({
     } else {
       return name;
     }
-  },
+  }
 
   @discourseComputed("name")
   description(name) {
@@ -63,7 +60,7 @@ const ColorSchemeColor = EmberObject.extend({
     } else {
       return "";
     }
-  },
+  }
 
   /**
     brightness returns a number between 0 (darkest) to 255 (brightest).
@@ -90,19 +87,17 @@ const ColorSchemeColor = EmberObject.extend({
           1000
       );
     }
-  },
+  }
 
   @observes("hex")
   hexValueChanged() {
     if (this.hex) {
       this.set("hex", this.hex.toString().replace(/[^0-9a-fA-F]/g, ""));
     }
-  },
+  }
 
   @discourseComputed("hex")
   valid(hex) {
     return hex.match(/^([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/) !== null;
-  },
-});
-
-export default ColorSchemeColor;
+  }
+}

app/assets/javascripts/admin/addon/models/color-scheme.js

@@ -1,3 +1,4 @@
+import { not } from "@ember/object/computed";
 import { A } from "@ember/array";
 import ArrayProxy from "@ember/array/proxy";
 import ColorSchemeColor from "admin/models/color-scheme-color";
@@ -5,26 +6,56 @@ import EmberObject from "@ember/object";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
 import discourseComputed from "discourse-common/utils/decorators";
-import { not } from "@ember/object/computed";
 
-const ColorScheme = EmberObject.extend({
+class ColorSchemes extends ArrayProxy {}
+
+export default class ColorScheme extends EmberObject {
+  static findAll() {
+    const colorSchemes = ColorSchemes.create({ content: [], loading: true });
+    return ajax("/admin/color_schemes").then((all) => {
+      all.forEach((colorScheme) => {
+        colorSchemes.pushObject(
+          ColorScheme.create({
+            id: colorScheme.id,
+            name: colorScheme.name,
+            is_base: colorScheme.is_base,
+            theme_id: colorScheme.theme_id,
+            theme_name: colorScheme.theme_name,
+            base_scheme_id: colorScheme.base_scheme_id,
+            user_selectable: colorScheme.user_selectable,
+            colors: colorScheme.colors.map((c) => {
+              return ColorSchemeColor.create({
+                name: c.name,
+                hex: c.hex,
+                default_hex: c.default_hex,
+                is_advanced: c.is_advanced,
+              });
+            }),
+          })
+        );
+      });
+      return colorSchemes;
+    });
+  }
+
+  @not("id") newRecord;
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     this.startTrackingChanges();
-  },
+  }
 
   @discourseComputed
   description() {
     return "" + this.name;
-  },
+  }
 
   startTrackingChanges() {
     this.set("originals", {
       name: this.name,
       user_selectable: this.user_selectable,
     });
-  },
+  }
 
   schemeJson() {
     const buffer = [];
@@ -33,7 +64,7 @@ const ColorScheme = EmberObject.extend({
     });
 
     return [`"${this.name}": {`, buffer.join(",\n"), "}"].join("\n");
-  },
+  }
 
   copy() {
     const newScheme = ColorScheme.create({
@@ -47,7 +78,7 @@ const ColorScheme = EmberObject.extend({
       );
     });
     return newScheme;
-  },
+  }
 
   @discourseComputed(
     "name",
@@ -70,7 +101,7 @@ const ColorScheme = EmberObject.extend({
     }
 
     return false;
-  },
+  }
 
   @discourseComputed("changed")
   disableSave(changed) {
@@ -79,9 +110,7 @@ const ColorScheme = EmberObject.extend({
     }
 
     return !changed || this.saving || this.colors.any((c) => !c.get("valid"));
-  },
-
-  newRecord: not("id"),
+  }
 
   save(opts) {
     if (this.is_base || this.disableSave) {
@@ -124,7 +153,7 @@ const ColorScheme = EmberObject.extend({
       this.setProperties({ savingStatus: I18n.t("saved"), saving: false });
       this.notifyPropertyChange("description");
     });
-  },
+  }
 
   updateUserSelectable(value) {
     if (!this.id) {
@@ -137,45 +166,11 @@ const ColorScheme = EmberObject.extend({
       dataType: "json",
       contentType: "application/json",
     });
-  },
+  }
 
   destroy() {
     if (this.id) {
       return ajax(`/admin/color_schemes/${this.id}`, { type: "DELETE" });
     }
-  },
-});
-
-const ColorSchemes = ArrayProxy.extend({});
-
-ColorScheme.reopenClass({
-  findAll() {
-    const colorSchemes = ColorSchemes.create({ content: [], loading: true });
-    return ajax("/admin/color_schemes").then((all) => {
-      all.forEach((colorScheme) => {
-        colorSchemes.pushObject(
-          ColorScheme.create({
-            id: colorScheme.id,
-            name: colorScheme.name,
-            is_base: colorScheme.is_base,
-            theme_id: colorScheme.theme_id,
-            theme_name: colorScheme.theme_name,
-            base_scheme_id: colorScheme.base_scheme_id,
-            user_selectable: colorScheme.user_selectable,
-            colors: colorScheme.colors.map((c) => {
-              return ColorSchemeColor.create({
-                name: c.name,
-                hex: c.hex,
-                default_hex: c.default_hex,
-                is_advanced: c.is_advanced,
-              });
-            }),
-          })
-        );
-      });
-      return colorSchemes;
-    });
-  },
-});
-
-export default ColorScheme;
+  }
+}

app/assets/javascripts/admin/addon/models/email-log.js

@@ -3,10 +3,8 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import getURL from "discourse-common/lib/get-url";
 
-const EmailLog = EmberObject.extend({});
-
-EmailLog.reopenClass({
-  create(attrs) {
+export default class EmailLog extends EmberObject {
+  static create(attrs) {
     attrs = attrs || {};
 
     if (attrs.user) {
@@ -17,10 +15,10 @@ EmailLog.reopenClass({
       attrs.post_url = getURL(attrs.post_url);
     }
 
-    return this._super(attrs);
-  },
+    return super.create(attrs);
+  }
 
-  findAll(filter, offset) {
+  static findAll(filter, offset) {
     filter = filter || {};
     offset = offset || 0;
 
@@ -30,7 +28,5 @@ EmailLog.reopenClass({
     return ajax(`/admin/email/${status}.json?offset=${offset}`, {
       data: filter,
     }).then((logs) => logs.map((log) => EmailLog.create(log)));
-  },
-});
-
-export default EmailLog;
+  }
+}

app/assets/javascripts/admin/addon/models/email-preview.js

@@ -1,25 +1,21 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
-const EmailPreview = EmberObject.extend({});
-
-export function oneWeekAgo() {
-  return moment().locale("en").subtract(7, "days").format("YYYY-MM-DD");
-}
-
-EmailPreview.reopenClass({
-  findDigest(username, lastSeenAt) {
+export default class EmailPreview extends EmberObject {
+  static findDigest(username, lastSeenAt) {
     return ajax("/admin/email/preview-digest.json", {
       data: { last_seen_at: lastSeenAt || oneWeekAgo(), username },
     }).then((result) => EmailPreview.create(result));
-  },
+  }
 
-  sendDigest(username, lastSeenAt, email) {
+  static sendDigest(username, lastSeenAt, email) {
     return ajax("/admin/email/send-digest.json", {
       type: "POST",
       data: { last_seen_at: lastSeenAt || oneWeekAgo(), username, email },
     });
-  },
-});
+  }
+}
 
-export default EmailPreview;
+export function oneWeekAgo() {
+  return moment().locale("en").subtract(7, "days").format("YYYY-MM-DD");
+}

app/assets/javascripts/admin/addon/models/email-settings.js

@@ -1,14 +1,10 @@
 import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
-const EmailSettings = EmberObject.extend({});
-
-EmailSettings.reopenClass({
-  find() {
+export default class EmailSettings extends EmberObject {
+  static find() {
     return ajax("/admin/email.json").then(function (settings) {
       return EmailSettings.create(settings);
     });
-  },
-});
-
-export default EmailSettings;
+  }
+}

app/assets/javascripts/admin/addon/models/email-style.js

@@ -1,10 +1,10 @@
 import RestModel from "discourse/models/rest";
 
-export default RestModel.extend({
-  changed: false,
+export default class EmailStyle extends RestModel {
+  changed = false;
 
   setField(fieldName, value) {
     this.set(`${fieldName}`, value);
     this.set("changed", true);
-  },
-});
+  }
+}

app/assets/javascripts/admin/addon/models/email-template.js

@@ -2,12 +2,12 @@ import RestModel from "discourse/models/rest";
 import { ajax } from "discourse/lib/ajax";
 import { getProperties } from "@ember/object";
 
-export default RestModel.extend({
+export default class EmailTemplate extends RestModel {
   revert() {
     return ajax(`/admin/customize/email_templates/${this.id}`, {
       type: "DELETE",
     }).then((result) =>
       getProperties(result.email_template, "subject", "body", "can_revert")
     );
-  },
-});
+  }
+}