UX: Use DPageHeader on the Logs page (#30786)

Update the header of the admin Logs page to be more consistent with the rest of the admin UI.

The tabs to access the different sub-pages have also been updated.

app/assets/javascripts/admin/addon/templates/admin.hbs

@@ -24,7 +24,7 @@
           {{#if this.currentUser.admin}}
             <NavItem @route="adminEmail" @label="admin.email.title" />
           {{/if}}
-          <NavItem @route="adminLogs" @label="admin.logs.title" />
+          <NavItem @route="adminLogs" @label="admin.logs.nav_title" />
           <NavItem
             @route="adminCustomizeThemes"
             @routeParam="themes"

app/assets/javascripts/admin/addon/templates/logs.hbs

@@ -1,27 +1,37 @@
-<AdminNav>
-  <NavItem
-    @route="adminLogs.staffActionLogs"
-    @label="admin.logs.staff_actions.title"
-  />
-  {{#if this.currentUser.can_see_emails}}
+<DPageHeader
+  @titleLabel={{i18n "admin.logs.title"}}
+  @descriptionLabel={{i18n "admin.logs.description"}}
+  @shouldDisplay={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem @path="/admin/logs" @label={{i18n "admin.logs.title"}} />
+  </:breadcrumbs>
+  <:tabs>
     <NavItem
-      @route="adminLogs.screenedEmails"
-      @label="admin.logs.screened_emails.title"
+      @route="adminLogs.staffActionLogs"
+      @label="admin.logs.staff_actions.title"
     />
-  {{/if}}
-  <NavItem
-    @route="adminLogs.screenedIpAddresses"
-    @label="admin.logs.screened_ips.title"
-  />
-  <NavItem
-    @route="adminLogs.screenedUrls"
-    @label="admin.logs.screened_urls.title"
-  />
-  <NavItem @route="adminSearchLogs" @label="admin.logs.search_logs.title" />
-  {{#if this.currentUser.admin}}
-    <NavItem @path="/logs" @label="admin.logs.logster.title" />
-  {{/if}}
-</AdminNav>
+    {{#if this.currentUser.can_see_emails}}
+      <NavItem
+        @route="adminLogs.screenedEmails"
+        @label="admin.logs.screened_emails.title"
+      />
+    {{/if}}
+    <NavItem
+      @route="adminLogs.screenedIpAddresses"
+      @label="admin.logs.screened_ips.title"
+    />
+    <NavItem
+      @route="adminLogs.screenedUrls"
+      @label="admin.logs.screened_urls.title"
+    />
+    <NavItem @route="adminSearchLogs" @label="admin.logs.search_logs.title" />
+    {{#if this.currentUser.admin}}
+      <NavItem @path="/logs" @label="admin.logs.logster.title" />
+    {{/if}}
+  </:tabs>
+</DPageHeader>
 
 <div class="admin-container">
   {{outlet}}

app/assets/javascripts/discourse/app/lib/sidebar/admin-nav-map.js

@@ -193,7 +193,7 @@ export const ADMIN_NAV_MAP = [
       },
       {
         name: "admin_logs_staff_action_logs",
-        route: "adminLogs.staffActionLogs",
+        route: "adminLogs",
         label: "admin.security.sidebar_link.staff_action_logs.title",
         keywords: "admin.security.sidebar_link.staff_action_logs.keywords",
         icon: "user-shield",

config/locales/client.en.yml

@@ -6423,7 +6423,9 @@ en:
           post_approved: "Post Approved"
 
       logs:
-        title: "Logs"
+        title: "Logs & screening"
+        description: "Logs and screening allow you to monitor and manage your community, ensuring that it remains safe and respectful. You can view logs of all actions taken by staff members, search logs, and user screening configuration."
+        nav_title: "Logs"
         action: "Action"
         created_at: "Created"
         last_match_at: "Last Matched"