mirrors/vault
1
0
Fork 0
mirror of https://github.com/hashicorp/vault.git synced 2026-05-06 04:46:25 +02:00
Code Issues Projects Releases Wiki Activity

[UI][VAULT-40930] Replace direct use of Hds::PageHeader with Page::Header (#11721) (#11760)

Browse Source 
* Replace direct use of hds::pageheader with page::header

* Update test selector

* Remove unused selector

Co-authored-by: Kianna <30884335+kiannaquach@users.noreply.github.com>
This commit is contained in:
Vault Automation 2026-01-15 08:43:05 -07:00 committed by GitHub
parent cab60d761b
commit 0793c817ef
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 71 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
ui/app/components/clients/page-header.hbs
View File

@ -3,13 +3,9 @@
SPDX-License-Identifier: BUSL-1.1
}}
<Hds::PageHeader class="has-top-padding-l has-bottom-padding-m" as |PH|>
<PH.Title>
Client Usage
</PH.Title>
{{#if @activityTimestamp}}
<PH.Subtitle data-test-activity-timestamp>
<Page::Header @title="Client Usage">
<:subtitle>
{{#if @activityTimestamp}}
Dashboard last updated:
{{date-format @activityTimestamp "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
<Hds::Button
@ -21,9 +17,9 @@
data-test-button="Refresh page"
{{on "click" this.refreshRoute}}
/>
</PH.Subtitle>
{{/if}}
<PH.Description>
{{/if}}
</:subtitle>
<:description>
{{#if (and this.version.isEnterprise @billingStartTime)}}
{{! Enterprise should always have a @billingStartTime but as a fallback allow the user to query dates manually. }}
{{! A dropdown renders in Clients::DateRange to query specific dates if we have a @billingStartTime }}
@ -55,12 +51,11 @@
</Hds::Text::Body>
</div>
{{/if}}
</PH.Description>
<PH.Actions class="align-items-end align-self-end">
</:description>
<:actions>
{{#if this.showExportButton}}
<Hds::Button
class="has-font-weight-normal"
class="has-font-weight-normal align-items-end align-self-end"
data-test-export-button
@text="Export activity data"
@color="secondary"
@ -78,9 +73,8 @@
@setEditModalVisible={{this.setEditModalVisible}}
class={{if (and this.version.isCommunity this.startDate this.endDate) "position-absolute"}}
/>
</PH.Actions>
</Hds::PageHeader>
</:actions>
</Page::Header>
{{#if this.showExportModal}}
<Hds::Modal id="attribution-csv-download-modal" class="has-text-left" @onClose={{this.resetModal}} as |M|>

31
ui/app/components/recovery/page/header.hbs
View File

@ -3,26 +3,19 @@
SPDX-License-Identifier: BUSL-1.1
}}
<Hds::PageHeader class="has-top-padding-l has-bottom-padding-m" as |PH|>
{{#if @breadcrumbs}}
<PH.Breadcrumb>
<Page::Header @title={{@title}} @subtitle={{@subtitle}}>
<:breadcrumbs>
{{#if @breadcrumbs}}
<Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
</PH.Breadcrumb>
{{/if}}
<PH.Title>
{{@title}}
{{/if}}
</:breadcrumbs>
<:badges>
{{#if this.version.isCommunity}}
<Hds::Badge @text="Enterprise" @color="highlight" data-test-badge="enterprise" />
{{/if}}
</PH.Title>
<PH.Subtitle>
{{@subtitle}}
</PH.Subtitle>
{{#if @action}}
<PH.Actions>
</:badges>
<:actions>
{{#if @action}}
<Hds::Button
@text={{@action.text}}
@icon={{@action.icon}}
@ -31,6 +24,6 @@
@route={{@action.route}}
@models={{@action.models}}
/>
</PH.Actions>
{{/if}}
</Hds::PageHeader>
{{/if}}
</:actions>
</Page::Header>

30
ui/app/components/secret-engine/list.hbs
View File

@ -3,26 +3,18 @@
SPDX-License-Identifier: BUSL-1.1
}}
<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 the
{{this.namespace.currentNamespace}}
namespace of the
{{this.version.clusterName}}
cluster.</PH.Subtitle>
<PH.Actions>
<Page::Header
@title="Secrets engines"
@subtitle="Secrets engines available in the {{this.namespace.currentNamespace}} namespace of the {{this.version.clusterName}}cluster."
@icon="key"
>
<:breadcrumbs>
<Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
</:breadcrumbs>
<:actions>
<Hds::Button @text="Enable new engine" @icon="plus" @route="vault.cluster.secrets.enable" data-test-enable-engine />
</PH.Actions>
</Hds::PageHeader>
</:actions>
</Page::Header>
{{! Filters section }}
<Hds::SegmentedGroup class="has-top-margin-m" as |SG|>

13
ui/app/components/secret-engine/list.ts
View File

@ -86,6 +86,19 @@ export default class SecretEngineList extends Component<Args> {
},
];
get breadcrumbs() {
return [
{
label: 'Vault',
route: 'vault.cluster.dashboard',
icon: 'vault',
},
{
label: 'Secrets engines',
},
];
}
get displayableBackends() {
return this.args.secretEngines.filter((backend) => backend.shouldIncludeInList);
}

13
ui/app/components/secret-engines/catalog.hbs
View File

@ -3,14 +3,11 @@
SPDX-License-Identifier: BUSL-1.1
}}
<Hds::PageHeader class="page-header" as |PH|>
<PH.Breadcrumb>
<Hds::Breadcrumb data-test-breadcrumbs>
<Hds::Breadcrumb::Item @text="Secrets engines" @route="vault.cluster.secrets.backends" />
<Hds::Breadcrumb::Item @text="Enable secrets engine" @current={{true}} />
</Hds::Breadcrumb>
</PH.Breadcrumb>
</Hds::PageHeader>
<Page::Header>
<:breadcrumbs>
<Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
</:breadcrumbs>
</Page::Header>
{{#if @pluginCatalogError}}
<div class="has-bottom-padding-m">

12
ui/app/components/secret-engines/catalog.ts
View File

@ -43,6 +43,18 @@ export default class SecretEnginesCatalogComponent extends Component<Args> {
@tracked flyoutPlugin: unknown = null;
@tracked flyoutPluginType: string | null = null;
get breadcrumbs() {
return [
{
label: 'Secrets engines',
route: 'vault.cluster.secrets.backends',
},
{
label: 'Enable secrets engine',
},
];
}
get secretEngines() {
// If an enterprise license is present, return all secret engines;
// otherwise, return only the secret engines supported in OSS.

17
ui/lib/core/addon/components/page-header.hbs
View File

@ -1,17 +0,0 @@
{{!
Copyright IBM Corp. 2016, 2025
SPDX-License-Identifier: BUSL-1.1
}}
{{! DEPRECATED: Use <Page::Header /> instead. <Page::Header> uses the new Hds page header and should be preferred over this component. }}
<header class="page-header" ...attributes>
{{yield (hash top=(component "page-header-level"))}}
<div class="level">
<div class="level-left">
{{yield (hash levelLeft=(component "page-header-level"))}}
</div>
<div class="level-right field is-grouped">
{{yield (hash levelRight=(component "page-header-level"))}}
</div>
</div>
</header>

4
ui/lib/core/addon/components/page/header.hbs
View File

@ -18,7 +18,9 @@
{{yield to="badges"}}
</PH.Badges>
{{/if}}
{{#if @subtitle}}
{{#if (has-block "subtitle")}}
<PH.Subtitle>{{yield to="subtitle"}}</PH.Subtitle>
{{else if @subtitle}}
<PH.Subtitle>{{@subtitle}}</PH.Subtitle>
{{/if}}
{{#if (has-block "description")}}

6
ui/lib/core/app/components/page-header.js
View File

@ -1,6 +0,0 @@
/**
* Copyright IBM Corp. 2016, 2025
* SPDX-License-Identifier: BUSL-1.1
*/
export { default } from 'core/components/page-header';

8
ui/tests/acceptance/clients/counts-test.js
View File

@ -151,7 +151,7 @@ module('Acceptance | clients | counts', function (hooks) {
await click(CLIENT_COUNT.dateRange.edit);
await click(CLIENT_COUNT.dateRange.dropdownOption(1));
assert
.dom(CLIENT_COUNT.activityTimestamp)
.dom(GENERAL.hdsPageHeaderSubtitle)
.hasTextContaining(`Dashboard last updated: ${format(STATIC_NOW, 'MMM d yyyy')}`);
// Save URL with query params before clicking refresh
const url = currentURL();
@ -163,7 +163,7 @@ module('Acceptance | clients | counts', function (hooks) {
assert.true(this.refreshSpy.calledOnce, 'router.refresh() is called once');
assert.strictEqual(currentURL(), url, 'url is the same after clicking refresh');
assert
.dom(CLIENT_COUNT.activityTimestamp)
.dom(GENERAL.hdsPageHeaderSubtitle)
.hasTextContaining(`Dashboard last updated: ${format(fakeUpdatedNow, 'MMM d yyyy')}`);
});
@ -178,7 +178,7 @@ module('Acceptance | clients | counts', function (hooks) {
await click(CLIENT_COUNT.dateRange.edit);
await click(CLIENT_COUNT.dateRange.dropdownOption(1));
assert
.dom(CLIENT_COUNT.activityTimestamp)
.dom(GENERAL.hdsPageHeaderSubtitle)
.hasTextContaining(`Dashboard last updated: ${format(STATIC_NOW, 'MMM d yyyy')}`);
// Save URL with query params before clicking refresh
const url = currentURL();
@ -190,7 +190,7 @@ module('Acceptance | clients | counts', function (hooks) {
assert.true(this.refreshSpy.calledOnce, 'router.refresh() is called once');
assert.strictEqual(currentURL(), url, 'url is the same after clicking refresh');
assert
.dom(CLIENT_COUNT.activityTimestamp)
.dom(GENERAL.hdsPageHeaderSubtitle)
.hasTextContaining(`Dashboard last updated: ${format(fakeUpdatedNow, 'MMM d yyyy')}`);
});
});

1
ui/tests/helpers/clients/client-count-selectors.ts
View File

@ -7,7 +7,6 @@ import { camelize } from '@ember/string';
// TODO: separate nested into distinct exported consts
export const CLIENT_COUNT = {
activityTimestamp: '[data-test-activity-timestamp]',
card: (name: string) => `[data-test-card="${name}"]`,
counts: {
description: '[data-test-counts-description]',