UX: Admin setting page consistency - Fonts (#30564)

Create a basic config page that only contains font-related settings, to replace the setting filtered view linked to from "Font style" in the admin sidebar.

app/assets/javascripts/admin/addon/controllers/admin-config-fonts-settings.js

@@ -0,0 +1,3 @@
+import AdminAreaSettingsBaseController from "admin/controllers/admin-area-settings-base";
+
+export default class AdminConfigFontsController extends AdminAreaSettingsBaseController {}

app/assets/javascripts/admin/addon/routes/admin-config-fonts.js

@@ -0,0 +1,8 @@
+import DiscourseRoute from "discourse/routes/discourse";
+import { i18n } from "discourse-i18n";
+
+export default class AdminConfigFontsRoute extends DiscourseRoute {
+  titleToken() {
+    return i18n("admin.appearance.sidebar_link.font_style");
+  }
+}

app/assets/javascripts/admin/addon/routes/admin-route-map.js

@@ -262,6 +262,9 @@ export default function () {
             this.route("settings");
           }
         );
+        this.route("fonts", function () {
+          this.route("settings", { path: "/" });
+        });
       }
     );
 

app/assets/javascripts/admin/addon/templates/config-fonts-settings.hbs

@@ -0,0 +1,21 @@
+<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>

app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js

@@ -102,9 +102,7 @@ export const ADMIN_NAV_MAP = [
     links: [
       {
         name: "admin_font_style",
-        route: "adminSiteSettingsCategory",
-        routeModels: ["all_results"],
-        query: { filter: "font" },
+        route: "adminConfig.fonts.settings",
         label: "admin.appearance.sidebar_link.font_style",
         icon: "italic",
       },

app/models/site_setting.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 class SiteSetting < ActiveRecord::Base
-  VALID_AREAS = %w[about embedding emojis flags notifications permalinks]
+  VALID_AREAS = %w[about embedding emojis flags fonts notifications permalinks]
 
   extend GlobalPath
   extend SiteSettingExtension

config/locales/client.en.yml

@@ -5134,6 +5134,9 @@ en:
           all: "All reports"
 
       config:
+        font_style:
+          title: "Font style"
+          header_description: "Customize the font styles used by your themes."
         login_and_authentication:
           title: "Login and authentication"
           header_description: "Configure how users log in and authenticate, secrets and keys, OAuth2 providers, and more."

config/routes.rb

@@ -393,6 +393,7 @@ Discourse::Application.routes.draw do
       namespace :config, constraints: StaffConstraint.new do
         resources :site_settings, only: %i[index]
 
+        get "fonts" => "site_settings#index"
         get "login-and-authentication" => "site_settings#index"
         get "notifications" => "site_settings#index"
 

config/site_settings.yml

@@ -406,10 +406,12 @@ basic:
     default: "arial"
     enum: "BaseFontSetting"
     refresh: true
+    area: "fonts"
   heading_font:
     default: "arial"
     enum: "BaseFontSetting"
     refresh: true
+    area: "fonts"
   enable_sitemap:
     default: true
   sitemap_page_size:
@@ -3144,6 +3146,7 @@ user_preferences:
       - normal
       - larger
       - largest
+    area: "fonts"
 
   default_title_count_mode:
     type: enum