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

Add settings tab to flags moderation page.
This commit is contained in:
Krzysztof Kotlarek 2024-08-27 09:47:19 +10:00 committed by GitHub
parent 417ade98f9
commit df6c152fa1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 177 additions and 25 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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