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.

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

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
 import { hash } from "@ember/helper";
 import { service } from "@ember/service";
 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 DropdownMenu from "discourse/components/dropdown-menu";
 import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
+import { bind } from "discourse-common/utils/decorators";
 import { i18n } from "discourse-i18n";
 import {
   DangerActionListItem,
@@ -20,8 +22,23 @@ import {
 } from "admin/components/admin-page-action-button";
 import DMenu from "float-kit/components/d-menu";
 
+const HEADLESS_ACTIONS = ["new", "edit"];
+
 export default class AdminPageHeader extends Component {
   @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() {
     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>
+    {{#if this.shouldDisplay}}
       <div class="admin-page-header">
         <div class="admin-page-header__breadcrumbs">
           <DBreadcrumbsContainer />
@@ -121,5 +156,6 @@ export default class AdminPageHeader extends Component {
           </div>
         {{/unless}}
       </div>
+    {{/if}}
   </template>
 }

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

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

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

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

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

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

app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs

@@ -44,6 +44,16 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
     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) {
     await render(<template>
       <AdminPageHeader @titleLabel="admin.titile">

spec/system/admin_flags_spec.rb

@@ -27,7 +27,7 @@ describe "Admin Flags Page", type: :system do
     )
 
     admin_flags_page.visit
-    expect(page).to have_css(".admin-page-header")
+    expect(admin_header).to be_visible
 
     admin_flags_page.toggle("spam")
     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
 
     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
       .fill_in_name("Vulgar")
       .fill_in_description("New flag description")
@@ -113,7 +115,7 @@ describe "Admin Flags Page", type: :system do
 
     # update
     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
 
     expect(admin_flags_page).to have_flags(

spec/system/admin_user_fields_spec.rb

@@ -6,9 +6,11 @@ describe "Admin User Fields", type: :system do
   before { sign_in(current_user) }
 
   let(:user_fields_page) { PageObjects::Pages::AdminUserFields.new }
+  let(:admin_header) { PageObjects::Components::AdminHeader.new }
 
   it "correctly saves user fields" do
     user_fields_page.visit
+    expect(admin_header).to be_visible
     user_fields_page.add_field(name: "Occupation", description: "What you do for work")
 
     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.click_add_field
 
+    expect(admin_header).to be_hidden
+
     form = page.find(".user-field")
     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")
 
+      expect(admin_header).to be_hidden
+
       form.find(".btn-primary").click
 
       expect(page).to have_no_text(I18n.t("admin_js.admin.user_fields.requirement.confirmation"))

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

@@ -6,6 +6,14 @@ module PageObjects
       def has_tabs?(names)
         expect(page.all(".admin-nav-submenu__tabs a").map(&:text)).to eq(names)
       end
+
+      def visible?
+        has_css?(".admin-page-header")
+      end
+
+      def hidden?
+        has_no_css?(".admin-page-header")
+      end
     end
   end
 end