UX: Apply admin UI guidelines to custom flags (#28433)

This commit changes the custom flags admin config area
to use the AdminPageHeader component and conforms
to the new admin UI guidelines. Also makes some slight
modifications to the reusable components to handle using
a @route for an action button.

app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs

@@ -54,7 +54,6 @@ export default class AdminConfigAreasAbout extends Component {
       <div class="admin-config-area__primary-content">
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.general_settings"
-          @primaryActionLabel="admin.config_areas.about.update"
           class="admin-config-area-about__general-settings-section"
         >
           <AdminConfigAreasAboutGeneralSettings
@@ -65,7 +64,6 @@ export default class AdminConfigAreasAbout extends Component {
         </AdminConfigAreaCard>
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.contact_information"
-          @primaryActionLabel="admin.config_areas.about.update"
           class="admin-config-area-about__contact-information-section"
         >
           <AdminConfigAreasAboutContactInformation
@@ -76,7 +74,6 @@ export default class AdminConfigAreasAbout extends Component {
         </AdminConfigAreaCard>
         <AdminConfigAreaCard
           @heading="admin.config_areas.about.your_organization"
-          @primaryActionLabel="admin.config_areas.about.update"
           class="admin-config-area-about__your-organization-section"
         >
           <AdminConfigAreasAboutYourOrganization

app/assets/javascripts/admin/addon/components/admin-config-areas/flags.gjs

@@ -2,13 +2,14 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { SYSTEM_FLAG_IDS } from "discourse/lib/constants";
 import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
-import AdminConfigHeader from "admin/components/admin-config-header";
 import AdminFlagItem from "admin/components/admin-flag-item";
+import AdminPageHeader from "admin/components/admin-page-header";
 
 export default class AdminConfigAreasFlags extends Component {
   @service site;
@@ -70,16 +71,27 @@ export default class AdminConfigAreasFlags extends Component {
 
   <template>
     <div class="container admin-flags">
-      <AdminConfigHeader
-        @name="flags"
-        @heading="admin.config_areas.flags.header"
-        @subheading="admin.config_areas.flags.subheader"
-        @primaryActionRoute="adminConfig.flags.new"
-        @primaryActionCssClass="admin-flags__header-add-flag"
-        @primaryActionIcon="plus"
-        @primaryActionLabel="admin.config_areas.flags.add"
-        @primaryActionDisabled={{this.addFlagButtonDisabled}}
-      />
+      <AdminPageHeader
+        @titleLabel="admin.config_areas.flags.header"
+        @descriptionLabel="admin.config_areas.flags.subheader"
+      >
+        <:breadcrumbs>
+          <DBreadcrumbsItem
+            @path="/admin/config/flags"
+            @label={{i18n "admin.config_areas.flags.header"}}
+          />
+        </:breadcrumbs>
+        <:actions as |actions|>
+          <actions.Primary
+            @route="adminConfig.flags.new"
+            @title="admin.config_areas.flags.add"
+            @label="admin.config_areas.flags.add"
+            @icon="plus"
+            @disabled={{this.addFlagButtonDisabled}}
+            class="admin-flags__header-add-flag"
+          />
+        </:actions>
+      </AdminPageHeader>
       <table class="admin-flags__items grid">
         <thead>
           <th>{{i18n "admin.config_areas.flags.description"}}</th>

app/assets/javascripts/admin/addon/components/admin-config-header.gjs

@@ -1,35 +0,0 @@
-import Component from "@glimmer/component";
-import { LinkTo } from "@ember/routing";
-import concatClass from "discourse/helpers/concat-class";
-import dIcon from "discourse-common/helpers/d-icon";
-import i18n from "discourse-common/helpers/i18n";
-
-export default class AdminFlagItem extends Component {
-  get headerCssClass() {
-    return `admin-${this.args.name}__header`;
-  }
-  <template>
-    <div class={{this.headerCssClass}}>
-      <h2>{{i18n @heading}}</h2>
-      {{#if @primaryActionRoute}}
-        <LinkTo
-          @route={{@primaryActionRoute}}
-          class={{concatClass
-            "btn-primary"
-            "btn"
-            "btn-icon-text"
-            @primaryActionCssClass
-          }}
-          @disabled={{@primaryActionDisabled}}
-        >
-          {{dIcon @primaryActionIcon}}
-          {{i18n @primaryActionLabel}}
-        </LinkTo>
-      {{/if}}
-
-      {{#if @subheading}}
-        <h3>{{i18n @subheading}}</h3>
-      {{/if}}
-    </div>
-  </template>
-}

app/assets/javascripts/admin/addon/components/admin-flags-form.gjs

@@ -2,12 +2,11 @@ import Component from "@glimmer/component";
 import { cached } from "@glimmer/tracking";
 import { hash } from "@ember/helper";
 import { action } from "@ember/object";
-import { LinkTo } from "@ember/routing";
 import { service } from "@ember/service";
+import BackButton from "discourse/components/back-button";
 import Form from "discourse/components/form";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
-import icon from "discourse-common/helpers/d-icon";
 import i18n from "discourse-common/helpers/i18n";
 import { bind } from "discourse-common/utils/decorators";
 import I18n from "discourse-i18n";
@@ -116,14 +115,10 @@ export default class AdminFlagsForm extends Component {
 
   <template>
     <div class="admin-config-area">
-      <h2>{{i18n "admin.config_areas.flags.header"}}</h2>
-      <LinkTo
+      <BackButton
         @route="adminConfig.flags"
-        class="btn-default btn btn-icon-text btn-back"
-      >
-        {{icon "chevron-left"}}
-        {{i18n "admin.config_areas.flags.back"}}
-      </LinkTo>
+        @label="admin.config_areas.flags.back"
+      />
       <div class="admin-config-area__primary-content admin-flag-form">
         <AdminConfigAreaCard @heading={{this.header}}>
           <Form @onSubmit={{this.save}} @data={{this.formData}} as |form|>

app/assets/javascripts/admin/addon/components/admin-page-action-button.gjs

@@ -5,6 +5,7 @@ export const AdminPageActionButton = <template>
     class="admin-page-action-button btn-small"
     ...attributes
     @action={{@action}}
+    @route={{@route}}
     @label={{@label}}
     @title={{@title}}
     @icon={{@icon}}
@@ -16,6 +17,7 @@ export const PrimaryButton = <template>
     class="btn-primary"
     ...attributes
     @action={{@action}}
+    @route={{@route}}
     @label={{@label}}
     @title={{@title}}
     @icon={{@icon}}
@@ -27,6 +29,7 @@ export const DangerButton = <template>
     class="btn-danger"
     ...attributes
     @action={{@action}}
+    @route={{@route}}
     @label={{@label}}
     @title={{@title}}
     @icon={{@icon}}
@@ -38,6 +41,7 @@ export const DefaultButton = <template>
     class="btn-default"
     ...attributes
     @action={{@action}}
+    @route={{@route}}
     @label={{@label}}
     @title={{@title}}
     @icon={{@icon}}

app/assets/javascripts/admin/addon/components/admin-page-subheader.gjs

@@ -1,4 +1,5 @@
 import { hash } from "@ember/helper";
+import { htmlSafe } from "@ember/template";
 import i18n from "discourse-common/helpers/i18n";
 import {
   DangerButton,
@@ -16,6 +17,15 @@ const AdminPageSubheader = <template>
           to="actions"
         }}
       </div>
+
+      {{#if @descriptionLabel}}
+        <p class="admin-page-header__description">
+          {{i18n @descriptionLabel}}
+          {{#if @learnMoreUrl}}
+            {{htmlSafe (i18n "learn_more_with_link" url=@learnMoreUrl)}}
+          {{/if}}
+        </p>
+      {{/if}}
     </div>
   </div>
 </template>;

app/assets/javascripts/admin/addon/routes/admin-config-flags-index.js

@@ -0,0 +1,8 @@
+import DiscourseRoute from "discourse/routes/discourse";
+import I18n from "discourse-i18n";
+
+export default class AdminConfigFlagsIndexRoute extends DiscourseRoute {
+  titleToken() {
+    return I18n.t("admin.config_areas.flags.header");
+  }
+}