From b92afa5b4a3b56e8e1218e9976894fa3845bc075 Mon Sep 17 00:00:00 2001
From: Phil Renaud <phil.renaud@hashicorp.com>
Date: Tue, 18 Jun 2024 12:37:51 -0400
Subject: [PATCH] [ui] Helios page headers added to the administration section
 (#23366)

* Helios page headers added to the administration section

* data-test-title mirage helper missed on policy page
---
 .changelog/23366.txt                          |  3 ++
 .../namespaces/acl-namespace.hbs              | 33 +++++++++----------
 .../administration/namespaces/new.hbs         |  8 ++---
 .../templates/administration/policies/new.hbs |  6 ++--
 .../administration/policies/policy.hbs        | 16 ++++-----
 ui/app/templates/administration/roles/new.hbs |  6 ++--
 .../templates/administration/roles/role.hbs   | 18 +++++-----
 .../sentinel-policies/policy.hbs              |  8 ++---
 .../templates/administration/tokens/new.hbs   |  6 ++--
 .../templates/administration/tokens/token.hbs | 18 +++++-----
 10 files changed, 63 insertions(+), 59 deletions(-)
 create mode 100644 .changelog/23366.txt

diff --git a/.changelog/23366.txt b/.changelog/23366.txt
new file mode 100644
index 000000000..a9e1ada7f
--- /dev/null
+++ b/.changelog/23366.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update headers in the Admin section to use the HashiCorp Design System
+```
diff --git a/ui/app/templates/administration/namespaces/acl-namespace.hbs b/ui/app/templates/administration/namespaces/acl-namespace.hbs
index 77a8f2c7b..8a2223b5e 100644
--- a/ui/app/templates/administration/namespaces/acl-namespace.hbs
+++ b/ui/app/templates/administration/namespaces/acl-namespace.hbs
@@ -6,14 +6,12 @@
 {{page-title "Namespace"}}
 
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		<div>
-			{{this.model.name}}
-		</div>
-		{{#if (and (not (eq this.model.name "default"))  (can "destroy namespace"))}}
-			<TwoStepButton
+  <Hds::PageHeader as |PH|>
+    <PH.Title data-test-title>{{this.model.name}}</PH.Title>
+    {{#if (and (not (eq this.model.name "default"))  (can "destroy namespace"))}}
+      <PH.Actions>
+        <TwoStepButton
           data-test-delete-namespace
-          @alignRight={{true}}
           @idleText="Delete Namespace"
           @cancelText="Cancel"
           @confirmText="Yes, Delete Namespace"
@@ -22,16 +20,17 @@
           @disabled={{this.deleteNamespace.isRunning}}
           @onConfirm={{perform this.deleteNamespace}}
         />
-		{{/if}}
-	</h1>
+      </PH.Actions>
+    {{/if}}
+  </Hds::PageHeader>
 
-<Hds::Alert @type="inline" @color="highlight" @icon="info" class="related-entities notification" as |A|>
-  <A.Title>Related Resources</A.Title>
-  <A.Description>
-    View this namespace's <<Hds::Link::Inline @route="jobs" @query={{hash namespace=this.model.name}}>jobs</<Hds::Link::Inline>
-      or <<Hds::Link::Inline @route="variables" @query={{hash namespace=this.model.name}}>variables</<Hds::Link::Inline>.
-  </A.Description>
-</Hds::Alert>
+  <Hds::Alert @type="inline" @color="highlight" @icon="info" class="related-entities notification" as |A|>
+    <A.Title>Related Resources</A.Title>
+    <A.Description>
+      View this namespace's <<Hds::Link::Inline @route="jobs" @query={{hash namespace=this.model.name}}>jobs</<Hds::Link::Inline>
+        or <<Hds::Link::Inline @route="variables" @query={{hash namespace=this.model.name}}>variables</<Hds::Link::Inline>.
+    </A.Description>
+  </Hds::Alert>
 
-<NamespaceEditor @namespace={{this.model}} />
+  <NamespaceEditor @namespace={{this.model}} />
 </section>
diff --git a/ui/app/templates/administration/namespaces/new.hbs b/ui/app/templates/administration/namespaces/new.hbs
index 613ce0992..d2cbba0fd 100644
--- a/ui/app/templates/administration/namespaces/new.hbs
+++ b/ui/app/templates/administration/namespaces/new.hbs
@@ -6,8 +6,8 @@
 <Breadcrumb @crumb={{hash label="New" args=(array "administration.namespaces.new")}} />
 {{page-title "Create Namespace"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		Create Namespace
-	</h1>
-    <NamespaceEditor @namespace={{this.model}}/>
+  <Hds::PageHeader as |PH|>
+    <PH.Title>Create Namespace</PH.Title>
+  </Hds::PageHeader>
+  <NamespaceEditor @namespace={{this.model}}/>
 </section>
diff --git a/ui/app/templates/administration/policies/new.hbs b/ui/app/templates/administration/policies/new.hbs
index 7b84fc665..ba1e1f3e2 100644
--- a/ui/app/templates/administration/policies/new.hbs
+++ b/ui/app/templates/administration/policies/new.hbs
@@ -6,9 +6,9 @@
 <Breadcrumb @crumb={{hash label="New" args=(array "administration.policies.new")}} />
 {{page-title "Create Policy"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		Create Policy
-	</h1>
+  <Hds::PageHeader as |PH|>
+    <PH.Title>Create Policy</PH.Title>
+  </Hds::PageHeader>
   <PolicyEditor
     @policy={{this.model}}
   />
diff --git a/ui/app/templates/administration/policies/policy.hbs b/ui/app/templates/administration/policies/policy.hbs
index b73550bdc..365e90c69 100644
--- a/ui/app/templates/administration/policies/policy.hbs
+++ b/ui/app/templates/administration/policies/policy.hbs
@@ -6,12 +6,10 @@
 <Breadcrumb @crumb={{hash label=this.policy.name args=(array "administration.policies.policy" this.policy.name)}} />
 {{page-title "Policy"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		<div>
-			{{this.policy.name}}
-		</div>
-		{{#if (can "destroy policy")}}
-			<div>
+  <Hds::PageHeader as |PH|>
+    <PH.Title data-test-title>{{this.policy.name}}</PH.Title>
+    {{#if (can "destroy policy")}}
+      <PH.Actions>
         <TwoStepButton
           data-test-delete-policy
           @alignRight={{true}}
@@ -23,9 +21,9 @@
           @disabled={{this.deletePolicy.isRunning}}
           @onConfirm={{perform this.deletePolicy}}
         />
-			</div>
-		{{/if}}
-	</h1>
+      </PH.Actions>
+    {{/if}}
+  </Hds::PageHeader>
 	<PolicyEditor
 		@policy={{this.policy}}
 	/>
diff --git a/ui/app/templates/administration/roles/new.hbs b/ui/app/templates/administration/roles/new.hbs
index ac144bd88..47b113a78 100644
--- a/ui/app/templates/administration/roles/new.hbs
+++ b/ui/app/templates/administration/roles/new.hbs
@@ -6,9 +6,9 @@
 <Breadcrumb @crumb={{hash label="New" args=(array "administration.roles.new")}} />
 {{page-title "Create Role"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		Create Role
-	</h1>
+  <Hds::PageHeader as |PH|>
+    <PH.Title data-test-title>Create Role</PH.Title>
+  </Hds::PageHeader>
   {{#if this.model.policies.length}}
   <RoleEditor
     @role={{this.model.role}}
diff --git a/ui/app/templates/administration/roles/role.hbs b/ui/app/templates/administration/roles/role.hbs
index 0f75be33e..96343b190 100644
--- a/ui/app/templates/administration/roles/role.hbs
+++ b/ui/app/templates/administration/roles/role.hbs
@@ -5,12 +5,13 @@
 <Breadcrumb @crumb={{hash label=this.role.name args=(array "administration.roles.role" this.role.id)}} />
 {{page-title "Role"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		<div>
-			Edit Role
-		</div>
-		{{#if (can "destroy role")}}
-      <TwoStepButton
+  <Hds::PageHeader as |PH|>
+    <PH.Title data-test-title>
+      {{this.role.name}}
+    </PH.Title>
+    {{#if (can "destroy role")}}
+      <PH.Actions>
+        <TwoStepButton
           data-test-delete-role
           @alignRight={{true}}
           @idleText="Delete Role"
@@ -21,8 +22,9 @@
           @disabled={{this.deleteRole.isRunning}}
           @onConfirm={{perform this.deleteRole}}
         />
-		{{/if}}
-	</h1>
+      </PH.Actions>
+    {{/if}}
+  </Hds::PageHeader>
 	<RoleEditor
 		@role={{this.role}}
     @policies={{this.policies}}
diff --git a/ui/app/templates/administration/sentinel-policies/policy.hbs b/ui/app/templates/administration/sentinel-policies/policy.hbs
index 45a445902..540fb15c1 100644
--- a/ui/app/templates/administration/sentinel-policies/policy.hbs
+++ b/ui/app/templates/administration/sentinel-policies/policy.hbs
@@ -9,8 +9,8 @@
 <section class="section">
 	<Hds::PageHeader class="variable-title" as |PH|>
 		<PH.Title>{{this.model.name}}</PH.Title>
-		<PH.Actions>
-			{{#if (can "destroy sentinel-policy")}}
+		{{#if (can "destroy sentinel-policy")}}
+			<PH.Actions>
 				<div>
 					<TwoStepButton
 						data-test-delete-policy
@@ -24,8 +24,8 @@
 						@onConfirm={{perform this.deletePolicy}}
 					/>
 				</div>
-			{{/if}}
-		</PH.Actions>
+			</PH.Actions>
+		{{/if}}
 	</Hds::PageHeader>
 
 	<SentinelPolicyEditor @policy={{this.model}} />
diff --git a/ui/app/templates/administration/tokens/new.hbs b/ui/app/templates/administration/tokens/new.hbs
index 32545da73..1e6135c5f 100644
--- a/ui/app/templates/administration/tokens/new.hbs
+++ b/ui/app/templates/administration/tokens/new.hbs
@@ -6,9 +6,9 @@
 <Breadcrumb @crumb={{hash label="New" args=(array "administration.tokens.new")}} />
 {{page-title "Create Token"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		Create Token
-	</h1>
+  <Hds::PageHeader as |PH|>
+    <PH.Title>Create Token</PH.Title>
+  </Hds::PageHeader>
   <TokenEditor
     @token={{this.model.token}}
     @roles={{this.model.roles}}
diff --git a/ui/app/templates/administration/tokens/token.hbs b/ui/app/templates/administration/tokens/token.hbs
index 5c9c4d03b..0697410e5 100644
--- a/ui/app/templates/administration/tokens/token.hbs
+++ b/ui/app/templates/administration/tokens/token.hbs
@@ -5,12 +5,13 @@
 <Breadcrumb @crumb={{hash label=this.activeToken.name args=(array "administration.tokens.token" this.activeToken.id)}} />
 {{page-title "Token"}}
 <section class="section">
-	<h1 class="title with-flex" data-test-title>
-		<div>
-			Edit Token
-		</div>
-		{{#if (can "destroy token")}}
-      <TwoStepButton
+  <Hds::PageHeader as |PH|>
+    <PH.Title data-test-title>
+      Edit Token
+    </PH.Title>
+    {{#if (can "destroy token")}}
+      <PH.Actions>
+        <TwoStepButton
           data-test-delete-token
           @alignRight={{true}}
           @idleText="Delete Token"
@@ -21,8 +22,9 @@
           @disabled={{this.deleteToken.isRunning}}
           @onConfirm={{perform this.deleteToken}}
         />
-		{{/if}}
-	</h1>
+      </PH.Actions>
+    {{/if}}
+  </Hds::PageHeader>
   <TokenEditor
     @token={{this.activeToken}}
     @policies={{this.policies}}