DEV: Don't use attrs (#24323)

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

@@ -116,11 +116,11 @@ export default class AceEditor extends Component {
           this._skipContentChangeEvent = true;
           this.set("content", editor.getSession().getValue());
         });
-        if (this.attrs.save) {
+        if (this.save) {
           editor.commands.addCommand({
             name: "save",
             exec: () => {
-              this.attrs.save();
+              this.save();
             },
             bindKey: { mac: "cmd-s", win: "ctrl-s" },
           });

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

@@ -220,11 +220,11 @@ export default class AdminReport extends Component {
 
   @action
   refreshReport(options = {}) {
-    if (!this.attrs.onRefresh) {
+    if (!this.onRefresh) {
       return;
     }
 
-    this.attrs.onRefresh({
+    this.onRefresh({
       type: this.get("model.type"),
       mode: this.currentMode,
       chartGrouping: options.chartGrouping,

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

@@ -45,8 +45,8 @@ export default class ColorInput extends Component {
 
   @action
   onHexInput(event) {
-    if (this.attrs.onChangeColor) {
+    if (this.onChangeColor) {
-      this.attrs.onChangeColor(this.normalize(event.target.value || ""));
+      this.onChangeColor(this.normalize(event.target.value || ""));
     }
   }
 
@@ -59,8 +59,8 @@ export default class ColorInput extends Component {
   hexValueChanged() {
     const hex = this.hexValue;
 
-    if (this.attrs.onChangeColor) {
+    if (this.onChangeColor) {
-      this.attrs.onChangeColor(this.normalize(hex));
+      this.onChangeColor(this.normalize(hex));
     }
 
     if (this._valid()) {

app/assets/javascripts/discourse/app/components/directory-table.js

@@ -9,8 +9,8 @@ export default Component.extend({
     this.setProperties({
       _table: this.element.querySelector(".directory-table"),
       _columnCount: this.showTimeRead
-        ? this.attrs.columns.value.length + 1
+        ? this.columns.length + 1
-        : this.attrs.columns.value.length,
+        : this.columns.length,
     });
 
     this._table.style.gridTemplateColumns = `minmax(13em, 3fr) repeat(${this._columnCount}, minmax(max-content, 1fr))`;

app/assets/javascripts/discourse/app/components/reviewable-item.js

@@ -190,8 +190,8 @@ export default Component.extend({
             );
           }
 
-          if (this.attrs.remove) {
+          if (this.remove) {
-            this.attrs.remove(performResult.remove_reviewable_ids);
+            this.remove(performResult.remove_reviewable_ids);
           } else {
             return this.store.find("reviewable", reviewable.id);
           }

app/assets/javascripts/discourse/app/components/time-input.js

@@ -53,8 +53,8 @@ export default Component.extend({
 
     if (
       !isPresent(this.date) &&
-      !isPresent(this.attrs.hours) &&
+      !isPresent(this.hours) &&
-      !isPresent(this.attrs.minutes)
+      !isPresent(this.minutes)
     ) {
       this.setProperties({
         hours: null,

app/assets/javascripts/discourse/app/components/topic-navigation.js

@@ -127,8 +127,8 @@ export default Component.extend({
       this.modal.show(JumpToPost, {
         model: {
           topic: this.topic,
-          jumpToIndex: this.attrs.jumpToIndex,
+          jumpToIndex: this.jumpToIndex,
-          jumpToDate: this.attrs.jumpToDate,
+          jumpToDate: this.jumpToDate,
         },
       });
     }

app/assets/javascripts/discourse/app/components/topic-progress.js

@@ -177,6 +177,6 @@ export default Component.extend({
 
   @action
   goBack() {
-    this.attrs.jumpToPost(this.get("topic.last_read_post_number"));
+    this.jumpToPost(this.get("topic.last_read_post_number"));
   },
 });

app/assets/javascripts/select-kit/addon/components/categories-admin-dropdown.js

@@ -41,8 +41,8 @@ export default DropdownSelectBoxComponent.extend({
   _onChange(value, item) {
     if (item.onChange) {
       item.onChange(value, item);
-    } else if (this.attrs.onChange) {
+    } else if (this.onChange) {
-      this.attrs.onChange(value, item);
+      this.onChange(value, item);
     }
   },
 });

app/assets/javascripts/select-kit/addon/components/category-selector.js

@@ -33,8 +33,8 @@ export default MultiSelectComponent.extend({
     const blockedCategories = makeArray(this.blockedCategories);
     return Category.list().filter((category) => {
       if (category.isUncategorizedCategory) {
-        if (this.attrs.options?.allowUncategorized !== undefined) {
+        if (this.options?.allowUncategorized !== undefined) {
-          return this.attrs.options.allowUncategorized;
+          return this.options.allowUncategorized;
         }
 
         return this.selectKit.options.allowUncategorized;
@@ -70,8 +70,8 @@ export default MultiSelectComponent.extend({
 
     return await Category.asyncSearch(filter, {
       includeUncategorized:
-        this.attrs.options?.allowUncategorized !== undefined
+        this.options?.allowUncategorized !== undefined
-          ? this.attrs.options.allowUncategorized
+          ? this.options.allowUncategorized
           : this.selectKit.options.allowUncategorized,
       rejectCategoryIds: Array.from(rejectCategoryIds),
     });

app/assets/javascripts/select-kit/addon/components/future-date-input-selector.js

@@ -30,12 +30,11 @@ export default ComboBoxComponent.extend({
       if (value !== "custom" && !isEmpty(value)) {
         const { time } = this.content.find((x) => x.id === value);
         if (time) {
-          this.attrs.onChangeInput &&
+          this.onChangeInput?.(time.locale("en").format(FORMAT));
-            this.attrs.onChangeInput(time.locale("en").format(FORMAT));
         }
       }
 
-      this.attrs.onChange && this.attrs.onChange(value);
+      this.onChange?.(value);
     },
   },
 });

app/assets/javascripts/select-kit/addon/components/icon-picker.js

@@ -97,7 +97,7 @@ export default MultiSelectComponent.extend({
         item = item.length ? item[0] : null;
       }
 
-      this.attrs.onChange && this.attrs.onChange(value, item);
+      this.onChange?.(value, item);
     },
   },
 });

app/assets/javascripts/select-kit/addon/components/period-chooser.js

@@ -29,7 +29,7 @@ export default DropdownSelectBoxComponent.extend({
       if (this.action) {
         this.action(value);
       } else {
-        this.attrs.onChange && this.attrs.onChange(value);
+        this.onChange?.(value);
       }
     },
   },

app/assets/javascripts/select-kit/addon/components/select-kit.js

@@ -75,7 +75,7 @@ export default Component.extend(
       this.set(
         "selectKit",
         EmberObject.create({
-          uniqueID: this.attrs?.id?.value || this.attrs?.id || guidFor(this),
+          uniqueID: this.id || guidFor(this),
           valueProperty: this.valueProperty,
           nameProperty: this.nameProperty,
           labelProperty: this.labelProperty,
@@ -1128,15 +1128,14 @@ export default Component.extend(
 
     _deprecateMutations() {
       this.actions ??= {};
-      this.attrs ??= {};
 
-      if (!this.attrs.onChange && !this.actions.onChange) {
+      if (!this.onChange && !this.actions.onChange) {
         this._deprecated(
           "Implicit mutation has been deprecated, please use `onChange` handler"
         );
 
         this.actions.onChange =
-          this.attrs.onSelect ||
+          this.onSelect ||
           this.actions.onSelect ||
           ((value) => this.set("value", value));
       }