UI: HDS adoption replace Breadcrumbs (#24387)

* upgrade to 3.1.0

* VAULT-22471 upgrade to latest version

* fix other selectors

* fix pki tests

* fix copy dropdown

* generated breadcrumbs

* mfa crumbs

* oidc crumbs

* identity crumbs

* use hds crumbs in page::breadcrumbs file

* rename selectors to be consistent

* remaining oidc

* update empty state link style to match hds

* repl empty state

* rep empty state 2

* policy and secret error template

* replace yielded KeyValueHeader elements directly with HDS breadcrumbs

* remove yield from KeyValueHeader

* use key value header in secret header

* update pki header

* kmip breadcrumbs

* replace key-value-header classes

* ssh sign

* replace key value with breadcrumbs

* update selectors part 1

* add a tags

* policy tests

* add crumb index back

* add current route to generated item

* another round of test updates

* remove root link test selector

* secrets/secrete test

* add changelog

* trailing icon

* delete breadcrumb css

* consistently change to sentence case

* titlsecase!
This commit is contained in:
claire bontempo
2023-12-06 10:56:01 -08:00
committed by GitHub
parent 5bb1451f94
commit 3403203471
69 changed files with 385 additions and 647 deletions

3
changelog/24387.txt Normal file
View File

@@ -0,0 +1,3 @@
```release-note:improvement
ui: Implement Helios Design System Breadcrumbs
```

View File

@@ -53,9 +53,6 @@
a,
.link,
a:not(.button):not(.file-delete-button):not(.tag) {
color: $blue;
font-size: $size-8;
font-weight: $font-weight-semibold;
text-decoration: none;
}

View File

@@ -26,7 +26,7 @@
}
.title {
margin-top: $spacing-36;
margin-top: $spacing-16;
}
.title-with-icon {

View File

@@ -21,7 +21,6 @@
// Core Styles: each file styles a class that is not associated with a component. Ex: box and not box-label.
@import './core/box';
@import './core/breadcrumb';
@import './core/buttons';
@import './core/charts';
@import './core/checkbox-and-radio';

View File

@@ -1,75 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
.breadcrumb {
display: flex;
user-select: text;
min-height: 1.5rem;
margin: 0;
overflow-x: auto;
white-space: nowrap;
&:not(:last-child) {
margin: 0;
}
ul,
ol {
align-items: center;
display: flex;
flex-grow: 1;
flex-shrink: 0;
justify-content: flex-start;
}
li {
align-items: center;
display: flex;
& + li::before {
display: none;
}
&:first-child {
.sep {
margin-left: 0;
}
}
&.is-active a {
color: $grey-darkest;
cursor: default;
pointer-events: none;
}
}
a {
align-items: center;
display: flex;
justify-content: center;
line-height: 1;
padding: 0 $size-11 0 0;
text-decoration: none;
&:hover {
color: $blue;
}
}
.sep {
display: inline-block;
color: transparent;
margin: 0.15rem 0.4rem 0 0.5rem;
overflow: hidden;
width: 0.5rem;
&::before {
color: $blue;
content: '';
font-size: 1rem;
line-height: 1;
opacity: 0.33;
}
}
}

View File

@@ -5,16 +5,14 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend.overview" @model={{@backendPath}}>
{{@backendPath}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{@backendPath}}
@route="vault.cluster.secrets.backend.overview"
@model={{@backendPath}}
/>
<Hds::Breadcrumb::Item @text={{@roleName}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 data-test-title class="title is-3">
@@ -33,18 +31,12 @@
@bottomBorder={{true}}
@message={{@model.errorMessage}}
>
<nav class="breadcrumb" aria-label="help breadcrumb">
<ul class="is-grouped-split">
<li>
{{! Empty because they can't go "back" anywhere }}
</li>
<li>
<DocLink @path="/vault/docs/secrets/databases" @class="has-text-grey">
Need help?
</DocLink>
</li>
</ul>
</nav>
<Hds::Link::Standalone
@iconPosition="trailing"
@icon="docs-link"
@text="Database documentation"
@href={{doc-link "/vault/docs/secrets/databases"}}
/>
</EmptyState>
{{/unless}}
{{#if (and (not @model.errorMessage) (eq @roleType "dynamic"))}}

View File

@@ -5,28 +5,17 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend" @model={{this.backendPath}} data-test-link="role-list">
{{this.backendPath}}
</LinkTo>
</li>
<li class="is-active">
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend" @model={{this.backendPath}}>
creds
</LinkTo>
</li>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.roleName}}>
{{this.roleName}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{this.backendPath}}
@route="vault.cluster.secrets.backend"
@model={{this.backendPath}}
data-test-link="role-list"
/>
<Hds::Breadcrumb::Item @text="Credentials" @route="vault.cluster.secrets.backend" @model={{this.backendPath}} />
<Hds::Breadcrumb::Item @text={{this.roleName}} @route="vault.cluster.secrets.backend.show" @model={{this.roleName}} />
<Hds::Breadcrumb::Item @text={{this.options.title}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 data-test-title class="title is-3">

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<KeyValueHeader @path="vault.cluster.access.methods">
<li>
<span class="sep">
/
</span>
<LinkTo @route="vault.cluster.access.methods" data-test-access-methods>
methods
</LinkTo>
</li>
</KeyValueHeader>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" data-test-access-methods />
<Hds::Breadcrumb::Item @text={{@methodModel.id}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,18 +5,14 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">
/
</span>
<LinkTo @route="vault.cluster.access.method.item.list" @model={{this.itemType}}>
{{pluralize this.itemType}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{pluralize this.itemType}}
@route="vault.cluster.access.method.item.list"
@model={{this.itemType}}
/>
<Hds::Breadcrumb::Item @text={{if (eq this.mode "show") this.model.id (capitalize this.mode)}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
{{#if (eq this.mode "show")}}

View File

@@ -8,16 +8,10 @@
{{else}}
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.mfa.enforcements.index">
Enforcements
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Enforcements" @route="vault.cluster.access.mfa.enforcements.index" />
<Hds::Breadcrumb::Item @text={{@heading}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-mleh-title>

View File

@@ -5,22 +5,18 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
{{#if @model.isNew}}
<LinkTo @route="vault.cluster.access.oidc.clients">
Applications
</LinkTo>
{{else}}
<LinkTo @route="vault.cluster.access.oidc.clients.client.details" @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
<Hds::Breadcrumb>
{{#if @model.isNew}}
<Hds::Breadcrumb::Item @text="Applications" @route="vault.cluster.access.oidc.clients" />
{{else}}
<Hds::Breadcrumb::Item
@text="Details"
@route="vault.cluster.access.oidc.clients.client.details"
@model={{@model.name}}
/>
{{/if}}
<Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Application" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-client-title>

View File

@@ -5,22 +5,14 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
{{#if @model.isNew}}
<LinkTo @route="vault.cluster.access.oidc.keys">
Keys
</LinkTo>
{{else}}
<LinkTo @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
<Hds::Breadcrumb>
{{#if @model.isNew}}
<Hds::Breadcrumb::Item @text="Keys" @route="vault.cluster.access.oidc.keys" />
{{else}}
<Hds::Breadcrumb::Item @text="Details" @route="vault.cluster.access.oidc.keys.key.details" @model={{@model.name}} />
{{/if}}
<Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Key" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-key-title>

View File

@@ -5,22 +5,18 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
{{#if @model.isNew}}
<LinkTo @route="vault.cluster.access.oidc.providers">
Providers
</LinkTo>
{{else}}
<LinkTo @route="vault.cluster.access.oidc.providers.provider.details" @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
<Hds::Breadcrumb>
{{#if @model.isNew}}
<Hds::Breadcrumb::Item @text="Providers" @route="vault.cluster.access.oidc.providers" />
{{else}}
<Hds::Breadcrumb::Item
@text="Details"
@route="vault.cluster.access.oidc.providers.provider.details"
@model={{@model.name}}
/>
{{/if}}
<Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Provider" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-provider-title>

View File

@@ -5,23 +5,18 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
{{#if @model.isNew}}
<LinkTo @route={{"vault.cluster.access.oidc.scopes"}}>
Scopes
</LinkTo>
{{else}}
{{! You're editing in this view }}
<LinkTo @route={{"vault.cluster.access.oidc.scopes.scope.details"}} @model={{@model.name}}>
Details
</LinkTo>
{{/if}}
</li>
</ul>
</nav>
<Hds::Breadcrumb>
{{#if @model.isNew}}
<Hds::Breadcrumb::Item @text="Scopes" @route="vault.cluster.access.oidc.scopes" />
{{else}}
<Hds::Breadcrumb::Item
@text="Details"
@route="vault.cluster.access.oidc.scopes.scope.details"
@model={{@model.name}}
/>
{{/if}}
<Hds::Breadcrumb::Item @text="{{if @model.isNew 'Create' 'Edit'}} Scope" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-scope-title>

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="key-value-header breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.storage">
Raft Storage
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Raft Storage" @route="vault.cluster.storage" />
<Hds::Breadcrumb::Item @text="Restore Snapshot" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,13 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.identity.aliases">
{{pluralize (humanize this.model.identityType)}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{capitalize (pluralize (humanize this.model.identityType))}}
@route="vault.cluster.access.identity.aliases"
/>
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,13 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.identity.index">
{{capitalize (pluralize this.model.identityType)}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{capitalize (pluralize this.model.identityType)}}
@route="vault.cluster.access.identity.index"
/>
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<KeyValueHeader @path="vault.cluster.access.methods">
<li>
<span class="sep">
/
</span>
<LinkTo @route="vault.cluster.access.methods">
methods
</LinkTo>
</li>
</KeyValueHeader>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" />
<Hds::Breadcrumb::Item @text={{this.model.id}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.mfa.enforcements.index">
Enforcements
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Enforcements" @route="vault.cluster.access.mfa.enforcements.index" />
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -4,6 +4,12 @@
~}}
<PageHeader as |p|>
<p.top>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
<Hds::Breadcrumb::Item @text="Configure MFA Method" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft class="has-border-bottom-light">
<h1 class="title is-3">
{{#if this.method}}
@@ -15,18 +21,6 @@
{{/if}}
</h1>
</p.levelLeft>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.mfa.methods.index">
Methods
</LinkTo>
</li>
</ul>
</nav>
</p.top>
</PageHeader>
<div class="has-border-top-light has-top-padding-l">
{{#if this.showForms}}

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.mfa.methods.index">
Methods
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Methods" @route="vault.cluster.access.mfa.methods.index" />
<Hds::Breadcrumb::Item @text={{this.model.method.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -6,12 +6,10 @@
{{#if (has-feature "Namespaces")}}
<PageHeader as |p|>
<p.top>
<div class="breadcrumb">
<LinkTo @route="vault.cluster.access.namespaces.index">
<span class="sep">&#x0002f;</span>
Namespaces
</LinkTo>
</div>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Namespaces" @route="vault.cluster.access.namespaces.index" />
<Hds::Breadcrumb::Item @text="Create" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.oidc.assignments">
Assignments
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Assignments" @route="vault.cluster.access.oidc.assignments" />
<Hds::Breadcrumb::Item @text={{@model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-assignment-title>

View File

@@ -5,16 +5,14 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route={{"vault.cluster.access.oidc.assignments.assignment.details"}} @model={{this.model.name}}>
Details
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="Details"
@route="vault.cluster.access.oidc.assignments.assignment.details"
@model={{this.model.name}}
/>
<Hds::Breadcrumb::Item @text="Edit Assignment" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-assignment-title>

View File

@@ -5,16 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route={{"vault.cluster.access.oidc.assignments"}}>
Assignments
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Assignments" @route="vault.cluster.access.oidc.assignments" />
<Hds::Breadcrumb::Item @text="Create Assignment" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-assignment-title>

View File

@@ -6,16 +6,10 @@
{{#if this.showHeader}}
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.oidc.clients">
Applications
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Applications" @route="vault.cluster.access.oidc.clients" />
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-client-header>

View File

@@ -6,16 +6,10 @@
{{#if this.showHeader}}
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.oidc.keys" data-test-breadcrumb-link="oidc-keys">
Keys
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Keys" @route="vault.cluster.access.oidc.keys" data-test-breadcrumb-link="oidc-keys" />
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -6,16 +6,14 @@
{{#if this.showHeader}}
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.oidc.providers" data-test-breadcrumb-link="oidc-providers">
Providers
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="Providers"
@route="vault.cluster.access.oidc.providers"
data-test-breadcrumb-link="oidc-providers"
/>
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,16 +5,14 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.access.oidc.scopes" data-test-breadcrumb-link="oidc-scopes">
Scopes
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="Scopes"
@route="vault.cluster.access.oidc.scopes"
data-test-breadcrumb-link="oidc-scopes"
/>
<Hds::Breadcrumb::Item @text={{this.model.name}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-oidc-scope-header>

View File

@@ -5,13 +5,15 @@
<PageHeader as |p|>
<p.top>
<div class="breadcrumb">
<LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
<span class="sep">&#x0002f;</span>
{{uppercase this.policyType}}
Policies
</LinkTo>
</div>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="{{uppercase this.policyType}} policies"
@route="vault.cluster.policies"
@model={{this.policyType}}
data-test-policy-list-link
/>
<Hds::Breadcrumb::Item @text="Create" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,15 +5,16 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<li>
<LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
<span class="sep">&#x0002f;</span>
{{uppercase this.policyType}}
policies
</LinkTo>
</li>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="{{uppercase this.policyType}} policies"
@route="vault.cluster.policies"
@model={{this.policyType}}
data-test-policy-list-link
/>
<Hds::Breadcrumb::Item @text={{this.model.id}} @route="vault.cluster.policy.show" @model={{this.model.id}} />
<Hds::Breadcrumb::Item @text="Edit" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,15 +5,15 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<li>
<LinkTo @route="vault.cluster.policies" @model={{this.policyType}} data-test-policy-list-link={{true}}>
<span class="sep">&#x0002f;</span>
{{uppercase this.policyType}}
policies
</LinkTo>
</li>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text="{{uppercase this.policyType}} policies"
@route="vault.cluster.policies"
@model={{this.policyType}}
data-test-policy-list-link
/>
<Hds::Breadcrumb::Item @text={{this.model.id}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-policy-name="true">

View File

@@ -13,22 +13,18 @@
@message={{Page.message}}
@icon="alert-circle"
@bottomBorder={{true}}
class="is-shadowless"
>
<nav class="breadcrumb">
<ul class="is-grouped-split">
<li>
<LinkTo @route="vault.cluster.secrets.backends">
<span class="sep"></span>
Go back
</LinkTo>
</li>
<li>
<DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
Need help?
</DocLink>
</li>
</ul>
</nav>
<Hds::ButtonSet>
<Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
<Hds::Link::Standalone
@icon="learn-link"
@iconPosition="trailing"
@color="secondary"
@text="Disaster recovery tutorial"
@href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
/>
</Hds::ButtonSet>
</EmptyState>
{{else}}
<Page.dashboard

View File

@@ -14,21 +14,16 @@
@icon="alert-circle"
@bottomBorder={{true}}
>
<nav class="breadcrumb">
<ul class="is-grouped-split">
<li>
<LinkTo @route="vault.cluster.secrets.backends">
<span class="sep"></span>
Go back
</LinkTo>
</li>
<li>
<DocLink @path="/vault/tutorials/enterprise/disaster-recovery" @class="has-text-grey">
Need help?
</DocLink>
</li>
</ul>
</nav>
<Hds::ButtonSet>
<Hds::Link::Standalone @icon="chevron-left" @text="Go back" @route="vault.cluster.secrets.backends" />
<Hds::Link::Standalone
@icon="learn-link"
@iconPosition="trailing"
@color="secondary"
@text="Disaster recovery tutorial"
@href={{doc-link "/vault/tutorials/enterprise/disaster-recovery"}}
/>
</Hds::ButtonSet>
</EmptyState>
{{else}}
<section>

View File

@@ -6,14 +6,12 @@
<div class="box is-shadowless">
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<li>
<LinkTo @route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}>
<span class="sep">&#x0002f;</span>
{{if this.model.backend this.model.backend "secrets"}}
</LinkTo>
</li>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item
@text={{if this.model.backend this.model.backend "Secrets"}}
@route={{if this.model.backend "vault.cluster.secrets.backend.list-root" "vault.cluster.secrets"}}
/>
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3 has-text-grey">

View File

@@ -5,28 +5,16 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
ssh
</LinkTo>
</li>
<li class="is-active">
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend" @model={{this.backend.id}}>
sign
</LinkTo>
</li>
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="vault.cluster.secrets.backend.show" @model={{this.model.role.name}}>
{{this.model.role.name}}
</LinkTo>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="SSH" @route="vault.cluster.secrets.backend" @model={{this.backend.id}} />
<Hds::Breadcrumb::Item @text="Sign" @route="vault.cluster.secrets.backend" @model={{this.backend.id}} />
<Hds::Breadcrumb::Item
@text={{this.model.role.name}}
@route="vault.cluster.secrets.backend.show"
@model={{this.model.role.name}}
/>
<Hds::Breadcrumb::Item @text="Sign SSH Key" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,11 @@
<PageHeader as |p|>
<p.top>
<KeyValueHeader @baseKey={{this.model}} @path="vault.cluster.access.method" @root={{this.root}} @showCurrent={{true}} />
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Auth Methods" @route="vault.cluster.access.methods" />
<Hds::Breadcrumb::Item @text={{this.model.id}} @route="vault.cluster.access.method" @model={{this.model.id}} />
<Hds::Breadcrumb::Item @text="Configure" @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -3,25 +3,17 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
<ul>
{{yield}}
{{#each this.secretPath as |path index|}}
<li class={{if (is-active-route path.path path.model isExact=true) "is-active"}}>
<span class="sep">&#x0002f;</span>
{{#if this.linkToPaths}}
<LinkTo
@route={{path.path}}
@model={{path.model}}
data-test-secret-root-link={{if (eq index 0) true false}}
data-test-secret-breadcrumb={{path.text}}
>
{{path.text}}
</LinkTo>
{{else}}
<span>{{path.text}}</span>
{{/if}}
</li>
{{/each}}
</ul>
</nav>
<Hds::Breadcrumb>
{{#each this.secretPath as |path|}}
{{#if this.linkToPaths}}
<Hds::Breadcrumb::Item
@text={{path.text}}
@route={{path.path}}
@model={{path.model}}
data-test-secret-breadcrumb={{path.text}}
/>
{{else}}
<Hds::Breadcrumb::Item @text={{path.text}} @current={{true}} />
{{/if}}
{{/each}}
</Hds::Breadcrumb>

View File

@@ -3,29 +3,19 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<nav class="breadcrumb" aria-label="breadcrumbs" data-test-breadcrumbs>
<ul>
{{#each @breadcrumbs as |breadcrumb idx|}}
<li data-test-crumb="{{idx}}">
<span class="sep">/</span>
{{#if breadcrumb.linkExternal}}
<LinkToExternal @route={{breadcrumb.route}} data-test-breadcrumb={{breadcrumb.label}}>
{{breadcrumb.label}}
</LinkToExternal>
{{else if breadcrumb.route}}
{{#if breadcrumb.model}}
<LinkTo @route={{breadcrumb.route}} @model={{breadcrumb.model}} data-test-breadcrumb={{breadcrumb.label}}>
{{breadcrumb.label}}
</LinkTo>
{{else}}
<LinkTo @route={{breadcrumb.route}} data-test-breadcrumb={{breadcrumb.label}}>
{{breadcrumb.label}}
</LinkTo>
{{/if}}
{{else}}
{{breadcrumb.label}}
{{/if}}
</li>
{{/each}}
</ul>
</nav>
<Hds::Breadcrumb data-test-breadcrumbs>
{{#each @breadcrumbs as |breadcrumb|}}
<Hds::Breadcrumb::Item
data-test-breadcrumb={{breadcrumb.label}}
@text={{breadcrumb.label}}
@icon={{breadcrumb.icon}}
@route={{breadcrumb.route}}
@model={{breadcrumb.model}}
@models={{breadcrumb.models}}
@query={{breadcrumb.query}}
@isRouteExternal={{breadcrumb.linkExternal}}
{{! only generate a link for crumbs with a route, otherwise assume it's the current view }}
@current={{not breadcrumb.route}}
/>
{{/each}}
</Hds::Breadcrumb>

View File

@@ -1,27 +0,0 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
/**
* @module Page::Breadcrumbs
* Page::Breadcrumbs components are used to display breadcrumb links. This is component will be replaced when HDS system is incorporated
*
* @example
* ```js
* <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
* ```
* @param {array} breadcrumbs - array of objects with a label and route to display as breadcrumbs
*/
export default class Breadcrumbs extends Component {
constructor() {
super(...arguments);
this.args.breadcrumbs.forEach((breadcrumb) => {
assert('breadcrumb must have a label key', Object.keys(breadcrumb).includes('label'));
});
}
}

View File

@@ -0,0 +1,40 @@
/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: BUSL-1.1
*/
import Component from '@glimmer/component';
import { assert } from '@ember/debug';
interface Args {
breadcrumbs: Array<Breadcrumb>;
}
interface Breadcrumb {
label: string;
route?: string; // Do not provide for current route
icon?: string;
model?: string;
models?: string[];
linkToExternal?: boolean;
}
/**
* @module Page::Breadcrumbs
* Page::Breadcrumbs components are used to display an array of breadcrumbs at the top of the page.
*
* @example
* ```js
* <Page::Breadcrumbs @breadcrumbs={{this.breadcrumbs}} />
* ```
* @param {array} breadcrumbs - array of Breadcrumb objects, must contain a label key. If no route is provided, crumb is assumed to be the current page
*/
export default class Breadcrumbs extends Component<Args> {
constructor(owner: unknown, args: Args) {
super(owner, args);
assert(
'breadcrumb object must include a label key',
this.args.breadcrumbs.every((crumb) => Object.keys(crumb).includes('label'))
);
}
}

View File

@@ -6,16 +6,18 @@
{{#let (options-for-backend @model.engineType) as |options|}}
<PageHeader as |p|>
<p.top>
<KeyValueHeader @baseKey={{@baseKey}} @path="vault.cluster.secrets.backend.list" @root={{@backendCrumb}}>
<li>
<span class="sep">
/
</span>
<LinkTo @route="vault.cluster.secrets">
secrets
</LinkTo>
</li>
</KeyValueHeader>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Secrets" @route="vault.cluster.secrets" />
<Hds::Breadcrumb::Item
@text={{@model.id}}
@current={{not @isConfigure}}
@route="vault.cluster.secrets.backend.list-root"
@model={{@model.id}}
/>
{{#if @isConfigure}}
<Hds::Breadcrumb::Item @text="Configure" @current={{true}} />
{{/if}}
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,19 +5,12 @@
<PageHeader as |p|>
<p.top>
{{! template-lint-configure simple-unless "warn" }}
{{#unless (or this.isSummaryDashboard this.isSecondary)}}
<KeyValueHeader @baseKey={{this.baseKey}} @path="vault.cluster.replication-dr-promote" @root={{this.backendCrumb}}>
<li>
<span class="sep">
/
</span>
<LinkTo @route="vault.cluster.replication.index">
Replication
</LinkTo>
</li>
</KeyValueHeader>
{{/unless}}
{{#if (not (or this.isSummaryDashboard this.isSecondary))}}
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Replication" @route="vault.cluster.replication.index" />
<Hds::Breadcrumb::Item @text={{this.title}} @current={{true}} />
</Hds::Breadcrumb>
{{/if}}
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-replication-title>

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @scope={{@scope}} />
<KmipBreadcrumb @scope={{@scope}} @currentRoute={{@role}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb />
<KmipBreadcrumb @currentRoute={{this.secretMountPath.currentPath}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -3,31 +3,18 @@
SPDX-License-Identifier: BUSL-1.1
~}}
<nav class="key-value-header breadcrumb">
<ul>
<li>
<span class="sep">&#x0002f;</span>
<LinkToExternal @route="secrets">Secrets</LinkToExternal>
</li>
{{#if this.shouldShowPath}}
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="scopes.index">
{{this.secretMountPath.currentPath}}
</LinkTo>
</li>
{{/if}}
{{#if @scope}}
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="scope.roles" @model={{@scope}}>{{@scope}}</LinkTo>
</li>
{{/if}}
{{#if @role}}
<li>
<span class="sep">&#x0002f;</span>
<LinkTo @route="credentials.index" @models={{array @scope @role}}>{{@role}}</LinkTo>
</li>
{{/if}}
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Secrets" @route="secrets" @isRouteExternal={{true}} />
{{#if this.shouldShowPath}}
<Hds::Breadcrumb::Item @text={{this.secretMountPath.currentPath}} @route="scopes.index" />
{{/if}}
{{#if @scope}}
<Hds::Breadcrumb::Item @text={{@scope}} @route="scope.roles" @model={{@scope}} />
{{/if}}
{{#if @role}}
<Hds::Breadcrumb::Item @text={{@role}} @route="credentials.index" @models={{array @scope @role}} />
{{/if}}
{{#if @currentRoute}}
<Hds::Breadcrumb::Item @text={{@currentRoute}} @current={{true}} />
{{/if}}
</Hds::Breadcrumb>

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @showPath={{true}} />
<KmipBreadcrumb @showPath={{true}} @currentRoute="Configure" />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Generate Credentials" />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Credentials" />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
<KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} @currentRoute="Edit Role" />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @showPath={{true}} />
<KmipBreadcrumb @showPath={{true}} @currentRoute={{this.scope}} />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,7 +5,7 @@
<PageHeader as |p|>
<p.top>
<KmipBreadcrumb @scope={{this.scope}} />
<KmipBreadcrumb @scope={{this.scope}} @currentRoute="Create Role" />
</p.top>
<p.levelLeft>
<h1 class="title is-3">

View File

@@ -5,18 +5,10 @@
<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<span class="sep">/</span>
<LinkToExternal @route="secrets">secrets</LinkToExternal>
</li>
<li>
<span class="sep">/</span>
<span>{{@backend.id}}</span>
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Secrets" @route="secrets" @isRouteExternal={{true}} />
<Hds::Breadcrumb::Item @text={{@backend.id}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="title is-3" data-test-header-title>

View File

@@ -11,20 +11,10 @@
{{#if this.model.replicationAttrs.replicationEnabled}}
<PageHeader as |p|>
<p.top>
<nav class="key-value-header breadcrumb" aria-label="breadcrumbs">
<ul>
<li>
<LinkTo @route="index">
<span class="sep" data-test-replication-breadcrumb></span>
Replication
</LinkTo>
</li>
<li>
<span class="sep"></span>
{{this.model.replicationModeForDisplay}}
</li>
</ul>
</nav>
<Hds::Breadcrumb>
<Hds::Breadcrumb::Item @text="Replication" @route="index" data-test-replication-breadcrumb />
<Hds::Breadcrumb::Item @text={{this.model.replicationModeForDisplay}} @current={{true}} />
</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 class="has-top-margin-m title is-3" data-test-replication-title={{true}}>

View File

@@ -21,7 +21,7 @@ const SELECTORS = {
input: (attr) => `[data-test-input="${attr}"]`,
password: '[data-test-textarea]',
saveBtn: '[data-test-save-config]',
methods: '[data-test-access-methods]',
methods: '[data-test-access-methods] a',
listItem: '[data-test-list-item-content]',
};
module('Acceptance | auth backend list', function (hooks) {

View File

@@ -75,8 +75,7 @@ module('Acceptance | aws secret backend', function (hooks) {
`/vault/secrets/${path}/show/${roleName}`,
`$aws: navigates to the show page on creation`
);
await click('[data-test-secret-root-link]');
await click(`[data-test-secret-breadcrumb="${path}"] a`);
assert.strictEqual(currentURL(), `/vault/secrets/${path}/list`);
assert.ok(findAll(`[data-test-secret-link="${roleName}"]`).length, `aws: role shows in the list`);

View File

@@ -69,7 +69,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
'Cancel transitions to enforcements list'
);
await click('[data-test-enforcement-create]');
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
assert.strictEqual(
currentRouteName(),
'vault.cluster.access.mfa.enforcements.index',
@@ -121,7 +121,7 @@ module('Acceptance | mfa-login-enforcement', function (hooks) {
'vault.cluster.access.mfa.enforcements.enforcement.index',
'Details more menu action transitions to enforcement route'
);
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
await click('[data-test-popup-menu-trigger]');
await click('[data-test-list-item-link="edit"]');
assert.strictEqual(

View File

@@ -61,7 +61,7 @@ module('Acceptance | mfa-method', function (hooks) {
'vault.cluster.access.mfa.methods.create',
'New method link transitions to create route'
);
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
const methods = this.getMethods();
const model = this.store.peekRecord('mfa-method', methods[0].id);
@@ -81,7 +81,7 @@ module('Acceptance | mfa-method', function (hooks) {
'vault.cluster.access.mfa.methods.method.index',
'Details more menu action transitions to method route'
);
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
await click('[data-test-popup-menu-trigger]');
await click('[data-test-mfa-method-menu-link="edit"]');
assert.strictEqual(
@@ -140,7 +140,7 @@ module('Acceptance | mfa-method', function (hooks) {
const value = typeof model[key] === 'boolean' ? (model[key] ? 'Yes' : 'No') : model[key].toString();
assert.dom(`[data-test-value-div="${label}"]`).hasText(value, `${label} value renders`);
});
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
}
await click('[data-test-mfa-method-list-item]');
@@ -203,7 +203,7 @@ module('Acceptance | mfa-method', function (hooks) {
'vault.cluster.access.mfa.methods.method.index',
`${type} method is displayed on save`
);
await click('.breadcrumb a');
await click('.hds-breadcrumb a');
assert
.dom('[data-test-mfa-method-list-item]')
.exists({ count: methodCount + index + 1 }, `List updates with new ${type} method`);

View File

@@ -100,7 +100,7 @@ module('Acceptance | oidc-config clients and keys', function (hooks) {
.exists('lists correct app with default');
// create a new key
await click('[data-test-breadcrumb-link="oidc-keys"]');
await click('[data-test-breadcrumb-link="oidc-keys"] a');
assert.strictEqual(
currentRouteName(),
'vault.cluster.access.oidc.keys.index',

View File

@@ -114,7 +114,7 @@ module('Acceptance | oidc-config providers and scopes', function (hooks) {
);
// navigate to details from index page
await click('[data-test-breadcrumb-link="oidc-scopes"]');
await click('[data-test-breadcrumb-link="oidc-scopes"] a');
await click('[data-test-popup-menu-trigger]');
await click('[data-test-oidc-scope-menu-link="details"]');
assert.strictEqual(
@@ -224,7 +224,7 @@ module('Acceptance | oidc-config providers and scopes', function (hooks) {
.hasText('this is an edit test', 'has correct edited description');
// create a provider using test-scope
await click('[data-test-breadcrumb-link="oidc-scopes"]');
await click('[data-test-breadcrumb-link="oidc-scopes"] a');
await click('[data-test-tab="providers"]');
assert.dom('[data-test-tab="providers"]').hasClass('active', 'providers tab is active');
await click('[data-test-oidc-provider-create]');
@@ -368,7 +368,7 @@ module('Acceptance | oidc-config providers and scopes', function (hooks) {
);
// navigate to details from index page
await click('[data-test-breadcrumb-link="oidc-providers"]');
await click('[data-test-breadcrumb-link="oidc-providers"] a');
assert.strictEqual(
currentRouteName(),
'vault.cluster.access.oidc.providers.index',

View File

@@ -44,8 +44,7 @@ module('Acceptance | policies (old)', function (hooks) {
);
assert.dom('[data-test-policy-name]').hasText(policyLower, 'displays the policy name on the show page');
assert.dom('[data-test-flash-message].is-info').doesNotExist('no flash message is displayed on save');
await click('[data-test-policy-list-link]');
await click('[data-test-policy-list-link] a');
assert
.dom(`[data-test-policy-link="${policyLower}"]`)
.exists({ count: 1 }, 'new policy shown in the list');

View File

@@ -281,7 +281,7 @@ module('Acceptance | secrets/secret/create, read, delete', function (hooks) {
'secret path is encoded in URL'
);
assert.dom('h1').hasText(secretPath, 'Path renders correctly on show page');
await click(`[data-test-secret-breadcrumb="${firstPath}"]`);
await click(`[data-test-secret-breadcrumb="${firstPath}"] a`);
assert.strictEqual(
currentURL(),
`/vault/secrets/${enginePath}/list/${encodeURIComponent(firstPath)}/`,
@@ -325,7 +325,7 @@ module('Acceptance | secrets/secret/create, read, delete', function (hooks) {
await listPage.filterInput('filter/foo1');
assert.strictEqual(listPage.secrets.length, 1, 'renders only one secret');
await listPage.secrets.objectAt(0).click();
await showPage.breadcrumbs.filterBy('text', 'filter')[0].click();
await click('[data-test-secret-breadcrumb="filter"] a');
assert.strictEqual(listPage.secrets.length, 3, 'renders three secrets');
assert.strictEqual(listPage.filterInputValue, 'filter/', 'pageFilter has been reset');
});

View File

@@ -54,7 +54,7 @@ module('Acceptance | ldap | libraries', function (hooks) {
isURL(`libraries/test-library/${uri}`),
`Transitions to ${action} route on list item action menu click`
);
await click('[data-test-breadcrumb="libraries"]');
await click('[data-test-breadcrumb="libraries"] a');
}
});

View File

@@ -55,7 +55,7 @@ module('Acceptance | ldap | overview', function (hooks) {
await click('[data-test-config-cta] a');
assert.true(isURL('configure'), 'Transitions to configure route on cta link click');
await click('[data-test-breadcrumb="ldap-test"]');
await click('[data-test-breadcrumb="ldap-test"] a');
await click('[data-test-toolbar-action="config"]');
assert.true(isURL('configure'), 'Transitions to configure route on toolbar link click');
});
@@ -92,7 +92,7 @@ module('Acceptance | ldap | overview', function (hooks) {
'Transitions to role credentials route on generate credentials action'
);
await click('[data-test-breadcrumb="ldap-test"]');
await click('[data-test-breadcrumb="ldap-test"] a');
await selectChoose('.search-select', 'dynamic-role');
await click('[data-test-generate-credential-button]');
assert.true(

View File

@@ -42,7 +42,7 @@ module('Acceptance | ldap | roles', function (hooks) {
'Transitions to role details route on list item click'
);
await click('[data-test-breadcrumb="roles"]');
await click('[data-test-breadcrumb="roles"] a');
await click('[data-test-list-item-link]:nth-of-type(2) a');
assert.true(
isURL('roles/static/static-role/details'),
@@ -61,7 +61,7 @@ module('Acceptance | ldap | roles', function (hooks) {
isURL(`roles/dynamic/dynamic-role/${uri}`),
`Transitions to ${uri} route on list item action menu click`
);
await click('[data-test-breadcrumb="roles"]');
await click('[data-test-breadcrumb="roles"] a');
}
});
@@ -73,7 +73,7 @@ module('Acceptance | ldap | roles', function (hooks) {
'Transitions to credentials route from toolbar link'
);
await click('[data-test-breadcrumb="dynamic-role"]');
await click('[data-test-breadcrumb="dynamic-role"] a');
await click('[data-test-edit]');
assert.true(isURL('roles/dynamic/dynamic-role/edit'), 'Transitions to edit route from toolbar link');
});

View File

@@ -17,7 +17,7 @@ const SELECTORS = {
popupMenu: '[data-test-popup-menu-trigger]',
versionsTab: '[data-test-transit-link="versions"]',
actionsTab: '[data-test-transit-key-actions-link]',
rootCrumb: '[data-test-secret-root-link]',
rootCrumb: (path) => `[data-test-secret-breadcrumb="${path}"] a`,
card: (action) => `[data-test-transit-card="${action}"]`,
infoRow: (label) => `[data-test-value-div="${label}"]`,
form: (item) => `[data-test-transit-key="${item}"]`,
@@ -242,7 +242,7 @@ module('Acceptance | transit (flaky)', function (hooks) {
assert.dom(SELECTORS.infoRow('Deletion allowed')).hasText('false');
assert.dom(SELECTORS.infoRow('Derived')).hasText('Yes');
assert.dom(SELECTORS.infoRow('Convergent encryption')).hasText('Yes');
await click(SELECTORS.rootCrumb);
await click(SELECTORS.rootCrumb(this.path));
await click(SELECTORS.popupMenu);
const actions = findAll('.ember-basic-dropdown-content li');
assert.strictEqual(actions.length, 2, 'shows 2 items in popup menu');

View File

@@ -8,7 +8,7 @@ export const PAGE = {
title: '[data-test-header-title]',
breadcrumbs: '[data-test-breadcrumbs]',
breadcrumb: '[data-test-breadcrumbs] li',
breadcrumbAtIdx: (idx) => `[data-test-crumb="${idx}"] a`,
breadcrumbAtIdx: (idx) => `[data-test-breadcrumbs] li:nth-child(${idx + 1}) a`,
infoRow: '[data-test-component="info-table-row"]',
infoRowValue: (label) => `[data-test-value-div="${label}"]`,
infoRowToggleMasked: (label) => `[data-test-value-div="${label}"] [data-test-button="toggle-masked"]`,

View File

@@ -50,8 +50,8 @@ module('Integration | Component | kv | kv-page-header', function (hooks) {
assert.dom('[data-test-breadcrumbs] li:nth-child(2) a').hasText(this.backend, 'engine name renders');
assert.dom('[data-test-breadcrumbs] li:nth-child(3) a').hasText(this.path, 'secret path renders');
assert
.dom('[data-test-breadcrumbs] li:nth-child(4)')
.hasText('/ edit', 'final breadcrumb renders and it is not a link.');
.dom('[data-test-breadcrumbs] li:nth-child(4) .hds-breadcrumb__current')
.exists('final breadcrumb renders and it is not a link.');
});
test('it renders a custom title for a non engine view', async function (assert) {

View File

@@ -4,13 +4,10 @@
*/
import { Base } from '../show';
import { create, clickable, collection, isPresent, text } from 'ember-cli-page-object';
import { create, clickable, collection, isPresent } from 'ember-cli-page-object';
export default create({
...Base,
breadcrumbs: collection('[data-test-secret-breadcrumb]', {
text: text(),
}),
deleteBtnV1: clickable('[data-test-secret-v1-delete]'),
confirmBtn: clickable('[data-test-confirm-button]'),
rows: collection('data-test-row-label'),