UX: simplifies editing email templates by always having a default (#10179)

app/assets/javascripts/admin/controllers/admin-customize-email-templates-edit.js

@@ -3,8 +3,12 @@ import discourseComputed from "discourse-common/utils/decorators";
 import Controller from "@ember/controller";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
+import { action } from "@ember/object";
+import { inject as controller } from "@ember/controller";
 
 export default Controller.extend(bufferedProperty("emailTemplate"), {
+  adminCustomizeEmailTemplates: controller(),
+  emailTemplate: null,
   saved: false,
 
   @discourseComputed("buffered.body", "buffered.subject")
@@ -23,7 +27,7 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
     }
   },
 
-  actions: {
+  @action
   saveChanges() {
     this.set("saved", false);
     const buffered = this.buffered;
@@ -35,6 +39,7 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
       .catch(popupAjaxError);
   },
 
+  @action
   revertChanges() {
     this.set("saved", false);
     bootbox.confirm(
@@ -53,5 +58,4 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
       }
     );
   }
-  }
 });

app/assets/javascripts/admin/controllers/admin-customize-email-templates.js

@@ -1,18 +1,18 @@
 import { sort } from "@ember/object/computed";
+import { action } from "@ember/object";
 import Controller from "@ember/controller";
+
 export default Controller.extend({
-  emailTemplates: null,
   sortedTemplates: sort("emailTemplates", "titleSorting"),
 
   init() {
     this._super(...arguments);
 
-    this.titleSorting = ["title"];
+    this.set("titleSorting", ["title"]);
   },
 
-  actions: {
-    selectTemplate(template) {
+  @action
+  onSelectTemplate(template) {
     this.transitionToRoute("adminCustomizeEmailTemplates.edit", template);
   }
-  }
 });

app/assets/javascripts/admin/routes/admin-customize-email-templates-edit.js

@@ -10,5 +10,9 @@ export default Route.extend({
   setupController(controller, emailTemplate) {
     controller.setProperties({ emailTemplate, saved: false });
     scrollTop();
+  },
+
+  deactivate() {
+    this.controller.set("emailTemplate", null);
   }
 });

app/assets/javascripts/admin/routes/admin-customize-email-templates.js

@@ -1,4 +1,6 @@
 import Route from "@ember/routing/route";
+import { action } from "@ember/object";
+
 export default Route.extend({
   model() {
     return this.store.findAll("email-template");
@@ -6,5 +8,19 @@ export default Route.extend({
 
   setupController(controller, model) {
     controller.set("emailTemplates", model);
+  },
+
+  @action
+  didTransition() {
+    const editController = this.controllerFor(
+      "adminCustomizeEmailTemplates.edit"
+    );
+
+    if (!editController.emailTemplate) {
+      this.transitionTo(
+        "adminCustomizeEmailTemplates.edit",
+        this.controller.get("sortedTemplates.firstObject")
+      );
+    }
   }
 });

app/assets/javascripts/admin/templates/customize-email-templates-edit.hbs

@@ -1,3 +1,10 @@
+{{combo-box
+  value=emailTemplate.id
+  content=adminCustomizeEmailTemplates.sortedTemplates
+  onChange=adminCustomizeEmailTemplates.onSelectTemplate
+  nameProperty="title"
+}}
+
 <div class="email-template">
   <label>{{i18n "admin.customize.email_templates.subject"}}</label>
   {{#if hasMultipleSubjects}}

app/assets/javascripts/admin/templates/customize-email-templates-index.hbs

@@ -1 +0,0 @@
-<p>{{i18n "admin.customize.email_templates.none_selected"}}</p>

app/assets/javascripts/admin/templates/customize-email-templates.hbs

@@ -1,8 +1 @@
-{{combo-box
-  content=sortedTemplates
-  valueProperty="id"
-  nameProperty="title"
-  onChange=(action "selectTemplate")
-}}
-
 {{outlet}}

config/locales/client.en.yml

@@ -3791,7 +3791,6 @@ en:
           subject: "Subject"
           multiple_subjects: "This email template has multiple subjects."
           body: "Body"
-          none_selected: "Select an email template to begin editing."
           revert: "Revert Changes"
           revert_confirm: "Are you sure you want to revert your changes?"