From 3fe8cc811cd8606c4bf895743c192c9b5986192d Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Tue, 7 Nov 2023 13:20:57 +1000
Subject: [PATCH] DEV: Make admin experimental sidebar config more forgiving
 (#24236)

Followup to b53449eac98dbb579f2d2ebc275badc2cafaed64,
it was too easy to add broken routes which would break
configuration for the whole site, so now we validate ember
routes on save.
---
 .../admin-config-area-sidebar-experiment.hbs  | 12 +++-
 .../admin-config-area-sidebar-experiment.js   | 58 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.hbs b/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.hbs
index 0f2831af96a..6aaddf69381 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.hbs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.hbs
@@ -14,7 +14,17 @@
     or a
     <code>href</code>, if you want to link to a specific page but don't know the
     Ember route. You can also use the Ember Inspector extension to find route
-    names, for example for plugin routes which are not auto-generated here.</p>
+    names, for example for plugin routes which are not auto-generated here.
+    <br /><br />
+    <code>routeModels</code>
+    is an array of values that correspond to parts of the route; for example the
+    topic route may be
+    <code>/t/:id</code>, so to get a link to topic with ID 123 you would do
+    <code>routeModels: [123]</code>.</p>
+
+  <p>All configuration options for a section and its links looks like this:</p>
+
+  <pre><code>{{this.exampleJson}}</code></pre>
 
   <DButton
     @action={{this.resetToDefault}}
diff --git a/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.js b/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.js
index ff1571c5088..33e243182a9 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.js
+++ b/app/assets/javascripts/admin/addon/components/admin-config-area-sidebar-experiment.js
@@ -13,12 +13,36 @@ import { ADMIN_PANEL } from "discourse/services/sidebar-state";
 export default class AdminConfigAreaSidebarExperiment extends Component {
   @service adminSidebarExperimentStateManager;
   @service toasts;
+  @service router;
   @tracked editedNavConfig;
 
+  validRouteNames = new Set();
+
   get defaultAdminNav() {
     return JSON.stringify(ADMIN_NAV_MAP, null, 2);
   }
 
+  get exampleJson() {
+    return JSON.stringify(
+      {
+        name: "section-name",
+        text: "Section Name",
+        links: [
+          {
+            name: "admin-revamp",
+            route: "admin-revamp",
+            routeModels: [123],
+            text: "Revamp",
+            href: "https://forum.site.com/t/123",
+            icon: "rocket",
+          },
+        ],
+      },
+      null,
+      2
+    );
+  }
+
   @action
   loadDefaultNavConfig() {
     const savedConfig = this.adminSidebarExperimentStateManager.navConfig;
@@ -48,6 +72,40 @@ export default class AdminConfigAreaSidebarExperiment extends Component {
       return;
     }
 
+    let invalidRoutes = [];
+    config.forEach((section) => {
+      section.links.forEach((link) => {
+        if (!link.route) {
+          return;
+        }
+
+        if (this.validRouteNames.has(link.route)) {
+          return;
+        }
+
+        try {
+          this.router._router._routerMicrolib.recognizer.handlersFor(
+            link.route
+          );
+          this.validRouteNames.add(link.route);
+        } catch {
+          invalidRoutes.push(link.route);
+        }
+      });
+    });
+
+    if (invalidRoutes.length) {
+      this.toasts.error({
+        duration: 3000,
+        data: {
+          message: `There was an error with one or more of the routes provided: ${invalidRoutes.join(
+            ", "
+          )}`,
+        },
+      });
+      return;
+    }
+
     this.#saveConfig(config);
   }