REFACTOR: badge-title component (#14162)

- uses tagName=""
- removes user property which is not being used
- extract utility functions
- better wording for boolean properties
- initializes all properties
- uses @action
- uses optional chaining
- other minor changes

app/assets/javascripts/discourse/app/components/badge-title.js

@@ -1,53 +1,58 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
 import I18n from "I18n";
 import { ajax } from "discourse/lib/ajax";
 import bootbox from "bootbox";
 
 export default Component.extend({
-  classNames: ["badge-title"],
+  tagName: "",
 
-  selectedUserBadgeId: null,
   selectableUserBadges: null,
-  saved: false,
-  saving: false,
+
+  _selectedUserBadgeId: null,
+  _isSaved: false,
+  _isSaving: false,
 
   init() {
     this._super(...arguments);
 
-    const badge = this.selectableUserBadges.findBy(
-      "badge.name",
+    const badge = this._findBadgeByTitle(
+      this.selectableUserBadges,
       this.currentUser.title
     );
-    this.selectedUserBadgeId = badge ? badge.id : 0;
+    this.set("_selectedUserBadgeId", badge?.id || 0);
   },
 
-  actions: {
-    save() {
-      this.setProperties({ saved: false, saving: true });
+  @action
+  saveBadgeTitle() {
+    this.setProperties({ _isSaved: false, _isSaving: true });
 
-      const selectedUserBadge = this.selectableUserBadges.findBy(
-        "id",
-        this.selectedUserBadgeId
-      );
+    const selectedUserBadge = this._findBadgeById(
+      this.selectableUserBadges,
+      this._selectedUserBadgeId
+    );
 
-      ajax(this.currentUser.path + "/preferences/badge_title", {
-        type: "PUT",
-        data: { user_badge_id: selectedUserBadge ? selectedUserBadge.id : 0 },
-      }).then(
+    return ajax(`${this.currentUser.path}/preferences/badge_title`, {
+      type: "PUT",
+      data: { user_badge_id: selectedUserBadge?.id || 0 },
+    })
+      .then(
         () => {
-          this.setProperties({
-            saved: true,
-            saving: false,
-          });
-          this.currentUser.set(
-            "title",
-            selectedUserBadge ? selectedUserBadge.badge.name : ""
-          );
+          this.set("_isSaved", true);
+          this.currentUser.set("title", selectedUserBadge?.badge?.name || "");
         },
         () => {
           bootbox.alert(I18n.t("generic_error"));
         }
-      );
-    },
+      )
+      .finally(() => this.set("_isSaving", false));
+  },
+
+  _findBadgeById(badges, id) {
+    return (badges || []).findBy("id", id);
+  },
+
+  _findBadgeByTitle(badges, title) {
+    return (badges || []).findBy("badge.name", title);
   },
 });

app/assets/javascripts/discourse/app/templates/badges/show.hbs

@@ -28,7 +28,7 @@
 
     {{#if canSelectTitle}}
       <div class="badge-set-title {{if hiddenSetTitle "hidden" ""}}">
-        {{badge-title selectableUserBadges=selectableUserBadges user=user}}
+        {{badge-title selectableUserBadges=selectableUserBadges}}
         {{d-button class="btn-default close-btn" action=(action "toggleSetUserTitle") label="close"}}
       </div>
     {{/if}}

app/assets/javascripts/discourse/app/templates/components/badge-title.hbs

@@ -1,33 +1,36 @@
-<section class="user-content">
-  <form class="form-horizontal">
-
-    <div class="control-group">
-      <div class="controls">
-        <h3>{{i18n "badges.select_badge_for_title"}}</h3>
+<div class="badge-title">
+  <section class="user-content">
+    <form class="form-horizontal">
+      <div class="control-group">
+        <div class="controls">
+          <h3>{{i18n "badges.select_badge_for_title"}}</h3>
+        </div>
       </div>
-    </div>
 
-    <div class="control-group">
-      <div class="controls">
-        {{combo-box
-          value=selectedUserBadgeId
-          nameProperty="badge.name"
-          content=selectableUserBadges
-          onChange=(action (mut selectedUserBadgeId))
-        }}
+      <div class="control-group">
+        <div class="controls">
+          {{combo-box
+            value=_selectedUserBadgeId
+            nameProperty="badge.name"
+            content=selectableUserBadges
+            onChange=(action (mut _selectedUserBadgeId))
+          }}
+        </div>
       </div>
-    </div>
 
-    <div class="control-group">
-      <div class="controls">
-        {{d-button
-          class="btn-primary"
-          action=(action "save")
-          disabled=saving
-          label=(if saving "saving" "save")}}
-        {{#if saved}}{{i18n "saved"}}{{/if}}
+      <div class="control-group">
+        <div class="controls">
+          {{d-button
+            class="btn-primary"
+            action=(action "saveBadgeTitle")
+            disabled=_isSaving
+            label=(if _isSaving "saving" "save")
+          }}
+          {{#if _isSaved}}
+            <span>{{i18n "saved"}}</span>
+          {{/if}}
+        </div>
       </div>
-    </div>
-
-  </form>
-</section>
+    </form>
+  </section>
+</div>

app/assets/javascripts/discourse/tests/integration/components/badge-title-test.js

@@ -13,7 +13,7 @@ discourseModule("Integration | Component | badge-title", function (hooks) {
 
   componentTest("badge title", {
     template: hbs`
-      {{badge-title selectableUserBadges=selectableUserBadges user=user}}
+      {{badge-title selectableUserBadges=selectableUserBadges}}
     `,
 
     beforeEach() {