From a78fd4e78c0e01518e75b07bba62f816bce00fc9 Mon Sep 17 00:00:00 2001 From: Vault Automation Date: Mon, 12 Jan 2026 07:55:04 -0800 Subject: [PATCH] [UI] Remaining page headers update (#11650) (#11707) * Update page headers that were missed in other prs * VAULT-40928 replication headers * VAULT-40926 swagger ui page header * VAULT-40921 remaining core pageheader * VAULT-40929 sync headeres * Fix replication tests * Fix tests! * Fix eslint error * Fix mislabel * Add badge selector * Fix failing tests Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com> --- ui/app/components/raft-storage-overview.hbs | 9 +++-- ui/app/components/secret-edit.hbs | 21 +++-------- .../addon/components/replication-header.hbs | 35 +++++++++--------- .../addon/components/secret-list-header.hbs | 36 ++++++------------- .../addon/components/secret-list-header.js | 20 +++++++++++ ui/lib/core/addon/components/upgrade-page.hbs | 8 +---- .../addon/components/page/credentials.hbs | 13 +++---- .../addon/components/swagger-ui.hbs | 8 +---- .../addon/components/page/mode-index.hbs | 16 ++------- .../addon/components/page/mode-index.js | 11 ++++++ ui/lib/replication/addon/templates/index.hbs | 26 +++----------- ui/lib/replication/addon/templates/mode.hbs | 31 ++++++++-------- .../addon/components/secrets/landing-cta.hbs | 9 +++-- .../addon/components/secrets/landing-cta.ts | 17 +++++++++ ui/lib/sync/addon/components/sync-header.hbs | 33 ++++++----------- ...erprise-replication-dr-secondaries-test.js | 2 +- .../enterprise-replication-modes-test.js | 19 +++++----- .../acceptance/enterprise-replication-test.js | 14 ++++---- ui/tests/acceptance/replication-nav-test.js | 9 +++-- .../secrets/backend/kv/secret-test.js | 2 +- .../kubernetes/page/credentials-test.js | 4 +-- .../components/replication-header-test.js | 9 ++--- .../components/replication-page-test.js | 5 +-- .../components/secret-list-header-test.js | 8 +++-- .../sync/secrets/destination-header-test.js | 3 +- .../sync/secrets/page/destinations-test.js | 4 +-- .../page/destinations/create-and-edit-test.js | 4 +-- .../destinations/destination/details-test.js | 3 +- .../destinations/destination/secrets-test.js | 5 ++- .../sync/secrets/page/overview-test.js | 10 +++--- .../components/sync/sync-header-test.js | 23 +++--------- .../components/upgrade-page-test.js | 5 +-- 32 files changed, 198 insertions(+), 224 deletions(-) create mode 100644 ui/lib/sync/addon/components/secrets/landing-cta.ts diff --git a/ui/app/components/raft-storage-overview.hbs b/ui/app/components/raft-storage-overview.hbs index 09c42498ac..fed5f6ca62 100644 --- a/ui/app/components/raft-storage-overview.hbs +++ b/ui/app/components/raft-storage-overview.hbs @@ -3,9 +3,8 @@ SPDX-License-Identifier: BUSL-1.1 }} - - Raft Storage - + + <:actions> {{#if this.useServiceWorker}} @@ -19,8 +18,8 @@ {{/if}} Restore - - + + <:head as |H|> diff --git a/ui/app/components/secret-edit.hbs b/ui/app/components/secret-edit.hbs index 3c9946d66f..08022cdff7 100644 --- a/ui/app/components/secret-edit.hbs +++ b/ui/app/components/secret-edit.hbs @@ -4,8 +4,8 @@ }}
- - + + <:breadcrumbs> - - -

- {{#if (eq @mode "create")}} - Create Secret - {{else if (eq @mode "edit")}} - Edit Secret - {{else}} - {{@key.id}} - - {{/if}} -

-
-
+ + + {{! tabs for show only }} {{#if (eq @mode "show")}}
diff --git a/ui/lib/core/addon/components/replication-header.hbs b/ui/lib/core/addon/components/replication-header.hbs index 00c56e76bc..0a7a0a8383 100644 --- a/ui/lib/core/addon/components/replication-header.hbs +++ b/ui/lib/core/addon/components/replication-header.hbs @@ -3,27 +3,26 @@ SPDX-License-Identifier: BUSL-1.1 }} - - + + <:breadcrumbs> {{#if (not (or @isSummaryDashboard @isSecondary))}} - - - - + {{/if}} - - -

- {{@title}} - {{#if @data.anyReplicationEnabled}} - - {{#if @secondaryId}} - - {{/if}} + + <:badges> + {{#if @data.anyReplicationEnabled}} + + {{#if @secondaryId}} + {{/if}} -

-
-
+ {{/if}} + + {{#if @showTabs}}
diff --git a/ui/lib/core/addon/components/secret-list-header.hbs b/ui/lib/core/addon/components/secret-list-header.hbs index 0267ebc310..68212c0eb0 100644 --- a/ui/lib/core/addon/components/secret-list-header.hbs +++ b/ui/lib/core/addon/components/secret-list-header.hbs @@ -4,32 +4,16 @@ }} {{#let (options-for-backend this.effectiveEngineType) as |options|}} - - - - - - {{#if @isConfigure}} - - {{/if}} - - - -

- - {{@model.id}} - {{#if this.isKV}} - - {{/if}} -

- -
-
+ + <:breadcrumbs> + + + <:badges> + {{#if this.isKV}} + + {{/if}} + + {{#if options.tabs}}
diff --git a/ui/lib/core/addon/components/secret-list-header.js b/ui/lib/core/addon/components/secret-list-header.js index 83385db071..3fc77cdde4 100644 --- a/ui/lib/core/addon/components/secret-list-header.js +++ b/ui/lib/core/addon/components/secret-list-header.js @@ -23,6 +23,26 @@ import { getEffectiveEngineType } from 'vault/utils/external-plugin-helpers'; */ export default class SecretListHeader extends Component { + get breadcrumbs() { + const breadcrumbs = [ + { label: 'Secrets', route: 'vault.cluster.secrets' }, + { + label: this.args.model.id, + route: 'vault.cluster.secrets.backend.list-root', + model: this.args.model.id, + current: !this.args.isConfigure, + }, + ]; + + if (this.args.isConfigure) { + breadcrumbs.push([{ label: 'Configure' }]); + + return breadcrumbs; + } + + return breadcrumbs; + } + get effectiveEngineType() { return getEffectiveEngineType(this.args.model.engineType); } diff --git a/ui/lib/core/addon/components/upgrade-page.hbs b/ui/lib/core/addon/components/upgrade-page.hbs index 3b621020d3..bf21c8f6c2 100644 --- a/ui/lib/core/addon/components/upgrade-page.hbs +++ b/ui/lib/core/addon/components/upgrade-page.hbs @@ -3,13 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 }} - - -

- {{this.title}} -

-
-
+ - + + <:breadcrumbs> - - -

- {{if this.credentials "Credentials" "Generate credentials"}} -

-
- + +
{{#if this.credentials}}
diff --git a/ui/lib/open-api-explorer/addon/components/swagger-ui.hbs b/ui/lib/open-api-explorer/addon/components/swagger-ui.hbs index de6efa1337..fe89e503df 100644 --- a/ui/lib/open-api-explorer/addon/components/swagger-ui.hbs +++ b/ui/lib/open-api-explorer/addon/components/swagger-ui.hbs @@ -3,13 +3,7 @@ SPDX-License-Identifier: BUSL-1.1 }} - - -

- API Explorer -

-
-
+
diff --git a/ui/lib/replication/addon/components/page/mode-index.hbs b/ui/lib/replication/addon/components/page/mode-index.hbs index 475d4c204b..1fac33d9ef 100644 --- a/ui/lib/replication/addon/components/page/mode-index.hbs +++ b/ui/lib/replication/addon/components/page/mode-index.hbs @@ -4,20 +4,8 @@ }} {{#if @replicationDisabled}} - - -

- {{#if (eq @replicationMode "dr")}} - Enable Disaster Recovery Replication - {{else if (eq @replicationMode "performance")}} - Enable Performance Replication - {{else}} - {{! should never get here, but have safe fallback just in case }} - Enable Replication - {{/if}} -

-
-
+ +
{{#if (eq @replicationMode "dr")}}

diff --git a/ui/lib/replication/addon/components/page/mode-index.js b/ui/lib/replication/addon/components/page/mode-index.js index a1f1e2b0d5..baa5339618 100644 --- a/ui/lib/replication/addon/components/page/mode-index.js +++ b/ui/lib/replication/addon/components/page/mode-index.js @@ -22,6 +22,17 @@ import Component from '@glimmer/component'; * @param {string} replicationMode - should be "dr" or "performance" */ export default class PageModeIndex extends Component { + get title() { + if (this.args.replicationMode === 'dr') { + return 'Enable Disaster Recovery Replication'; + } + if (this.args.replicationMode === 'performance') { + return 'Enable Performance Replication'; + } + // should never get here, but have safe fallback just in case + return 'Enable Replication'; + } + canEnable = (type) => { const { cluster, replicationMode } = this.args; let perm; diff --git a/ui/lib/replication/addon/templates/index.hbs b/ui/lib/replication/addon/templates/index.hbs index dd565c56d6..c4be062011 100644 --- a/ui/lib/replication/addon/templates/index.hbs +++ b/ui/lib/replication/addon/templates/index.hbs @@ -7,24 +7,14 @@
{{#if (eq this.model.mode "unsupported")}} {{! Replication is unsupported in non-enterprise or when using non-transactional storage (eg inmem) }} - - -

- Replication unsupported -

-
-
+ + {{else if this.model.replicationIsInitializing}} {{else if this.model.allReplicationDisabled}} - - -

- Enable Replication -

-
-
+ +

- Replication -

- - +
{{else}} {{#if this.model.replicationAttrs.replicationEnabled}} - - - - - - - - -

- {{this.model.replicationModeForDisplay}} - -

-
-
+ + <:breadcrumbs> + + + <:badges> + + + +