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.
This commit is contained in:
Jarek Radosz 2024-07-08 17:55:03 +02:00 committed by GitHub
parent 49f6e1133a
commit ae79ba1447
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 17 additions and 25 deletions

View File

@ -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}}
/>

View File

@ -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}}

View File

@ -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"}}
/>

View File

@ -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>

View File

@ -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 });