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: Remove custom tag class and replace with Hds::Badge #29475

Merged
merged 15 commits into from
Feb 7, 2025
+103 −155
Merged

UI: Remove custom tag class and replace with Hds::Badge #29475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c3258ec
replace custom tag class with Hds::Badge
lane-wetmore Jan 31, 2025
76d4f53
another wave of custom class replacements
lane-wetmore Jan 31, 2025
dcbe558
remove tag class styles and cleanup
lane-wetmore Jan 31, 2025
b7e3871
add changelog entry
lane-wetmore Jan 31, 2025
18f359f
fix changelog name
lane-wetmore Jan 31, 2025
86df49c
remove changelog entry and old styles and clean up
lane-wetmore Feb 3, 2025
f2ffd44
remove extra classes and clean up
lane-wetmore Feb 3, 2025
8f00e80
one more clean up section
lane-wetmore Feb 4, 2025
5e5ffbb
update tests
lane-wetmore Feb 4, 2025
dfd5cd4
fix value check
lane-wetmore Feb 4, 2025
b907744
updated test
lane-wetmore Feb 5, 2025
808496b
update tests
lane-wetmore Feb 5, 2025
f0d893e
Merge branch 'main' into ui/VAULT-17013-replace-custom-tag-class
lane-wetmore Feb 5, 2025
2f8a4fa
switch to code elements with specific styling and cleanup
lane-wetmore Feb 6, 2025
aa20ed8
Merge branch 'main' into ui/VAULT-17013-replace-custom-tag-class
lane-wetmore Feb 7, 2025
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
2 changes: 1 addition & 1 deletion ui/app/components/dashboard/secrets-engines-card.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<h2 class="title is-4 has-left-margin-xxs" data-test-dashboard-card-header="Secrets engines">Secrets engines</h2>

{{#if this.filteredSecretsEngines}}
<LinkTo class="has-right-margin-xxs" @route="vault.cluster.secrets.backends">
<LinkTo class="has-right-margin-4" @route="vault.cluster.secrets.backends">
Details
</LinkTo>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/components/policy-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
{{/if}}
<div class="field">
<Toolbar aria-label="toolbar for managing {{or @model.name 'new'}} policy">
<label class="has-text-weight-bold has-right-margin-xxs">Policy</label>
<label class="has-text-weight-bold has-right-margin-4">Policy</label>
{{#if @renderPolicyExampleModal}}
{{! only true in policy create and edit routes }}
<ToolbarFilters aria-label="help tools for managing {{or @model.name 'new'}} policy">
Expand Down
6 changes: 0 additions & 6 deletions ui/app/styles/components/namespace-reminder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,4 @@
margin: $spacing-4 0 0;
opacity: 0.7;
position: absolute;

.tag {
lane-wetmore marked this conversation as resolved.
Show resolved Hide resolved
background-color: $ui-gray-800;
color: $light-grey;
font-size: $size-9;
}
}
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 @@ -40,7 +40,6 @@
@import './core/message';
@import './core/progress';
@import './core/select';
@import './core/tag';
@import './core/title';
@import './core/toggle';

Expand Down
5 changes: 5 additions & 0 deletions ui/app/styles/core/element-styling.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,3 +195,8 @@ label {
cursor: not-allowed;
}
}

// <Hds::Text::Code> this applies to code elements that are placed within a surrounding text - not for standalone use
.hds-text.code-in-text {
background-color: var(--token-color-surface-strong);
}
73 changes: 0 additions & 73 deletions ui/app/styles/core/tag.scss
View file
Open in desktop

This file was deleted.

17 changes: 13 additions & 4 deletions ui/app/styles/helper-classes/spacing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,11 @@
padding: $spacing-36;
}

.has-side-padding-8 {
padding-left: $spacing-8;
padding-right: $spacing-8;
}

.has-side-padding-s {
padding-left: $spacing-12;
padding-right: $spacing-12;
Expand Down Expand Up @@ -122,10 +127,6 @@
margin-top: -$spacing-48;
}

.has-right-margin-xxs {
margin-right: $spacing-4;
}

.has-left-margin-xxs {
margin-left: $spacing-4;
}
Expand Down Expand Up @@ -218,6 +219,14 @@
margin-left: $spacing-36;
}

.has-right-margin-4 {
margin-right: $spacing-4;
}

.has-right-margin-8 {
margin-right: $spacing-8;
}

.has-right-margin-m {
margin-right: $spacing-16;
}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/identity/item-alias/alias-details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div>
{{@model.mountPath}}
<div>
<span class="tag">{{@model.mountType}}</span>
<Hds::Badge @text={{@model.mountType}} class="has-right-margin-8" />
<code class="has-text-grey is-size-8">{{@model.mountAccessor}}</code>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/identity/item-aliases.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
<div class="has-text-grey">
{{item.id}}
</div>
<span class="tag">{{item.mountType}}</span>
<Hds::Badge @text={{item.mountType}} />
<span class="has-text-grey is-size-8">
{{item.mountAccessor}}
</span>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/identity/item-groups.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<LinkTo @route="vault.cluster.access.identity.show" @models={{array "groups" gid "details"}} class="has-text-black">
<Icon @name="folder" class="has-text-grey-light" />{{gid}}
</LinkTo>
<span class="tag has-text-grey is-size-8">inherited</span>
<Hds::Badge @text="inherited" />
</LinkedBlock>
{{/each}}
{{else}}
Expand Down
4 changes: 1 addition & 3 deletions ui/app/templates/components/mfa/method-list-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,7 @@
<span class="has-text-weight-semibold has-text-black">
{{@model.name}}
</span>
<span class="tag has-left-margin-xs">
{{@model.id}}
</span>
<Hds::Badge @text={{@model.id}} class="has-left-margin-xs" />
<div class="has-top-margin-xs">
<code class="is-size-9">
Namespace:
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<InfoTableRow @label={{target.label}} class="is-flex-grow-1 has-no-shadow">
{{#if target.value.id}}
{{target.value.name}}
<span class="tag has-left-margin-s">{{target.value.id}}</span>
<Hds::Badge @text={{target.value.id}} class="has-left-margin-s" />
{{else}}
{{target.value}}
{{/if}}
Expand Down
4 changes: 3 additions & 1 deletion ui/app/templates/components/secret-list/database-list-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@
<Icon @name="user" class="has-text-grey-light is-pulled-left" />
<div class="role-item-details">
<span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
<span class="tag has-text-grey-dark">{{this.keyTypeValue}}</span>
{{#if this.keyTypeValue}}
lane-wetmore marked this conversation as resolved.
Show resolved Hide resolved
<Hds::Badge @text={{this.keyTypeValue}} />
{{/if}}
</div>
</LinkTo>
</div>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/components/secret-list/ssh-role-item.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
<div class="role-item-details">
<span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
<br />
<span class="tag has-text-grey-dark">{{@item.keyType}}</span>
<Hds::Badge @text={{@item.keyType}} />
{{#if @item.zeroAddress}}
<span class="has-text-grey is-size-7">Zero-Address</span>
{{/if}}
Expand Down
2 changes: 1 addition & 1 deletion ui/app/templates/vault/cluster/access/identity/aliases/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<div class="has-text-grey">
{{item.id}}
</div>
<span class="tag">{{item.mountType}}</span>
<Hds::Badge @text={{item.mountType}} class="has-right-margin-8" />
<span class="has-text-grey is-size-8">
{{item.mountAccessor}}
</span>
Expand Down
1 change: 1 addition & 0 deletions ui/app/templates/vault/cluster/access/identity/show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,4 +58,5 @@
</ToolbarLink>
</ToolbarActions>
</Toolbar>
{{! renders either the identity item-aliases or item-groups component}}
lane-wetmore marked this conversation as resolved.
Show resolved Hide resolved
{{component (concat "identity/item-" this.section) model=this.model}}
4 changes: 1 addition & 3 deletions ui/app/templates/vault/cluster/policies/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,7 @@
{{uppercase this.policyType}}
Policies
{{#if (not-eq this.policyType "acl")}}
<span class="tag" aria-label="Enforcement level: {{this.model.enforcementLevel}}">
Sentinel
</span>
<Hds::Badge @text="Sentinel" />
{{/if}}
</h1>
</p.levelLeft>
Expand Down
4 changes: 1 addition & 3 deletions ui/app/templates/vault/cluster/policy/edit.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@
<h1 class="title is-3">
{{this.model.id}}
{{#if this.model.enforcementLevel}}
<span class="tag is-medium" aria-label="Enforcement level: {{this.model.enforcementLevel}}">
{{this.model.enforcementLevel}}
</span>
<Hds::Badge @text={{this.model.enforcementLevel}} aria-label="Enforcement level: {{this.model.enforcementLevel}}" />
hellobontempo marked this conversation as resolved.
Show resolved Hide resolved
{{/if}}
</h1>
</p.levelLeft>
Expand Down
4 changes: 1 addition & 3 deletions ui/app/templates/vault/cluster/policy/show.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,7 @@
<h1 class="title is-3" data-test-policy-name="true">
{{this.model.id}}
{{#if this.model.enforcementLevel}}
<span class="tag" aria-label="Enforcement level: {{this.model.enforcementLevel}}">
{{this.model.enforcementLevel}}
</span>
<Hds::Badge @text={{this.model.enforcementLevel}} aria-label="Enforcement level: {{this.model.enforcementLevel}}" />
{{/if}}
</h1>
</p.levelLeft>
Expand Down
10 changes: 6 additions & 4 deletions ui/lib/core/addon/components/info-table-item-array.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@
{{#if (is-wildcard-string item)}}
{{#let (filter-wildcard item this.allOptions) as |wildcardCount|}}
<span>{{item}}</span>
<span class="tag is-light has-text-grey-dark" data-test-count={{wildcardCount}}>
{{if (not-eq wildcardCount undefined) (concat "includes " wildcardCount)}}
{{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}}
</span>
{{#if (not-eq wildcardCount undefined)}}
<Hds::Badge
@text="includes {{pluralize wildcardCount this.wildcardLabel}}"
data-test-count={{wildcardCount}}
/>
{{/if}}
{{#if (eq this.displayArrayTruncated.lastObject item)}}
<LinkTo @route={{this.rootRoute}} @query={{hash tab=@queryParam}}>
<span data-test-view-all={{lowercase @label}}>View all {{lowercase @label}}.</span>
Expand Down
14 changes: 12 additions & 2 deletions ui/lib/core/addon/components/info-table-item-array.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,10 @@
*/

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { service } from '@ember/service';
import { assert } from '@ember/debug';
import { action } from '@ember/object';
import { service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

/**
* @module InfoTableItemArray
Expand Down Expand Up @@ -36,6 +37,11 @@ export default class InfoTableItemArray extends Component {
@tracked itemNameById; // object is only created if renderItemName=true
@tracked fetchComplete = false;

constructor() {
super(...arguments);
assert('@label is required for InfoTableItemArray components', this.args.label);
}

get rootRoute() {
return this.args.rootRoute || 'vault.cluster.secrets.backend.list-root';
}
Expand All @@ -58,6 +64,10 @@ export default class InfoTableItemArray extends Component {
return displayArray;
}

get wildcardLabel() {
return this.args.wildcardLabel || '';
}

@action async fetchOptions() {
if (this.args.isLink && this.args.modelType) {
const queryOptions = this.args.backend ? { backend: this.args.backend } : {};
Expand Down
3 changes: 2 additions & 1 deletion ui/lib/core/addon/components/namespace-reminder.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
will be
{{this.modeVerb}}
in the
<span class="tag">{{this.namespace.path}}/</span>namespace.
<Hds::Badge @text="{{this.namespace.path}}/" />
namespace.
</p>
{{/if}}
{{/if}}
8 changes: 4 additions & 4 deletions ui/lib/core/addon/components/policy-example.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@
</p>
<p>
Here is an example policy that uses RGP to restrict access to the
<code class="tag is-marginless is-paddingless">admin</code>
<Hds::Text::Code class="code-in-text">admin</Hds::Text::Code>
policy such that a user named "James Thomas" or has the
<code class="tag is-marginless is-paddingless">Team Lead</code>
<Hds::Text::Code class="code-in-text">Team Lead</Hds::Text::Code>
role can manage the
<code class="tag is-marginless is-paddingless">admin</code>
<Hds::Text::Code class="code-in-text">admin</Hds::Text::Code>
policy:
</p>
{{else}}
<p class="has-bottom-margin-s" data-test-example-modal-text="egp">
Endpoint Governing Policies (EGPs) are tied to particular paths (e.g.
<code class="tag is-marginless is-paddingless">aws/creds/</code>
<Hds::Text::Code class="code-in-text">aws/creds/</Hds::Text::Code>
) instead of tokens. They use
<Hds::Link::Inline
@isHrefExternal={{true}}
Expand Down
10 changes: 4 additions & 6 deletions ui/lib/core/addon/components/replication-header.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,10 @@
<h1 class="title is-3" data-test-replication-title={{@title}}>
{{@title}}
{{#if @data.anyReplicationEnabled}}
<span class="tag is-light has-text-grey-dark" data-test-mode>
{{if @isSecondary "secondary" "primary"}}
</span>
<span class="tag is-light has-text-grey-dark" data-test-secondaryId>
{{@secondaryId}}
</span>
<Hds::Badge @text={{if @isSecondary "secondary" "primary"}} data-test-mode />
{{#if @secondaryId}}
<Hds::Badge @text={{@secondaryId}} data-test-secondaryId />
{{/if}}
{{/if}}
</h1>
</p.levelLeft>
Expand Down
11 changes: 5 additions & 6 deletions ui/lib/core/addon/components/search-select.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,15 @@
{{get selected this.idKey}}
</small>
{{else}}
<div class="list-item-text has-right-margin-xxs text-overflow-ellipsis">
<div class="list-item-text has-right-margin-4 text-overflow-ellipsis">
{{selected.id}}
{{#if @wildcardLabel}}
{{#if (is-wildcard-string selected.id)}}
{{#let (filter-wildcard selected this.allOptions) as |wildcardCount|}}
<span class="tag is-light has-text-grey-dark" data-test-count={{wildcardCount}}>
includes
{{wildcardCount}}
{{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}}
</span>
<Hds::Badge
Copy link
Contributor

Choose a reason for hiding this comment

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

Nice work text interpolating here! 😍 Could you include a screenshot of this one? Since the template logic is a bit more complex it's great to have a visual confirmation the changes are as expected.

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 2025-02-03 at 5 21 03 PM Screenshot 2025-02-03 at 5 21 16 PM Looks good to me!

Copy link
Contributor

@hellobontempo hellobontempo Feb 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

Maybe you noticed this already, but wanted to point out that we don't have to worry about @wildcardLabel being a consistent style here because above there's a conditional checking that it exists at all

@text="includes {{pluralize wildcardCount @wildcardLabel}}"
data-test-count={{wildcardCount}}
/>
{{/let}}
{{/if}}
{{/if}}
Expand Down
Loading
Loading