UX: Fix chat separator alignment (#20669)

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

.github/workflows/tests.yml

@@ -20,7 +20,7 @@ jobs:
     if: "!(github.event_name == 'push' && github.repository == 'discourse/discourse-private-mirror')"
     name: ${{ matrix.target }} ${{ matrix.build_type }} ${{ matrix.ruby }}
     runs-on: ${{ (matrix.build_type == 'annotations') && 'ubuntu-latest' || 'ubuntu-20.04-8core' }}
-    container: discourse/discourse_test:slim${{ (matrix.build_type == 'frontend' || matrix.build_type == 'system') && '-browsers' || '' }}${{ (matrix.ruby == '3.2') && '-ruby-3.2.0' || '' }}
+    container: discourse/discourse_test:slim${{ (matrix.build_type == 'frontend' || matrix.build_type == 'system') && '-browsers' || '' }}${{ (matrix.ruby == '3.1') && '-ruby-3.1.0' || '' }}
     timeout-minutes: 20
 
     env:
@@ -38,7 +38,7 @@ jobs:
       matrix:
         build_type: [backend, frontend, system, annotations]
         target: [core, plugins]
-        ruby: ['3.1']
+        ruby: ['3.2']
         exclude:
           - build_type: annotations
             target: plugins
@@ -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)
+    actionmailer (7.0.4.3)
-      actionpack (= 7.0.4.1)
+      actionpack (= 7.0.4.3)
-      actionview (= 7.0.4.1)
+      actionview (= 7.0.4.3)
-      activejob (= 7.0.4.1)
+      activejob (= 7.0.4.3)
-      activesupport (= 7.0.4.1)
+      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)
+    actionpack (7.0.4.3)
-      actionview (= 7.0.4.1)
+      actionview (= 7.0.4.3)
-      activesupport (= 7.0.4.1)
+      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)
+    actionview (7.0.4.3)
-      activesupport (= 7.0.4.1)
+      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)
+    activejob (7.0.4.3)
-      activesupport (= 7.0.4.1)
+      activesupport (= 7.0.4.3)
       globalid (>= 0.3.6)
-    activemodel (7.0.4.1)
+    activemodel (7.0.4.3)
-      activesupport (= 7.0.4.1)
+      activesupport (= 7.0.4.3)
-    activerecord (7.0.4.1)
+    activerecord (7.0.4.3)
-      activemodel (= 7.0.4.1)
+      activemodel (= 7.0.4.3)
-      activesupport (= 7.0.4.1)
+      activesupport (= 7.0.4.3)
-    activesupport (7.0.4.1)
+    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.2)
-    google-protobuf (3.22.0-arm64-darwin)
+    google-protobuf (3.22.2-aarch64-linux)
-    google-protobuf (3.22.0-x86_64-darwin)
+    google-protobuf (3.22.2-arm64-darwin)
-    google-protobuf (3.22.0-x86_64-linux)
+    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)
+    pg (1.4.6)
-    prettier_print (1.2.0)
+    prettier_print (1.2.1)
     progress (3.6.0)
     pry (0.14.2)
       coderay (~> 1.1)
@@ -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)
+    railties (7.0.4.3)
-      actionpack (= 7.0.4.1)
+      actionpack (= 7.0.4.3)
-      activesupport (= 7.0.4.1)
+      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,28 +412,28 @@ GEM
       rspec-core (>= 2.14)
     rtlcss (0.2.0)
       mini_racer (~> 0.6.3)
-    rubocop (1.45.1)
+    rubocop (1.48.1)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.2.0.0)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.24.1, < 2.0)
+      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)
+  actionmailer (= 7.0.4.3)
-  actionpack (= 7.0.4.1)
+  actionpack (= 7.0.4.3)
-  actionview (= 7.0.4.1)
+  actionview (= 7.0.4.3)
   actionview_precompiler
   active_model_serializers (~> 0.8.3)
-  activemodel (= 7.0.4.1)
+  activemodel (= 7.0.4.3)
-  activerecord (= 7.0.4.1)
+  activerecord (= 7.0.4.3)
-  activesupport (= 7.0.4.1)
+  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({
+export default class ApiKey extends RestAdapter {
-  jsonMode: true,
+  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({
+export default class TagGroup extends RestAdapter {
-  jsonMode: true,
+  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/ace-editor.js

@@ -1,31 +1,33 @@
+import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
+import { observes, on } from "@ember-decorators/object";
 import Component from "@ember/component";
 import getURL from "discourse-common/lib/get-url";
 import loadScript from "discourse/lib/load-script";
 import I18n from "I18n";
-import { bind, observes } from "discourse-common/utils/decorators";
+import { bind } from "discourse-common/utils/decorators";
-import { on } from "@ember/object/evented";
 
 const COLOR_VARS_REGEX =
   /\$(primary|secondary|tertiary|quaternary|header_background|header_primary|highlight|danger|success|love)(\s|;|-(low|medium|high))/g;
 
-export default Component.extend({
+@classNames("ace-wrapper")
-  mode: "css",
+export default class AceEditor extends Component {
-  classNames: ["ace-wrapper"],
+  mode = "css";
-  _editor: null,
+  disabled = false;
-  _skipContentChangeEvent: null,
+  htmlPlaceholder = false;
-  disabled: false,
+  _editor = null;
-  htmlPlaceholder: false,
+  _skipContentChangeEvent = null;
 
   @observes("editorId")
   editorIdChanged() {
     if (this.autofocus) {
       this.send("focus");
     }
-  },
+  }
 
   didRender() {
     this._skipContentChangeEvent = false;
-  },
+  }
 
   @observes("content")
   contentChanged() {
@@ -33,14 +35,14 @@ export default Component.extend({
     if (this._editor && !this._skipContentChangeEvent) {
       this._editor.getSession().setValue(content);
     }
-  },
+  }
 
   @observes("mode")
   modeChanged() {
     if (this._editor && !this._skipContentChangeEvent) {
       this._editor.getSession().setMode("ace/mode/" + this.mode);
     }
-  },
+  }
 
   @observes("placeholder")
   placeholderChanged() {
@@ -49,12 +51,12 @@ export default Component.extend({
         placeholder: this.placeholder,
       });
     }
-  },
+  }
 
   @observes("disabled")
   disabledStateChanged() {
     this.changeDisabledState();
-  },
+  }
 
   changeDisabledState() {
     const editor = this._editor;
@@ -67,9 +69,10 @@ export default Component.extend({
       });
       editor.container.parentNode.setAttribute("data-disabled", disabled);
     }
-  },
+  }
 
-  _destroyEditor: on("willDestroyElement", function () {
+  @on("willDestroyElement")
+  _destroyEditor() {
     if (this._editor) {
       this._editor.destroy();
       this._editor = null;
@@ -80,16 +83,16 @@ export default Component.extend({
     }
 
     $(window).off("ace:resize");
-  }),
+  }
 
   resize() {
     if (this._editor) {
       this._editor.resize();
     }
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     loadScript("/javascripts/ace/ace.js").then(() => {
       window.ace.require(["ace/ace"], (loadedAce) => {
         loadedAce.config.set("loadWorkerFromBlob", false);
@@ -153,13 +156,13 @@ export default Component.extend({
         this._darkModeListener.addListener(this.setAceTheme);
       });
     });
-  },
+  }
 
   willDestroyElement() {
     if (this._darkModeListener) {
       this._darkModeListener.removeListener(this.setAceTheme);
     }
-  },
+  }
 
   @bind
   setAceTheme() {
@@ -170,7 +173,7 @@ export default Component.extend({
     this._editor.setTheme(
       `ace/theme/${schemeType === "dark" ? "chaos" : "chrome"}`
     );
-  },
+  }
 
   warnSCSSDeprecations() {
     if (
@@ -197,21 +200,20 @@ export default Component.extend({
 
     this._editor.getSession().setAnnotations(warnings);
 
-    this.setWarning(
+    this.setWarning?.(
       warnings.length
         ? I18n.t("admin.customize.theme.scss_color_variables_warning")
         : false
     );
-  },
+  }
 
-  actions: {
+  @action
-    focus() {
+  focus() {
-      if (this._editor) {
+    if (this._editor) {
-        this._editor.focus();
+      this._editor.focus();
-        this._editor.navigateFileEnd();
+      this._editor.navigateFileEnd();
-      }
+    }
-    },
+  }
-  },
 
   _overridePlaceholder(loadedAce) {
     const originalPlaceholderSetter =
@@ -239,5 +241,5 @@ export default Component.extend({
 
       this.$updatePlaceholder();
     };
-  },
+  }
-});
+}

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

@@ -1,28 +1,26 @@
-import { observes, on } from "discourse-common/utils/decorators";
+import { classNames } from "@ember-decorators/component";
+import { observes, on } from "@ember-decorators/object";
 import Component from "@ember/component";
 import I18n from "I18n";
 import discourseDebounce from "discourse-common/lib/debounce";
 import { scheduleOnce } from "@ember/runloop";
 
-export default Component.extend({
+@classNames("admin-backups-logs")
-  classNames: ["admin-backups-logs"],
+export default class AdminBackupsLogs extends Component {
-  showLoadingSpinner: false,
+  showLoadingSpinner = false;
-  hasFormattedLogs: false,
+  hasFormattedLogs = false;
-  noLogsMessage: I18n.t("admin.backups.logs.none"),
+  noLogsMessage = I18n.t("admin.backups.logs.none");
-
+  formattedLogs = "";
-  init() {
+  index = 0;
-    this._super(...arguments);
-    this._reset();
-  },
 
   _reset() {
     this.setProperties({ formattedLogs: "", index: 0 });
-  },
+  }
 
   _scrollDown() {
     const div = this.element;
     div.scrollTop = div.scrollHeight;
-  },
+  }
 
   @on("init")
   @observes("logs.[]")
@@ -31,7 +29,7 @@ export default Component.extend({
       this._reset(); // reset the cached logs whenever the model is reset
       this.renderLogs();
     }
-  },
+  }
 
   _updateFormattedLogsFunc() {
     const logs = this.logs;
@@ -55,13 +53,13 @@ export default Component.extend({
     this.renderLogs();
 
     scheduleOnce("afterRender", this, this._scrollDown);
-  },
+  }
 
   @on("init")
   @observes("logs.[]")
   _updateFormattedLogs() {
     discourseDebounce(this, this._updateFormattedLogsFunc, 150);
-  },
+  }
 
   renderLogs() {
     const formattedLogs = this.formattedLogs;
@@ -76,5 +74,5 @@ export default Component.extend({
     } else {
       this.set("showLoadingSpinner", false);
     }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-editable-field.js

@@ -1,28 +1,22 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
 import { action } from "@ember/object";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class AdminEditableField extends Component {
-
+  buffer = "";
-  buffer: "",
+  editing = false;
-  editing: false,
-
-  init() {
-    this._super(...arguments);
-    this.set("editing", false);
-  },
 
   @action
   edit(event) {
     event?.preventDefault();
     this.set("buffer", this.value);
     this.toggleProperty("editing");
-  },
+  }
 
-  actions: {
+  @action
-    save() {
+  save() {
-      // Action has to toggle 'editing' property.
+    // Action has to toggle 'editing' property.
-      this.action(this.buffer);
+    this.action(this.buffer);
-    },
+  }
-  },
+}
-});

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

@@ -1,4 +1,5 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  classNames: ["row"],
+@classNames("row")
-});
+export default class AdminFormRow extends Component {}

app/assets/javascripts/admin/addon/components/admin-graph.js

@@ -1,9 +1,10 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
 import loadScript from "discourse/lib/load-script";
 
-export default Component.extend({
+@tagName("canvas")
-  tagName: "canvas",
+export default class AdminGraph extends Component {
-  type: "line",
+  type = "line";
 
   refreshChart() {
     const ctx = this.element.getContext("2d");
@@ -49,11 +50,11 @@ export default Component.extend({
     };
 
     this._chart = new window.Chart(ctx, config);
-  },
+  }
 
   didInsertElement() {
     loadScript("/javascripts/Chart.min.js").then(() =>
       this.refreshChart.apply(this)
     );
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-nav.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "",
+@tagName("")
-});
+export default class AdminNav extends Component {}

app/assets/javascripts/admin/addon/components/admin-penalty-history.js

@@ -1,16 +1,16 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@classNames("penalty-history")
-  classNames: ["penalty-history"],
+export default class AdminPenaltyHistory extends Component {
-
   @discourseComputed("user.penalty_counts.suspended")
   suspendedCountClass(count) {
     if (count > 0) {
       return "danger";
     }
     return "";
-  },
+  }
 
   @discourseComputed("user.penalty_counts.silenced")
   silencedCountClass(count) {
@@ -18,5 +18,5 @@ export default Component.extend({
       return "danger";
     }
     return "";
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-penalty-post-action.js

@@ -1,5 +1,6 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
 import { equal } from "@ember/object/computed";
+import Component from "@ember/component";
 import discourseComputed, {
   afterRender,
 } from "discourse-common/utils/decorators";
@@ -7,30 +8,28 @@ import I18n from "I18n";
 
 const ACTIONS = ["delete", "delete_replies", "edit", "none"];
 
-export default Component.extend({
+export default class AdminPenaltyPostAction extends Component {
-  postId: null,
+  postId = null;
-  postAction: null,
+  postAction = null;
-  postEdit: null,
+  postEdit = null;
 
+  @equal("postAction", "edit") editing;
   @discourseComputed
   penaltyActions() {
     return ACTIONS.map((id) => {
       return { id, name: I18n.t(`admin.user.penalty_post_${id}`) };
     });
-  },
+  }
 
-  editing: equal("postAction", "edit"),
+  @action
+  penaltyChanged(postAction) {
+    this.set("postAction", postAction);
 
-  actions: {
+    // If we switch to edit mode, jump to the edit textarea
-    penaltyChanged(postAction) {
+    if (postAction === "edit") {
-      this.set("postAction", postAction);
+      this._focusEditTextarea();
-
+    }
-      // If we switch to edit mode, jump to the edit textarea
+  }
-      if (postAction === "edit") {
-        this._focusEditTextarea();
-      }
-    },
-  },
 
   @afterRender
   _focusEditTextarea() {
@@ -38,5 +37,5 @@ export default Component.extend({
     const body = elem.closest(".modal-body");
     body.scrollTo(0, body.clientHeight);
     elem.querySelector(".post-editor").focus();
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-penalty-reason.js

@@ -1,43 +1,46 @@
+import { tagName } from "@ember-decorators/component";
+import { equal } from "@ember/object/computed";
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { equal } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
 
 const CUSTOM_REASON_KEY = "custom";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class AdminPenaltyReason extends Component {
-  selectedReason: CUSTOM_REASON_KEY,
+  selectedReason = CUSTOM_REASON_KEY;
-  customReason: "",
+  customReason = "";
-  reasonKeys: [
+
+  reasonKeys = [
     "not_listening_to_staff",
     "consuming_staff_time",
     "combative",
     "in_wrong_place",
     "no_constructive_purpose",
     CUSTOM_REASON_KEY,
-  ],
+  ];
-  isCustomReason: equal("selectedReason", CUSTOM_REASON_KEY),
+
+  @equal("selectedReason", CUSTOM_REASON_KEY) isCustomReason;
 
   @discourseComputed("reasonKeys")
   reasons(keys) {
     return keys.map((key) => {
       return { id: key, name: I18n.t(`admin.user.suspend_reasons.${key}`) };
     });
-  },
+  }
 
   @action
   setSelectedReason(value) {
     this.set("selectedReason", value);
     this.setReason();
-  },
+  }
 
   @action
   setCustomReason(value) {
     this.set("customReason", value);
     this.setReason();
-  },
+  }
 
   setReason() {
     if (this.isCustomReason) {
@@ -48,5 +51,5 @@ export default Component.extend({
         I18n.t(`admin.user.suspend_reasons.${this.selectedReason}`)
       );
     }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-penalty-similar-users.js

@@ -1,10 +1,10 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class AdminPenaltySimilarUsers extends Component {
-
   @discourseComputed("penaltyType")
   penaltyField(penaltyType) {
     if (penaltyType === "suspend") {
@@ -12,7 +12,7 @@ export default Component.extend({
     } else if (penaltyType === "silence") {
       return "can_be_silenced";
     }
-  },
+  }
 
   @action
   selectUserId(userId, event) {
@@ -25,5 +25,5 @@ export default Component.extend({
     } else {
       this.selectedUserIds.removeObject(userId);
     }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-chart.js

@@ -1,3 +1,4 @@
+import { classNames } from "@ember-decorators/component";
 import Report from "admin/models/report";
 import Component from "@ember/component";
 import discourseDebounce from "discourse-common/lib/debounce";
@@ -7,31 +8,31 @@ import { number } from "discourse/lib/formatter";
 import { schedule } from "@ember/runloop";
 import { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@classNames("admin-report-chart")
-  classNames: ["admin-report-chart"],
+export default class AdminReportChart extends Component {
-  limit: 8,
+  limit = 8;
-  total: 0,
+  total = 0;
-  options: null,
+  options = null;
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     window.addEventListener("resize", this._resizeHandler);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     window.removeEventListener("resize", this._resizeHandler);
 
     this._resetChart();
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     discourseDebounce(this, this._scheduleChartRendering, 100);
-  },
+  }
 
   _scheduleChartRendering() {
     schedule("afterRender", () => {
@@ -40,7 +41,7 @@ export default Component.extend({
         this.element && this.element.querySelector(".chart-canvas")
       );
     });
-  },
+  }
 
   _renderChart(model, chartCanvas) {
     if (!chartCanvas) {
@@ -99,7 +100,7 @@ export default Component.extend({
         this._buildChartConfig(data, this.options)
       );
     });
-  },
+  }
 
   _buildChartConfig(data, options) {
     return {
@@ -161,21 +162,21 @@ export default Component.extend({
         },
       },
     };
-  },
+  }
 
   _resetChart() {
     if (this._chart) {
       this._chart.destroy();
       this._chart = null;
     }
-  },
+  }
 
   _applyChartGrouping(model, data, options) {
     return Report.collapse(model, data, options.chartGrouping);
-  },
+  }
 
   @bind
   _resizeHandler() {
     discourseDebounce(this, this._scheduleChartRendering, 500);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-counters.js

@@ -1,6 +1,6 @@
+import { attributeBindings, classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
-  classNames: ["admin-report-counters"],
 
-  attributeBindings: ["model.description:title"],
+@classNames("admin-report-counters")
-});
+@attributeBindings("model.description:title")
+export default class AdminReportCounters extends Component {}

app/assets/javascripts/admin/addon/components/admin-report-counts.js

@@ -1,11 +1,12 @@
-import Component from "@ember/component";
+import { classNameBindings, tagName } from "@ember-decorators/component";
 import { match } from "@ember/object/computed";
-export default Component.extend({
+import Component from "@ember/component";
-  allTime: true,
+
-  tagName: "tr",
+@tagName("tr")
-  reverseColors: match(
+@classNameBindings("reverseColors")
-    "report.type",
+export default class AdminReportCounts extends Component {
-    /^(time_to_first_response|topics_with_no_response)$/
+  allTime = true;
-  ),
+
-  classNameBindings: ["reverseColors"],
+  @match("report.type", /^(time_to_first_response|topics_with_no_response)$/)
-});
+  reverseColors;
+}

app/assets/javascripts/admin/addon/components/admin-report-inline-table.js

@@ -1,4 +1,5 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  classNames: ["admin-report-inline-table"],
+@classNames("admin-report-inline-table")
-});
+export default class AdminReportInlineTable extends Component {}

app/assets/javascripts/admin/addon/components/admin-report-per-day-counts.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "tr",
+@tagName("tr")
-});
+export default class AdminReportPerDayCounts extends Component {}

app/assets/javascripts/admin/addon/components/admin-report-stacked-chart.js

@@ -1,3 +1,4 @@
+import { classNames } from "@ember-decorators/component";
 import Report from "admin/models/report";
 import Component from "@ember/component";
 import discourseDebounce from "discourse-common/lib/debounce";
@@ -7,32 +8,31 @@ import { number } from "discourse/lib/formatter";
 import { schedule } from "@ember/runloop";
 import { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@classNames("admin-report-chart", "admin-report-stacked-chart")
-  classNames: ["admin-report-chart", "admin-report-stacked-chart"],
+export default class AdminReportStackedChart extends Component {
-
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     window.addEventListener("resize", this._resizeHandler);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     window.removeEventListener("resize", this._resizeHandler);
     this._resetChart();
-  },
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     discourseDebounce(this, this._scheduleChartRendering, 100);
-  },
+  }
 
   @bind
   _resizeHandler() {
     discourseDebounce(this, this._scheduleChartRendering, 500);
-  },
+  }
 
   _scheduleChartRendering() {
     schedule("afterRender", () => {
@@ -45,7 +45,7 @@ export default Component.extend({
         this.element.querySelector(".chart-canvas")
       );
     });
-  },
+  }
 
   _renderChart(model, chartCanvas) {
     if (!chartCanvas) {
@@ -79,7 +79,7 @@ export default Component.extend({
 
       this._chart = new window.Chart(context, this._buildChartConfig(data));
     });
-  },
+  }
 
   _buildChartConfig(data) {
     return {
@@ -150,10 +150,10 @@ export default Component.extend({
         },
       },
     };
-  },
+  }
 
   _resetChart() {
     this._chart?.destroy();
     this._chart = null;
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-storage-stats.js

@@ -1,43 +1,45 @@
+import { classNames } from "@ember-decorators/component";
+import { alias } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
-import { alias } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { setting } from "discourse/lib/computed";
 
-export default Component.extend({
+@classNames("admin-report-storage-stats")
-  classNames: ["admin-report-storage-stats"],
+export default class AdminReportStorageStats extends Component {
+  @setting("backup_location") backupLocation;
 
-  backupLocation: setting("backup_location"),
+  @alias("model.data.backups") backupStats;
-  backupStats: alias("model.data.backups"),
+
-  uploadStats: alias("model.data.uploads"),
+  @alias("model.data.uploads") uploadStats;
 
   @discourseComputed("backupStats")
   showBackupStats(stats) {
     return stats && this.currentUser.admin;
-  },
+  }
 
   @discourseComputed("backupLocation")
   backupLocationName(backupLocation) {
     return I18n.t(`admin.backups.location.${backupLocation}`);
-  },
+  }
 
   @discourseComputed("backupStats.used_bytes")
   usedBackupSpace(bytes) {
     return I18n.toHumanSize(bytes);
-  },
+  }
 
   @discourseComputed("backupStats.free_bytes")
   freeBackupSpace(bytes) {
     return I18n.toHumanSize(bytes);
-  },
+  }
 
   @discourseComputed("uploadStats.used_bytes")
   usedUploadSpace(bytes) {
     return I18n.toHumanSize(bytes);
-  },
+  }
 
   @discourseComputed("uploadStats.free_bytes")
   freeUploadSpace(bytes) {
     return I18n.toHumanSize(bytes);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-table-cell.js

@@ -1,21 +1,27 @@
-import Component from "@ember/component";
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
 import { alias } from "@ember/object/computed";
+import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@tagName("td")
-  tagName: "td",
+@classNames("admin-report-table-cell")
-  classNames: ["admin-report-table-cell"],
+@classNameBindings("type", "property")
-  classNameBindings: ["type", "property"],
+@attributeBindings("value:title")
-  attributeBindings: ["value:title"],
+export default class AdminReportTableCell extends Component {
-  options: null,
+  options = null;
+
+  @alias("label.type") type;
+  @alias("label.mainProperty") property;
+  @alias("computedLabel.formattedValue") formattedValue;
+  @alias("computedLabel.value") value;
 
   @discourseComputed("label", "data", "options")
   computedLabel(label, data, options) {
     return label.compute(data, options || {});
-  },
+  }
-
+}
-  type: alias("label.type"),
-  property: alias("label.mainProperty"),
-  formattedValue: alias("computedLabel.formattedValue"),
-  value: alias("computedLabel.value"),
-});

app/assets/javascripts/admin/addon/components/admin-report-table-header.js

@@ -1,19 +1,24 @@
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+  tagName,
+} from "@ember-decorators/component";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@tagName("th")
-  tagName: "th",
+@classNames("admin-report-table-header")
-  classNames: ["admin-report-table-header"],
+@classNameBindings("label.mainProperty", "label.type", "isCurrentSort")
-  classNameBindings: ["label.mainProperty", "label.type", "isCurrentSort"],
+@attributeBindings("label.title:title")
-  attributeBindings: ["label.title:title"],
+export default class AdminReportTableHeader extends Component {
-
   @discourseComputed("currentSortLabel.sortProperty", "label.sortProperty")
   isCurrentSort(currentSortField, labelSortField) {
     return currentSortField === labelSortField;
-  },
+  }
 
   @discourseComputed("currentSortDirection")
   sortIcon(currentSortDirection) {
     return currentSortDirection === 1 ? "caret-up" : "caret-down";
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-table-row.js

@@ -1,6 +1,8 @@
+import { classNames, tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "tr",
+@tagName("tr")
-  classNames: ["admin-report-table-row"],
+@classNames("admin-report-table-row")
-  options: null,
+export default class AdminReportTableRow extends Component {
-});
+  options = null;
+}

app/assets/javascripts/admin/addon/components/admin-report-table.js

@@ -1,22 +1,26 @@
-import Component from "@ember/component";
+import { action } from "@ember/object";
+import { classNameBindings, classNames } from "@ember-decorators/component";
 import { alias } from "@ember/object/computed";
+import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import { makeArray } from "discourse-common/lib/helpers";
 
 const PAGES_LIMIT = 8;
 
-export default Component.extend({
+@classNameBindings("sortable", "twoColumns")
-  classNameBindings: ["sortable", "twoColumns"],
+@classNames("admin-report-table")
-  classNames: ["admin-report-table"],
+export default class AdminReportTable extends Component {
-  sortable: false,
+  sortable = false;
-  sortDirection: 1,
+  sortDirection = 1;
-  perPage: alias("options.perPage"),
+
-  page: 0,
+  @alias("options.perPage") perPage;
+
+  page = 0;
 
   @discourseComputed("model.computedLabels.length")
   twoColumns(labelsLength) {
     return labelsLength === 2;
-  },
+  }
 
   @discourseComputed(
     "totalsForSample",
@@ -31,12 +35,12 @@ export default Component.extend({
       .reduce((s, v) => s + v, 0);
 
     return sum >= 1 && total && datesFiltering;
-  },
+  }
 
   @discourseComputed("model.total", "options.total", "twoColumns")
   showTotal(reportTotal, total, twoColumns) {
     return reportTotal && total && twoColumns;
-  },
+  }
 
   @discourseComputed(
     "model.{average,data}",
@@ -50,17 +54,17 @@ export default Component.extend({
       sampleTotalValue &&
       hasTwoColumns
     );
-  },
+  }
 
   @discourseComputed("totalsForSample.1.value", "model.data.length")
   averageForSample(totals, count) {
     return (totals / count).toFixed(0);
-  },
+  }
 
   @discourseComputed("model.data.length")
   showSortingUI(dataLength) {
     return dataLength >= 5;
-  },
+  }
 
   @discourseComputed("totalsForSampleRow", "model.computedLabels")
   totalsForSample(row, labels) {
@@ -70,7 +74,7 @@ export default Component.extend({
       computedLabel.property = label.mainProperty;
       return computedLabel;
     });
-  },
+  }
 
   @discourseComputed("model.data", "model.computedLabels")
   totalsForSampleRow(rows, labels) {
@@ -98,7 +102,7 @@ export default Component.extend({
     });
 
     return totalsRow;
-  },
+  }
 
   @discourseComputed("sortLabel", "sortDirection", "model.data.[]")
   sortedData(sortLabel, sortDirection, data) {
@@ -118,7 +122,7 @@ export default Component.extend({
     }
 
     return data;
-  },
+  }
 
   @discourseComputed("sortedData.[]", "perPage", "page")
   paginatedData(data, perPage, page) {
@@ -128,7 +132,7 @@ export default Component.extend({
     }
 
     return data;
-  },
+  }
 
   @discourseComputed("model.data", "perPage", "page")
   pages(data, perPage, page) {
@@ -156,19 +160,19 @@ export default Component.extend({
     }
 
     return pages;
-  },
+  }
 
-  actions: {
+  @action
-    changePage(page) {
+  changePage(page) {
-      this.set("page", page);
+    this.set("page", page);
-    },
+  }
 
-    sortByLabel(label) {
+  @action
-      if (this.sortLabel === label) {
+  sortByLabel(label) {
-        this.set("sortDirection", this.sortDirection === 1 ? -1 : 1);
+    if (this.sortLabel === label) {
-      } else {
+      this.set("sortDirection", this.sortDirection === 1 ? -1 : 1);
-        this.set("sortLabel", label);
+    } else {
-      }
+      this.set("sortLabel", label);
-    },
+    }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-report-trust-level-counts.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "tr",
+@tagName("tr")
-});
+export default class AdminReportTrustLevelCounts extends Component {}

app/assets/javascripts/admin/addon/components/admin-report.js

@@ -1,6 +1,7 @@
+import { classNameBindings, classNames } from "@ember-decorators/component";
+import { alias, and, equal, notEmpty, or } from "@ember/object/computed";
 import EmberObject, { action, computed } from "@ember/object";
 import Report, { DAILY_LIMIT_DAYS, SCHEMA_VERSION } from "admin/models/report";
-import { alias, and, equal, notEmpty, or } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import ReportLoader from "discourse/lib/reports-loader";
@@ -21,51 +22,58 @@ const TABLE_OPTIONS = {
 
 const CHART_OPTIONS = {};
 
-export default Component.extend({
+@classNameBindings(
-  classNameBindings: [
+  "isHidden:hidden",
-    "isHidden:hidden",
+  "isHidden::is-visible",
-    "isHidden::is-visible",
+  "isEnabled",
-    "isEnabled",
+  "isLoading",
-    "isLoading",
+  "dasherizedDataSourceName"
-    "dasherizedDataSourceName",
+)
-  ],
+@classNames("admin-report")
-  classNames: ["admin-report"],
+export default class AdminReport extends Component {
-  isEnabled: true,
+  isEnabled = true;
-  disabledLabel: I18n.t("admin.dashboard.disabled"),
+  disabledLabel = I18n.t("admin.dashboard.disabled");
-  isLoading: false,
+  isLoading = false;
-  rateLimitationString: null,
+  rateLimitationString = null;
-  dataSourceName: null,
+  dataSourceName = null;
-  report: null,
+  report = null;
-  model: null,
+  model = null;
-  reportOptions: null,
+  reportOptions = null;
-  forcedModes: null,
+  forcedModes = null;
-  showAllReportsLink: false,
+  showAllReportsLink = false;
-  filters: null,
+  filters = null;
-  showTrend: false,
+  showTrend = false;
-  showHeader: true,
+  showHeader = true;
-  showTitle: true,
+  showTitle = true;
-  showFilteringUI: false,
+  showFilteringUI = false;
-  showDatesOptions: alias("model.dates_filtering"),
-  showRefresh: or("showDatesOptions", "model.available_filters.length"),
-  shouldDisplayTrend: and("showTrend", "model.prev_period"),
-  endDate: null,
-  startDate: null,
 
-  init() {
+  @alias("model.dates_filtering") showDatesOptions;
-    this._super(...arguments);
 
-    this._reports = [];
+  @or("showDatesOptions", "model.available_filters.length") showRefresh;
-  },
 
-  isHidden: computed("siteSettings.dashboard_hidden_reports", function () {
+  @and("showTrend", "model.prev_period") shouldDisplayTrend;
+
+  endDate = null;
+  startDate = null;
+
+  @or("showTimeoutError", "showExceptionError", "showNotFoundError") showError;
+  @equal("model.error", "not_found") showNotFoundError;
+  @equal("model.error", "timeout") showTimeoutError;
+  @equal("model.error", "exception") showExceptionError;
+  @notEmpty("model.data") hasData;
+
+  _reports = [];
+
+  @computed("siteSettings.dashboard_hidden_reports")
+  get isHidden() {
     return (this.siteSettings.dashboard_hidden_reports || "")
       .split("|")
       .filter(Boolean)
       .includes(this.dataSourceName);
-  }),
+  }
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     let startDate = moment();
     if (this.filters && isPresent(this.filters.startDate)) {
@@ -88,42 +96,35 @@ export default Component.extend({
     } else if (this.dataSourceName) {
       this._fetchReport();
     }
-  },
+  }
-
-  showError: or("showTimeoutError", "showExceptionError", "showNotFoundError"),
-  showNotFoundError: equal("model.error", "not_found"),
-  showTimeoutError: equal("model.error", "timeout"),
-  showExceptionError: equal("model.error", "exception"),
-
-  hasData: notEmpty("model.data"),
 
   @discourseComputed("dataSourceName", "model.type")
   dasherizedDataSourceName(dataSourceName, type) {
     return (dataSourceName || type || "undefined").replace(/_/g, "-");
-  },
+  }
 
   @discourseComputed("dataSourceName", "model.type")
   dataSource(dataSourceName, type) {
     dataSourceName = dataSourceName || type;
     return `/admin/reports/${dataSourceName}`;
-  },
+  }
 
   @discourseComputed("displayedModes.length")
   showModes(displayedModesLength) {
     return displayedModesLength > 1;
-  },
+  }
 
   @discourseComputed("currentMode")
   isChartMode(currentMode) {
     return currentMode === "chart";
-  },
+  }
 
   @action
   changeGrouping(grouping) {
     this.send("refreshReport", {
       chartGrouping: grouping,
     });
-  },
+  }
 
   @discourseComputed("currentMode", "model.modes", "forcedModes")
   displayedModes(currentMode, reportModes, forcedModes) {
@@ -139,12 +140,12 @@ export default Component.extend({
         icon: mode === "table" ? "table" : "signal",
       };
     });
-  },
+  }
 
   @discourseComputed("currentMode")
   modeComponent(currentMode) {
     return `admin-report-${currentMode.replace(/_/g, "-")}`;
-  },
+  }
 
   @discourseComputed(
     "dataSourceName",
@@ -178,7 +179,7 @@ export default Component.extend({
       .join(":");
 
     return reportKey;
-  },
+  }
 
   @discourseComputed("options.chartGrouping", "model.chartData.length")
   chartGroupings(grouping, count) {
@@ -192,7 +193,7 @@ export default Component.extend({
         class: `chart-grouping ${grouping === id ? "active" : "inactive"}`,
       };
     });
-  },
+  }
 
   @action
   onChangeDateRange(range) {
@@ -200,7 +201,7 @@ export default Component.extend({
       startDate: range.from,
       endDate: range.to,
     });
-  },
+  }
 
   @action
   applyFilter(id, value) {
@@ -215,7 +216,7 @@ export default Component.extend({
     this.send("refreshReport", {
       filters: customFilters,
     });
-  },
+  }
 
   @action
   refreshReport(options = {}) {
@@ -238,7 +239,7 @@ export default Component.extend({
           ? this.get("filters.customFilters")
           : options.filters,
     });
-  },
+  }
 
   @action
   exportCsv() {
@@ -254,7 +255,7 @@ export default Component.extend({
     }
 
     exportEntity("report", args).then(outputExportResult);
-  },
+  }
 
   @action
   onChangeMode(mode) {
@@ -263,7 +264,7 @@ export default Component.extend({
     this.send("refreshReport", {
       chartGrouping: null,
     });
-  },
+  }
 
   _computeReport() {
     if (!this.element || this.isDestroying || this.isDestroyed) {
@@ -306,7 +307,7 @@ export default Component.extend({
     }
 
     this._renderReport(report, this.forcedModes, this.currentMode);
-  },
+  }
 
   _renderReport(report, forcedModes, currentMode) {
     const modes = forcedModes ? forcedModes.split(",") : report.modes;
@@ -317,11 +318,9 @@ export default Component.extend({
       currentMode,
       options: this._buildOptions(currentMode, report),
     });
-  },
+  }
 
   _fetchReport() {
-    this._super(...arguments);
-
     this.setProperties({ isLoading: true, rateLimitationString: null });
 
     next(() => {
@@ -349,7 +348,7 @@ export default Component.extend({
 
       ReportLoader.enqueue(this.dataSourceName, payload.data, callback);
     });
-  },
+  }
 
   _buildPayload(facets) {
     let payload = { data: { facets } };
@@ -375,7 +374,7 @@ export default Component.extend({
     }
 
     return payload;
-  },
+  }
 
   _buildOptions(mode, report) {
     if (mode === "table") {
@@ -393,7 +392,7 @@ export default Component.extend({
         })
       );
     }
-  },
+  }
 
   _loadReport(jsonReport) {
     Report.fillMissingDates(jsonReport, { filledField: "chartData" });
@@ -423,5 +422,5 @@ export default Component.extend({
     }
 
     return Report.create(jsonReport);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-theme-editor.hbs

@@ -44,7 +44,7 @@
             @checked={{this.onlyOverridden}}
             {{on
               "click"
-              (action "onlyOverriddenChanged" value="target.checked")
+              (action this.onlyOverriddenChanged value="target.checked")
             }}
           />
           {{i18n "admin.customize.theme.hide_unused_fields"}}
@@ -125,6 +125,6 @@
   @autofocus="true"
   @placeholder={{this.placeholder}}
   @htmlPlaceholder={{true}}
-  @save={{action "save"}}
+  @save={{this.save}}
   @setWarning={{action "setWarning"}}
 />

app/assets/javascripts/admin/addon/components/admin-theme-editor.js

@@ -3,11 +3,13 @@ import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { isDocumentRTL } from "discourse/lib/text-direction";
-import { action } from "@ember/object";
+import { action, computed } from "@ember/object";
 import { next } from "@ember/runloop";
 
-export default Component.extend({
+export default class AdminThemeEditor extends Component {
-  warning: null,
+  warning = null;
+
+  @fmt("fieldName", "currentTargetName", "%@|%@") editorId;
 
   @discourseComputed("theme.targets", "onlyOverridden", "showAdvanced")
   visibleTargets(targets, onlyOverridden, showAdvanced) {
@@ -20,7 +22,7 @@ export default Component.extend({
       }
       return target.edited;
     });
-  },
+  }
 
   @discourseComputed("currentTargetName", "onlyOverridden", "theme.fields")
   visibleFields(targetName, onlyOverridden, fields) {
@@ -29,7 +31,7 @@ export default Component.extend({
       fields = fields.filter((field) => field.edited);
     }
     return fields;
-  },
+  }
 
   @discourseComputed("currentTargetName", "fieldName")
   activeSectionMode(targetName, fieldName) {
@@ -43,7 +45,7 @@ export default Component.extend({
       return "scss";
     }
     return fieldName && fieldName.includes("scss") ? "scss" : "html";
-  },
+  }
 
   @discourseComputed("currentTargetName", "fieldName")
   placeholder(targetName, fieldName) {
@@ -58,30 +60,27 @@ export default Component.extend({
       });
     }
     return "";
-  },
+  }
 
-  @discourseComputed("fieldName", "currentTargetName", "theme")
+  @computed("fieldName", "currentTargetName", "theme")
-  activeSection: {
+  get activeSection() {
-    get(fieldName, target, model) {
+    return this.theme.getField(this.currentTargetName, this.fieldName);
-      return model.getField(target, fieldName);
+  }
-    },
-    set(value, fieldName, target, model) {
-      model.setField(target, fieldName, value);
-      return value;
-    },
-  },
 
-  editorId: fmt("fieldName", "currentTargetName", "%@|%@"),
+  set activeSection(value) {
+    this.theme.setField(this.currentTargetName, this.fieldName, value);
+    return value;
+  }
 
   @discourseComputed("maximized")
   maximizeIcon(maximized) {
     return maximized ? "discourse-compress" : "discourse-expand";
-  },
+  }
 
   @discourseComputed("currentTargetName", "theme.targets")
   showAddField(currentTargetName, targets) {
     return targets.find((t) => t.name === currentTargetName).customNames;
-  },
+  }
 
   @discourseComputed(
     "currentTargetName",
@@ -90,52 +89,45 @@ export default Component.extend({
   )
   error(target, fieldName) {
     return this.theme.getError(target, fieldName);
-  },
+  }
 
   @action
   toggleShowAdvanced(event) {
     event?.preventDefault();
     this.toggleProperty("showAdvanced");
-  },
+  }
 
   @action
   toggleAddField(event) {
     event?.preventDefault();
     this.toggleProperty("addingField");
-  },
+  }
 
   @action
   toggleMaximize(event) {
     event?.preventDefault();
     this.toggleProperty("maximized");
     next(() => this.appEvents.trigger("ace:resize"));
-  },
+  }
 
-  actions: {
+  @action
-    cancelAddField() {
+  cancelAddField() {
-      this.set("addingField", false);
+    this.set("addingField", false);
-    },
+  }
 
-    addField(name) {
+  @action
-      if (!name) {
+  addField(name) {
-        return;
+    if (!name) {
-      }
+      return;
-      name = name.replace(/[^a-zA-Z0-9-_/]/g, "");
+    }
-      this.theme.setField(this.currentTargetName, name, "");
+    name = name.replace(/[^a-zA-Z0-9-_/]/g, "");
-      this.setProperties({ newFieldName: "", addingField: false });
+    this.theme.setField(this.currentTargetName, name, "");
-      this.fieldAdded(this.currentTargetName, name);
+    this.setProperties({ newFieldName: "", addingField: false });
-    },
+    this.fieldAdded(this.currentTargetName, name);
+  }
 
-    onlyOverriddenChanged(value) {
+  @action
-      this.onlyOverriddenChanged(value);
+  setWarning(message) {
-    },
+    this.set("warning", message);
-
+  }
-    save() {
+}
-      this.attrs.save();
-    },
-
-    setWarning(message) {
-      this.set("warning", message);
-    },
-  },
-});

app/assets/javascripts/admin/addon/components/admin-watched-word.js

@@ -1,23 +1,27 @@
-import Component from "@ember/component";
+import { classNames } from "@ember-decorators/component";
+import { inject as service } from "@ember/service";
 import { alias, equal } from "@ember/object/computed";
+import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import { action } from "@ember/object";
 import I18n from "I18n";
-import { inject as service } from "@ember/service";
 
-export default Component.extend({
+@classNames("watched-word")
-  classNames: ["watched-word"],
+export default class AdminWatchedWord extends Component {
-  dialog: service(),
+  @service dialog;
 
-  isReplace: equal("actionKey", "replace"),
+  @equal("actionKey", "replace") isReplace;
-  isTag: equal("actionKey", "tag"),
+
-  isLink: equal("actionKey", "link"),
+  @equal("actionKey", "tag") isTag;
-  isCaseSensitive: alias("word.case_sensitive"),
+
+  @equal("actionKey", "link") isLink;
+
+  @alias("word.case_sensitive") isCaseSensitive;
 
   @discourseComputed("word.replacement")
   tags(replacement) {
     return replacement.split(",");
-  },
+  }
 
   @action
   deleteWord() {
@@ -33,5 +37,5 @@ export default Component.extend({
           })
         );
       });
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/admin-wrapper.js

@@ -1,14 +1,15 @@
 import Component from "@ember/component";
-export default Component.extend({
+
+export default class AdminWrapper extends Component {
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     document.querySelector("html").classList.add("admin-area");
     document.querySelector("body").classList.add("admin-interface");
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
     document.querySelector("html").classList.remove("admin-area");
     document.querySelector("body").classList.remove("admin-interface");
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/cancel-link.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "",
+@tagName("")
-});
+export default class CancelLink extends Component {}

app/assets/javascripts/admin/addon/components/color-input.js

@@ -1,6 +1,7 @@
+import { classNames } from "@ember-decorators/component";
 import { action, computed } from "@ember/object";
 import Component from "@ember/component";
-import { observes } from "discourse-common/utils/decorators";
+import { observes } from "@ember-decorators/object";
 
 /**
   An input field for a color.
@@ -9,20 +10,20 @@ import { observes } from "discourse-common/utils/decorators";
   @param brightnessValue is a number from 0 to 255 representing the brightness of the color. See ColorSchemeColor.
   @params valid is a boolean indicating if the input field is a valid color.
 **/
-export default Component.extend({
+@classNames("color-picker")
-  classNames: ["color-picker"],
+export default class ColorInput extends Component {
+  onlyHex = true;
+  styleSelection = true;
 
-  onlyHex: true,
+  @computed("onlyHex")
-
+  get maxlength() {
-  styleSelection: true,
-
-  maxlength: computed("onlyHex", function () {
     return this.onlyHex ? 6 : null;
-  }),
+  }
 
-  normalizedHexValue: computed("hexValue", function () {
+  @computed("hexValue")
+  get normalizedHexValue() {
     return this.normalize(this.hexValue);
-  }),
+  }
 
   normalize(color) {
     if (this._valid(color)) {
@@ -40,19 +41,19 @@ export default Component.extend({
       }
     }
     return color;
-  },
+  }
 
   @action
   onHexInput(color) {
     if (this.attrs.onChangeColor) {
       this.attrs.onChangeColor(this.normalize(color || ""));
     }
-  },
+  }
 
   @action
   onPickerInput(event) {
     this.set("hexValue", event.target.value.replace("#", ""));
-  },
+  }
 
   @observes("hexValue", "brightnessValue", "valid")
   hexValueChanged() {
@@ -65,9 +66,9 @@ export default Component.extend({
     if (this._valid()) {
       this.element.querySelector(".picker").value = this.normalize(hex);
     }
-  },
+  }
 
   _valid(color = this.hexValue) {
     return /^#?([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/dashboard-new-feature-item.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class DashboardNewFeatureItem extends Component {}

app/assets/javascripts/admin/addon/components/dashboard-new-features.js

@@ -1,18 +1,19 @@
+import { classNameBindings, classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
 import { action, computed } from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 
-export default Component.extend({
+@classNames("section", "dashboard-new-features")
-  newFeatures: null,
+@classNameBindings("hasUnseenFeatures:ordered-first")
-  classNames: ["section", "dashboard-new-features"],
+export default class DashboardNewFeatures extends Component {
-  classNameBindings: ["hasUnseenFeatures:ordered-first"],
+  newFeatures = null;
-  releaseNotesLink: null,
+  releaseNotesLink = null;
 
-  init() {
+  constructor() {
-    this._super(...arguments);
+    super(...arguments);
 
     ajax("/admin/dashboard/new-features.json").then((json) => {
-      if (!this.element || this.isDestroying || this.isDestroyed) {
+      if (this.isDestroying || this.isDestroyed) {
         return;
       }
 
@@ -22,16 +23,17 @@ export default Component.extend({
         releaseNotesLink: json.release_notes_link,
       });
     });
-  },
+  }
 
-  columnCountClass: computed("newFeatures", function () {
+  @computed("newFeatures")
+  get columnCountClass() {
     return this.newFeatures.length > 2 ? "three-or-more-items" : "";
-  }),
+  }
 
   @action
   dismissNewFeatures() {
     ajax("/admin/dashboard/mark-new-features-as-seen.json", {
       type: "PUT",
     }).then(() => this.set("hasUnseenFeatures", false));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/dashboard-problems.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class DashboardProblems extends Component {}

app/assets/javascripts/admin/addon/components/email-styles-editor.hbs

@@ -29,7 +29,7 @@
   @content={{this.editorContents}}
   @mode={{this.currentEditorMode}}
   @editorId={{this.editorId}}
-  @save={{action "save"}}
+  @save={{@save}}
 />
 
 <div class="admin-footer">

app/assets/javascripts/admin/addon/components/email-styles-editor.js

@@ -1,17 +1,19 @@
+import { action, computed } from "@ember/object";
+import { inject as service } from "@ember/service";
+import { reads } from "@ember/object/computed";
 import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
-import { reads } from "@ember/object/computed";
-import { inject as service } from "@ember/service";
 
-export default Component.extend({
+export default class EmailStylesEditor extends Component {
-  dialog: service(),
+  @service dialog;
-  editorId: reads("fieldName"),
+
+  @reads("fieldName") editorId;
 
   @discourseComputed("fieldName")
   currentEditorMode(fieldName) {
     return fieldName === "css" ? "scss" : fieldName;
-  },
+  }
 
   @discourseComputed("fieldName", "styles.html", "styles.css")
   resetDisabled(fieldName) {
@@ -19,36 +21,31 @@ export default Component.extend({
       this.get(`styles.${fieldName}`) ===
       this.get(`styles.default_${fieldName}`)
     );
-  },
+  }
 
-  @discourseComputed("styles", "fieldName")
+  @computed("styles", "fieldName")
-  editorContents: {
+  get editorContents() {
-    get(styles, fieldName) {
+    return this.styles[this.fieldName];
-      return styles[fieldName];
+  }
-    },
-    set(value, styles, fieldName) {
-      styles.setField(fieldName, value);
-      return value;
-    },
-  },
 
-  actions: {
+  set editorContents(value) {
-    reset() {
+    this.styles.setField(this.fieldName, value);
-      this.dialog.yesNoConfirm({
+    return value;
-        message: I18n.t("admin.customize.email_style.reset_confirm", {
+  }
-          fieldName: I18n.t(`admin.customize.email_style.${this.fieldName}`),
+
-        }),
+  @action
-        didConfirm: () => {
+  reset() {
-          this.styles.setField(
+    this.dialog.yesNoConfirm({
-            this.fieldName,
+      message: I18n.t("admin.customize.email_style.reset_confirm", {
-            this.styles.get(`default_${this.fieldName}`)
+        fieldName: I18n.t(`admin.customize.email_style.${this.fieldName}`),
-          );
+      }),
-          this.notifyPropertyChange("editorContents");
+      didConfirm: () => {
-        },
+        this.styles.setField(
-      });
+          this.fieldName,
-    },
+          this.styles.get(`default_${this.fieldName}`)
-    save() {
+        );
-      this.attrs.save();
+        this.notifyPropertyChange("editorContents");
-    },
+      },
-  },
+    });
-});
+  }
+}

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

@@ -1,85 +1,91 @@
+import { action } from "@ember/object";
+import { tagName } from "@ember-decorators/component";
+import { inject as service } from "@ember/service";
+import { or } from "@ember/object/computed";
 import Category from "discourse/models/category";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import discourseComputed from "discourse-common/utils/decorators";
-import { inject as service } from "@ember/service";
 import { isEmpty } from "@ember/utils";
-import { or } from "@ember/object/computed";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Component.extend(bufferedProperty("host"), {
+@tagName("tr")
-  editToggled: false,
+export default class EmbeddableHost extends Component.extend(
-  tagName: "tr",
+  bufferedProperty("host")
-  categoryId: null,
+) {
-  category: null,
+  @service dialog;
-  dialog: service(),
+  editToggled = false;
+  categoryId = null;
+  category = null;
 
-  editing: or("host.isNew", "editToggled"),
+  @or("host.isNew", "editToggled") editing;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
     const host = this.host;
     const categoryId = host.category_id || this.site.uncategorized_category_id;
     const category = Category.findById(categoryId);
 
     host.set("category", category);
-  },
+  }
 
   @discourseComputed("buffered.host", "host.isSaving")
   cantSave(host, isSaving) {
     return isSaving || isEmpty(host);
-  },
+  }
 
-  actions: {
+  @action
-    edit() {
+  edit() {
-      this.set("categoryId", this.get("host.category.id"));
+    this.set("categoryId", this.get("host.category.id"));
-      this.set("editToggled", true);
+    this.set("editToggled", true);
-    },
+  }
 
-    save() {
+  @action
-      if (this.cantSave) {
+  save() {
-        return;
+    if (this.cantSave) {
-      }
+      return;
+    }
 
-      const props = this.buffered.getProperties(
+    const props = this.buffered.getProperties(
-        "host",
+      "host",
-        "allowed_paths",
+      "allowed_paths",
-        "class_name"
+      "class_name"
-      );
+    );
-      props.category_id = this.categoryId;
+    props.category_id = this.categoryId;
 
-      const host = this.host;
+    const host = this.host;
 
-      host
+    host
-        .save(props)
+      .save(props)
-        .then(() => {
+      .then(() => {
-          host.set("category", Category.findById(this.categoryId));
+        host.set("category", Category.findById(this.categoryId));
-          this.set("editToggled", false);
-        })
-        .catch(popupAjaxError);
-    },
-
-    delete() {
-      return this.dialog.confirm({
-        message: I18n.t("admin.embedding.confirm_delete"),
-        didConfirm: () => {
-          return this.host.destroyRecord().then(() => {
-            this.deleteHost(this.host);
-          });
-        },
-      });
-    },
-
-    cancel() {
-      const host = this.host;
-      if (host.get("isNew")) {
-        this.deleteHost(host);
-      } else {
-        this.rollbackBuffer();
         this.set("editToggled", false);
-      }
+      })
-    },
+      .catch(popupAjaxError);
-  },
+  }
-});
+
+  @action
+  delete() {
+    return this.dialog.confirm({
+      message: I18n.t("admin.embedding.confirm_delete"),
+      didConfirm: () => {
+        return this.host.destroyRecord().then(() => {
+          this.deleteHost(this.host);
+        });
+      },
+    });
+  }
+
+  @action
+  cancel() {
+    const host = this.host;
+    if (host.get("isNew")) {
+      this.deleteHost(host);
+    } else {
+      this.rollbackBuffer();
+      this.set("editToggled", false);
+    }
+  }
+}

app/assets/javascripts/admin/addon/components/embedding-setting.js

@@ -1,33 +1,33 @@
+import { classNames } from "@ember-decorators/component";
+import { computed } from "@ember/object";
 import Component from "@ember/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import { dasherize } from "@ember/string";
 
-export default Component.extend({
+@classNames("embed-setting")
-  classNames: ["embed-setting"],
+export default class EmbeddingSetting extends Component {
-
   @discourseComputed("field")
   inputId(field) {
     return dasherize(field);
-  },
+  }
 
   @discourseComputed("field")
   translationKey(field) {
     return `admin.embedding.${field}`;
-  },
+  }
 
   @discourseComputed("type")
   isCheckbox(type) {
     return type === "checkbox";
-  },
+  }
 
-  @discourseComputed("value")
+  @computed("value")
-  checked: {
+  get checked() {
-    get(value) {
+    return !!this.value;
-      return !!value;
+  }
-    },
+
-    set(value) {
+  set(value) {
-      this.set("value", value);
+    this.set("value", value);
-      return value;
+    return value;
-    },
+  }
-  },
+}
-});

app/assets/javascripts/admin/addon/components/emoji-value-list.js

@@ -1,3 +1,4 @@
+import { classNameBindings } from "@ember-decorators/component";
 import Component from "@ember/component";
 import I18n from "I18n";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -6,12 +7,12 @@ import { action, set, setProperties } from "@ember/object";
 import { schedule } from "@ember/runloop";
 import discourseLater from "discourse-common/lib/later";
 
-export default Component.extend({
+@classNameBindings(":value-list", ":emoji-list")
-  classNameBindings: [":value-list", ":emoji-list"],
+export default class EmojiValueList extends Component {
-  values: null,
+  values = null;
-  validationMessage: null,
+  validationMessage = null;
-  emojiPickerIsActive: false,
+  emojiPickerIsActive = false;
-  isEditorFocused: false,
+  isEditorFocused = false;
 
   @discourseComputed("values")
   collection(values) {
@@ -28,14 +29,14 @@ export default Component.extend({
           emojiUrl: emojiUrlFor(value),
         };
       });
-  },
+  }
 
   @action
   closeEmojiPicker() {
     this.collection.setEach("isEditing", false);
     this.set("emojiPickerIsActive", false);
     this.set("isEditorFocused", false);
-  },
+  }
 
   @action
   emojiSelected(code) {
@@ -65,12 +66,12 @@ export default Component.extend({
 
     this.set("emojiPickerIsActive", false);
     this.set("isEditorFocused", false);
-  },
+  }
 
   @discourseComputed("collection")
   showUpDownButtons(collection) {
     return collection.length - 1 ? true : false;
-  },
+  }
 
   _splitValues(values) {
     if (values && values.length) {
@@ -91,7 +92,7 @@ export default Component.extend({
     } else {
       return [];
     }
-  },
+  }
 
   @action
   editValue(index) {
@@ -111,12 +112,12 @@ export default Component.extend({
         }
       }, 100);
     });
-  },
+  }
 
   @action
   removeValue(value) {
     this._removeValue(value);
-  },
+  }
 
   @action
   shift(operation, index) {
@@ -133,7 +134,7 @@ export default Component.extend({
     this.collection.insertAt(futureIndex, shiftedEmoji);
 
     this._saveValues();
-  },
+  }
 
   _validateInput(input) {
     this.set("validationMessage", null);
@@ -147,12 +148,12 @@ export default Component.extend({
     }
 
     return true;
-  },
+  }
 
   _removeValue(value) {
     this.collection.removeObject(value);
     this._saveValues();
-  },
+  }
 
   _replaceValue(index, newValue) {
     const item = this.collection[index];
@@ -161,9 +162,9 @@ export default Component.extend({
     }
     set(item, "value", newValue);
     this._saveValues();
-  },
+  }
 
   _saveValues() {
     this.set("values", this.collection.mapBy("value").join("|"));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/flag-user-lists.js

@@ -1,4 +1,5 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  classNames: ["flag-user-lists"],
+@classNames("flag-user-lists")
-});
+export default class FlagUserLists extends Component {}

app/assets/javascripts/admin/addon/components/flag-user.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class FlagUser extends Component {}

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__editor">
-  <div class="control-group form-templates--quick-insert-field-buttons">
+    <div class="form-templates__quick-insert-field-buttons">
-    <span>
+      <span>
-      {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
+        {{I18n "admin.form_templates.quick_insert_fields.add_new_field"}}
-    </span>
+      </span>
-    {{#each this.quickInsertFields as |field|}}
+      {{#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}}"
+        class="btn-flat btn-icon-text form-templates__validations-modal-button"
-        @icon={{field.icon}}
+        @label="admin.form_templates.validations_modal.button_title"
-        @label="admin.form_templates.quick_insert_fields.{{field.type}}"
+        @icon="check-circle"
-        @action={{this.onInsertField}}
+        @action={{this.showValidationOptionsModal}}
-        @actionParam={{field.type}}
       />
-    {{/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", {
+    showModal("customize-form-template-view", {
-      admin: true,
       model: this.args.template,
       refreshModel: this.args.refreshModel,
     });

app/assets/javascripts/admin/addon/components/highlighted-code.js

@@ -1,11 +1,11 @@
-import { observes, on } from "discourse-common/utils/decorators";
+import { observes, on } from "@ember-decorators/object";
 import Component from "@ember/component";
 import highlightSyntax from "discourse/lib/highlight-syntax";
 
-export default Component.extend({
+export default class HighlightedCode extends Component {
   @on("didInsertElement")
   @observes("code")
   _refresh() {
     highlightSyntax(this.element, this.siteSettings, this.session);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/inline-edit-checkbox.js

@@ -1,15 +1,15 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+@classNames("inline-edit")
-  classNames: ["inline-edit"],
+export default class InlineEditCheckbox extends Component {
-
+  buffer = null;
-  buffer: null,
+  bufferModelId = null;
-  bufferModelId: null,
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
 
     if (this.modelId !== this.bufferModelId) {
       // HACK: The condition above ensures this method is called only when its
@@ -24,21 +24,21 @@ export default Component.extend({
         bufferModelId: this.modelId,
       });
     }
-  },
+  }
 
   @discourseComputed("checked", "buffer")
   changed(checked, buffer) {
     return !!checked !== !!buffer;
-  },
+  }
 
   @action
   apply() {
     this.set("checked", this.buffer);
     this.action();
-  },
+  }
 
   @action
   cancel() {
     this.set("buffer", this.checked);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/install-theme-item.js

@@ -1,4 +1,5 @@
+import { classNames } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  classNames: ["install-theme-item"],
+@classNames("install-theme-item")
-});
+export default class InstallThemeItem extends Component {}

app/assets/javascripts/admin/addon/components/ip-lookup.js

@@ -1,3 +1,5 @@
+import { classNames } from "@ember-decorators/component";
+import { inject as service } from "@ember/service";
 import AdminUser from "admin/models/admin-user";
 import Component from "@ember/component";
 import EmberObject, { action } from "@ember/object";
@@ -6,12 +8,11 @@ import { ajax } from "discourse/lib/ajax";
 import copyText from "discourse/lib/copy-text";
 import discourseComputed from "discourse-common/utils/decorators";
 import discourseLater from "discourse-common/lib/later";
-import { inject as service } from "@ember/service";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
-export default Component.extend({
+@classNames("ip-lookup")
-  classNames: ["ip-lookup"],
+export default class IpLookup extends Component {
-  dialog: service(),
+  @service dialog;
 
   @discourseComputed("other_accounts.length", "totalOthersWithSameIP")
   otherAccountsToDelete(otherAccountsLength, totalOthersWithSameIP) {
@@ -19,101 +20,100 @@ export default Component.extend({
     const total = Math.min(50, totalOthersWithSameIP || 0);
     const visible = Math.min(50, otherAccountsLength || 0);
     return Math.max(visible, total);
-  },
+  }
 
   @action
   hide(event) {
     event?.preventDefault();
     this.set("show", false);
-  },
+  }
 
-  actions: {
+  @action
-    lookup() {
+  lookup() {
-      this.set("show", true);
+    this.set("show", true);
 
-      if (!this.location) {
+    if (!this.location) {
-        ajax("/admin/users/ip-info", {
+      ajax("/admin/users/ip-info", {
-          data: { ip: this.ip },
+        data: { ip: this.ip },
-        }).then((location) =>
+      }).then((location) => this.set("location", EmberObject.create(location)));
-          this.set("location", EmberObject.create(location))
+    }
-        );
-      }
 
-      if (!this.other_accounts) {
+    if (!this.other_accounts) {
-        this.set("otherAccountsLoading", true);
+      this.set("otherAccountsLoading", true);
 
-        const data = {
+      const data = {
-          ip: this.ip,
+        ip: this.ip,
-          exclude: this.userId,
+        exclude: this.userId,
-          order: "trust_level DESC",
+        order: "trust_level DESC",
-        };
+      };
 
-        ajax("/admin/users/total-others-with-same-ip", {
+      ajax("/admin/users/total-others-with-same-ip", {
-          data,
+        data,
-        }).then((result) => this.set("totalOthersWithSameIP", result.total));
+      }).then((result) => this.set("totalOthersWithSameIP", result.total));
 
-        AdminUser.findAll("active", data).then((users) => {
+      AdminUser.findAll("active", data).then((users) => {
-          this.setProperties({
+        this.setProperties({
-            other_accounts: users,
+          other_accounts: users,
-            otherAccountsLoading: false,
+          otherAccountsLoading: false,
-          });
         });
-      }
-    },
-
-    copy() {
-      let text = `IP: ${this.ip}\n`;
-      const location = this.location;
-      if (location) {
-        if (location.hostname) {
-          text += `${I18n.t("ip_lookup.hostname")}: ${location.hostname}\n`;
-        }
-
-        text += I18n.t("ip_lookup.location");
-        if (location.location) {
-          text += `: ${location.location}\n`;
-        } else {
-          text += `: ${I18n.t("ip_lookup.location_not_found")}\n`;
-        }
-
-        if (location.organization) {
-          text += I18n.t("ip_lookup.organisation");
-          text += `: ${location.organization}\n`;
-        }
-      }
-
-      const $copyRange = $('<p id="copy-range"></p>');
-      $copyRange.html(text.trim().replace(/\n/g, "<br>"));
-      $(document.body).append($copyRange);
-      if (copyText(text, $copyRange[0])) {
-        this.set("copied", true);
-        discourseLater(() => this.set("copied", false), 2000);
-      }
-      $copyRange.remove();
-    },
-
-    deleteOtherAccounts() {
-      this.dialog.yesNoConfirm({
-        message: I18n.t("ip_lookup.confirm_delete_other_accounts"),
-        didConfirm: () => {
-          this.setProperties({
-            other_accounts: null,
-            otherAccountsLoading: true,
-            totalOthersWithSameIP: null,
-          });
-
-          ajax("/admin/users/delete-others-with-same-ip.json", {
-            type: "DELETE",
-            data: {
-              ip: this.ip,
-              exclude: this.userId,
-              order: "trust_level DESC",
-            },
-          })
-            .catch(popupAjaxError)
-            .finally(this.send("lookup"));
-        },
       });
-    },
+    }
-  },
+  }
-});
+
+  @action
+  copy() {
+    let text = `IP: ${this.ip}\n`;
+    const location = this.location;
+    if (location) {
+      if (location.hostname) {
+        text += `${I18n.t("ip_lookup.hostname")}: ${location.hostname}\n`;
+      }
+
+      text += I18n.t("ip_lookup.location");
+      if (location.location) {
+        text += `: ${location.location}\n`;
+      } else {
+        text += `: ${I18n.t("ip_lookup.location_not_found")}\n`;
+      }
+
+      if (location.organization) {
+        text += I18n.t("ip_lookup.organisation");
+        text += `: ${location.organization}\n`;
+      }
+    }
+
+    const $copyRange = $('<p id="copy-range"></p>');
+    $copyRange.html(text.trim().replace(/\n/g, "<br>"));
+    $(document.body).append($copyRange);
+    if (copyText(text, $copyRange[0])) {
+      this.set("copied", true);
+      discourseLater(() => this.set("copied", false), 2000);
+    }
+    $copyRange.remove();
+  }
+
+  @action
+  deleteOtherAccounts() {
+    this.dialog.yesNoConfirm({
+      message: I18n.t("ip_lookup.confirm_delete_other_accounts"),
+      didConfirm: () => {
+        this.setProperties({
+          other_accounts: null,
+          otherAccountsLoading: true,
+          totalOthersWithSameIP: null,
+        });
+
+        ajax("/admin/users/delete-others-with-same-ip.json", {
+          type: "DELETE",
+          data: {
+            ip: this.ip,
+            exclude: this.userId,
+            order: "trust_level DESC",
+          },
+        })
+          .catch(popupAjaxError)
+          .finally(this.send("lookup"));
+      },
+    });
+  }
+}

app/assets/javascripts/admin/addon/components/moderation-history-item.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "tr",
+@tagName("tr")
-});
+export default class ModerationHistoryItem extends Component {}

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

@@ -1,3 +1,5 @@
+import { tagName } from "@ember-decorators/component";
+import { inject as service } from "@ember/service";
 import Component from "@ember/component";
 import I18n from "I18n";
 import Permalink from "admin/models/permalink";
@@ -5,16 +7,18 @@ import discourseComputed, { bind } from "discourse-common/utils/decorators";
 import { fmt } from "discourse/lib/computed";
 import { schedule } from "@ember/runloop";
 import { action } from "@ember/object";
-import { inject as service } from "@ember/service";
 
-export default Component.extend({
+@tagName("")
-  tagName: "",
+export default class PermalinkForm extends Component {
-  dialog: service(),
+  @service dialog;
-  formSubmitted: false,
+
-  permalinkType: "topic_id",
+  formSubmitted = false;
-  permalinkTypePlaceholder: fmt("permalinkType", "admin.permalink.%@"),
+  permalinkType = "topic_id";
-  action: null,
+
-  permalinkTypeValue: null,
+  @fmt("permalinkType", "admin.permalink.%@") permalinkTypePlaceholder;
+
+  action = null;
+  permalinkTypeValue = null;
 
   @discourseComputed
   permalinkTypes() {
@@ -25,21 +29,21 @@ export default Component.extend({
       { id: "tag_name", name: I18n.t("admin.permalink.tag_name") },
       { id: "external_url", name: I18n.t("admin.permalink.external_url") },
     ];
-  },
+  }
 
   @bind
   focusPermalink() {
     schedule("afterRender", () =>
       document.querySelector(".permalink-url")?.focus()
     );
-  },
+  }
 
   @action
   submitFormOnEnter(event) {
     if (event.key === "Enter") {
       this.onSubmit();
     }
-  },
+  }
 
   @action
   onSubmit() {
@@ -84,5 +88,5 @@ export default Component.extend({
           }
         );
     }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/report-filters/bool.js

@@ -1,16 +1,16 @@
 import FilterComponent from "admin/components/report-filters/filter";
 import { action } from "@ember/object";
 
-export default FilterComponent.extend({
+export default class Bool extends FilterComponent {
-  checked: false,
+  checked = false;
 
   didReceiveAttrs() {
-    this._super(...arguments);
+    super.didReceiveAttrs(...arguments);
     this.set("checked", !!this.filter.default);
-  },
+  }
 
   @action
   onChange() {
     this.applyFilter(this.filter.id, !this.checked || undefined);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/report-filters/category.js

@@ -1,12 +1,12 @@
+import { readOnly } from "@ember/object/computed";
 import FilterComponent from "admin/components/report-filters/filter";
 import { action } from "@ember/object";
-import { readOnly } from "@ember/object/computed";
 
-export default FilterComponent.extend({
+export default class Category extends FilterComponent {
-  category: readOnly("filter.default"),
+  @readOnly("filter.default") category;
 
   @action
   onChange(categoryId) {
     this.applyFilter(this.filter.id, categoryId || undefined);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/report-filters/filter.js

@@ -1,9 +1,9 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 
-export default Component.extend({
+export default class Filter extends Component {
   @action
   onChange(value) {
     this.applyFilter(this.filter.id, value);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/report-filters/group.js

@@ -1,18 +1,18 @@
-import FilterComponent from "admin/components/report-filters/filter";
+import { classNames } from "@ember-decorators/component";
 import { computed } from "@ember/object";
+import FilterComponent from "admin/components/report-filters/filter";
 
-export default FilterComponent.extend({
+@classNames("group-filter")
-  classNames: ["group-filter"],
+export default class Group extends FilterComponent {
-
   @computed
   get groupOptions() {
     return (this.site.groups || []).map((group) => {
       return { name: group["name"], value: group["id"] };
     });
-  },
+  }
 
   @computed("filter.default")
   get groupId() {
     return this.filter.default ? parseInt(this.filter.default, 10) : null;
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/report-filters/list.js

@@ -1,3 +1,3 @@
 import FilterComponent from "admin/components/report-filters/filter";
 
-export default FilterComponent.extend();
+export default class List extends FilterComponent {}

app/assets/javascripts/admin/addon/components/resumable-upload.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class ResumableUpload extends Component {}

app/assets/javascripts/admin/addon/components/screened-ip-address-form.hbs

@@ -17,7 +17,7 @@
 <DButton
   @type="submit"
   @class="btn-default"
-  @action={{action "submit"}}
+  @action={{action "submitForm"}}
   @disabled={{this.formSubmitted}}
   @label="admin.logs.screened_ips.form.add"
 />

app/assets/javascripts/admin/addon/components/screened-ip-address-form.js

@@ -1,9 +1,11 @@
+import { action } from "@ember/object";
+import { classNames, tagName } from "@ember-decorators/component";
+import { inject as service } from "@ember/service";
 import discourseComputed from "discourse-common/utils/decorators";
 import Component from "@ember/component";
 import I18n from "I18n";
 import ScreenedIpAddress from "admin/models/screened-ip-address";
 import { schedule } from "@ember/runloop";
-import { inject as service } from "@ember/service";
 
 /**
   A form to create an IP address that will be blocked or allowed.
@@ -16,12 +18,13 @@ import { inject as service } from "@ember/service";
   as an argument.
 **/
 
-export default Component.extend({
+@tagName("form")
-  tagName: "form",
+@classNames("screened-ip-address-form", "inline-form")
-  dialog: service(),
+export default class ScreenedIpAddressForm extends Component {
-  classNames: ["screened-ip-address-form", "inline-form"],
+  @service dialog;
-  formSubmitted: false,
+
-  actionName: "block",
+  formSubmitted = false;
+  actionName = "block";
 
   @discourseComputed("siteSettings.use_admin_ip_allowlist")
   actionNames(adminAllowlistEnabled) {
@@ -46,43 +49,42 @@ export default Component.extend({
         },
       ];
     }
-  },
+  }
 
   focusInput() {
     schedule("afterRender", () => {
       this.element.querySelector("input").focus();
     });
-  },
+  }
 
-  actions: {
+  @action
-    submit() {
+  submitForm() {
-      if (!this.formSubmitted) {
+    if (!this.formSubmitted) {
-        this.set("formSubmitted", true);
+      this.set("formSubmitted", true);
-        const screenedIpAddress = ScreenedIpAddress.create({
+      const screenedIpAddress = ScreenedIpAddress.create({
-          ip_address: this.ip_address,
+        ip_address: this.ip_address,
-          action_name: this.actionName,
+        action_name: this.actionName,
-        });
+      });
-        screenedIpAddress
+      screenedIpAddress
-          .save()
+        .save()
-          .then((result) => {
+        .then((result) => {
-            this.setProperties({ ip_address: "", formSubmitted: false });
+          this.setProperties({ ip_address: "", formSubmitted: false });
-            this.action(ScreenedIpAddress.create(result.screened_ip_address));
+          this.action(ScreenedIpAddress.create(result.screened_ip_address));
-            this.focusInput();
+          this.focusInput();
-          })
+        })
-          .catch((e) => {
+        .catch((e) => {
-            this.set("formSubmitted", false);
+          this.set("formSubmitted", false);
-            const message = e.jqXHR.responseJSON?.errors
+          const message = e.jqXHR.responseJSON?.errors
-              ? I18n.t("generic_error_with_reason", {
+            ? I18n.t("generic_error_with_reason", {
-                  error: e.jqXHR.responseJSON.errors.join(". "),
+                error: e.jqXHR.responseJSON.errors.join(". "),
-                })
+              })
-              : I18n.t("generic_error");
+            : I18n.t("generic_error");
-            this.dialog.alert({
+          this.dialog.alert({
-              message,
+            message,
-              didConfirm: () => this.focusInput(),
+            didConfirm: () => this.focusInput(),
-              didCancel: () => this.focusInput(),
+            didCancel: () => this.focusInput(),
-            });
           });
-      }
+        });
-    },
+    }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/secret-value-list.js

@@ -1,15 +1,16 @@
+import { classNameBindings } from "@ember-decorators/component";
 import Component from "@ember/component";
 import I18n from "I18n";
 import { isEmpty } from "@ember/utils";
-import { on } from "discourse-common/utils/decorators";
+import { on } from "@ember-decorators/object";
-import { set } from "@ember/object";
+import { action, set } from "@ember/object";
 
-export default Component.extend({
+@classNameBindings(":value-list", ":secret-value-list")
-  classNameBindings: [":value-list", ":secret-value-list"],
+export default class SecretValueList extends Component {
-  inputDelimiter: null,
+  inputDelimiter = null;
-  collection: null,
+  collection = null;
-  values: null,
+  values = null;
-  validationMessage: null,
+  validationMessage = null;
 
   @on("didReceiveAttrs")
   _setupCollection() {
@@ -19,41 +20,43 @@ export default Component.extend({
       "collection",
       this._splitValues(values, this.inputDelimiter || "\n")
     );
-  },
+  }
 
-  actions: {
+  @action
-    changeKey(index, event) {
+  changeKey(index, event) {
-      const newValue = event.target.value;
+    const newValue = event.target.value;
 
-      if (this._checkInvalidInput(newValue)) {
+    if (this._checkInvalidInput(newValue)) {
-        return;
+      return;
-      }
+    }
 
-      this._replaceValue(index, newValue, "key");
+    this._replaceValue(index, newValue, "key");
-    },
+  }
 
-    changeSecret(index, event) {
+  @action
-      const newValue = event.target.value;
+  changeSecret(index, event) {
+    const newValue = event.target.value;
 
-      if (this._checkInvalidInput(newValue)) {
+    if (this._checkInvalidInput(newValue)) {
-        return;
+      return;
-      }
+    }
 
-      this._replaceValue(index, newValue, "secret");
+    this._replaceValue(index, newValue, "secret");
-    },
+  }
 
-    addValue() {
+  @action
-      if (this._checkInvalidInput([this.newKey, this.newSecret])) {
+  addValue() {
-        return;
+    if (this._checkInvalidInput([this.newKey, this.newSecret])) {
-      }
+      return;
-      this._addValue(this.newKey, this.newSecret);
+    }
-      this.setProperties({ newKey: "", newSecret: "" });
+    this._addValue(this.newKey, this.newSecret);
-    },
+    this.setProperties({ newKey: "", newSecret: "" });
+  }
 
-    removeValue(value) {
+  @action
-      this._removeValue(value);
+  removeValue(value) {
-    },
+    this._removeValue(value);
-  },
+  }
 
   _checkInvalidInput(inputs) {
     this.set("validationMessage", null);
@@ -66,25 +69,25 @@ export default Component.extend({
         return true;
       }
     }
-  },
+  }
 
   _addValue(value, secret) {
     this.collection.addObject({ key: value, secret });
     this._saveValues();
-  },
+  }
 
   _removeValue(value) {
     const collection = this.collection;
     collection.removeObject(value);
     this._saveValues();
-  },
+  }
 
   _replaceValue(index, newValue, keyName) {
     let item = this.collection[index];
     set(item, keyName, newValue);
 
     this._saveValues();
-  },
+  }
 
   _saveValues() {
     this.set(
@@ -95,7 +98,7 @@ export default Component.extend({
         })
         .join("\n")
     );
-  },
+  }
 
   _splitValues(values, delimiter) {
     if (values && values.length) {
@@ -113,5 +116,5 @@ export default Component.extend({
     } else {
       return [];
     }
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/setting-validation-message.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SettingValidationMessage extends Component {}

app/assets/javascripts/admin/addon/components/silence-details.js

@@ -1,4 +1,5 @@
+import { tagName } from "@ember-decorators/component";
 import Component from "@ember/component";
-export default Component.extend({
+
-  tagName: "",
+@tagName("")
-});
+export default class SilenceDetails extends Component {}

app/assets/javascripts/admin/addon/components/simple-list.js

@@ -1,34 +1,37 @@
+import { classNameBindings } from "@ember-decorators/component";
+import { empty } from "@ember/object/computed";
 import Component from "@ember/component";
 import { action } from "@ember/object";
-import { empty } from "@ember/object/computed";
+import discourseComputed from "discourse-common/utils/decorators";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import { on } from "@ember-decorators/object";
 
-export default Component.extend({
+@classNameBindings(":simple-list", ":value-list")
-  classNameBindings: [":simple-list", ":value-list"],
+export default class SimpleList extends Component {
-  inputEmpty: empty("newValue"),
+  @empty("newValue") inputEmpty;
-  inputDelimiter: null,
+
-  newValue: "",
+  inputDelimiter = null;
-  collection: null,
+  newValue = "";
-  values: null,
+  collection = null;
+  values = null;
 
   @on("didReceiveAttrs")
   _setupCollection() {
     this.set("collection", this._splitValues(this.values, this.inputDelimiter));
-  },
+  }
 
   keyDown(event) {
     if (event.which === 13) {
       this.addValue(this.newValue);
       return;
     }
-  },
+  }
 
   @action
   changeValue(index, event) {
     this.collection.replace(index, 1, [event.target.value]);
     this.collection.arrayContentDidChange(index);
     this._onChange();
-  },
+  }
 
   @action
   addValue(newValue) {
@@ -39,13 +42,13 @@ export default Component.extend({
     this.set("newValue", null);
     this.collection.addObject(newValue);
     this._onChange();
-  },
+  }
 
   @action
   removeValue(value) {
     this.collection.removeObject(value);
     this._onChange();
-  },
+  }
 
   @action
   shift(operation, index) {
@@ -62,20 +65,20 @@ export default Component.extend({
     this.collection.insertAt(futureIndex, shiftedValue);
 
     this._onChange();
-  },
+  }
 
   _onChange() {
     this.onChange?.(this.collection);
-  },
+  }
 
   @discourseComputed("collection")
   showUpDownButtons(collection) {
     return collection.length - 1 ? true : false;
-  },
+  }
 
   _splitValues(values, delimiter) {
     return values && values.length
       ? values.split(delimiter || "\n").filter(Boolean)
       : [];
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-customization-change-details.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SiteCustomizationChangeDetails extends Component {}

app/assets/javascripts/admin/addon/components/site-customization-change-field.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SiteCustomizationChangeField extends Component {}

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
+    <DButton
-      href
+      class="btn-link"
-      onClick={{action "setDefaultValues"}}
+      @action={{this.setDefaultValues}}
-    >{{this.setting.setDefaultValuesLabel}}</a>
+      @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="ok" @action={{this.update}} @icon="check" />
-    <DButton @class="cancel" @action={{action "cancel"}} @icon="times" />
+    <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"
+    class="btn-default undo"
-    @action={{action "resetDefault"}}
+    @action={{this.resetDefault}}
     @icon="undo"
     @label="admin.settings.reset"
   />

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

@@ -1,18 +1,21 @@
+import { readOnly } from "@ember/object/computed";
 import BufferedContent from "discourse/mixins/buffered-content";
 import Component from "@ember/component";
 import SettingComponent from "admin/mixins/setting-component";
 import SiteSetting from "admin/models/site-setting";
-import { readOnly } from "@ember/object/computed";
 
-export default Component.extend(BufferedContent, SettingComponent, {
+export default class SiteSettingComponent extends Component.extend(
-  updateExistingUsers: null,
+  BufferedContent,
+  SettingComponent
+) {
+  updateExistingUsers = null;
+
+  @readOnly("setting.staffLogFilter") staffLogFilter;
 
   _save() {
     const setting = this.buffered;
     return SiteSetting.update(setting.get("setting"), setting.get("value"), {
       updateExistingUsers: this.updateExistingUsers,
     });
-  },
+  }
-
+}
-  staffLogFilter: readOnly("setting.staffLogFilter"),
-});

app/assets/javascripts/admin/addon/components/site-settings/bool.js

@@ -1,19 +1,18 @@
+import { computed } from "@ember/object";
 import Component from "@ember/component";
-import discourseComputed from "discourse-common/utils/decorators";
 import { isEmpty } from "@ember/utils";
 
-export default Component.extend({
+export default class Bool extends Component {
-  @discourseComputed("value")
+  @computed("value")
-  enabled: {
+  get enabled() {
-    get(value) {
+    if (isEmpty(this.value)) {
-      if (isEmpty(value)) {
+      return false;
-        return false;
+    }
-      }
+    return this.value.toString() === "true";
-      return value.toString() === "true";
+  }
-    },
+
-    set(value) {
+  set enabled(value) {
-      this.set("value", value ? "true" : "false");
+    this.set("value", value ? "true" : "false");
-      return value;
+    return value;
-    },
+  }
-  },
+}
-});

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

@@ -1,15 +1,15 @@
+import { action, computed } from "@ember/object";
 import Category from "discourse/models/category";
 import Component from "@ember/component";
-import { computed } from "@ember/object";
 
-export default Component.extend({
+export default class CategoryList extends Component {
-  selectedCategories: computed("value", function () {
+  @computed("value")
+  get selectedCategories() {
     return Category.findByIds(this.value.split("|").filter(Boolean));
-  }),
+  }
 
-  actions: {
+  @action
-    onChangeSelectedCategories(value) {
+  onChangeSelectedCategories(value) {
-      this.set("value", (value || []).mapBy("id").join("|"));
+    this.set("value", (value || []).mapBy("id").join("|"));
-    },
+  }
-  },
+}
-});

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

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class Category extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/color.js

@@ -24,8 +24,9 @@ function RGBToHex(rgb) {
   return "#" + r + g + b;
 }
 
-export default Component.extend({
+export default class Color extends Component {
-  valid: computed("value", function () {
+  @computed("value")
+  get valid() {
     let value = this.value.toLowerCase();
 
     let testColor = new Option().style;
@@ -43,10 +44,10 @@ export default Component.extend({
     }
 
     return testColor.color && hexifiedColor === value;
-  }),
+  }
 
   @action
   onChangeColor(color) {
     this.set("value", color);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/compact-list.js

@@ -1,40 +1,36 @@
+import { action, computed } from "@ember/object";
 import Component from "@ember/component";
-import { computed } from "@ember/object";
 import { makeArray } from "discourse-common/lib/helpers";
 
-export default Component.extend({
+export default class CompactList extends Component {
-  tokenSeparator: "|",
+  tokenSeparator = "|";
+  createdChoices = null;
 
-  createdChoices: null,
+  @computed("value")
-
+  get settingValue() {
-  settingValue: computed("value", function () {
     return this.value.toString().split(this.tokenSeparator).filter(Boolean);
-  }),
+  }
 
-  settingChoices: computed(
+  @computed("settingValue", "setting.choices.[]", "createdChoices.[]")
-    "settingValue",
+  get settingChoices() {
-    "setting.choices.[]",
+    return [
-    "createdChoices.[]",
+      ...new Set([
-    function () {
+        ...makeArray(this.settingValue),
-      return [
+        ...makeArray(this.setting.choices),
-        ...new Set([
+        ...makeArray(this.createdChoices),
-          ...makeArray(this.settingValue),
+      ]),
-          ...makeArray(this.setting.choices),
+    ];
-          ...makeArray(this.createdChoices),
+  }
-        ]),
-      ];
-    }
-  ),
 
-  actions: {
+  @action
-    onChangeListSetting(value) {
+  onChangeListSetting(value) {
-      this.set("value", value.join(this.tokenSeparator));
+    this.set("value", value.join(this.tokenSeparator));
-    },
+  }
 
-    onChangeChoices(choices) {
+  @action
-      this.set("createdChoices", [
+  onChangeChoices(choices) {
-        ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
+    this.set("createdChoices", [
-      ]);
+      ...new Set([...makeArray(this.createdChoices), ...makeArray(choices)]),
-    },
+    ]);
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/emoji-list.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class EmojiList extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/enum.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class Enum extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/group-list.js

@@ -1,25 +1,25 @@
+import { action, computed } from "@ember/object";
 import Component from "@ember/component";
-import { computed } from "@ember/object";
 
-export default Component.extend({
+export default class GroupList extends Component {
-  tokenSeparator: "|",
+  tokenSeparator = "|";
+  nameProperty = "name";
+  valueProperty = "id";
 
-  nameProperty: "name",
+  @computed("site.groups")
-  valueProperty: "id",
+  get groupChoices() {
-
-  groupChoices: computed("site.groups", function () {
     return (this.site.groups || []).map((g) => {
       return { name: g.name, id: g.id.toString() };
     });
-  }),
+  }
 
-  settingValue: computed("value", function () {
+  @computed("value")
+  get settingValue() {
     return (this.value || "").split(this.tokenSeparator).filter(Boolean);
-  }),
+  }
 
-  actions: {
+  @action
-    onChangeGroupListSetting(value) {
+  onChangeGroupListSetting(value) {
-      this.set("value", value.join(this.tokenSeparator));
+    this.set("value", value.join(this.tokenSeparator));
-    },
+  }
-  },
+}
-});

app/assets/javascripts/admin/addon/components/site-settings/host-list.js

@@ -1,14 +1,14 @@
 import Component from "@ember/component";
 import { action, computed } from "@ember/object";
 
-export default Component.extend({
+export default class HostList extends Component {
-  tokenSeparator: "|",
+  tokenSeparator = "|";
-  choices: null,
+  choices = null;
 
   @computed("value")
   get settingValue() {
     return this.value.toString().split(this.tokenSeparator).filter(Boolean);
-  },
+  }
 
   @action
   onChange(value) {
@@ -17,5 +17,5 @@ export default Component.extend({
     }
 
     this.set("value", value.join(this.tokenSeparator));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/list.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class List extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/named-list.js

@@ -1,13 +1,13 @@
 import Component from "@ember/component";
 import { action, computed } from "@ember/object";
 
-export default Component.extend({
+export default class NamedList extends Component {
-  tokenSeparator: "|",
+  tokenSeparator = "|";
 
   @computed("value")
   get settingValue() {
     return this.value.toString().split(this.tokenSeparator).filter(Boolean);
-  },
+  }
 
   @computed("setting.choices.[]", "settingValue")
   get settingChoices() {
@@ -24,10 +24,10 @@ export default Component.extend({
     }
 
     return choices;
-  },
+  }
 
   @action
   onChangeListSetting(value) {
     this.set("value", value.join(this.tokenSeparator));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/secret-list.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class SecretList extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/simple-list.js

@@ -1,11 +1,11 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
 
-export default Component.extend({
+export default class SimpleList extends Component {
-  inputDelimiter: "|",
+  inputDelimiter = "|";
 
   @action
   onChange(value) {
     this.set("value", value.join(this.inputDelimiter || "\n"));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/string.js

@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import Component from "@ember/component";
 import showModal from "discourse/lib/show-modal";
 
-export default Component.extend({
+export default class String extends Component {
   @action
   launchJsonEditorModal() {
     const schemaModal = showModal("json-schema-editor", {
@@ -16,5 +16,5 @@ export default Component.extend({
     schemaModal.set("onClose", () => {
       this.set("value", schemaModal.model.value);
     });
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/tag-list.js

@@ -2,16 +2,14 @@ import Component from "@ember/component";
 import { action } from "@ember/object";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
+export default class TagList extends Component {
   @discourseComputed("value")
-  selectedTags: {
+  selectedTags(value) {
-    get(value) {
+    return value.split("|").filter(Boolean);
-      return value.split("|").filter(Boolean);
+  }
-    },
-  },
 
   @action
   changeSelectedTags(tags) {
     this.set("value", tags.join("|"));
-  },
+  }
-});
+}

app/assets/javascripts/admin/addon/components/site-settings/upload.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class Upload extends Component {}

app/assets/javascripts/admin/addon/components/site-settings/uploaded-image-list.js

@@ -1,16 +1,16 @@
+import { action } from "@ember/object";
 import Component from "@ember/component";
 import showModal from "discourse/lib/show-modal";
 
-export default Component.extend({
+export default class UploadedImageList extends Component {
-  actions: {
+  @action
-    showUploadModal({ value, setting }) {
+  showUploadModal({ value, setting }) {
-      showModal("admin-uploaded-image-list", {
+    showModal("admin-uploaded-image-list", {
-        admin: true,
+      admin: true,
-        title: `admin.site_settings.${setting.setting}.title`,
+      title: `admin.site_settings.${setting.setting}.title`,
-        model: { value, setting },
+      model: { value, setting },
-      }).setProperties({
+    }).setProperties({
-        save: (v) => this.set("value", v),
+      save: (v) => this.set("value", v),
-      });
+    });
-    },
+  }
-  },
+}
-});

app/assets/javascripts/admin/addon/components/site-settings/url-list.js

@@ -1,3 +1,3 @@
 import Component from "@ember/component";
 
-export default Component.extend({});
+export default class UrlList extends Component {}