FIX: Checkbox value should not leak between themes (#11327)

This commit includes a hack to ensure didInsertElement is called only
once.

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

@@ -1,42 +1,44 @@
-import I18n from "I18n";
 import Component from "@ember/component";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { action } from "@ember/object";
+import discourseComputed from "discourse-common/utils/decorators";
 
 export default Component.extend({
   classNames: ["inline-edit"],
 
-  checked: null,
+  buffer: null,
-  checkedInternal: null,
+  bufferModelId: null,
 
-  init() {
+  didReceiveAttrs() {
     this._super(...arguments);
 
-    this.set("checkedInternal", this.checked);
+    if (this.modelId !== this.bufferModelId) {
+      // HACK: The condition above ensures this method is called only when its
+      // attributes are changed (i.e. only when `checked` changes).
+      //
+      // Reproduction steps: navigate to theme #1, switch to theme #2 from the
+      // left-side panel, then switch back to theme #1 and click on the <input>
+      // element wrapped by this component. It will call `didReceiveAttrs` even
+      // though none of the attributes have changed (only `buffer` does).
+      this.setProperties({
+        buffer: this.checked,
+        bufferModelId: this.modelId,
+      });
+    }
   },
 
-  @observes("checked")
+  @discourseComputed("checked", "buffer")
-  checkedChanged() {
+  changed(checked, buffer) {
-    this.set("checkedInternal", this.checked);
+    return !!checked !== !!buffer;
   },
 
-  @discourseComputed("labelKey")
+  @action
-  label(key) {
+  apply() {
-    return I18n.t(key);
+    this.set("checked", this.buffer);
-  },
-
-  @discourseComputed("checked", "checkedInternal")
-  changed(checked, checkedInternal) {
-    return !!checked !== !!checkedInternal;
-  },
-
-  actions: {
-    cancelled() {
-      this.set("checkedInternal", this.checked);
-    },
-
-    finished() {
-      this.set("checked", this.checkedInternal);
     this.action();
   },
+
+  @action
+  cancel() {
+    this.set("buffer", this.checked);
   },
 });

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

@@ -1,8 +1,8 @@
 <label class="checkbox-label">
-  {{input type="checkbox" disabled=disabled checked=checkedInternal}}
+  {{input type="checkbox" disabled=disabled checked=buffer}}
-  {{label}}
+  {{i18n labelKey}}
 </label>
 {{#if changed}}
-  {{d-button action=(action "finished") class="btn-primary btn-small submit-edit" icon="check"}}
+  {{d-button action=(action "apply") class="btn-primary btn-small submit-edit" icon="check"}}
-  {{d-button action=(action "cancelled") class="btn-small cancel-edit" icon="times"}}
+  {{d-button action=(action "cancel") class="btn-small cancel-edit" icon="times"}}
 {{/if}}

app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs

@@ -42,7 +42,7 @@
 
     <div class="admin-controls">
       {{#if model.theme_id}}
-        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable}}
+        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.color_scheme_user_selectable" checked=model.user_selectable modelId=model.id}}
       {{else}}
         <label>
           {{input type="checkbox" checked=model.user_selectable}}

app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs

@@ -141,11 +141,11 @@
   {{#if showCheckboxes}}
     <div class="control-unit">
       {{#unless model.component}}
-        {{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default}}
+        {{inline-edit-checkbox action=(action "applyDefault") labelKey="admin.customize.theme.is_default" checked=model.default modelId=model.id}}
-        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable}}
+        {{inline-edit-checkbox action=(action "applyUserSelectable") labelKey="admin.customize.theme.user_selectable" checked=model.user_selectable modelId=model.id}}
       {{/unless}}
       {{#if model.remote_theme}}
-        {{inline-edit-checkbox action=(action "applyAutoUpdateable") labelKey="admin.customize.theme.auto_update" checked=model.auto_update}}
+        {{inline-edit-checkbox action=(action "applyAutoUpdateable") labelKey="admin.customize.theme.auto_update" checked=model.auto_update modelId=model.id}}
       {{/if}}
     </div>
   {{/if}}