From 4051cb4d4c78ea257c28e20b36c7f68460cf020d Mon Sep 17 00:00:00 2001 From: lane-wetmore Date: Fri, 7 Feb 2025 15:29:12 -0600 Subject: [PATCH] UI: Remove custom tag class and replace with Hds::Badge (#29475) * replace custom tag class with Hds::Badge * another wave of custom class replacements * remove tag class styles and cleanup * add changelog entry * fix changelog name * remove changelog entry and old styles and clean up * remove extra classes and clean up * one more clean up section * update tests * fix value check * updated test * update tests * switch to code elements with specific styling and cleanup --- .../dashboard/secrets-engines-card.hbs | 2 +- ui/app/components/policy-form.hbs | 2 +- .../styles/components/namespace-reminder.scss | 6 -- ui/app/styles/core.scss | 1 - ui/app/styles/core/element-styling.scss | 5 ++ ui/app/styles/core/tag.scss | 73 ------------------- ui/app/styles/helper-classes/spacing.scss | 17 ++++- .../identity/item-alias/alias-details.hbs | 2 +- .../components/identity/item-aliases.hbs | 2 +- .../components/identity/item-groups.hbs | 2 +- .../components/mfa/method-list-item.hbs | 4 +- .../mfa/mfa-login-enforcement-form.hbs | 2 +- .../secret-list/database-list-item.hbs | 4 +- .../components/secret-list/ssh-role-item.hbs | 2 +- .../cluster/access/identity/aliases/index.hbs | 2 +- .../vault/cluster/access/identity/show.hbs | 1 + .../vault/cluster/policies/index.hbs | 4 +- .../templates/vault/cluster/policy/edit.hbs | 4 +- .../templates/vault/cluster/policy/show.hbs | 4 +- .../components/info-table-item-array.hbs | 10 ++- .../addon/components/info-table-item-array.js | 14 +++- .../addon/components/namespace-reminder.hbs | 3 +- .../core/addon/components/policy-example.hbs | 8 +- .../addon/components/replication-header.hbs | 10 +-- .../core/addon/components/search-select.hbs | 11 ++- .../addon/components/secret-list-header.hbs | 5 +- ui/lib/kv/addon/components/kv-page-header.hbs | 2 +- .../addon/components/page/pki-issuer-list.hbs | 18 ++--- .../addon/components/page/pki-key-list.hbs | 2 +- .../pki/addon/components/pki-generate-csr.hbs | 6 +- .../addon/components/pki-generate-root.hbs | 8 +- .../addon/components/pki-info-table-rows.hbs | 6 +- ui/lib/replication/addon/templates/mode.hbs | 4 +- ui/tests/acceptance/mfa-method-test.js | 4 +- .../components/info-table-item-array-test.js | 2 + .../pki/page/pki-issuer-rotate-root-test.js | 6 +- 36 files changed, 103 insertions(+), 155 deletions(-) delete mode 100644 ui/app/styles/core/tag.scss diff --git a/ui/app/components/dashboard/secrets-engines-card.hbs b/ui/app/components/dashboard/secrets-engines-card.hbs index 021ee0a93b..bf90180c10 100644 --- a/ui/app/components/dashboard/secrets-engines-card.hbs +++ b/ui/app/components/dashboard/secrets-engines-card.hbs @@ -12,7 +12,7 @@

Secrets engines

{{#if this.filteredSecretsEngines}} - + Details {{/if}} diff --git a/ui/app/components/policy-form.hbs b/ui/app/components/policy-form.hbs index f3d44d7b9f..5f0a54dd92 100644 --- a/ui/app/components/policy-form.hbs +++ b/ui/app/components/policy-form.hbs @@ -24,7 +24,7 @@ {{/if}}
- + {{#if @renderPolicyExampleModal}} {{! only true in policy create and edit routes }} diff --git a/ui/app/styles/components/namespace-reminder.scss b/ui/app/styles/components/namespace-reminder.scss index f5f2707002..b72824ce84 100644 --- a/ui/app/styles/components/namespace-reminder.scss +++ b/ui/app/styles/components/namespace-reminder.scss @@ -15,10 +15,4 @@ margin: $spacing-4 0 0; opacity: 0.7; position: absolute; - - .tag { - background-color: $ui-gray-800; - color: $light-grey; - font-size: $size-9; - } } diff --git a/ui/app/styles/core.scss b/ui/app/styles/core.scss index 73d9e17963..0bae051f29 100644 --- a/ui/app/styles/core.scss +++ b/ui/app/styles/core.scss @@ -40,7 +40,6 @@ @import './core/message'; @import './core/progress'; @import './core/select'; -@import './core/tag'; @import './core/title'; @import './core/toggle'; diff --git a/ui/app/styles/core/element-styling.scss b/ui/app/styles/core/element-styling.scss index b6a71a08bc..43a453372e 100644 --- a/ui/app/styles/core/element-styling.scss +++ b/ui/app/styles/core/element-styling.scss @@ -195,3 +195,8 @@ label { cursor: not-allowed; } } + +// 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); +} diff --git a/ui/app/styles/core/tag.scss b/ui/app/styles/core/tag.scss deleted file mode 100644 index fd211e30b1..0000000000 --- a/ui/app/styles/core/tag.scss +++ /dev/null @@ -1,73 +0,0 @@ -/** - * Copyright (c) HashiCorp, Inc. - * SPDX-License-Identifier: BUSL-1.1 - */ - -// This file defines the style for .tag - -.tag:not(body) { - align-items: center; - // same as HDS::Badge @color=neutral - background-color: var(--token-color-surface-strong); - color: var(--token-color-foreground-primary); - border-radius: $radius; - display: inline-flex; - font-size: $size-8; - font-weight: $font-weight-normal; - height: auto; - justify-content: center; - line-height: 1.5; - margin-right: $spacing-8; - padding: 0 $spacing-8; - white-space: nowrap; - vertical-align: middle; - - code { - color: var(--token-color-foreground-primary); - } - - .icon { - height: 12px; - margin-left: -0.25em; - margin-right: 0.25em; - min-width: 0; - width: 12px; - } - - &.has-extra-padding { - padding: $spacing-4 $spacing-4; - } -} - -.tag { - &.is-bold { - font-weight: bold; - } - - &.is-light { - background-color: whitesmoke; - color: rgba(0, 0, 0, 0.7); - } - - &.is-outlined { - background-color: transparent; - border: 1px solid $grey-light; - } - - &.is-transparent { - background-color: transparent; - } - - &.is-small { - height: auto; - } - - &.is-medium { - font-size: $size-6; - } - - &.is-success { - background-color: $green-500; - color: $white; - } -} diff --git a/ui/app/styles/helper-classes/spacing.scss b/ui/app/styles/helper-classes/spacing.scss index 47e4064c61..e8502205a7 100644 --- a/ui/app/styles/helper-classes/spacing.scss +++ b/ui/app/styles/helper-classes/spacing.scss @@ -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; @@ -122,10 +127,6 @@ margin-top: -$spacing-48; } -.has-right-margin-xxs { - margin-right: $spacing-4; -} - .has-left-margin-xxs { margin-left: $spacing-4; } @@ -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; } diff --git a/ui/app/templates/components/identity/item-alias/alias-details.hbs b/ui/app/templates/components/identity/item-alias/alias-details.hbs index 6106e976b6..ec5faf15a0 100644 --- a/ui/app/templates/components/identity/item-alias/alias-details.hbs +++ b/ui/app/templates/components/identity/item-alias/alias-details.hbs @@ -18,7 +18,7 @@
{{@model.mountPath}}
- {{@model.mountType}} + {{@model.mountAccessor}}
diff --git a/ui/app/templates/components/identity/item-aliases.hbs b/ui/app/templates/components/identity/item-aliases.hbs index f0fffc814c..63adc5690d 100644 --- a/ui/app/templates/components/identity/item-aliases.hbs +++ b/ui/app/templates/components/identity/item-aliases.hbs @@ -18,7 +18,7 @@
{{item.id}}
- {{item.mountType}} + {{item.mountAccessor}} diff --git a/ui/app/templates/components/identity/item-groups.hbs b/ui/app/templates/components/identity/item-groups.hbs index 8c08bc40e1..625f3f177b 100644 --- a/ui/app/templates/components/identity/item-groups.hbs +++ b/ui/app/templates/components/identity/item-groups.hbs @@ -14,7 +14,7 @@ {{gid}} - inherited + {{/each}} {{else}} diff --git a/ui/app/templates/components/mfa/method-list-item.hbs b/ui/app/templates/components/mfa/method-list-item.hbs index ef3e9bdf38..d3c5a87e1f 100644 --- a/ui/app/templates/components/mfa/method-list-item.hbs +++ b/ui/app/templates/components/mfa/method-list-item.hbs @@ -16,9 +16,7 @@ {{@model.name}} - - {{@model.id}} - +
Namespace: diff --git a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs index 68238c0c44..ee0044211d 100644 --- a/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs +++ b/ui/app/templates/components/mfa/mfa-login-enforcement-form.hbs @@ -63,7 +63,7 @@ {{#if target.value.id}} {{target.value.name}} - {{target.value.id}} + {{else}} {{target.value}} {{/if}} diff --git a/ui/app/templates/components/secret-list/database-list-item.hbs b/ui/app/templates/components/secret-list/database-list-item.hbs index 04ea0f4380..59f6e3f3e7 100644 --- a/ui/app/templates/components/secret-list/database-list-item.hbs +++ b/ui/app/templates/components/secret-list/database-list-item.hbs @@ -21,7 +21,9 @@
{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}} - {{this.keyTypeValue}} + {{#if this.keyTypeValue}} + + {{/if}}
diff --git a/ui/app/templates/components/secret-list/ssh-role-item.hbs b/ui/app/templates/components/secret-list/ssh-role-item.hbs index b137c41798..8dd55a53da 100644 --- a/ui/app/templates/components/secret-list/ssh-role-item.hbs +++ b/ui/app/templates/components/secret-list/ssh-role-item.hbs @@ -27,7 +27,7 @@
{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}
- {{@item.keyType}} + {{#if @item.zeroAddress}} Zero-Address {{/if}} diff --git a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs index 6dca7b8eaf..eb38e15e15 100644 --- a/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs +++ b/ui/app/templates/vault/cluster/access/identity/aliases/index.hbs @@ -25,7 +25,7 @@
{{item.id}}
- {{item.mountType}} + {{item.mountAccessor}} diff --git a/ui/app/templates/vault/cluster/access/identity/show.hbs b/ui/app/templates/vault/cluster/access/identity/show.hbs index b6512f29b7..c7c7f7ec37 100644 --- a/ui/app/templates/vault/cluster/access/identity/show.hbs +++ b/ui/app/templates/vault/cluster/access/identity/show.hbs @@ -58,4 +58,5 @@ +{{! renders either the identity item-aliases or item-groups component}} {{component (concat "identity/item-" this.section) model=this.model}} \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/policies/index.hbs b/ui/app/templates/vault/cluster/policies/index.hbs index b0c0d5baee..8fe57758d9 100644 --- a/ui/app/templates/vault/cluster/policies/index.hbs +++ b/ui/app/templates/vault/cluster/policies/index.hbs @@ -10,9 +10,7 @@ {{uppercase this.policyType}} Policies {{#if (not-eq this.policyType "acl")}} - - Sentinel - + {{/if}} diff --git a/ui/app/templates/vault/cluster/policy/edit.hbs b/ui/app/templates/vault/cluster/policy/edit.hbs index 590e401867..c9297f476c 100644 --- a/ui/app/templates/vault/cluster/policy/edit.hbs +++ b/ui/app/templates/vault/cluster/policy/edit.hbs @@ -20,9 +20,7 @@

{{this.model.id}} {{#if this.model.enforcementLevel}} - - {{this.model.enforcementLevel}} - + {{/if}}

diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs index 5337c36dbd..4e5106108a 100644 --- a/ui/app/templates/vault/cluster/policy/show.hbs +++ b/ui/app/templates/vault/cluster/policy/show.hbs @@ -19,9 +19,7 @@

{{this.model.id}} {{#if this.model.enforcementLevel}} - - {{this.model.enforcementLevel}} - + {{/if}}

diff --git a/ui/lib/core/addon/components/info-table-item-array.hbs b/ui/lib/core/addon/components/info-table-item-array.hbs index 24766aeaec..b11366dd75 100644 --- a/ui/lib/core/addon/components/info-table-item-array.hbs +++ b/ui/lib/core/addon/components/info-table-item-array.hbs @@ -13,10 +13,12 @@ {{#if (is-wildcard-string item)}} {{#let (filter-wildcard item this.allOptions) as |wildcardCount|}} {{item}} - - {{if (not-eq wildcardCount undefined) (concat "includes " wildcardCount)}} - {{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}} - + {{#if (not-eq wildcardCount undefined)}} + + {{/if}} {{#if (eq this.displayArrayTruncated.lastObject item)}} View all {{lowercase @label}}. diff --git a/ui/lib/core/addon/components/info-table-item-array.js b/ui/lib/core/addon/components/info-table-item-array.js index 8957f67eed..8c6d5147e5 100644 --- a/ui/lib/core/addon/components/info-table-item-array.js +++ b/ui/lib/core/addon/components/info-table-item-array.js @@ -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 @@ -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'; } @@ -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 } : {}; diff --git a/ui/lib/core/addon/components/namespace-reminder.hbs b/ui/lib/core/addon/components/namespace-reminder.hbs index a122b3f003..a4a8c15cfe 100644 --- a/ui/lib/core/addon/components/namespace-reminder.hbs +++ b/ui/lib/core/addon/components/namespace-reminder.hbs @@ -15,7 +15,8 @@ will be {{this.modeVerb}} in the - {{this.namespace.path}}/namespace. + + namespace.

{{/if}} {{/if}} \ No newline at end of file diff --git a/ui/lib/core/addon/components/policy-example.hbs b/ui/lib/core/addon/components/policy-example.hbs index 8fdf26aeeb..e57859fd6c 100644 --- a/ui/lib/core/addon/components/policy-example.hbs +++ b/ui/lib/core/addon/components/policy-example.hbs @@ -25,17 +25,17 @@

Here is an example policy that uses RGP to restrict access to the - admin + admin policy such that a user named "James Thomas" or has the - Team Lead + Team Lead role can manage the - admin + admin policy:

{{else}}

Endpoint Governing Policies (EGPs) are tied to particular paths (e.g. - aws/creds/ + aws/creds/ ) instead of tokens. They use {{@title}} {{#if @data.anyReplicationEnabled}} - - {{if @isSecondary "secondary" "primary"}} - - - {{@secondaryId}} - + + {{#if @secondaryId}} + + {{/if}} {{/if}} diff --git a/ui/lib/core/addon/components/search-select.hbs b/ui/lib/core/addon/components/search-select.hbs index a49630dd76..14913044dd 100644 --- a/ui/lib/core/addon/components/search-select.hbs +++ b/ui/lib/core/addon/components/search-select.hbs @@ -68,16 +68,15 @@ {{get selected this.idKey}} {{else}} -

+
{{selected.id}} {{#if @wildcardLabel}} {{#if (is-wildcard-string selected.id)}} {{#let (filter-wildcard selected this.allOptions) as |wildcardCount|}} - - includes - {{wildcardCount}} - {{if (eq wildcardCount 1) @wildcardLabel (pluralize @wildcardLabel)}} - + {{/let}} {{/if}} {{/if}} diff --git a/ui/lib/core/addon/components/secret-list-header.hbs b/ui/lib/core/addon/components/secret-list-header.hbs index 1f202180c3..41b85e2239 100644 --- a/ui/lib/core/addon/components/secret-list-header.hbs +++ b/ui/lib/core/addon/components/secret-list-header.hbs @@ -24,10 +24,7 @@ {{@model.id}} {{#if this.isKV}} - - version - {{or @model.version "1"}} - + {{/if}} diff --git a/ui/lib/kv/addon/components/kv-page-header.hbs b/ui/lib/kv/addon/components/kv-page-header.hbs index 2a089f9042..ed4e2dc6ea 100644 --- a/ui/lib/kv/addon/components/kv-page-header.hbs +++ b/ui/lib/kv/addon/components/kv-page-header.hbs @@ -12,7 +12,7 @@ {{#if @mountName}} {{@mountName}} - version 2 + {{else if @secretPath}} {{@secretPath}} diff --git a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs b/ui/lib/pki/addon/components/page/pki-issuer-list.hbs index aa37689552..1acb2d33da 100644 --- a/ui/lib/pki/addon/components/page/pki-issuer-list.hbs +++ b/ui/lib/pki/addon/components/page/pki-issuer-list.hbs @@ -65,22 +65,22 @@ {{pkiIssuer.issuerRef}} {{#if pkiIssuer.issuerName}} - {{pkiIssuer.id}} + {{/if}}
{{#if pkiIssuer.isDefault}} - default issuer + {{/if}} {{#if (not-eq pkiIssuer.isRoot undefined)}} - {{if - pkiIssuer.isRoot - "root" - "intermediate" - }} + {{/if}} {{#if pkiIssuer.serialNumber}} - + Serial number @@ -88,7 +88,7 @@ {{/if}} {{#if pkiIssuer.parsedCertificate.common_name}} - + Common name diff --git a/ui/lib/pki/addon/components/page/pki-key-list.hbs b/ui/lib/pki/addon/components/page/pki-key-list.hbs index b071c02612..1f59b9eb4a 100644 --- a/ui/lib/pki/addon/components/page/pki-key-list.hbs +++ b/ui/lib/pki/addon/components/page/pki-key-list.hbs @@ -37,7 +37,7 @@
{{#if pkiKey.keyName}} - {{pkiKey.id}} + {{/if}}
diff --git a/ui/lib/pki/addon/components/pki-generate-csr.hbs b/ui/lib/pki/addon/components/pki-generate-csr.hbs index 45f020ae67..aecef6b02f 100644 --- a/ui/lib/pki/addon/components/pki-generate-csr.hbs +++ b/ui/lib/pki/addon/components/pki-generate-csr.hbs @@ -32,9 +32,11 @@ {{@model.keyId}} + {{else if value}} + {{value}} + {{! it's unlikely but if a value is returned for privateKey and privateKeyType we want to display it, otherwise we show the "internal" badge below }} {{else}} - {{! this block only ever renders privateKey and privateKeyType }} - {{or value "internal"}} + {{/if}} {{/let}} diff --git a/ui/lib/pki/addon/components/pki-generate-root.hbs b/ui/lib/pki/addon/components/pki-generate-root.hbs index f8e14bc161..cd8330d12f 100644 --- a/ui/lib/pki/addon/components/pki-generate-root.hbs +++ b/ui/lib/pki/addon/components/pki-generate-root.hbs @@ -37,11 +37,15 @@ {{#if @model.privateKey}} {{else}} - internal + {{/if}} - {{or @model.privateKeyType "internal"}} + {{#if @model.privateKeyType}} + {{@model.privateKeyType}} + {{else}} + + {{/if}} diff --git a/ui/lib/pki/addon/components/pki-info-table-rows.hbs b/ui/lib/pki/addon/components/pki-info-table-rows.hbs index 73d20d6b8d..38cd8cec24 100644 --- a/ui/lib/pki/addon/components/pki-info-table-rows.hbs +++ b/ui/lib/pki/addon/components/pki-info-table-rows.hbs @@ -18,7 +18,11 @@ {{else if attr.options.detailLinkTo}} {{value}} {{else if (or (eq attr.name "privateKey") (eq attr.name "privateKeyType"))}} - {{or value "internal"}} + {{#if value}} + {{value}} + {{else}} + + {{/if}} {{else if attr.options.formatDate}} {{date-format value "MMM d yyyy HH:mm:ss a zzzz"}} {{else}} diff --git a/ui/lib/replication/addon/templates/mode.hbs b/ui/lib/replication/addon/templates/mode.hbs index 40a8465112..2939988833 100644 --- a/ui/lib/replication/addon/templates/mode.hbs +++ b/ui/lib/replication/addon/templates/mode.hbs @@ -19,9 +19,7 @@

{{this.model.replicationModeForDisplay}} - - {{this.model.replicationAttrs.modeForHeader}} - +

diff --git a/ui/tests/acceptance/mfa-method-test.js b/ui/tests/acceptance/mfa-method-test.js index 24be2f4821..7f3e0fff8c 100644 --- a/ui/tests/acceptance/mfa-method-test.js +++ b/ui/tests/acceptance/mfa-method-test.js @@ -249,7 +249,9 @@ module('Acceptance | mfa-method', function (hooks) { test('it should edit methods', async function (assert) { await visit('/vault/access/mfa/methods'); - const id = this.element.querySelector('[data-test-mfa-method-list-item] .tag').textContent.trim(); + const id = this.element + .querySelector('[data-test-mfa-method-list-item] .hds-badge div') + .textContent.trim(); const model = this.store.peekRecord('mfa-method', id); await click('[data-test-mfa-method-list-item] [data-test-popup-menu-trigger]'); await click('[data-test-mfa-method-menu-link="edit"]'); diff --git a/ui/tests/integration/components/info-table-item-array-test.js b/ui/tests/integration/components/info-table-item-array-test.js index 05a7ac3a64..bcdce055fa 100644 --- a/ui/tests/integration/components/info-table-item-array-test.js +++ b/ui/tests/integration/components/info-table-item-array-test.js @@ -70,6 +70,7 @@ module('Integration | Component | InfoTableItemArray', function (hooks) { test('it renders', async function (assert) { await render(hbs``); assert.dom('[data-test-info-table-item-array]').exists(); @@ -86,6 +87,7 @@ module('Integration | Component | InfoTableItemArray', function (hooks) {