[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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update headers in the Admin section to use the HashiCorp Design System
+```

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>

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>

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}}
   />

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}}
 	/>

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

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

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}} />

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

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