UX: Final pass of admin setting pages (#30682)

This commit finalises the admin setting page consistency
efforts by:

* Converting all route templates into .gjs
* Adding `@hideTabs={{true}}` for all the page headers so we
  don't show a border line when it's not needed
* Introduce `@showBreadcrumb` and default to true for
  AdminAreaSettings, for all these pages the Settings part of
  the breadcrumb is redundant
This commit is contained in:
Martin Brennan 2025-01-10 11:03:07 +10:00 committed by GitHub
parent c99a8dcfe7
commit f4b417462b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 276 additions and 173 deletions

View File

@ -17,6 +17,7 @@ export default class AdminAreaSettings extends Component {
@tracked settings = [];
@tracked filter = "";
@tracked loading = false;
@tracked showBreadcrumb = this.args.showBreadcrumb ?? true;
constructor() {
super(...arguments);
@ -62,7 +63,9 @@ export default class AdminAreaSettings extends Component {
}
<template>
<DBreadcrumbsItem @path={{@path}} @label={{i18n "settings"}} />
{{#if this.showBreadcrumb}}
<DBreadcrumbsItem @path={{@path}} @label={{i18n "settings"}} />
{{/if}}
<div
class="content-body admin-config-area__settings admin-detail pull-left"

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.developer.title"}}
@descriptionLabel={{i18n "admin.config.developer.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="developer"
@path="/admin/config/developer"
@filter={{@controller.filter}}

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.experimental.title"}}
@descriptionLabel={{i18n "admin.config.experimental.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="experimental"
@path="/admin/config/experimental"
@filter={{@controller.filter}}

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.files.title"}}
@descriptionLabel={{i18n "admin.config.files.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="files"
@path="/admin/config/files"
@filter={{@controller.filter}}

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.font_style.title"}}
@descriptionLabel={{i18n "admin.config.font_style.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/fonts"
@label={{i18n "admin.config.font_style.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="fonts"
@path="/admin/config/fonts"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.font_style.title"}}
@descriptionLabel={{i18n "admin.config.font_style.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/fonts"
@label={{i18n "admin.config.font_style.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@area="fonts"
@path="/admin/config/fonts"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.group_permissions.title"}}
@descriptionLabel={{i18n
"admin.config.group_permissions.header_description"
@ -22,6 +23,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="group_permissions"
@path="/admin/config/group-permissions"
@filter={{@controller.filter}}

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.legal.title"}}
@descriptionLabel={{i18n "admin.config.legal.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/legal"
@label={{i18n "admin.config.legal.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="legal"
@path="/admin/config/legal"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.legal.title"}}
@descriptionLabel={{i18n "admin.config.legal.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/legal"
@label={{i18n "admin.config.legal.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@area="legal"
@path="/admin/config/legal"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -0,0 +1,33 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.login_and_authentication.title"}}
@descriptionLabel={{i18n
"admin.config.login_and_authentication.header_description"
}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/login-and-authentication"
@label={{i18n "admin.config.login_and_authentication.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="login"
@path="/admin/config/login-and-authentication"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,23 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.login_and_authentication.title"}}
@descriptionLabel={{i18n
"admin.config.login_and_authentication.header_description"
}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/login-and-authentication"
@label={{i18n "admin.config.login_and_authentication.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@categories="login"
@path="/admin/config/login-and-authentication"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.logo.title"}}
@descriptionLabel={{i18n "admin.config.logo.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/logo"
@label={{i18n "admin.config.logo.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="branding"
@path="/admin/config/logo"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.logo.title"}}
@descriptionLabel={{i18n "admin.config.logo.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/logo"
@label={{i18n "admin.config.logo.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@categories="branding"
@path="/admin/config/logo"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.navigation.title"}}
@descriptionLabel={{i18n "admin.config.navigation.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/navigation"
@label={{i18n "admin.config.navigation.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="navigation"
@path="/admin/config/navigation"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.navigation.title"}}
@descriptionLabel={{i18n "admin.config.navigation.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/navigation"
@label={{i18n "admin.config.navigation.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@area="navigation"
@path="/admin/config/navigation"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.notifications.title"}}
@descriptionLabel={{i18n "admin.config.notifications.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/notifications"
@label={{i18n "admin.config.notifications.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="notifications"
@path="/admin/config/notifications"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.notifications.title"}}
@descriptionLabel={{i18n "admin.config.notifications.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/notifications"
@label={{i18n "admin.config.notifications.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@area="notifications"
@path="/admin/config/notifications"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.onebox.title"}}
@descriptionLabel={{i18n "admin.config.onebox.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="onebox"
@path="/admin/config/onebox"
@filter={{@controller.filter}}

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.other.title"}}
@descriptionLabel={{i18n "admin.config.other.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="uncategorized"
@path="/admin/config/other"
@filter={{@controller.filter}}

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.rate_limits.title"}}
@descriptionLabel={{i18n "admin.config.rate_limits.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="rate_limits"
@path="/admin/config/rate-limits"
@filter={{@controller.filter}}

View File

@ -0,0 +1,31 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.search.title"}}
@descriptionLabel={{i18n "admin.config.search.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/search"
@label={{i18n "admin.config.search.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="search"
@path="/admin/config/search"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,21 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.search.title"}}
@descriptionLabel={{i18n "admin.config.search.header_description"}}
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/search"
@label={{i18n "admin.config.search.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@categories="search"
@path="/admin/config/search"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.security.title"}}
@descriptionLabel={{i18n "admin.config.security.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="security"
@path="/admin/config/security"
@filter={{@controller.filter}}

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.spam.title"}}
@descriptionLabel={{i18n "admin.config.spam.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="spam"
@path="/admin/config/spam"
@filter={{@controller.filter}}

View File

@ -0,0 +1,32 @@
import RouteTemplate from "ember-route-template";
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
import DPageHeader from "discourse/components/d-page-header";
import { i18n } from "discourse-i18n";
import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.trust_levels.title"}}
@descriptionLabel={{i18n "admin.config.trust_levels.header_description"}}
@learnMoreUrl="https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/"
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/trust-levels"
@label={{i18n "admin.config.trust_levels.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@area="trust_levels"
@path="/admin/config/trust-levels"
@filter={{@controller.filter}}
@adminSettingsFilterChangedCallback={{@controller.adminSettingsFilterChangedCallback}}
/>
</div>
</template>);

View File

@ -1,22 +0,0 @@
<DPageHeader
@titleLabel={{i18n "admin.config.trust_levels.title"}}
@descriptionLabel={{i18n "admin.config.trust_levels.header_description"}}
@learnMoreUrl="https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/"
>
<:breadcrumbs>
<DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
<DBreadcrumbsItem
@path="/admin/config/trust-levels"
@label={{i18n "admin.config.trust_levels.title"}}
/>
</:breadcrumbs>
</DPageHeader>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@area="trust_levels"
@path="/admin/config/trust-levels"
@filter={{this.filter}}
@adminSettingsFilterChangedCallback={{this.adminSettingsFilterChangedCallback}}
/>
</div>

View File

@ -6,6 +6,7 @@ import AdminAreaSettings from "admin/components/admin-area-settings";
export default RouteTemplate(<template>
<DPageHeader
@hideTabs={{true}}
@titleLabel={{i18n "admin.config.user_api.title"}}
@descriptionLabel={{i18n "admin.config.user_api.header_description"}}
>
@ -20,6 +21,7 @@ export default RouteTemplate(<template>
<div class="admin-config-page__main-area">
<AdminAreaSettings
@showBreadcrumb={{false}}
@categories="user_api"
@path="/admin/config/user-api"
@filter={{@controller.filter}}

View File

@ -7091,7 +7091,7 @@ en:
confirm_delete: "Are you sure you would like to delete this DiscourseConnect record?"
user_fields:
title: "User Fields"
title: "User fields"
help: "Create custom user fields to collect extra details about your community members. You can choose what information is required during sign-up, what shows on profiles, and what users can update."
no_user_fields: "You don't have any custom user fields yet."
add: "Add user field"