UX: Update the admin page header to use DPageHeader (#258)

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

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

Author: pento

admin/assets/javascripts/discourse/templates/update-index.hbs

@@ -1,5 +1,4 @@
 <div class="updates-heading">
-  <h3>{{i18n "admin.docker.update_title"}}</h3>
   {{#unless this.outdated}}
     <DButton
       disabled={{this.upgradeAllButtonDisabled}}

admin/assets/javascripts/discourse/templates/update-show.hbs

@@ -1,4 +1,4 @@
-<h1>{{this.title}}</h1>
+<h2>{{this.title}}</h2>
 
 <DockerManager::ProgressBar @percent={{this.upgradeStore.progressPercentage}} />
 

admin/assets/javascripts/discourse/templates/update.hbs

@@ -1,22 +1,25 @@
-<div class="admin-controls">
-  <nav>
-    <ul class="nav nav-pills">
-      <li>
-        <LinkTo @route="update.index">
-          {{i18n "admin.docker.navigation.versions"}}
-        </LinkTo>
-      </li>
+<DPageHeader
+  @titleLabel={{i18n "admin.docker.update_title"}}
+  @descriptionLabel={{i18n "admin.docker.update_description"}}
+  @shouldDisplay={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem
+      @path="/admin/update"
+      @label={{i18n "admin.docker.update_title"}}
+    />
+  </:breadcrumbs>
+  <:tabs>
+    <NavItem @route="update.index" @label="admin.docker.navigation.versions" />
+    <NavItem
+      @route="update.processes"
+      @label="admin.docker.navigation.processes"
+    />
+  </:tabs>
+</DPageHeader>
 
-      <li>
-        <LinkTo @route="update.processes">
-          {{i18n "admin.docker.navigation.processes"}}
-        </LinkTo>
-      </li>
-    </ul>
-  </nav>
-</div>
-
-<div class="docker-manager">
+<div class="docker-manager admin-container">
   {{#if this.showBanner}}
     <div id="banner">
       <div id="banner-content">

config/locales/client.en.yml

@@ -37,6 +37,7 @@ en:
         update_successful: "Update completed successfully!"
         update_tab: "Update Discourse"
         update_title: "Updates"
+        update_description: "Update Discourse and view running processes."
         updating: "Updating…"
         repo:
           name: "Name"

test/javascripts/acceptance/docker-manager-test.js

@@ -80,7 +80,7 @@ acceptance("docker_manager", function (needs) {
 
     await click(".upgrade-button");
 
-    assert.dom("h1").hasText("Update discourse");
+    assert.dom("h2").hasText("Update discourse");
     assert.dom("button.start-upgrade").exists();
   });
 });