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

.ruby-version.sample

@@ -1 +1 @@
-3.1.3
+3.2.1

.template-lintrc.js

@@ -15,7 +15,7 @@ module.exports = {
         "directory-item-value",
         "directory-table-header-title",
         "loading-spinner",
-        "mobile-directory-item-label",
+        "directory-item-label",
       ],
     },
     "no-implicit-this": {

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)
@@ -110,7 +110,7 @@ GEM
     chunky_png (1.4.0)
     coderay (1.1.3)
     colored2 (3.1.2)
-    concurrent-ruby (1.2.0)
+    concurrent-ruby (1.2.2)
     connection_pool (2.3.0)
     cose (1.3.0)
       cbor (~> 0.5.9)
@@ -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.5)
-    prettier_print (1.2.0)
+    pg (1.4.6)
+    prettier_print (1.2.1)
     progress (3.6.0)
     pry (0.14.2)
       coderay (~> 1.1)
@@ -325,15 +326,15 @@ GEM
     pry-rails (0.3.9)
       pry (>= 0.10.4)
     public_suffix (5.0.1)
-    puma (6.1.0)
+    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,15 +348,15 @@ 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)
       zeitwerk (~> 2.5)
     rainbow (3.1.1)
-    raindrops (0.20.0)
+    raindrops (0.20.1)
     rake (13.0.6)
     rb-fsevent (0.11.2)
     rb-inotify (0.10.1)
@@ -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.46.0)
+    rubocop (1.48.1)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.2.0.0)
@@ -421,18 +422,18 @@ GEM
       rubocop-ast (>= 1.26.0, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.26.0)
+    rubocop-ast (1.27.0)
       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.11.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.0)
+    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

README.md

@@ -30,7 +30,7 @@ To get your environment setup, follow the community setup guide for your operati
 
 If you're familiar with how Rails works and are comfortable setting up your own environment, you can also try out the [**Discourse Advanced Developer Guide**](docs/DEVELOPER-ADVANCED.md), which is aimed primarily at Ubuntu and macOS environments.
 
-Before you get started, ensure you have the following minimum versions: [Ruby 3.1+](https://www.ruby-lang.org/en/downloads/), [PostgreSQL 13](https://www.postgresql.org/download/), [Redis 7](https://redis.io/download). If you're having trouble, please see our [**TROUBLESHOOTING GUIDE**](docs/TROUBLESHOOTING.md) first!
+Before you get started, ensure you have the following minimum versions: [Ruby 3.2+](https://www.ruby-lang.org/en/downloads/), [PostgreSQL 13](https://www.postgresql.org/download/), [Redis 7](https://redis.io/download). If you're having trouble, please see our [**TROUBLESHOOTING GUIDE**](docs/TROUBLESHOOTING.md) first!
 
 ## Setting up Discourse
 

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/embeddable-host.hbs

@@ -9,15 +9,6 @@
       autofocus={{true}}
     />
   </td>
-  <td class="editing-input">
-    <div class="label">{{i18n "admin.embedding.class_name"}}</div>
-    <Input
-      @value={{this.buffered.class_name}}
-      placeholder="class"
-      @enter={{action "save"}}
-      class="class-name"
-    />
-  </td>
   <td class="editing-input">
     <div class="label">{{i18n "admin.embedding.allowed_paths"}}</div>
     <Input
@@ -54,12 +45,6 @@
     <div class="label">{{i18n "admin.embedding.host"}}</div>
     {{this.host.host}}
   </td>
-  <td>
-    <div class="label">
-      {{i18n "admin.embedding.class_name"}}
-    </div>
-    {{this.host.class_name}}
-  </td>
   <td>
     <div class="label">
       {{i18n "admin.embedding.allowed_paths"}}

app/assets/javascripts/admin/addon/components/form-template/form.hbs

@@ -1,4 +1,4 @@
-<div class="form-templates--form">
+<div class="form-templates__form">
   <div class="control-group">
     <label for="template-name">
       {{i18n "admin.form_templates.new_template_form.name.label"}}
@@ -6,24 +6,38 @@
     <TextField
       @value={{this.templateName}}
       @name="template-name"
-      @class="form-templates--form-name-input"
+      @class="form-templates__form-name-input"
       @placeholderKey="admin.form_templates.new_template_form.name.placeholder"
     />
   </div>
-
-  <div class="control-group form-templates--quick-insert-field-buttons">
-    <span>
-      {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
-    </span>
-    {{#each this.quickInsertFields as |field|}}
+  <div class="control-group form-templates__editor">
+    <div class="form-templates__quick-insert-field-buttons">
+      <span>
+        {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
+      </span>
+      {{#each this.quickInsertFields as |field|}}
+        <DButton
+          @class="btn-flat btn-icon-text quick-insert-{{field.type}}"
+          @icon={{field.icon}}
+          @label="admin.form_templates.quick_insert_fields.{{field.type}}"
+          @action={{this.onInsertField}}
+          @actionParam={{field.type}}
+        />
+      {{/each}}
       <DButton
-        @class="btn-flat btn-icon-text quick-insert-{{field.type}}"
-        @icon={{field.icon}}
-        @label="admin.form_templates.quick_insert_fields.{{field.type}}"
-        @action={{this.onInsertField}}
-        @actionParam={{field.type}}
+        class="btn-flat btn-icon-text form-templates__validations-modal-button"
+        @label="admin.form_templates.validations_modal.button_title"
+        @icon="check-circle"
+        @action={{this.showValidationOptionsModal}}
       />
-    {{/each}}
+    </div>
+    <DButton
+      @class="form-templates__preview-button"
+      @icon="eye"
+      @label="admin.form_templates.new_template_form.preview"
+      @action={{this.showPreview}}
+      @disabled={{this.disablePreviewButton}}
+    />
   </div>
 
   <div class="control-group">
@@ -36,7 +50,7 @@
       @label="admin.form_templates.new_template_form.submit"
       @icon="check"
       @action={{this.onSubmit}}
-      @disabled={{this.formSubmitted}}
+      @disabled={{this.disableSubmitButton}}
     />
 
     <DButton

app/assets/javascripts/admin/addon/components/form-template/form.js

@@ -6,14 +6,15 @@ import I18n from "I18n";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { templateFormFields } from "admin/lib/template-form-fields";
 import FormTemplate from "admin/models/form-template";
+import showModal from "discourse/lib/show-modal";
 
 export default class FormTemplateForm extends Component {
   @service router;
   @service dialog;
   @tracked formSubmitted = false;
   @tracked templateContent = this.args.model?.template || "";
+  @tracked templateName = this.args.model?.name || "";
   isEditing = this.args.model?.id ? true : false;
-  templateName = this.args.model?.name;
   quickInsertFields = [
     {
       type: "checkbox",
@@ -41,6 +42,17 @@ export default class FormTemplateForm extends Component {
     },
   ];
 
+  get disablePreviewButton() {
+    return Boolean(!this.templateName.length || !this.templateContent.length);
+  }
+
+  get disableSubmitButton() {
+    return (
+      Boolean(!this.templateName.length || !this.templateContent.length) ||
+      this.formSubmitted
+    );
+  }
+
   @action
   onSubmit() {
     if (!this.formSubmitted) {
@@ -54,27 +66,17 @@ export default class FormTemplateForm extends Component {
 
     if (this.isEditing) {
       postData["id"] = this.args.model.id;
-
-      FormTemplate.updateTemplate(this.args.model.id, postData)
-        .then(() => {
-          this.formSubmitted = false;
-          this.router.transitionTo("adminCustomizeFormTemplates.index");
-        })
-        .catch((e) => {
-          popupAjaxError(e);
-          this.formSubmitted = false;
-        });
-    } else {
-      FormTemplate.createTemplate(postData)
-        .then(() => {
-          this.formSubmitted = false;
-          this.router.transitionTo("adminCustomizeFormTemplates.index");
-        })
-        .catch((e) => {
-          popupAjaxError(e);
-          this.formSubmitted = false;
-        });
     }
+
+    FormTemplate.createOrUpdateTemplate(postData)
+      .then(() => {
+        this.formSubmitted = false;
+        this.router.transitionTo("adminCustomizeFormTemplates.index");
+      })
+      .catch((e) => {
+        popupAjaxError(e);
+        this.formSubmitted = false;
+      });
   }
 
   @action
@@ -106,4 +108,33 @@ export default class FormTemplateForm extends Component {
       this.templateContent += `\n${structure}`;
     }
   }
+
+  @action
+  showValidationOptionsModal() {
+    return showModal("admin-form-template-validation-options", {
+      admin: true,
+    });
+  }
+
+  @action
+  showPreview() {
+    const data = {
+      name: this.templateName,
+      template: this.templateContent,
+    };
+
+    if (this.isEditing) {
+      data["id"] = this.args.model.id;
+    }
+
+    FormTemplate.validateTemplate(data)
+      .then(() => {
+        return showModal("form-template-form-preview", {
+          model: {
+            content: this.templateContent,
+          },
+        });
+      })
+      .catch(popupAjaxError);
+  }
 }

app/assets/javascripts/admin/addon/components/form-template/row-item.hbs

@@ -1,5 +1,10 @@
 <tr class="admin-list-item">
   <td class="col first">{{@template.name}}</td>
+  <td class="col categories">
+    {{#each this.activeCategories as |category|}}
+      {{category-link category}}
+    {{/each}}
+  </td>
   <td class="col action">
     <DButton
       @title="admin.form_templates.list_table.actions.view"

app/assets/javascripts/admin/addon/components/form-template/row-item.js

@@ -9,11 +9,17 @@ import I18n from "I18n";
 export default class FormTemplateRowItem extends Component {
   @service router;
   @service dialog;
+  @service site;
+
+  get activeCategories() {
+    return this.site?.categories?.filter((c) =>
+      c["form_template_ids"].includes(this.args.template.id)
+    );
+  }
 
   @action
   viewTemplate() {
-    showModal("admin-customize-form-template-view", {
-      admin: true,
+    showModal("customize-form-template-view", {
       model: this.args.template,
       refreshModel: this.args.refreshModel,
     });

app/assets/javascripts/admin/addon/components/site-setting.hbs

@@ -1,7 +1,8 @@
 <div class="setting-label">
   <h3>
+    {{this.settingName}}
+
     {{#if this.staffLogFilter}}
-      {{this.settingName}}
       <LinkTo
         @route="adminLogs.staffActionLogs"
         @query={{hash filters=this.staffLogFilter force_refresh=true}}
@@ -11,17 +12,18 @@
           {{d-icon "history"}}
         </span>
       </LinkTo>
-    {{else}}
-      {{this.settingName}}
     {{/if}}
   </h3>
+
   {{#if this.defaultIsAvailable}}
-    <a
-      href
-      onClick={{action "setDefaultValues"}}
-    >{{this.setting.setDefaultValuesLabel}}</a>
+    <DButton
+      class="btn-link"
+      @action={{this.setDefaultValues}}
+      @translatedLabel={{this.setting.setDefaultValuesLabel}}
+    />
   {{/if}}
 </div>
+
 <div class="setting-value">
   {{component
     this.componentName
@@ -33,18 +35,20 @@
     allowAny=this.allowAny
   }}
 </div>
+
 {{#if this.dirty}}
   <div class="setting-controls">
-    <DButton @class="ok" @action={{action "update"}} @icon="check" />
-    <DButton @class="cancel" @action={{action "cancel"}} @icon="times" />
+    <DButton class="ok" @action={{this.update}} @icon="check" />
+    <DButton class="cancel" @action={{this.cancel}} @icon="times" />
   </div>
 {{else if this.setting.overridden}}
   {{#if this.setting.secret}}
-    <DButton @action={{action "toggleSecret"}} @icon="far-eye-slash" />
+    <DButton @action={{this.toggleSecret}} @icon="far-eye-slash" />
   {{/if}}
+
   <DButton
-    @class="btn-default undo"
-    @action={{action "resetDefault"}}
+    class="btn-default undo"
+    @action={{this.resetDefault}}
     @icon="undo"
     @label="admin.settings.reset"
   />

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,25 +1,30 @@
+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) {
     const html = `<div id='discourse-comments'></div>
+<meta name='discourse-username' content='DISCOURSE_USERNAME'>
 
 <script type="text/javascript">
-  DiscourseEmbed = { discourseUrl: '${baseUrl}/',
-                     discourseEmbedUrl: 'REPLACE_ME' };
+  DiscourseEmbed = {
+    discourseUrl: '${baseUrl}/',
+    discourseEmbedUrl: 'EMBED_URL',
+    // className: 'CLASS_NAME',
+  };
 
   (function() {
     var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
@@ -29,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,20 +1,23 @@
+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
-    if (!!isEmpty(this.allSiteSettings)) {
+    if (isEmpty(this.allSiteSettings)) {
       return;
     }
 
@@ -73,7 +76,7 @@ export default Controller.extend({
             setting.includes(filter) ||
             setting.replace(/_/g, " ").includes(filter) ||
             item.get("description").toLowerCase().includes(filter) ||
-            (item.get("value") || "").toLowerCase().includes(filter)
+            (item.get("value") || "").toString().toLowerCase().includes(filter)
           );
         } else {
           return true;
@@ -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,41 +9,55 @@ 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) {
+    let colCount = 7; // note that the first column is hardcoded in the template
+
+    if (showEmails) {
+      colCount += 1;
+    }
+
+    if (this.siteSettings.must_approve_users) {
+      colCount += 1;
+    }
+
+    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) {
@@ -69,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-form-template-validation-options.js

@@ -0,0 +1,35 @@
+import Controller from "@ember/controller";
+import ModalFunctionality from "discourse/mixins/modal-functionality";
+import I18n from "I18n";
+
+export default class AdminFormTemplateValidationOptions extends Controller.extend(
+  ModalFunctionality
+) {
+  TABLE_HEADER_KEYS = ["key", "type", "description"];
+  VALIDATION_KEYS = ["required", "minimum", "maximum", "pattern"];
+
+  get tableHeaders() {
+    const translatedHeaders = [];
+    this.TABLE_HEADER_KEYS.forEach((header) => {
+      translatedHeaders.push(
+        I18n.t(`admin.form_templates.validations_modal.table_headers.${header}`)
+      );
+    });
+
+    return translatedHeaders;
+  }
+
+  get validations() {
+    const translatedValidations = [];
+    const prefix = "admin.form_templates.validations_modal.validations";
+    this.VALIDATION_KEYS.forEach((validation) => {
+      translatedValidations.push({
+        key: I18n.t(`${prefix}.${validation}.key`),
+        type: I18n.t(`${prefix}.${validation}.type`),
+        description: I18n.t(`${prefix}.${validation}.description`),
+      });
+    });
+
+    return translatedValidations;
+  }
+}

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/lib/template-form-fields.js

@@ -1,70 +1,75 @@
-// TODO(@keegan): Add translations for template strings
+import I18n from "I18n";
+
 export const templateFormFields = [
   {
     type: "checkbox",
     structure: `- type: checkbox
-  choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
   attributes:
-    label: "Enter question here"
-    description: "Enter description here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "input",
     structure: `- type: input
   attributes:
-    label: "Enter input label here"
-    description: "Enter input description here"
-    placeholder: "Enter input placeholder here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    placeholder: "${I18n.t(
+      "admin.form_templates.field_placeholders.placeholder"
+    )}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "textarea",
     structure: `- type: textarea
   attributes:
-    label: "Enter textarea label here"
-    description: "Enter textarea description here"
-    placeholder: "Enter textarea placeholder here"
-    validations:
-      required: true`,
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    placeholder: "${I18n.t(
+      "admin.form_templates.field_placeholders.placeholder"
+    )}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "dropdown",
     structure: `- type: dropdown
   choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.first")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.second")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.third")}"
   attributes:
-    label: "Enter dropdown label here"
-    description: "Enter dropdown description here"
-    validations:
-      required: true`,
+    none_label: "${I18n.t(
+      "admin.form_templates.field_placeholders.none_label"
+    )}"
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+    filterable: false
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "upload",
     structure: `- type: upload
   attributes:
     file_types: "jpg, png, gif"
-    label: "Enter upload label here"
-    description: "Enter upload description here"`,
+    allow_multiple: false
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
   {
     type: "multiselect",
-    structure: `- type: multiple_choice
+    structure: `- type: multi-select
   choices:
-    - "Option 1"
-    - "Option 2"
-    - "Option 3"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.first")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.second")}"
+    - "${I18n.t("admin.form_templates.field_placeholders.choices.third")}"
   attributes:
-    label: "Enter multiple choice label here"
-    description: "Enter multiple choice description here"
-    validations:
-      required: true`,
+    none_label: "${I18n.t(
+      "admin.form_templates.field_placeholders.none_label"
+    )}"
+    label: "${I18n.t("admin.form_templates.field_placeholders.label")}"
+  validations:
+    # ${I18n.t("admin.form_templates.field_placeholders.validations")}`,
   },
 ];

app/assets/javascripts/admin/addon/mixins/setting-component.js

@@ -3,12 +3,10 @@ import { fmt, propertyNotEqual } from "discourse/lib/computed";
 import { alias, oneWay } from "@ember/object/computed";
 import I18n from "I18n";
 import Mixin from "@ember/object/mixin";
-import { Promise } from "rsvp";
 import { ajax } from "discourse/lib/ajax";
 import { categoryLinkHTML } from "discourse/helpers/category-link";
 import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { htmlSafe } from "@ember/template";
-import { on } from "@ember/object/evented";
 import showModal from "discourse/lib/show-modal";
 import { warn } from "@ember/debug";
 import { action } from "@ember/object";
@@ -37,13 +35,61 @@ const CUSTOM_TYPES = [
 
 const AUTO_REFRESH_ON_SAVE = ["logo", "logo_small", "large_icon"];
 
+const DEFAULT_USER_PREFERENCES = [
+  "default_email_digest_frequency",
+  "default_include_tl0_in_digests",
+  "default_email_level",
+  "default_email_messages_level",
+  "default_email_mailing_list_mode",
+  "default_email_mailing_list_mode_frequency",
+  "default_email_previous_replies",
+  "default_email_in_reply_to",
+  "default_hide_profile_and_presence",
+  "default_other_new_topic_duration_minutes",
+  "default_other_auto_track_topics_after_msecs",
+  "default_other_notification_level_when_replying",
+  "default_other_external_links_in_new_tab",
+  "default_other_enable_quoting",
+  "default_other_enable_defer",
+  "default_other_dynamic_favicon",
+  "default_other_like_notification_frequency",
+  "default_other_skip_new_user_tips",
+  "default_topics_automatic_unpin",
+  "default_categories_watching",
+  "default_categories_tracking",
+  "default_categories_muted",
+  "default_categories_watching_first_post",
+  "default_categories_normal",
+  "default_tags_watching",
+  "default_tags_tracking",
+  "default_tags_muted",
+  "default_tags_watching_first_post",
+  "default_text_size",
+  "default_title_count_mode",
+  "default_sidebar_categories",
+  "default_sidebar_tags",
+];
+
 export default Mixin.create({
-  classNameBindings: [":row", ":setting", "overridden", "typeClass"],
-  content: alias("setting"),
-  validationMessage: null,
-  isSecret: oneWay("setting.secret"),
-  setting: null,
   attributeBindings: ["setting.setting:data-setting"],
+  classNameBindings: [":row", ":setting", "overridden", "typeClass"],
+  validationMessage: null,
+  setting: null,
+
+  content: alias("setting"),
+  isSecret: oneWay("setting.secret"),
+  componentName: fmt("typeClass", "site-settings/%@"),
+  overridden: propertyNotEqual("setting.default", "buffered.value"),
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.element.addEventListener("keydown", this._handleKeydown);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this.element.removeEventListener("keydown", this._handleKeydown);
+  },
 
   @discourseComputed("buffered.value", "setting.value")
   dirty(bufferVal, settingVal) {
@@ -99,15 +145,11 @@ export default Mixin.create({
     return setting.type;
   },
 
-  componentName: fmt("typeClass", "site-settings/%@"),
-
   @discourseComputed("setting.anyValue")
   allowAny(anyValue) {
     return anyValue !== false;
   },
 
-  overridden: propertyNotEqual("setting.default", "buffered.value"),
-
   @discourseComputed("buffered.value")
   bufferedValues(value) {
     return splitString(value, "|");
@@ -127,90 +169,57 @@ export default Mixin.create({
   },
 
   @action
-  update() {
-    const defaultUserPreferences = [
-      "default_email_digest_frequency",
-      "default_include_tl0_in_digests",
-      "default_email_level",
-      "default_email_messages_level",
-      "default_email_mailing_list_mode",
-      "default_email_mailing_list_mode_frequency",
-      "default_email_previous_replies",
-      "default_email_in_reply_to",
-      "default_hide_profile_and_presence",
-      "default_other_new_topic_duration_minutes",
-      "default_other_auto_track_topics_after_msecs",
-      "default_other_notification_level_when_replying",
-      "default_other_external_links_in_new_tab",
-      "default_other_enable_quoting",
-      "default_other_enable_defer",
-      "default_other_dynamic_favicon",
-      "default_other_like_notification_frequency",
-      "default_other_skip_new_user_tips",
-      "default_topics_automatic_unpin",
-      "default_categories_watching",
-      "default_categories_tracking",
-      "default_categories_muted",
-      "default_categories_watching_first_post",
-      "default_categories_normal",
-      "default_tags_watching",
-      "default_tags_tracking",
-      "default_tags_muted",
-      "default_tags_watching_first_post",
-      "default_text_size",
-      "default_title_count_mode",
-      "default_sidebar_categories",
-      "default_sidebar_tags",
-    ];
-
+  async update() {
     const key = this.buffered.get("setting");
 
-    if (defaultUserPreferences.includes(key)) {
-      const data = {};
-      data[key] = this.buffered.get("value");
+    if (!DEFAULT_USER_PREFERENCES.includes(key)) {
+      await this.save();
+      return;
+    }
 
-      ajax(`/admin/site_settings/${key}/user_count.json`, {
-        type: "PUT",
-        data,
-      }).then((result) => {
-        const count = result.user_count;
+    const data = {
+      [key]: this.buffered.get("value"),
+    };
 
-        if (count > 0) {
-          const controller = showModal("site-setting-default-categories", {
-            model: { count, key: key.replaceAll("_", " ") },
-            admin: true,
-          });
+    const result = await ajax(`/admin/site_settings/${key}/user_count.json`, {
+      type: "PUT",
+      data,
+    });
 
-          controller.set("onClose", () => {
-            this.updateExistingUsers = controller.updateExistingUsers;
-            this.save();
-          });
-        } else {
-          this.save();
-        }
+    const count = result.user_count;
+
+    if (count > 0) {
+      const controller = showModal("site-setting-default-categories", {
+        model: { count, key: key.replaceAll("_", " ") },
+        admin: true,
+      });
+
+      controller.set("onClose", () => {
+        this.updateExistingUsers = controller.updateExistingUsers;
+        this.save();
       });
     } else {
-      this.save();
+      await this.save();
     }
   },
 
   @action
-  save() {
-    this._save()
-      .then(() => {
-        this.set("validationMessage", null);
-        this.commitBuffer();
-        if (AUTO_REFRESH_ON_SAVE.includes(this.setting.setting)) {
-          this.afterSave();
-        }
-      })
-      .catch((e) => {
-        if (e.jqXHR?.responseJSON?.errors) {
-          this.set("validationMessage", e.jqXHR.responseJSON.errors[0]);
-        } else {
-          this.set("validationMessage", I18n.t("generic_error"));
-        }
-      });
+  async save() {
+    try {
+      await this._save();
+
+      this.set("validationMessage", null);
+      this.commitBuffer();
+      if (AUTO_REFRESH_ON_SAVE.includes(this.setting.setting)) {
+        this.afterSave();
+      }
+    } catch (e) {
+      if (e.jqXHR?.responseJSON?.errors) {
+        this.set("validationMessage", e.jqXHR.responseJSON.errors[0]);
+      } else {
+        this.set("validationMessage", I18n.t("generic_error"));
+      }
+    }
   },
 
   @action
@@ -247,18 +256,9 @@ export default Mixin.create({
     }
   },
 
-  _watchEnterKey: on("didInsertElement", function () {
-    this.element.addEventListener("keydown", this._handleKeydown);
-  }),
-
-  _removeBindings: on("willDestroyElement", function () {
-    this.element.removeEventListener("keydown", this._handleKeydown);
-  }),
-
-  _save() {
+  async _save() {
     warn("You should define a `_save` method", {
       id: "discourse.setting-component.missing-save",
     });
-    return Promise.resolve();
   },
 });