VAULT-41682 - Updates header to add title tag and centre align with icon (#12166) (#12174)

* VAULT-41682 - update header to add title tag and centre align with icon

* Fixed linting error

Co-authored-by: mohit-hashicorp <mohit.ojha@hashicorp.com>
This commit is contained in:
Vault Automation 2026-02-05 10:33:10 -05:00 committed by GitHub
parent b1fc7f3dd1
commit a5b65edbcc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
31 changed files with 99 additions and 60 deletions

View file

@ -5,7 +5,7 @@
{{#if (or @config.reporting_enabled (eq @config.enabled "default-enabled") (eq @config.enabled "enable"))}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No data received" />
<A.Header data-test-empty-state-title @title="No data received" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Tracking is turned on and Vault is gathering data. It should appear here within 30 minutes."
@ -13,7 +13,7 @@
</Hds::ApplicationState>
{{else if @config}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="Data tracking is disabled" />
<A.Header data-test-empty-state-title @title="Data tracking is disabled" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Tracking is disabled, and no data is being collected. To turn it on, edit the configuration."
@ -32,7 +32,7 @@
</Hds::ApplicationState>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="Activity configuration data is unavailable" />
<A.Header data-test-empty-state-title @title="Activity configuration data is unavailable" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Reporting status is unknown and could be enabled or disabled. Check the Vault logs for more information."

View file

@ -56,20 +56,20 @@
<:emptyState>
{{#if (and (eq tabName "Secret sync") (not this.flags.secretsSyncIsActivated))}}
<Hds::ApplicationState @align="center" as |A|>
<A.Header @title="No secret sync clients" />
<A.Header @title="No secret sync clients" @titleTag="h2" />
<A.Body @text="No data is available because Secrets Sync has not been activated." />
<A.Body>
<Hds::Link::Standalone
<A.Footer as |F|>
<F.LinkStandalone
@icon="chevron-right"
@iconPosition="trailing"
@text="Activate Secrets Sync"
@route="vault.cluster.sync.secrets.overview"
/>
</A.Body>
</A.Footer>
</Hds::ApplicationState>
{{else}}
<Hds::ApplicationState @align="center" as |A|>
<A.Header @title="No data found" />
<A.Header @title="No data found" @titleTag="h2" />
<A.Body
@text="Select another client type {{if
this.filtersAreApplied
@ -91,7 +91,7 @@
</Clients::CountsCard>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No data found" />
<A.Header data-test-empty-state-title @title="No data found" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="No data to export in provided time range." />
</Hds::ApplicationState>
{{/if}}

View file

@ -78,7 +78,7 @@
{{else}}
{{! Empty state for no data in the selected date range }}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No data received" />
<A.Header data-test-empty-state-title @title="No data received" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text={{if
@ -92,7 +92,11 @@
{{else if (and this.version.isCommunity (or (not @startTimestamp) (not @endTimestamp)))}}
{{! Empty state for community without start or end query param }}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="Input the start and end dates to view client attribution by path." />
<A.Header
data-test-empty-state-title
@title="Input the start and end dates to view client attribution by path."
@titleTag="h2"
/>
<A.Body
data-test-empty-state-message
@text="Only historical data may be queried. No data is available for the current month."

View file

@ -28,7 +28,7 @@
>
<:emptyState>
<Hds::ApplicationState @align="center" as |A|>
<A.Header @title="No data found" />
<A.Header @title="No data found" @titleTag="h2" />
<A.Body @text="Clear or change filters to view client count data." />
<A.Footer as |F|>
<F.LinkStandalone

View file

@ -69,7 +69,7 @@
{{yield to="emptyState"}}
{{else}}
<Hds::ApplicationState as |A|>
<A.Header @title="No data to display" />
<A.Header @title="No data to display" @titleTag="h2" />
</Hds::ApplicationState>
{{/if}}
</Hds::Card::Container>

View file

@ -86,13 +86,13 @@
{{/if}}
{{else}}
<Hds::ApplicationState @align="center" data-test-empty-state="no-mount-selected" as |A|>
<A.Header data-test-empty-state-title @title="No mount selected" />
<A.Header data-test-empty-state-title @title="No mount selected" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="Select a mount above to get started." />
</Hds::ApplicationState>
{{/if}}
{{else}}
<Hds::ApplicationState @align="center" data-test-empty-state="quick-actions" as |A|>
<A.Header data-test-empty-state-title @title="Welcome to quick actions" />
<A.Header data-test-empty-state-title @title="Welcome to quick actions" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Access secret engine actions easily. Enable a compatible secret engine (such as database, KV version 2, or PKI) to get started."

View file

@ -87,7 +87,7 @@
</div>
{{else}}
<Hds::ApplicationState @align="center" data-test-empty-state="replication" class="has-top-margin-l" as |A|>
<A.Header data-test-empty-state-title @title="Replication not set up" />
<A.Header data-test-empty-state-title @title="Replication not set up" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Data will be listed here. Enable a primary replication cluster to get started."

View file

@ -78,7 +78,7 @@
{{else}}
<Hds::ApplicationState @align="center" data-test-empty-state="secrets-engines" class="has-top-margin-l" as |A|>
<A.Header data-test-empty-state-title @title="No secrets engines enabled" />
<A.Header data-test-empty-state-title @title="No secrets engines enabled" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Secret engines will be listed here. Enable a secret engine to get started."

View file

@ -144,7 +144,7 @@
{{/each}}
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No plugin selected" />
<A.Header data-test-empty-state-title @title="No plugin selected" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="Select a plugin type to be able to configure it." />
</Hds::ApplicationState>
{{/if}}
@ -158,7 +158,7 @@
<h3 class="title is-5">Statements</h3>
{{#if (eq @model.statementFields null)}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No plugin selected" />
<A.Header data-test-empty-state-title @title="No plugin selected" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="Select a plugin type to be able to configure it." />
</Hds::ApplicationState>
{{else}}
@ -309,11 +309,17 @@
</form>
{{else if (eq @model.isAvailablePlugin false)}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @icon="skip" @title="Database type unavailable" />
<A.Body data-test-empty-state-message>
<p>Not supported in the UI</p>
<p>This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here.</p>
</A.Body>
<A.Header
data-test-empty-state-title
@icon="skip"
class="align-items-end"
@title="Database type unavailable"
@titleTag="h2"
/>
<A.Body
data-test-empty-state-message
@text="This database type cannot be viewed in the UI. You will have to use the API or CLI to perform actions here."
/>
<A.Footer data-test-empty-state-actions as |F|>
<F.LinkStandalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backend.list-root" />
<F.LinkStandalone

View file

@ -142,7 +142,7 @@
/>
{{else}}
<Hds::ApplicationState @align="center" class="bottom-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No database connection selected" />
<A.Header data-test-empty-state-title @title="No database connection selected" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="Choose a connection to be able to configure a role type." />
</Hds::ApplicationState>
{{/if}}

View file

@ -38,7 +38,7 @@
</div>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No role type selected" />
<A.Header data-test-empty-state-title @title="No role type selected" @titleTag="h2" />
<A.Body data-test-empty-state-message @text="Select a type of role to be able to configure it" />
</Hds::ApplicationState>
{{/if}}
@ -55,7 +55,7 @@
</div>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No role type selected" />
<A.Header data-test-empty-state-title @title="No role type selected" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="Select a type of role to be able to add statements for creation, revocation, and/or rotation."

View file

@ -16,8 +16,10 @@
<A.Header
data-test-empty-state-title
@title={{this.errorTitle}}
@titleTag="h2"
@errorCode={{@model.errorHttpStatus}}
@icon="alert-circle"
class="align-items-end"
/>
<A.Body data-test-empty-state-message @text={{@model.errorMessage}} />
<A.Footer data-test-empty-state-actions as |F|>

View file

@ -20,6 +20,6 @@
</div>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No metadata associated with {{@model.name}} yet" />
<A.Header data-test-empty-state-title @title="No metadata associated with {{@model.name}} yet" @titleTag="h2" />
</Hds::ApplicationState>
{{/each-in}}

View file

@ -30,6 +30,10 @@
</LinkedBlock>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No {{@model.identityType}} aliases for {{@model.name}} yet" />
<A.Header
data-test-empty-state-title
@title="No {{@model.identityType}} aliases for {{@model.name}} yet"
@titleTag="h2"
/>
</Hds::ApplicationState>
{{/each}}

View file

@ -19,6 +19,6 @@
{{/each}}
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="{{@model.name}} is not a member of any groups." />
<A.Header data-test-empty-state-title @title="{{@model.name}} is not a member of any groups." @titleTag="h2" />
</Hds::ApplicationState>
{{/if}}

View file

@ -46,6 +46,6 @@
{{/each}}
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No members in this group yet" />
<A.Header data-test-empty-state-title @title="No members in this group yet" @titleTag="h2" />
</Hds::ApplicationState>
{{/if}}

View file

@ -23,7 +23,7 @@
</div>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No metadata for {{@model.name}}" />
<A.Header data-test-empty-state-title @title="No metadata for {{@model.name}}" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text='You can store custom data that you want to associate with this {{lowercase

View file

@ -23,6 +23,6 @@
{{/each}}
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="This group has no parent groups yet" />
<A.Header data-test-empty-state-title @title="This group has no parent groups yet" @titleTag="h2" />
</Hds::ApplicationState>
{{/if}}

View file

@ -24,6 +24,6 @@
</LinkedBlock>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No policies associated with {{@model.name}} yet" />
<A.Header data-test-empty-state-title @title="No policies associated with {{@model.name}} yet" @titleTag="h2" />
</Hds::ApplicationState>
{{/each}}

View file

@ -171,7 +171,13 @@
</h2>
{{#if @model.provider.permissionsError}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header @title="You are not authorized" @errorCode="403" @icon="minus-circle" />
<A.Header
@title="You are not authorized"
@titleTag="h2"
@errorCode="403"
@icon="minus-circle"
class="align-items-end"
/>
<A.Body
@text={{concat
"You must be granted permissions to see whether this key is distributed. Ask your administrator if you think you should have access to LIST /"
@ -189,7 +195,7 @@
class="top-padding-32 bottom-padding-32"
as |A|
>
<A.Header @title="Key not distributed" />
<A.Header @title="Key not distributed" @titleTag="h2" />
<A.Body @text="When this key is distributed to a destination, those details will appear here." />
{{#if @model.canListProviders}}
<A.Footer>
@ -226,7 +232,13 @@
{{/each}}
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header @title="You are not authorized" @errorCode="403" @icon="minus-circle" />
<A.Header
@title="You are not authorized"
@titleTag="h2"
@errorCode="403"
@icon="minus-circle"
class="align-items-end"
/>
<A.Body
@text={{concat
"You must be granted permissions to view distribution details for this key. Ask your administrator if you think you should have access to GET /"

View file

@ -99,7 +99,7 @@
<FormField @attr={{attr}} @model={{@model}} @modelValidations={{this.modelValidations}} />
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header @title="No provider selected" />
<A.Header @title="No provider selected" @titleTag="h2" />
<A.Body @text="Select a provider in order to configure it." />
</Hds::ApplicationState>
{{/if}}
@ -171,7 +171,7 @@
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32 bottom-padding-32" as |A|>
<A.Header @title="No keys for this provider" />
<A.Header @title="No keys for this provider" @titleTag="h2" />
<A.Body @text="Keys for this provider will be listed here. Add a key to get started." />
<A.Footer as |F|>
<F.LinkStandalone

View file

@ -48,7 +48,7 @@
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No {{this.identityType}} aliases yet" />
<A.Header data-test-empty-state-title @title="No {{this.identityType}} aliases yet" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="A list of {{this.identityType}} aliases in this namespace will be listed here. Choose one of the {{pluralize

View file

@ -97,7 +97,7 @@
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No {{pluralize this.identityType}} yet" />
<A.Header data-test-empty-state-title @title="No {{pluralize this.identityType}} yet" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="A list of {{pluralize

View file

@ -5,7 +5,7 @@
{{#if this.unwrapTokenError}}
<Hds::ApplicationState @align="center" class="has-top-margin-xxl" data-test-page-error as |A|>
<A.Header @title="Authentication error" />
<A.Header @title="Authentication error" @titleTag="h2" />
<A.Body @text="Token unwrap failed" />
<A.Body @text="Error: {{this.unwrapTokenError}}" />
<A.Footer as |F|>

View file

@ -5,7 +5,13 @@
{{#if this.model.cannotRequestExport}}
<Hds::ApplicationState @align="center" class="has-top-margin-xxl" as |A|>
<A.Header @icon="skip" @title="You are not authorized" data-test-empty-state-title />
<A.Header
@icon="skip"
class="align-items-end"
@title="You are not authorized"
@titleTag="h2"
data-test-empty-state-title
/>
<A.Body data-test-empty-state-message>
Viewing export data requires

View file

@ -104,6 +104,7 @@
this.filterFocused
'Press ENTER to add one.'
}}'
@titleTag="h2"
/>
</Hds::ApplicationState>
@ -125,12 +126,12 @@
{{#if (eq this.baseKey.id "")}}
{{#if (and options.firstStep (not this.tab))}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="Get started with {{capitalize this.backendType}}" />
<A.Header data-test-empty-state-title @title="Get started with {{capitalize this.backendType}}" @titleTag="h2" />
<A.Body data-test-empty-state-message @text={{options.firstStep}} />
</Hds::ApplicationState>
{{else}}
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="No {{pluralize options.item}} in this backend" />
<A.Header data-test-empty-state-title @title="No {{pluralize options.item}} in this backend" @titleTag="h2" />
<A.Body
data-test-empty-state-message
@text="{{concat
@ -151,6 +152,7 @@
(concat "No " (pluralize options.item) ' under "' this.filter '".')
(concat 'No folders matching "' this.filter '".')
}}
@titleTag="h2"
/>
<A.Body>
<LinkTo @route="vault.cluster.secrets.backend.list-root" @model={{this.backend}} data-test-list-root-link>
@ -163,6 +165,7 @@
<A.Header
data-test-empty-state-title
@title={{concat "No " (pluralize options.item) ' matching "' this.filter '".'}}
@titleTag="h2"
/>
<A.Body>
<LinkTo @route="vault.cluster.secrets.backend.list-root" @model={{this.backend}} data-test-list-root-link>

View file

@ -9,7 +9,7 @@
<div class="box is-fullwidth is-shadowless is-sideless is-paddingless is-marginless">
<Toolbar />
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header data-test-empty-state-title @title="Connect a database" />
<A.Header data-test-empty-state-title @title="Connect a database" @titleTag="h2" />
<A.Body data-test-empty-state-message @text={{this.emptyStateMessage}} />
{{#if (or this.model.connectionCapabilities.canCreate this.model.connectionCapabilities.canUpdate)}}
<A.Footer data-test-empty-state-actions as |F|>

View file

@ -16,7 +16,7 @@
{{else if (eq this.selectedAction "wrap")}}
<Tools::Wrap />
{{else}}
{{! Center-align error message on the page }}
{{! This center aligns error message on the page }}
<div class="is-flex is-flex-grow-1">
<Hds::ApplicationState @align="center" class="align-self-center" as |A|>
<A.Header @title="Tool not available" @titleTag="h2" />

View file

@ -101,7 +101,7 @@
<div class="grid-item-third-row">
{{#if (is-empty this.knownPrimaryClusterAddrs)}}
<Hds::ApplicationState @align="center" data-test-empty-state as |A|>
<A.Header @title="No known_primary_cluster_addrs" />
<A.Header @title="No known_primary_cluster_addrs" @titleTag="h2" />
<A.Body
@text="These addresses are used by the secondary to communicate with the primary cluster. Should always be non-zero in a functioning replication setup."
/>

View file

@ -17,9 +17,10 @@
{{#if this.replicationAttrs.secondaries}}
<KnownSecondariesTable @secondaries={{this.replicationAttrs.secondaries}} />
{{else}}
<Hds::ApplicationState @align="center" as |A|>
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header
@title="No known {{this.cluster.replicationMode}} secondary clusters associated with this cluster"
@titleTag="h2"
data-test-empty-state-title
/>
<A.Body

View file

@ -57,17 +57,18 @@
<hr class="is-marginless" />
{{/each}}
{{else}}
<EmptyState
@title="No known {{this.performanceMode}} secondary clusters associated with this cluster"
@message="Associated secondary clusters will be listed here. Add your first secondary cluster to get started."
>
<Hds::Link::Standalone
@icon="docs-link"
@iconPosition="trailing"
@text="Replication documentation"
@href={{doc-link "/vault/docs/internals/replication"}}
/>
</EmptyState>
<Hds::ApplicationState @align="center" class="top-padding-32" as |A|>
<A.Header @title="No known {{this.performanceMode}} secondary clusters associated with this cluster" @titleTag="h2" />
<A.Body @text="Associated secondary clusters will be listed here. Add your first secondary cluster to get started." />
<A.Footer as |F|>
<F.LinkStandalone
@icon="docs-link"
@iconPosition="trailing"
@text="Replication documentation"
@href={{doc-link "/vault/docs/internals/replication"}}
/>
</A.Footer>
</Hds::ApplicationState>
{{/if}}
{{/if}}