UX: Use DPageHeader on the Emails page (#30781)

There are a few changes here to make the Emails admin page more consistent with the rest of the admin UI. - The header and navigation menu have been updated. - The sidebar now stays highlighted when visiting the email admin sub-pages. - Moved the Template editor from /admin/customize/email_templates to /admin/email/templates, so it fit as a sub-page. - Removed the link to the Template editor from the Customize section of the old top menu, since it's accessible from the Emails section, instead.
2025-02-25 18:55:32 -06:00 · 2025-01-15 15:36:16 +11:00
parent 698e7a17dd
commit 5da6a06ce3
16 changed files with 84 additions and 82 deletions
--- a/app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates-edit.js
+++ b/app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates-edit.js
@@ -6,11 +6,11 @@ import discourseComputed from "discourse/lib/decorators";
 import { bufferedProperty } from "discourse/mixins/buffered-content";
 import { i18n } from "discourse-i18n";

-export default class AdminCustomizeEmailTemplatesEditController extends Controller.extend(
+export default class AdminEmailTemplatesEditController extends Controller.extend(
  bufferedProperty("emailTemplate")
 ) {
  @service dialog;
-  @controller adminCustomizeEmailTemplates;
+  @controller adminEmailTemplates;

  emailTemplate = null;
  saved = false;
--- a/app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates.js
+++ b/app/assets/javascripts/admin/addon/controllers/admin-customize-email-templates.js
@@ -3,7 +3,7 @@ import { action } from "@ember/object";
 import { sort } from "@ember/object/computed";
 import { service } from "@ember/service";

-export default class AdminCustomizeEmailTemplatesController extends Controller {
+export default class AdminEmailTemplatesController extends Controller {
  @service router;

  titleSorting = ["title"];
@@ -11,6 +11,6 @@ export default class AdminCustomizeEmailTemplatesController extends Controller {

  @action
  onSelectTemplate(template) {
-    this.router.transitionTo("adminCustomizeEmailTemplates.edit", template);
+    this.router.transitionTo("adminEmailTemplates.edit", template);
  }
 }
--- a/app/assets/javascripts/admin/addon/models/email-template.js
+++ b/app/assets/javascripts/admin/addon/models/email-template.js
@@ -4,7 +4,7 @@ import RestModel from "discourse/models/rest";

 export default class EmailTemplate extends RestModel {
  revert() {
-    return ajax(`/admin/customize/email_templates/${this.id}`, {
+    return ajax(`/admin/email/templates/${this.id}`, {
      type: "DELETE",
    }).then((result) =>
      getProperties(result.email_template, "subject", "body", "can_revert")
--- a/app/assets/javascripts/admin/addon/routes/admin-customize-email-templates-edit.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-customize-email-templates-edit.js
@@ -1,9 +1,9 @@
 import Route from "@ember/routing/route";
 import { scrollTop } from "discourse/mixins/scroll-top";

-export default class AdminCustomizeEmailTemplatesEditRoute extends Route {
+export default class AdminEmailTemplatesEditRoute extends Route {
  model(params) {
-    const all = this.modelFor("adminCustomizeEmailTemplates");
+    const all = this.modelFor("adminEmailTemplates");
    return all.findBy("id", params.id);
  }

--- a/app/assets/javascripts/admin/addon/routes/admin-customize-email-templates.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-customize-email-templates.js
@@ -2,7 +2,7 @@ import { action } from "@ember/object";
 import Route from "@ember/routing/route";
 import { service } from "@ember/service";

-export default class AdminCustomizeEmailTemplatesRoute extends Route {
+export default class AdminEmailTemplatesRoute extends Route {
  @service router;

  model() {
@@ -15,13 +15,11 @@ export default class AdminCustomizeEmailTemplatesRoute extends Route {

  @action
  didTransition() {
-    const editController = this.controllerFor(
-      "adminCustomizeEmailTemplates.edit"
-    );
+    const editController = this.controllerFor("adminEmailTemplates.edit");

    if (!editController.emailTemplate) {
      this.router.transitionTo(
-        "adminCustomizeEmailTemplates.edit",
+        "adminEmailTemplates.edit",
        this.controller.get("sortedTemplates.firstObject")
      );
    }
--- a/app/assets/javascripts/admin/addon/routes/admin-route-map.js
+++ b/app/assets/javascripts/admin/addon/routes/admin-route-map.js
@@ -38,6 +38,13 @@ export default function () {
        this.route("rejected");
        this.route("previewDigest", { path: "/preview-digest" });
        this.route("advancedTest", { path: "/advanced-test" });
+        this.route(
+          "adminEmailTemplates",
+          { path: "/templates", resetNamespace: true },
+          function () {
+            this.route("edit", { path: "/:id" });
+          }
+        );
      }
    );

@@ -80,13 +87,6 @@ export default function () {
            this.route("edit", { path: "/:id" });
          }
        );
-        this.route(
-          "adminCustomizeEmailTemplates",
-          { path: "/email_templates", resetNamespace: true },
-          function () {
-            this.route("edit", { path: "/:id" });
-          }
-        );
        this.route("adminCustomizeRobotsTxt", {
          path: "/robots",
          resetNamespace: true,
--- a/app/assets/javascripts/admin/addon/templates/customize.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize.hbs
@@ -17,11 +17,6 @@
        @label="admin.site_text.title"
        class="admin-customize-site-text"
      />
-      <NavItem
-        @route="adminCustomizeEmailTemplates"
-        @label="admin.customize.email_templates.title"
-        class="admin-customize-email-templates"
-      />
      <NavItem
        @route="adminCustomizeEmailStyle"
        @label="admin.customize.email_style.title"
--- a/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-email-templates-edit.hbs
@@ -1,7 +1,7 @@
 <ComboBox
  @value={{this.emailTemplate.id}}
-  @content={{this.adminCustomizeEmailTemplates.sortedTemplates}}
-  @onChange={{this.adminCustomizeEmailTemplates.onSelectTemplate}}
+  @content={{this.adminEmailTemplates.sortedTemplates}}
+  @onChange={{this.adminEmailTemplates.onSelectTemplate}}
  @nameProperty="title"
 />

--- a/app/assets/javascripts/admin/addon/templates/customize-email-templates.hbs
+++ b/app/assets/javascripts/admin/addon/templates/customize-email-templates.hbs
--- a/app/assets/javascripts/admin/addon/templates/email.hbs
+++ b/app/assets/javascripts/admin/addon/templates/email.hbs
@@ -1,23 +1,33 @@
-<AdminNav>
-  <NavItem @route="adminEmail.index" @label="admin.email.settings" />
-  <NavItem
-    @route="adminEmail.previewDigest"
-    @label="admin.email.preview_digest"
-  />
-  <NavItem
-    @route="adminEmail.advancedTest"
-    @label="admin.email.advanced_test.title"
-  />
-  <NavItem
-    @route="adminCustomizeEmailTemplates"
-    @label="admin.email.templates"
-  />
-  <NavItem @route="adminEmail.sent" @label="admin.email.sent" />
-  <NavItem @route="adminEmail.skipped" @label="admin.email.skipped" />
-  <NavItem @route="adminEmail.bounced" @label="admin.email.bounced" />
-  <NavItem @route="adminEmail.received" @label="admin.email.received" />
-  <NavItem @route="adminEmail.rejected" @label="admin.email.rejected" />
-</AdminNav>
+<DPageHeader
+  @titleLabel={{i18n "admin.email.title"}}
+  @descriptionLabel={{i18n "admin.email.description"}}
+  @shouldDisplay={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem
+      @path="/admin/email"
+      @label={{i18n "admin.email.title"}}
+    />
+  </:breadcrumbs>
+  <:tabs>
+    <NavItem @route="adminEmail.index" @label="admin.email.settings" />
+    <NavItem
+      @route="adminEmail.previewDigest"
+      @label="admin.email.preview_digest"
+    />
+    <NavItem
+      @route="adminEmail.advancedTest"
+      @label="admin.email.advanced_test.title"
+    />
+    <NavItem @route="adminEmailTemplates" @label="admin.email.templates" />
+    <NavItem @route="adminEmail.sent" @label="admin.email.sent" />
+    <NavItem @route="adminEmail.skipped" @label="admin.email.skipped" />
+    <NavItem @route="adminEmail.bounced" @label="admin.email.bounced" />
+    <NavItem @route="adminEmail.received" @label="admin.email.received" />
+    <NavItem @route="adminEmail.rejected" @label="admin.email.rejected" />
+  </:tabs>
+</DPageHeader>

 <div class="admin-container">
  {{outlet}}
--- a/app/assets/javascripts/discourse/app/adapters/email-template.js
+++ b/app/assets/javascripts/discourse/app/adapters/email-template.js
@@ -1,7 +1,9 @@
 import RestAdapter from "discourse/adapters/rest";

 export default class EmailTemplateAdapter extends RestAdapter {
-  basePath() {
-    return "/admin/customize/";
+  pathFor(store, type, id) {
+    return id === undefined
+      ? "/admin/email/templates"
+      : `/admin/email/templates/${id}`;
  }
 }
--- a/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js
+++ b/app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js
@@ -162,7 +162,7 @@ export const ADMIN_NAV_MAP = [
    links: [
      {
        name: "admin_server_setup",
-        route: "adminEmail.index",
+        route: "adminEmail",
        label: "admin.email_settings.sidebar_link.server_setup.title",
        icon: "gear",
        keywords: "admin.email_settings.sidebar_link.server_setup.keywords",
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -955,7 +955,7 @@
  }
 }

-.admin-customize-email-templates {
+.admin-email-templates {
  .email-template,
  .controls {
    margin-top: 1em;