From 3aba34f58a6fac398ca5ebd1b958f4b04ef1ca6e Mon Sep 17 00:00:00 2001
From: Vault Automation <github-team-secure-vault-core@hashicorp.com>
Date: Thu, 18 Sep 2025 12:30:02 -0400
Subject: [PATCH] UI: Update header for Secret engines list page (#9416)
 (#9428)

* replacing page header with hds / updates

* add cluster name

* fix import

* move to exisiting getVersion task, update ref

Co-authored-by: Dan Rivera <dan.rivera@hashicorp.com>
---
 ui/app/components/secret-engine/list.hbs      | 22 +++++++++++++++----
 ui/app/components/secret-engine/list.ts       |  6 +++++
 ui/app/services/version.js                    |  2 ++
 .../vault/cluster/secrets/backends.hbs        |  8 -------
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/ui/app/components/secret-engine/list.hbs b/ui/app/components/secret-engine/list.hbs
index 2ec0d34a09..c9e83bfb31 100644
--- a/ui/app/components/secret-engine/list.hbs
+++ b/ui/app/components/secret-engine/list.hbs
@@ -3,10 +3,24 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<div class="top-right-absolute has-top-margin-s">
-  <Hds::Button @text="Enable new engine" @icon="plus" @route="vault.cluster.secrets.mounts" data-test-enable-engine />
-</div>
-<Toolbar>
+<Hds::PageHeader class="page-header" as |PH|>
+  <PH.Breadcrumb>
+    <Hds::Breadcrumb data-test-breadcrumbs>
+      <Hds::Breadcrumb::Item @text="Vault" @route="vault.cluster.dashboard" @icon="vault" />
+      <Hds::Breadcrumb::Item @text="Secrets engines" @current={{true}} />
+    </Hds::Breadcrumb>
+  </PH.Breadcrumb>
+  <PH.IconTile @icon="key" />
+
+  <PH.Title>Secrets engines</PH.Title>
+  <PH.Subtitle>Secrets engines available in {{this.clusterName}} Vault cluster.</PH.Subtitle>
+
+  <PH.Actions>
+    <Hds::Button @text="Enable new engine" @icon="plus" @route="vault.cluster.secrets.mounts" data-test-enable-engine />
+  </PH.Actions>
+</Hds::PageHeader>
+
+<Toolbar class="has-top-margin-m">
   <ToolbarFilters>
     <SearchSelect
       @id="filter-by-engine-type"
diff --git a/ui/app/components/secret-engine/list.ts b/ui/app/components/secret-engine/list.ts
index f81310ef75..47a27f1ecc 100644
--- a/ui/app/components/secret-engine/list.ts
+++ b/ui/app/components/secret-engine/list.ts
@@ -13,6 +13,7 @@ import type FlashMessageService from 'vault/services/flash-messages';
 import type SecretsEngineResource from 'vault/resources/secrets/engine';
 import type ApiService from 'vault/services/api';
 import type RouterService from '@ember/routing/router-service';
+import type VersionService from 'vault/services/version';
 import engineDisplayData from 'vault/helpers/engines-display-data';
 
 /**
@@ -34,12 +35,17 @@ export default class SecretEngineList extends Component<Args> {
   @service declare readonly flashMessages: FlashMessageService;
   @service declare readonly api: ApiService;
   @service declare readonly router: RouterService;
+  @service declare readonly version: VersionService;
 
   @tracked secretEngineOptions: Array<string> | [] = [];
   @tracked selectedEngineType = '';
   @tracked selectedEngineName = '';
   @tracked engineToDisable: SecretsEngineResource | undefined = undefined;
 
+  get clusterName() {
+    return this.version.clusterName;
+  }
+
   get displayableBackends() {
     return this.args.secretEngines.filter((backend) => backend.shouldIncludeInList);
   }
diff --git a/ui/app/services/version.js b/ui/app/services/version.js
index 7c066342ba..a37ddf82b5 100644
--- a/ui/app/services/version.js
+++ b/ui/app/services/version.js
@@ -16,6 +16,7 @@ export default class VersionService extends Service {
   @service flags;
   @tracked features = [];
   @tracked version = null;
+  @tracked clusterName = null;
   @tracked type = null;
 
   get isEnterprise() {
@@ -71,6 +72,7 @@ export default class VersionService extends Service {
     // Fetch seal status with token to get version
     const response = yield this.store.adapterFor('cluster').sealStatus(false);
     this.version = response?.version;
+    this.clusterName = response?.cluster_name;
   }
 
   @task
diff --git a/ui/app/templates/vault/cluster/secrets/backends.hbs b/ui/app/templates/vault/cluster/secrets/backends.hbs
index ce61e4f1eb..feeb21399e 100644
--- a/ui/app/templates/vault/cluster/secrets/backends.hbs
+++ b/ui/app/templates/vault/cluster/secrets/backends.hbs
@@ -3,12 +3,4 @@
   SPDX-License-Identifier: BUSL-1.1
 }}
 
-<PageHeader as |p|>
-  <p.levelLeft>
-    <h1 class="title is-3">
-      Secrets Engines
-    </h1>
-  </p.levelLeft>
-</PageHeader>
-
 <SecretEngine::List @secretEngines={{this.model}} />
\ No newline at end of file