Skip to content

Commit 0793c81

Browse files
hc-github-team-secure-vault-corekiannaquach
hc-github-team-secure-vault-core
and
kiannaquach
authored
[UI][VAULT-40930] Replace direct use of Hds::PageHeader with Page::Header (#11721) (#11760)
* Replace direct use of hds::pageheader with page::header * Update test selector * Remove unused selector Co-authored-by: Kianna <[email protected]>
1 parent cab60d7 commit 0793c81

File tree

11 files changed

+71
-92
lines changed

11 files changed

+71
-92
lines changed

‎ui/app/components/clients/page-header.hbs‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,9 @@
33
SPDX-License-Identifier: BUSL-1.1
44
}}
55

6-
<Hds::PageHeader class="has-top-padding-l has-bottom-padding-m" as |PH|>
7-
<PH.Title>
8-
Client Usage
9-
</PH.Title>
10-
11-
{{#if @activityTimestamp}}
12-
<PH.Subtitle data-test-activity-timestamp>
6+
<Page::Header @title="Client Usage">
7+
<:subtitle>
8+
{{#if @activityTimestamp}}
139
Dashboard last updated:
1410
{{date-format @activityTimestamp "MMM d yyyy, h:mm:ss aaa" withTimeZone=true}}
1511
<Hds::Button
@@ -21,9 +17,9 @@
2117
data-test-button="Refresh page"
2218
{{on "click" this.refreshRoute}}
2319
/>
24-
</PH.Subtitle>
25-
{{/if}}
26-
<PH.Description>
20+
{{/if}}
21+
</:subtitle>
22+
<:description>
2723
{{#if (and this.version.isEnterprise @billingStartTime)}}
2824
{{! Enterprise should always have a @billingStartTime but as a fallback allow the user to query dates manually. }}
2925
{{! A dropdown renders in Clients::DateRange to query specific dates if we have a @billingStartTime }}
@@ -55,12 +51,11 @@
5551
</Hds::Text::Body>
5652
</div>
5753
{{/if}}
58-
</PH.Description>
59-
60-
<PH.Actions class="align-items-end align-self-end">
54+
</:description>
55+
<:actions>
6156
{{#if this.showExportButton}}
6257
<Hds::Button
63-
class="has-font-weight-normal"
58+
class="has-font-weight-normal align-items-end align-self-end"
6459
data-test-export-button
6560
@text="Export activity data"
6661
@color="secondary"
@@ -78,9 +73,8 @@
7873
@setEditModalVisible={{this.setEditModalVisible}}
7974
class={{if (and this.version.isCommunity this.startDate this.endDate) "position-absolute"}}
8075
/>
81-
</PH.Actions>
82-
83-
</Hds::PageHeader>
76+
</:actions>
77+
</Page::Header>
8478

8579
{{#if this.showExportModal}}
8680
<Hds::Modal id="attribution-csv-download-modal" class="has-text-left" @onClose={{this.resetModal}} as |M|>

‎ui/app/components/recovery/page/header.hbs‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,19 @@
33
SPDX-License-Identifier: BUSL-1.1
44
}}
55

6-
<Hds::PageHeader class="has-top-padding-l has-bottom-padding-m" as |PH|>
7-
{{#if @breadcrumbs}}
8-
<PH.Breadcrumb>
6+
<Page::Header @title={{@title}} @subtitle={{@subtitle}}>
7+
<:breadcrumbs>
8+
{{#if @breadcrumbs}}
99
<Page::Breadcrumbs @breadcrumbs={{@breadcrumbs}} />
10-
</PH.Breadcrumb>
11-
{{/if}}
12-
13-
<PH.Title>
14-
{{@title}}
10+
{{/if}}
11+
</:breadcrumbs>
12+
<:badges>
1513
{{#if this.version.isCommunity}}
1614
<Hds::Badge @text="Enterprise" @color="highlight" data-test-badge="enterprise" />
1715
{{/if}}
18-
</PH.Title>
19-
20-
<PH.Subtitle>
21-
{{@subtitle}}
22-
</PH.Subtitle>
23-
24-
{{#if @action}}
25-
<PH.Actions>
16+
</:badges>
17+
<:actions>
18+
{{#if @action}}
2619
<Hds::Button
2720
@text={{@action.text}}
2821
@icon={{@action.icon}}
@@ -31,6 +24,6 @@
3124
@route={{@action.route}}
3225
@models={{@action.models}}
3326
/>
34-
</PH.Actions>
35-
{{/if}}
36-
</Hds::PageHeader>
27+
{{/if}}
28+
</:actions>
29+
</Page::Header>

‎ui/app/components/secret-engine/list.hbs‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,18 @@
33
SPDX-License-Identifier: BUSL-1.1
44
}}
55

6-
<Hds::PageHeader class="page-header" as |PH|>
7-
<PH.Breadcrumb>
8-
<Hds::Breadcrumb data-test-breadcrumbs>
9-
<Hds::Breadcrumb::Item @text="Vault" @route="vault.cluster.dashboard" @icon="vault" />
10-
<Hds::Breadcrumb::Item @text="Secrets engines" @current={{true}} />
11-
</Hds::Breadcrumb>
12-
</PH.Breadcrumb>
13-
<PH.IconTile @icon="key" />
14-
15-
<PH.Title>Secrets engines</PH.Title>
16-
<PH.Subtitle>Secrets engines available in the
17-
{{this.namespace.currentNamespace}}
18-
namespace of the
19-
{{this.version.clusterName}}
20-
cluster.</PH.Subtitle>
21-
22-
<PH.Actions>
6+
<Page::Header
7+
@title="Secrets engines"
8+
@subtitle="Secrets engines available in the {{this.namespace.currentNamespace}} namespace of the {{this.version.clusterName}}cluster."
9+
@icon="key"
10+
>
11+
<:breadcrumbs>
12+
<Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
13+
</:breadcrumbs>
14+
<:actions>
2315
<Hds::Button @text="Enable new engine" @icon="plus" @route="vault.cluster.secrets.enable" data-test-enable-engine />
24-
</PH.Actions>
25-
</Hds::PageHeader>
16+
</:actions>
17+
</Page::Header>
2618

2719
{{! Filters section }}
2820
<Hds::SegmentedGroup class="has-top-margin-m" as |SG|>

‎ui/app/components/secret-engine/list.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,19 @@ export default class SecretEngineList extends Component<Args> {
8686
},
8787
];
8888

89+
get breadcrumbs() {
90+
return [
91+
{
92+
label: 'Vault',
93+
route: 'vault.cluster.dashboard',
94+
icon: 'vault',
95+
},
96+
{
97+
label: 'Secrets engines',
98+
},
99+
];
100+
}
101+
89102
get displayableBackends() {
90103
return this.args.secretEngines.filter((backend) => backend.shouldIncludeInList);
91104
}

‎ui/app/components/secret-engines/catalog.hbs‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,11 @@
33
SPDX-License-Identifier: BUSL-1.1
44
}}
55

6-
<Hds::PageHeader class="page-header" as |PH|>
7-
<PH.Breadcrumb>
8-
<Hds::Breadcrumb data-test-breadcrumbs>
9-
<Hds::Breadcrumb::Item @text="Secrets engines" @route="vault.cluster.secrets.backends" />
10-
<Hds::Breadcrumb::Item @text="Enable secrets engine" @current={{true}} />
11-
</Hds::Breadcrumb>
12-
</PH.Breadcrumb>
13-
</Hds::PageHeader>
6+
<Page::Header>
7+
<:breadcrumbs>
8+
<Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
9+
</:breadcrumbs>
10+
</Page::Header>
1411

1512
{{#if @pluginCatalogError}}
1613
<div class="has-bottom-padding-m">

‎ui/app/components/secret-engines/catalog.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,18 @@ export default class SecretEnginesCatalogComponent extends Component<Args> {
4343
@tracked flyoutPlugin: unknown = null;
4444
@tracked flyoutPluginType: string | null = null;
4545

46+
get breadcrumbs() {
47+
return [
48+
{
49+
label: 'Secrets engines',
50+
route: 'vault.cluster.secrets.backends',
51+
},
52+
{
53+
label: 'Enable secrets engine',
54+
},
55+
];
56+
}
57+
4658
get secretEngines() {
4759
// If an enterprise license is present, return all secret engines;
4860
// otherwise, return only the secret engines supported in OSS.

‎ui/lib/core/addon/components/page-header.hbs‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎ui/lib/core/addon/components/page/header.hbs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@
1818
{{yield to="badges"}}
1919
</PH.Badges>
2020
{{/if}}
21-
{{#if @subtitle}}
21+
{{#if (has-block "subtitle")}}
22+
<PH.Subtitle>{{yield to="subtitle"}}</PH.Subtitle>
23+
{{else if @subtitle}}
2224
<PH.Subtitle>{{@subtitle}}</PH.Subtitle>
2325
{{/if}}
2426
{{#if (has-block "description")}}

‎ui/lib/core/app/components/page-header.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎ui/tests/acceptance/clients/counts-test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ module('Acceptance | clients | counts', function (hooks) {
151151
await click(CLIENT_COUNT.dateRange.edit);
152152
await click(CLIENT_COUNT.dateRange.dropdownOption(1));
153153
assert
154-
.dom(CLIENT_COUNT.activityTimestamp)
154+
.dom(GENERAL.hdsPageHeaderSubtitle)
155155
.hasTextContaining(`Dashboard last updated: ${format(STATIC_NOW, 'MMM d yyyy')}`);
156156
// Save URL with query params before clicking refresh
157157
const url = currentURL();
@@ -163,7 +163,7 @@ module('Acceptance | clients | counts', function (hooks) {
163163
assert.true(this.refreshSpy.calledOnce, 'router.refresh() is called once');
164164
assert.strictEqual(currentURL(), url, 'url is the same after clicking refresh');
165165
assert
166-
.dom(CLIENT_COUNT.activityTimestamp)
166+
.dom(GENERAL.hdsPageHeaderSubtitle)
167167
.hasTextContaining(`Dashboard last updated: ${format(fakeUpdatedNow, 'MMM d yyyy')}`);
168168
});
169169

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

0 commit comments

Comments
 (0)