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,35 +27,35 @@ export default Controller.extend(bufferedProperty("emailTemplate"), {
     }
   },
 
-  actions: {
-    saveChanges() {
-      this.set("saved", false);
-      const buffered = this.buffered;
-      this.emailTemplate
-        .save(buffered.getProperties("subject", "body"))
-        .then(() => {
-          this.set("saved", true);
-        })
-        .catch(popupAjaxError);
-    },
+  @action
+  saveChanges() {
+    this.set("saved", false);
+    const buffered = this.buffered;
+    this.emailTemplate
+      .save(buffered.getProperties("subject", "body"))
+      .then(() => {
+        this.set("saved", true);
+      })
+      .catch(popupAjaxError);
+  },
 
-    revertChanges() {
-      this.set("saved", false);
-      bootbox.confirm(
-        I18n.t("admin.customize.email_templates.revert_confirm"),
-        result => {
-          if (result) {
-            this.emailTemplate
-              .revert()
-              .then(props => {
-                const buffered = this.buffered;
-                buffered.setProperties(props);
-                this.commitBuffer();
-              })
-              .catch(popupAjaxError);
-          }
+  @action
+  revertChanges() {
+    this.set("saved", false);
+    bootbox.confirm(
+      I18n.t("admin.customize.email_templates.revert_confirm"),
+      result => {
+        if (result) {
+          this.emailTemplate
+            .revert()
+            .then(props => {
+              const buffered = this.buffered;
+              buffered.setProperties(props);
+              this.commitBuffer();
+            })
+            .catch(popupAjaxError);
         }
-      );
-    }
+      }
+    );
   }
 });

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) {
-      this.transitionToRoute("adminCustomizeEmailTemplates.edit", 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?"