mirror of
https://github.com/discourse/discourse.git
synced 2024-12-19 11:48:23 +08:00
UX: the ability to hide the admin header (#30175)
Some pages like new/edit item should not display admin header. New attribute called `@shouldDisplay` was added. As a proof of concept, the flags page was updated.
This commit is contained in:
parent
d69edab611
commit
51a5fa036a
|
@ -1,4 +1,5 @@
|
||||||
import Component from "@glimmer/component";
|
import Component from "@glimmer/component";
|
||||||
|
import { tracked } from "@glimmer/tracking";
|
||||||
import { hash } from "@ember/helper";
|
import { hash } from "@ember/helper";
|
||||||
import { service } from "@ember/service";
|
import { service } from "@ember/service";
|
||||||
import { htmlSafe } from "@ember/template";
|
import { htmlSafe } from "@ember/template";
|
||||||
|
@ -7,6 +8,7 @@ import DBreadcrumbsContainer from "discourse/components/d-breadcrumbs-container"
|
||||||
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
|
import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
|
||||||
import DropdownMenu from "discourse/components/dropdown-menu";
|
import DropdownMenu from "discourse/components/dropdown-menu";
|
||||||
import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
|
import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
|
||||||
|
import { bind } from "discourse-common/utils/decorators";
|
||||||
import { i18n } from "discourse-i18n";
|
import { i18n } from "discourse-i18n";
|
||||||
import {
|
import {
|
||||||
DangerActionListItem,
|
DangerActionListItem,
|
||||||
|
@ -20,8 +22,23 @@ import {
|
||||||
} from "admin/components/admin-page-action-button";
|
} from "admin/components/admin-page-action-button";
|
||||||
import DMenu from "float-kit/components/d-menu";
|
import DMenu from "float-kit/components/d-menu";
|
||||||
|
|
||||||
|
const HEADLESS_ACTIONS = ["new", "edit"];
|
||||||
|
|
||||||
export default class AdminPageHeader extends Component {
|
export default class AdminPageHeader extends Component {
|
||||||
@service site;
|
@service site;
|
||||||
|
@service router;
|
||||||
|
@tracked shouldDisplay = true;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super(...arguments);
|
||||||
|
this.router.on("routeDidChange", this, this.#checkIfShouldDisplay);
|
||||||
|
this.#checkIfShouldDisplay();
|
||||||
|
}
|
||||||
|
|
||||||
|
willDestroy() {
|
||||||
|
super.willDestroy(...arguments);
|
||||||
|
this.router.off("routeDidChange", this, this.#checkIfShouldDisplay);
|
||||||
|
}
|
||||||
|
|
||||||
get title() {
|
get title() {
|
||||||
if (this.args.titleLabelTranslated) {
|
if (this.args.titleLabelTranslated) {
|
||||||
|
@ -39,7 +56,25 @@ export default class AdminPageHeader extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@bind
|
||||||
|
#checkIfShouldDisplay() {
|
||||||
|
if (this.args.shouldDisplay !== undefined) {
|
||||||
|
return (this.shouldDisplay = this.args.shouldDisplay);
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentPath = this.router._router.currentPath;
|
||||||
|
if (!currentPath) {
|
||||||
|
return (this.shouldDisplay = true);
|
||||||
|
}
|
||||||
|
|
||||||
|
const pathSegments = currentPath.split(".");
|
||||||
|
this.shouldDisplay =
|
||||||
|
!pathSegments.includes("admin") ||
|
||||||
|
!HEADLESS_ACTIONS.find((segment) => pathSegments.includes(segment));
|
||||||
|
}
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
{{#if this.shouldDisplay}}
|
||||||
<div class="admin-page-header">
|
<div class="admin-page-header">
|
||||||
<div class="admin-page-header__breadcrumbs">
|
<div class="admin-page-header__breadcrumbs">
|
||||||
<DBreadcrumbsContainer />
|
<DBreadcrumbsContainer />
|
||||||
|
@ -121,5 +156,6 @@ export default class AdminPageHeader extends Component {
|
||||||
</div>
|
</div>
|
||||||
{{/unless}}
|
{{/unless}}
|
||||||
</div>
|
</div>
|
||||||
|
{{/if}}
|
||||||
</template>
|
</template>
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
import Controller from "@ember/controller";
|
|
||||||
import { service } from "@ember/service";
|
|
||||||
|
|
||||||
export default class AdminConfigFlagsController extends Controller {
|
|
||||||
@service router;
|
|
||||||
|
|
||||||
get hideTabs() {
|
|
||||||
return ["adminConfig.flags.new", "adminConfig.flags.edit"].includes(
|
|
||||||
this.router.currentRouteName
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,38 +1 @@
|
||||||
<AdminPageHeader
|
|
||||||
@titleLabel="admin.config_areas.flags.header"
|
|
||||||
@descriptionLabel="admin.config_areas.flags.subheader"
|
|
||||||
@learnMoreUrl="https://meta.discourse.org/t/moderation-flags/325589"
|
|
||||||
@hideTabs={{this.hideTabs}}
|
|
||||||
>
|
|
||||||
<: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"
|
|
||||||
@disabled={{this.addFlagButtonDisabled}}
|
|
||||||
class="admin-flags__header-add-flag"
|
|
||||||
/>
|
|
||||||
</:actions>
|
|
||||||
<: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">
|
|
||||||
<AdminConfigAreas::Flags />
|
<AdminConfigAreas::Flags />
|
||||||
</div>
|
|
|
@ -0,0 +1,37 @@
|
||||||
|
<AdminPageHeader
|
||||||
|
@titleLabel="admin.config_areas.flags.header"
|
||||||
|
@descriptionLabel="admin.config_areas.flags.subheader"
|
||||||
|
@learnMoreUrl="https://meta.discourse.org/t/moderation-flags/325589"
|
||||||
|
>
|
||||||
|
<: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"
|
||||||
|
@disabled={{this.addFlagButtonDisabled}}
|
||||||
|
class="admin-flags__header-add-flag"
|
||||||
|
/>
|
||||||
|
</:actions>
|
||||||
|
<: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>
|
|
@ -44,6 +44,16 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
|
||||||
assert.dom(".admin-page-header__title").exists().hasText("Wow so cool");
|
assert.dom(".admin-page-header__title").exists().hasText("Wow so cool");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("@shouldDisplay", async function (assert) {
|
||||||
|
await render(<template>
|
||||||
|
<AdminPageHeader
|
||||||
|
@titleLabelTranslated="Wow so cool"
|
||||||
|
@shouldDisplay={{false}}
|
||||||
|
/>
|
||||||
|
</template>);
|
||||||
|
assert.dom(".admin-page-header").doesNotExist();
|
||||||
|
});
|
||||||
|
|
||||||
test("renders base breadcrumbs and yielded <:breadcrumbs>", async function (assert) {
|
test("renders base breadcrumbs and yielded <:breadcrumbs>", async function (assert) {
|
||||||
await render(<template>
|
await render(<template>
|
||||||
<AdminPageHeader @titleLabel="admin.titile">
|
<AdminPageHeader @titleLabel="admin.titile">
|
||||||
|
|
|
@ -27,7 +27,7 @@ describe "Admin Flags Page", type: :system do
|
||||||
)
|
)
|
||||||
|
|
||||||
admin_flags_page.visit
|
admin_flags_page.visit
|
||||||
expect(page).to have_css(".admin-page-header")
|
expect(admin_header).to be_visible
|
||||||
|
|
||||||
admin_flags_page.toggle("spam")
|
admin_flags_page.toggle("spam")
|
||||||
topic_page.visit_topic(post.topic).open_flag_topic_modal
|
topic_page.visit_topic(post.topic).open_flag_topic_modal
|
||||||
|
@ -81,7 +81,9 @@ describe "Admin Flags Page", type: :system do
|
||||||
expect(admin_flags_page).to have_add_flag_button_enabled
|
expect(admin_flags_page).to have_add_flag_button_enabled
|
||||||
|
|
||||||
admin_flags_page.click_add_flag
|
admin_flags_page.click_add_flag
|
||||||
expect(page).not_to have_css(".admin-page-header")
|
|
||||||
|
expect(admin_header).to be_hidden
|
||||||
|
|
||||||
admin_flag_form_page
|
admin_flag_form_page
|
||||||
.fill_in_name("Vulgar")
|
.fill_in_name("Vulgar")
|
||||||
.fill_in_description("New flag description")
|
.fill_in_description("New flag description")
|
||||||
|
@ -113,7 +115,7 @@ describe "Admin Flags Page", type: :system do
|
||||||
|
|
||||||
# update
|
# update
|
||||||
admin_flags_page.visit.click_edit_flag("custom_vulgar")
|
admin_flags_page.visit.click_edit_flag("custom_vulgar")
|
||||||
expect(page).not_to have_css(".admin-page-header")
|
expect(admin_header).to be_hidden
|
||||||
admin_flag_form_page.fill_in_name("Tasteless").click_save
|
admin_flag_form_page.fill_in_name("Tasteless").click_save
|
||||||
|
|
||||||
expect(admin_flags_page).to have_flags(
|
expect(admin_flags_page).to have_flags(
|
||||||
|
|
|
@ -6,9 +6,11 @@ describe "Admin User Fields", type: :system do
|
||||||
before { sign_in(current_user) }
|
before { sign_in(current_user) }
|
||||||
|
|
||||||
let(:user_fields_page) { PageObjects::Pages::AdminUserFields.new }
|
let(:user_fields_page) { PageObjects::Pages::AdminUserFields.new }
|
||||||
|
let(:admin_header) { PageObjects::Components::AdminHeader.new }
|
||||||
|
|
||||||
it "correctly saves user fields" do
|
it "correctly saves user fields" do
|
||||||
user_fields_page.visit
|
user_fields_page.visit
|
||||||
|
expect(admin_header).to be_visible
|
||||||
user_fields_page.add_field(name: "Occupation", description: "What you do for work")
|
user_fields_page.add_field(name: "Occupation", description: "What you do for work")
|
||||||
|
|
||||||
expect(user_fields_page).to have_user_field("Occupation")
|
expect(user_fields_page).to have_user_field("Occupation")
|
||||||
|
@ -30,6 +32,8 @@ describe "Admin User Fields", type: :system do
|
||||||
user_fields_page.visit
|
user_fields_page.visit
|
||||||
user_fields_page.click_add_field
|
user_fields_page.click_add_field
|
||||||
|
|
||||||
|
expect(admin_header).to be_hidden
|
||||||
|
|
||||||
form = page.find(".user-field")
|
form = page.find(".user-field")
|
||||||
editable_label = I18n.t("admin_js.admin.user_fields.editable.title")
|
editable_label = I18n.t("admin_js.admin.user_fields.editable.title")
|
||||||
|
|
||||||
|
@ -69,6 +73,8 @@ describe "Admin User Fields", type: :system do
|
||||||
|
|
||||||
form.find(".user-field-name").fill_in(with: "Favourite Transformer")
|
form.find(".user-field-name").fill_in(with: "Favourite Transformer")
|
||||||
|
|
||||||
|
expect(admin_header).to be_hidden
|
||||||
|
|
||||||
form.find(".btn-primary").click
|
form.find(".btn-primary").click
|
||||||
|
|
||||||
expect(page).to have_no_text(I18n.t("admin_js.admin.user_fields.requirement.confirmation"))
|
expect(page).to have_no_text(I18n.t("admin_js.admin.user_fields.requirement.confirmation"))
|
||||||
|
|
|
@ -6,6 +6,14 @@ module PageObjects
|
||||||
def has_tabs?(names)
|
def has_tabs?(names)
|
||||||
expect(page.all(".admin-nav-submenu__tabs a").map(&:text)).to eq(names)
|
expect(page.all(".admin-nav-submenu__tabs a").map(&:text)).to eq(names)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def visible?
|
||||||
|
has_css?(".admin-page-header")
|
||||||
|
end
|
||||||
|
|
||||||
|
def hidden?
|
||||||
|
has_no_css?(".admin-page-header")
|
||||||
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in New Issue
Block a user