UX: flag settings tab to follow UI guidelines (#28479)

Add settings tab to flags moderation page.

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

@@ -0,0 +1,47 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { service } from "@ember/service";
+import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import SiteSettingFilter from "discourse/lib/site-setting-filter";
+import i18n from "discourse-common/helpers/i18n";
+import { bind } from "discourse-common/utils/decorators";
+import AdminFilteredSiteSettings from "admin/components/admin-filtered-site-settings";
+import SiteSetting from "admin/models/site-setting";
+
+export default class AdminConfigAreasFlagsSettings extends Component {
+  @service siteSettings;
+  @tracked settings;
+
+  @bind
+  loadSettings() {
+    SiteSetting.findAll({
+      categories: ["spam", "rate_limits", "chat"],
+    }).then((settings) => {
+      this.settings = new SiteSettingFilter(settings).performSearch(
+        "flags",
+        {}
+      );
+    });
+  }
+
+  <template>
+    <DBreadcrumbsItem
+      @path="/admin/config/flags/settings"
+      @label={{i18n "settings"}}
+    />
+
+    <div
+      class="content-body admin-config-area__settings admin-detail pull-left"
+      {{didInsert this.loadSettings}}
+    >
+      {{#if this.settings}}
+        <AdminFilteredSiteSettings
+          @initialFilter={{@initialFilter}}
+          @onFilterChanged={{@onFilterChanged}}
+          @settings={{this.settings}}
+        />
+      {{/if}}
+    </div>
+  </template>
+}

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

@@ -2,14 +2,13 @@ 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 AdminFlagItem from "admin/components/admin-flag-item";
-import AdminPageHeader from "admin/components/admin-page-header";
+import AdminPageSubheader from "admin/components/admin-page-subheader";
 
 export default class AdminConfigAreasFlags extends Component {
   @service site;
@@ -70,28 +69,19 @@ export default class AdminConfigAreasFlags extends Component {
   }
 
   <template>
+    <AdminPageSubheader @titleLabel="admin.config_areas.flags.flags_tab">
+      <: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>
+    </AdminPageSubheader>
     <div class="container admin-flags">
-      <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/controllers/admin-config-flags-settings.js

@@ -0,0 +1,12 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+
+export default class AdminConfigFlagsSettingsController extends Controller {
+  filter = "";
+  queryParams = ["filter"];
+
+  @action
+  filterChangedCallback(filterData) {
+    this.set("filter", filterData.filter);
+  }
+}

app/assets/javascripts/admin/addon/controllers/admin-config-flags.js

@@ -0,0 +1,12 @@
+import Controller from "@ember/controller";
+import { service } from "@ember/service";
+
+export default class AdminConfigFlagsSettingsController extends Controller {
+  @service router;
+
+  get hideTabs() {
+    return ["adminConfig.flags.new", "adminConfig.flags.edit"].includes(
+      this.router.currentRouteName
+    );
+  }
+}

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

@@ -1,10 +1,15 @@
-import Route from "@ember/routing/route";
 import { service } from "@ember/service";
+import DiscourseRoute from "discourse/routes/discourse";
+import I18n from "discourse-i18n";
 
-export default class AdminConfigFlagsEditRoute extends Route {
+export default class AdminConfigFlagsEditRoute extends DiscourseRoute {
   @service site;
 
   model(params) {
     return this.site.flagTypes.findBy("id", parseInt(params.flag_id, 10));
   }
+
+  titleToken() {
+    return I18n.t("admin.config_areas.flags.edit_header");
+  }
 }

app/assets/javascripts/admin/addon/routes/admin-config-flags-settings.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.settings");
+  }
+}

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

@@ -214,6 +214,7 @@ export default function () {
           this.route("index", { path: "/" });
           this.route("new");
           this.route("edit", { path: "/:flag_id" });
+          this.route("settings");
         });
 
         this.route("about");

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

@@ -0,0 +1,5 @@
+<AdminConfigAreas::FlagsSettings
+  @model={{this.model}}
+  @onFilterChanged={{this.filterChangedCallback}}
+  @initialFilter={{this.filter}}
+/>

app/assets/javascripts/admin/addon/templates/config-flags.hbs

@@ -0,0 +1,28 @@
+<AdminPageHeader
+  @titleLabel="admin.config_areas.flags.header"
+  @descriptionLabel="admin.config_areas.flags.subheader"
+  @hideTabs={{this.hideTabs}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem
+      @path="/admin/config/flags"
+      @label={{i18n "admin.config_areas.flags.header"}}
+    />
+  </:breadcrumbs>
+  <:tabs>
+    <NavItem
+      @route="adminConfig.flags.settings"
+      @label="settings"
+      class="admin-flags-tabs__settings"
+    />
+    <NavItem
+      @route="adminConfig.flags.index"
+      @label="admin.config_areas.flags.flags_tab"
+      class="admin-flags-tabs__flags"
+    />
+  </:tabs>
+</AdminPageHeader>
+
+<div class="admin-container admin-config-page__main-area">
+  {{outlet}}
+</div>

app/assets/stylesheets/common/admin/settings.scss

@@ -10,6 +10,7 @@
       @media (max-width: $mobile-breakpoint) {
         float: none;
         margin-right: 0;
+        margin-left: 0;
         width: 100%;
         h3 {
           margin-bottom: 6px;

config/locales/client.en.yml

@@ -5613,6 +5613,8 @@ en:
           back: "Back to flags"
           delete: "Delete"
           delete_confirm: 'Are you sure you want to delete "%{name}"?'
+          flags_tab: "Flags"
+          settings: "Flags Settings"
           form:
             add_header: "Add flag"
             edit_header: "Edit flag"

spec/system/admin_flags_spec.rb

@@ -8,6 +8,7 @@ describe "Admin Flags Page", type: :system do
   let(:admin_flags_page) { PageObjects::Pages::AdminFlags.new }
   let(:admin_flag_form_page) { PageObjects::Pages::AdminFlagForm.new }
   let(:flag_modal) { PageObjects::Modals::Flag.new }
+  let(:admin_header) { PageObjects::Components::AdminHeader.new }
 
   before do
     sign_in(admin)
@@ -147,6 +148,30 @@ describe "Admin Flags Page", type: :system do
     )
   end
 
+  it "has settings tab" do
+    admin_flags_page.visit
+
+    expect(admin_header).to have_tabs(
+      [I18n.t("admin_js.settings"), I18n.t("admin_js.admin.config_areas.flags.flags_tab")],
+    )
+
+    admin_flags_page.click_settings_tab
+    expect(page.all(".setting-label h3").map(&:text)).to eq(
+      [
+        "silence new user sensitivity",
+        "num users to silence new user",
+        "max flags per day",
+        "tl2 additional flags per day multiplier",
+        "tl3 additional flags per day multiplier",
+        "tl4 additional flags per day multiplier",
+        "flag sockpuppets",
+        "auto respond to flag actions",
+        "num flaggers to close topic",
+        "high trust flaggers auto hide posts",
+      ],
+    )
+  end
+
   it "does not allow to move notify user flag" do
     admin_flags_page.visit
     expect(admin_flags_page).to have_no_action_for_flag("notify_user")

spec/system/page_objects/components/admin-header.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class AdminHeader < PageObjects::Pages::Base
+      def has_tabs?(names)
+        expect(page.all(".admin-nav-submenu__tabs a").map(&:text)).to eq(names)
+      end
+    end
+  end
+end

spec/system/page_objects/pages/admin_flags.rb

@@ -105,6 +105,11 @@ module PageObjects
         find(".dialog-footer .btn-primary").click
         self
       end
+
+      def click_settings_tab
+        find(".admin-flags-tabs__settings a").click
+        self
+      end
     end
   end
 end