Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI: HDS adoption replace Breadcrumbs #24387

Merged
merged 39 commits into from
Dec 6, 2023
Merged

UI: HDS adoption replace Breadcrumbs #24387

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
d64e180
upgrade to 3.1.0
hellobontempo Dec 4, 2023
2ca429f
VAULT-22471 upgrade to latest version
hellobontempo Dec 5, 2023
8b100ab
fix other selectors
hellobontempo Dec 5, 2023
f95fa5a
fix pki tests
hellobontempo Dec 5, 2023
d82a08e
fix copy dropdown
hellobontempo Dec 5, 2023
49503ed
generated breadcrumbs
hellobontempo Dec 5, 2023
2a76e6f
mfa crumbs
hellobontempo Dec 5, 2023
3a53965
oidc crumbs
hellobontempo Dec 5, 2023
51964b8
identity crumbs
hellobontempo Dec 5, 2023
ac538ef
use hds crumbs in page::breadcrumbs file
hellobontempo Dec 5, 2023
6468fba
rename selectors to be consistent
hellobontempo Dec 5, 2023
af30e58
Merge branch 'ui/hds-adoption-replace-breadcrumbs' into ui/VAULT-1730…
hellobontempo Dec 5, 2023
6df616b
remaining oidc
hellobontempo Dec 5, 2023
f134619
update empty state link style to match hds
hellobontempo Dec 5, 2023
ffc4453
repl empty state
hellobontempo Dec 5, 2023
0f4749e
rep empty state 2
hellobontempo Dec 5, 2023
4696d09
policy and secret error template
hellobontempo Dec 5, 2023
d501d16
replace yielded KeyValueHeader elements directly with HDS breadcrumbs
hellobontempo Dec 5, 2023
b35f45b
remove yield from KeyValueHeader
hellobontempo Dec 5, 2023
ad57a58
use key value header in secret header
hellobontempo Dec 5, 2023
efcbc50
update pki header
hellobontempo Dec 5, 2023
9b89fcb
kmip breadcrumbs
hellobontempo Dec 5, 2023
8e6bf40
replace key-value-header classes
hellobontempo Dec 5, 2023
f6806c9
Merge branch 'main' into ui/VAULT-17309/hds-adoption-replace-breadcrumbs
hellobontempo Dec 5, 2023
217abb5
ssh sign
hellobontempo Dec 5, 2023
e187d7d
replace key value with breadcrumbs
hellobontempo Dec 5, 2023
d9ea21d
update selectors part 1
hellobontempo Dec 6, 2023
a46003b
add a tags
hellobontempo Dec 6, 2023
1a312dd
policy tests
hellobontempo Dec 6, 2023
d50d8fa
add crumb index back
hellobontempo Dec 6, 2023
7a867c8
add current route to generated item
hellobontempo Dec 6, 2023
ad57846
another round of test updates
hellobontempo Dec 6, 2023
40a14bf
remove root link test selector
hellobontempo Dec 6, 2023
d47f8c6
secrets/secrete test
hellobontempo Dec 6, 2023
e6763e4
add changelog
hellobontempo Dec 6, 2023
092b0a8
trailing icon
hellobontempo Dec 6, 2023
fbaf257
delete breadcrumb css
hellobontempo Dec 6, 2023
9f23dfd
consistently change to sentence case
hellobontempo Dec 6, 2023
f179137
titlsecase!
hellobontempo Dec 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/24387.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: Implement Helios Design System Breadcrumbs
```
3 changes: 0 additions & 3 deletions ui/app/styles/components/empty-state-component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,9 +53,6 @@
a,
.link,
a:not(.button):not(.file-delete-button):not(.tag) {
color: $blue;
Copy link
Contributor Author

@hellobontempo hellobontempo Dec 5, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removing so styling properly applies to HDS elements yielded to empty state. Removing these styles also more closely align our existing empty state LinkTo elements to their HDS counterparts
Screenshot 2023-12-05 at 1 15 57 PM

font-size: $size-8;
font-weight: $font-weight-semibold;
text-decoration: none;
}

Expand Down
2 changes: 1 addition & 1 deletion ui/app/styles/components/page-header-old.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
}

.title {
margin-top: $spacing-36;
margin-top: $spacing-16;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Until we replace this component, reducing to match the gap: 16 that the HDS page header uses

}

.title-with-icon {
Expand Down
1 change: 0 additions & 1 deletion ui/app/styles/core.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
75 changes: 0 additions & 75 deletions ui/app/styles/core/breadcrumb.scss
View file
Open in desktop

This file was deleted.

36 changes: 14 additions & 22 deletions ui/app/templates/components/generate-credentials-database.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@

<PageHeader as |p|>
<p.top>
<nav class="breadcrumb" aria-label="breadcrumbs">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

before + after
Screenshot 2023-12-05 at 7 43 47 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot 2023-12-05 at 7 46 23 PM

<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}} />
Copy link
Contributor Author

@hellobontempo hellobontempo Dec 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In places where it made sense, I added a @current breadcrumb that matches the h1 tag

</Hds::Breadcrumb>
</p.top>
<p.levelLeft>
<h1 data-test-title class="title is-3">
Expand All @@ -33,18 +31,12 @@
@bottomBorder={{true}}
@message={{@model.errorMessage}}
>
<nav class="breadcrumb" aria-label="help breadcrumb">
Copy link
Contributor Author

@hellobontempo hellobontempo Dec 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See screenshot above for before + after - shouldn't have been breadcrumbs to begin with

<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"))}}
Expand Down
33 changes: 11 additions & 22 deletions ui/app/templates/components/generate-credentials.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
14 changes: 4 additions & 10 deletions ui/app/templates/components/generated-item-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,10 @@

<PageHeader as |p|>
<p.top>
<KeyValueHeader @path="vault.cluster.access.methods">
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I replaced KeyValueHeader components that yielded breadcrumbs, but left self-closing KeyValueHeader components and updated the hbs file

<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">
Expand Down
20 changes: 8 additions & 12 deletions ui/app/templates/components/generated-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}
Expand Down
14 changes: 4 additions & 10 deletions ui/app/templates/components/mfa/mfa-login-enforcement-header.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 12 additions & 16 deletions ui/app/templates/components/oidc/client-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 8 additions & 16 deletions ui/app/templates/components/oidc/key-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
28 changes: 12 additions & 16 deletions ui/app/templates/components/oidc/provider-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading