From ae79ba1447008b8aa68d8d4f12b3959818811237 Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 8 Jul 2024 17:55:03 +0200
Subject: [PATCH] DEV: Simplify breadcrumbs by using `path` arg (#27744)

Example:

```hbs
<DBreadcrumbItem
  @path="/admin/plugins/{{@plugin.name}}"
  @label={{@plugin.nameTitleized}}
/>
```

Using `@path` instead of `@route`+`@model` combo makes it impossible to pass temporarily unresolvable routes.

This fixes a bug with navigating from a model-based route to a parent route.
---
 .../components/admin-plugin-config-page.gjs     |  7 +++----
 .../admin/addon/templates/plugins-index.hbs     |  7 +++++--
 .../addon/templates/plugins-show-settings.hbs   |  3 +--
 .../app/components/d-breadcrumbs-item.gjs       | 17 ++++-------------
 .../components/d-breadcrumbs-test.gjs           |  8 ++++----
 5 files changed, 17 insertions(+), 25 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs b/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
index afffeb8d3b1..11314fa458a 100644
--- a/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
@@ -27,14 +27,13 @@ export default class AdminPluginConfigPage extends Component {
     <div class="admin-plugin-config-page">
       <DBreadcrumbsContainer />
 
-      <DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
-        @route="adminPlugins"
+        @path="/admin/plugins"
         @label={{i18n "admin.plugins.title"}}
       />
       <DBreadcrumbsItem
-        @route="adminPlugins.show"
-        @model={{@plugin}}
+        @path="/admin/plugins/{{@plugin.name}}"
         @label={{@plugin.nameTitleized}}
       />
 
diff --git a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
index 7d5165b5ed7..08830a80341 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
@@ -1,7 +1,10 @@
 <DBreadcrumbsContainer />
 
-<DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
-<DBreadcrumbsItem @route="adminPlugins" @label={{i18n "admin.plugins.title"}} />
+<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+<DBreadcrumbsItem
+  @path="/admin/plugins"
+  @label={{i18n "admin.plugins.title"}}
+/>
 
 <div class="admin-plugins-list-container">
   {{#if this.model.length}}
diff --git a/app/assets/javascripts/admin/addon/templates/plugins-show-settings.hbs b/app/assets/javascripts/admin/addon/templates/plugins-show-settings.hbs
index a8c17447199..3c6fcbfa7de 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins-show-settings.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins-show-settings.hbs
@@ -1,6 +1,5 @@
 <DBreadcrumbsItem
-  @route="adminPlugins.show.settings"
-  @model={{@model.plugin}}
+  @path="/admin/plugins/{{@model.plugin.name}}/settings"
   @label={{i18n "admin.plugins.change_settings_short"}}
 />
 
diff --git a/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs b/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs
index 0915f1add7d..7626c4b4bb2 100644
--- a/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs
+++ b/app/assets/javascripts/discourse/app/components/d-breadcrumbs-item.gjs
@@ -1,6 +1,6 @@
 import Component from "@glimmer/component";
-import { cached } from "@glimmer/tracking";
 import { service } from "@ember/service";
+import getURL from "discourse-common/lib/get-url";
 
 export default class DBreadcrumbsItem extends Component {
   @service breadcrumbs;
@@ -16,23 +16,14 @@ export default class DBreadcrumbsItem extends Component {
     this.breadcrumbs.items.delete(this);
   }
 
-  get url() {
-    if (this.args.model) {
-      return this.router.urlFor(this.args.route, this.args.model);
-    } else {
-      return this.router.urlFor(this.args.route);
-    }
-  }
-
-  @cached
+  // @cached
   get templateForContainer() {
     // Those are evaluated in a different context than the `@linkClass`
-    const { label } = this.args;
-    const url = this.url;
+    const { label, path } = this.args;
 
     return <template>
       <li ...attributes>
-        <a href={{url}} class={{@linkClass}}>
+        <a href={{getURL path}} class={{@linkClass}}>
           {{label}}
         </a>
       </li>
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-breadcrumbs-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/d-breadcrumbs-test.gjs
index 30032874cdb..b431544358f 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/d-breadcrumbs-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-breadcrumbs-test.gjs
@@ -13,8 +13,8 @@ module(
     test("it renders a DBreadcrumbsContainer with multiple DBreadcrumbsItems", async function (assert) {
       await render(<template>
         <DBreadcrumbsContainer />
-        <DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
-        <DBreadcrumbsItem @route="about" @label={{i18n "about.simple_title"}} />
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem @path="/about" @label={{i18n "about.simple_title"}} />
       </template>);
 
       assert
@@ -28,7 +28,7 @@ module(
           @additionalLinkClasses="some-class"
           @additionalItemClasses="other-class"
         />
-        <DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       </template>);
 
       assert.dom(".d-breadcrumbs .d-breadcrumbs__item.other-class").exists();
@@ -43,7 +43,7 @@ module(
       await render(<template>
         <DBreadcrumbsContainer />
         <DBreadcrumbsContainer />
-        <DBreadcrumbsItem @route="admin" @label={{i18n "admin_title"}} />
+        <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       </template>);
 
       assert.dom(".d-breadcrumbs").exists({ count: 2 });