From a022d6b1542fcaa533c878c77420607eb693662d Mon Sep 17 00:00:00 2001 From: Suresh Dunga Date: Fri, 21 Aug 2026 12:00:33 +0530 Subject: [PATCH 1/2] ui: migrate auth-methods list/toolbar/type to HDS components - list/index.hbs: use Hds::Badge for global-tokens indicator, hds-tooltip modifiers, and Consul::DataTable card layout - list/index.scss: add HDS token-based name column truncation and toolbar+card border-radius stitching - toolbar/index.scss: add HDS token-based toolbar chrome rules and sort dropdown sizing; drop legacy header underline for auth-methods index - type/index.hbs: replace custom badge markup with Hds::Badge (neutral, filled, large) and flight icon via icon-mapping helper --- .../components/consul/auth-method/list/index.hbs | 3 ++- .../consul/auth-method/list/index.scss | 8 ++++++-- .../consul/auth-method/toolbar/index.scss | 16 ++++++++++++++++ .../components/consul/auth-method/type/index.hbs | 2 +- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/list/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/list/index.hbs index 40b7994f086..fb974ae6a2e 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/list/index.hbs @@ -8,6 +8,7 @@ @items={{@items}} @columns={{this.columns}} @ariaLabel="Auth Methods" + @card={{true}} > <:row as |item B|> {{! ---- Name (DisplayName, or Name when no DisplayName) ---- }} @@ -24,7 +25,7 @@ badge next to the name. }} {{#if (eq item.TokenLocality 'global')}} - + {{/if}} diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/list/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/list/index.scss index d4f612bc967..84b985056a7 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/list/index.scss +++ b/ui/packages/consul-ui/app/components/consul/auth-method/list/index.scss @@ -3,9 +3,13 @@ * SPDX-License-Identifier: BUSL-1.1 */ -.consul-auth-method-list { - margin-top: 16px; +/* When the toolbar lives above the table card (as a sibling, not inside it), + square off the card's top corners so the two elements form one visual unit. */ +.consul-auth-method-toolbar + .consul-auth-method-list .consul-data-table__card { + border-radius: 0 0 6px 6px; +} +.consul-auth-method-list { /* Keep multi-word column headers on a single line. */ .hds-table__th { white-space: nowrap; diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/toolbar/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/toolbar/index.scss index f041c75441a..785b86009de 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/toolbar/index.scss +++ b/ui/packages/consul-ui/app/components/consul/auth-method/toolbar/index.scss @@ -3,7 +3,17 @@ * SPDX-License-Identifier: BUSL-1.1 */ +/* The toolbar is a standalone element rendered directly above the table card. + It shares the same card chrome (border, radius) on three sides; the bottom + border is removed so the toolbar and the table card merge into a single + visual unit with no gap or doubled border between them. */ .consul-auth-method-toolbar { + padding: 8px; + background-color: var(--token-color-surface-faint); + border: 1px solid var(--token-color-border-faint); + border-bottom: none; + border-radius: 6px 6px 0 0; + /* the sorter sits at the right end of the toolbar row */ .consul-auth-method-toolbar__sort { flex: 0 0 auto; @@ -15,6 +25,12 @@ } } +/* Separator between the controls row and the applied-filters area below. */ +.consul-auth-method-toolbar .hds-filter-bar__actions { + border-bottom: 1px solid var(--token-color-border-faint); + padding-bottom: 8px; +} + /* The auth-methods index uses the HDS Filter Bar for its toolbar, so drop the default header underline above it to avoid a doubled-up separator. */ html[data-route='dc.acls.auth-methods.index'] .app-view > header .title { diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs index 7891fd4bf1e..bde6a3ec0fe 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs @@ -10,7 +10,7 @@ @icon={{flightIcon}} @color="neutral" @type="filled" - @size="small" + @size="large" /> {{/let}} From 189bd5f3e9ebc68db294350755893ca049ca2798 Mon Sep 17 00:00:00 2001 From: Suresh Dunga Date: Sat, 22 Aug 2026 21:03:22 +0530 Subject: [PATCH 2/2] ui: migrate auth-methods components to HDS --- .../consul/auth-method/binding-list/index.hbs | 60 +-- .../components/consul/auth-method/index.scss | 124 ++++-- .../consul/auth-method/nspace-list/index.hbs | 29 +- .../consul/auth-method/view/index.hbs | 397 ++++++++++-------- .../acls/auth-methods/show/binding-rules.hbs | 2 - 5 files changed, 348 insertions(+), 264 deletions(-) diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/binding-list/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/binding-list/index.hbs index d94e771fdd6..05f8040c140 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/binding-list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/binding-list/index.hbs @@ -5,34 +5,40 @@

{{@item.BindName}}

-
-
{{t "models.binding-rule.BindType"}}
-
- {{@item.BindType}} - {{#let - (if - (eq @item.BindType 'service') - (t "components.consul.auth-method.binding-list.bind-type.service") + +
+
{{t "models.binding-rule.BindType"}}
+
+ {{@item.BindType}} + {{#let (if - (eq @item.BindType 'node') - (t "components.consul.auth-method.binding-list.bind-type.node") + (eq @item.BindType 'service') + (t "components.consul.auth-method.binding-list.bind-type.service") (if - (eq @item.BindType 'role') - (t "components.consul.auth-method.binding-list.bind-type.role") - '' + (eq @item.BindType 'node') + (t "components.consul.auth-method.binding-list.bind-type.node") + (if + (eq @item.BindType 'role') + (t "components.consul.auth-method.binding-list.bind-type.role") + '' + ) ) ) - ) - as |bindTypeTooltip| - }} - {{#if bindTypeTooltip}} - - {{/if}} - {{/let}} -
-
{{t "models.binding-rule.Selector"}}
-
{{@item.Selector}}
-
{{t "models.binding-rule.Description"}}
-
{{@item.Description}}
-
-
\ No newline at end of file + as |bindTypeTooltip| + }} + {{#if bindTypeTooltip}} + + {{/if}} + {{/let}} + +
{{t "models.binding-rule.Selector"}}
+
{{@item.Selector}}
+
{{t "models.binding-rule.Description"}}
+
{{@item.Description}}
+ + + diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss index 6234de311e0..9b04bae0c0e 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/index.scss +++ b/ui/packages/consul-ui/app/components/consul/auth-method/index.scss @@ -12,6 +12,10 @@ // View .consul-auth-method-view { margin-bottom: 32px; + display: flex; + flex-direction: column; + gap: 24px; + section { @extend %body-200-regular; width: 100%; @@ -21,40 +25,62 @@ @extend %display-400-semibold; padding-bottom: 12px; } - table { - table-layout: fixed; - thead td { - @extend %body-200-semibold; - color: var(--token-color-foreground-faint); - } - tbody { - td { - color: var(--token-color-hashicorp-brand); - word-break: break-word; - } - tr { - cursor: default; - } - tr:hover { - box-shadow: none; - } - } - } } - dl, - section dl { - @extend %tabular-dl; +} + +.consul-auth-method-view__card { + padding: 16px; + display: flex; + flex-direction: column; + gap: 16px; +} + +// Key/value definition list inside the card (and type-specific config lists) +.consul-auth-method-view__dl { + display: grid; + grid-template-columns: auto 1fr; + column-gap: 32px; + row-gap: 16px; + margin: 0; + + dt { + @extend %body-200-semibold; + color: var(--token-color-foreground-primary); + white-space: nowrap; + } + + dd { + @extend %body-200-regular; + color: var(--token-color-foreground-primary); + margin: 0; + word-break: break-word; } - section dt { - width: 30%; + + dt.check + dd { + display: flex; + align-items: center; } - section dd { - width: 70%; +} + +// Standalone copyable/masked fields (Hds::Form::MaskedInput::Field) rendered +// full-width between the dl groups above +.consul-auth-method-view__field { + width: 100%; +} + +// Unbulleted stacked values (e.g. bound audiences, OIDC scopes, ARNs) +.consul-auth-method-view__list { + list-style: none; + margin: 0; + padding: 0; + li:not(:last-of-type) { + padding-bottom: 8px; } } // Binding List .consul-auth-method-binding-list { + margin-bottom: 24px; p { margin-bottom: 4px !important; } @@ -62,32 +88,38 @@ @extend %display-400-semibold; padding-bottom: 12px; } - dl { - @extend %tabular-dl; - } code { background-color: var(--token-color-surface-strong); padding: 0 12px; } } -// Nspace List -.consul-auth-method-nspace-list { - thead { - td { - @extend %body-200-semibold; - color: var(--token-color-foreground-faint) !important; - } +.consul-auth-method-binding-list__card { + padding: 16px; +} + +.consul-auth-method-binding-list__dl { + display: grid; + grid-template-columns: auto 1fr; + column-gap: 32px; + row-gap: 16px; + margin: 0; + + dt { + @extend %body-200-semibold; + color: var(--token-color-foreground-primary); + white-space: nowrap; } - tbody { - td { - color: var(--token-color-hashicorp-brand); - } - tr { - cursor: default; - } - tr:hover { - box-shadow: none; - } + + dd { + @extend %body-200-regular; + color: var(--token-color-foreground-primary); + margin: 0; + word-break: break-word; } } + +// Nspace List +.consul-auth-method-nspace-list { + margin-top: 16px; +} diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs index cb617ad0660..4d7b8c3586a 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs @@ -4,21 +4,20 @@ }}
- - - - - - - - + + <:head as |H|> + + {{t "models.auth-method.Selector"}} + {{t "models.auth-method.BindNamespace"}} + + + <:body as |B|> {{#each @items as |item|}} - - - - + + {{item.Selector}} + {{item.BindNamespace}} + {{/each}} - -
{{t "models.auth-method.Selector"}}{{t "models.auth-method.BindNamespace"}}
{{item.Selector}}{{item.BindNamespace}}
+ +
- diff --git a/ui/packages/consul-ui/app/components/consul/auth-method/view/index.hbs b/ui/packages/consul-ui/app/components/consul/auth-method/view/index.hbs index 7b99bcedb59..b717183dbf5 100644 --- a/ui/packages/consul-ui/app/components/consul/auth-method/view/index.hbs +++ b/ui/packages/consul-ui/app/components/consul/auth-method/view/index.hbs @@ -3,151 +3,185 @@ SPDX-License-Identifier: BUSL-1.1 }} -
+
{{#if (eq @item.Type 'kubernetes')}} -
-
{{t 'models.auth-method.Type'}}
-
+ +
+
{{t 'models.auth-method.Type'}}
+
+ + {{#each (array "DisplayName" "Description" "MaxTokenTTL" "TokenLocality" "TokenNameFormat") as |value|}} + {{#if (get @item value)}} +
{{t (concat "models.auth-method." value)}}
+
{{get @item value}}
+ {{/if}} + {{/each}} +
- {{#each (array "DisplayName" "Description" "MaxTokenTTL" "TokenLocality" "TokenNameFormat") as |value|}} - {{#if (get @item value)}} -
{{t (concat "models.auth-method." value)}}
-
{{get @item value}}
- {{/if}} - {{/each}} {{#if @item.Config.Host}} -
{{t 'models.auth-method.Config.Host'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.Host'}} + +
{{/if}} + {{#if @item.Config.CACert}} -
{{t 'models.auth-method.Config.CACert'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.CACert'}} + +
{{/if}} + {{#if @item.Config.ServiceAccountJWT}} -
{{t 'models.auth-method.Config.ServiceAccountJWT'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.ServiceAccountJWT'}} + + {{/if}} - + {{else}} -
-
-
Type
-
- -
- -{{#each (array "DisplayName" "Description" "MaxTokenTTL" "TokenLocality" "TokenNameFormat") as |value|}} - {{#if (get @item value)}} + +
+
{{t 'models.auth-method.Type'}}
+
+ {{#each (array "DisplayName" "Description" "MaxTokenTTL" "TokenLocality" "TokenNameFormat") as |value|}} + {{#if (get @item value)}}
{{t (concat "models.auth-method." value)}}
{{get @item value}}
- - {{/if}} -{{/each}} + {{/if}} + {{/each}} +
{{#if (eq @item.Type 'aws-iam')}} -{{#let - @item.Config -as |config|}} - {{#each (array - "BoundIAMPrincipalARNs" - "EnableIAMEntityDetails" - "IAMEntityTags" - "IAMEndpoint" - "MaxRetries" - "STSEndpoint" - "STSRegion" - "AllowedSTSHeaderValues" - "ServerIDHeaderValue" - ) as |value|}} - {{#if (get config value)}} - -
{{t (concat "models.auth-method." value)}}
-
-{{#let - (get config value) -as |item|}} - {{#if (array-is-array item)}} -
    - {{#each item as |jtem|}} +
    + {{#let @item.Config as |config|}} + {{#each (array + "BoundIAMPrincipalARNs" + "EnableIAMEntityDetails" + "IAMEntityTags" + "IAMEndpoint" + "MaxRetries" + "STSEndpoint" + "STSRegion" + "AllowedSTSHeaderValues" + "ServerIDHeaderValue" + ) as |value|}} + {{#if (get config value)}} +
    {{t (concat "models.auth-method." value)}}
    +
    + {{#let (get config value) as |item|}} + {{#if (array-is-array item)}} +
      + {{#each item as |jtem|}}
    • {{jtem}}
      • - {{/each}} -
    - {{else}} - {{item}} - {{/if}} -{{/let}} -
    - - {{/if}} - {{/each}} - -{{/let}} + {{/each}} +
+ {{else}} + {{item}} + {{/if}} + {{/let}} +
+ {{/if}} + {{/each}} + {{/let}} +
{{else if (eq @item.Type 'jwt')}} + {{#if @item.Config.JWKSURL}} -
{{t 'models.auth-method.Config.JWKSURL'}}
-
- + -
-
{{t 'models.auth-method.Config.JWKSCACert'}}
-
- + {{t 'models.auth-method.Config.JWKSURL'}} + + +
+ -
+ as |F| + > + {{t 'models.auth-method.Config.JWKSCACert'}} + + {{/if}} {{#if @item.Config.JWTValidationPubKeys}} -
{{t 'models.auth-method.Config.JWTValidationPubKeys'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.JWTValidationPubKeys'}} + + {{/if}} {{#if @item.Config.OIDCDiscoveryURL}} -
{{t 'models.auth-method.Config.OIDCDiscoveryURL'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.OIDCDiscoveryURL'}} + + {{/if}} + +
{{#if @item.Config.JWTSupportedAlgs}} -
{{t 'models.auth-method.Config.JWTSupportedAlgs'}}
-
{{join ', ' @item.Config.JWTSupportedAlgs}}
+
{{t 'models.auth-method.Config.JWTSupportedAlgs'}}
+
{{join ', ' @item.Config.JWTSupportedAlgs}}
{{/if}} {{#if @item.Config.BoundAudiences}}
{{t 'models.auth-method.Config.BoundAudiences'}}
-
    +
      {{#each @item.Config.BoundAudiences as |bond|}}
    • {{bond}} @@ -162,26 +196,38 @@ as |item|}}
      {{get @item.Config value}}
      {{/if}} {{/each}} +
+ {{else if (eq @item.Type 'oidc')}} + {{#if @item.Config.OIDCDiscoveryURL}} -
{{t 'models.auth-method.Config.OIDCDiscoveryURL'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.OIDCDiscoveryURL'}} + + {{/if}} {{#if @item.Config.OIDCDiscoveryCACert}} -
{{t 'models.auth-method.Config.OIDCDiscoveryCACert'}}
-
- + -
+ as |F| + > + {{t 'models.auth-method.Config.OIDCDiscoveryCACert'}} + + {{/if}} + +
{{#if @item.Config.OIDCClientID}}
{{t 'models.auth-method.Config.OIDCClientID'}}
{{@item.Config.OIDCClientID}}
@@ -194,25 +240,29 @@ as |item|}}
{{t 'models.auth-method.Config.OIDCClientAssertionPrivateKey'}}
{{@item.Config.OIDCClientAssertion.PrivateKey.PemKey}}
{{/if}} +
+ {{#if @item.Config.AllowedRedirectURIs}} -
{{t 'models.auth-method.Config.AllowedRedirectURIs'}}
-
-
    - {{#each @item.Config.AllowedRedirectURIs as |uri|}} -
  • - -
    • - {{/each}} -
-
+ {{#each @item.Config.AllowedRedirectURIs as |uri|}} +
+ + {{t 'models.auth-method.Config.AllowedRedirectURIs'}} + +
+ {{/each}} {{/if}} + +
{{#if @item.Config.BoundAudiences}}
{{t 'models.auth-method.Config.BoundAudiences'}}
-
    +
      {{#each @item.Config.BoundAudiences as |bond|}}
    • {{bond}} @@ -224,7 +274,7 @@ as |item|}} {{#if @item.Config.OIDCScopes}}
      {{t 'models.auth-method.Config.OIDCScopes'}}
      -
        +
          {{#each @item.Config.OIDCScopes as |scope|}}
        • {{scope}} @@ -234,40 +284,40 @@ as |item|}}
      {{/if}} {{#if @item.Config.JWTSupportedAlgs}} -
      {{t 'models.auth-method.Config.JWTSupportedAlgs'}}
      -
      {{join ', ' @item.Config.JWTSupportedAlgs}}
      +
      {{t 'models.auth-method.Config.JWTSupportedAlgs'}}
      +
      {{join ', ' @item.Config.JWTSupportedAlgs}}
      {{/if}} {{#if @item.Config.VerboseOIDCLogging}} -
      {{t 'models.auth-method.Config.VerboseOIDCLogging'}}
      -
      +
      {{t 'models.auth-method.Config.VerboseOIDCLogging'}}
      +
      {{/if}} +
+ {{/if}} - -
+ {{#if (not (eq @item.Type 'aws-iam'))}} -

Claim Mappings

{{#if @item.Config.ClaimMappings}}

Use this if the claim you are capturing is singular. When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.

- - - - - - - - + + <:head as |H|> + + Key + Value + + + <:body as |B|> {{#each (entries @item.Config.ClaimMappings) as |entry|}} - - - - + + {{get entry 0}} + {{get entry 1}} + {{/each}} - -
KeyValue
{{get entry 0}}{{get entry 1}}
+ + {{else}} <:header> @@ -289,28 +339,26 @@ as |item|}} {{/if}}
-
-

List Claim Mappings

{{#if @item.Config.ListClaimMappings}}

Use this if the claim you are capturing is list-like (such as groups). When mapped, the values can be any of a number, string, or boolean and will all be stringified when returned.

- - - - - - - - + + <:head as |H|> + + Key + Value + + + <:body as |B|> {{#each (entries @item.Config.ListClaimMappings) as |entry|}} - - - - + + {{get entry 0}} + {{get entry 1}} + {{/each}} - -
KeyValue
{{get entry 0}}{{get entry 1}}
+ + {{else}} <:header> @@ -331,6 +379,7 @@ as |item|}} {{/if}}
+ + {{/if}} {{/if}} -{{/if}} - \ No newline at end of file + diff --git a/ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/binding-rules.hbs b/ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/binding-rules.hbs index 12de2153b9b..14ba69a85f1 100644 --- a/ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/binding-rules.hbs +++ b/ui/packages/consul-ui/app/templates/dc/acls/auth-methods/show/binding-rules.hbs @@ -38,10 +38,8 @@ as |items|}}

Successful authentication with an auth method returns a set of trusted identity attributes corresponding to the authenticated identity. Those attributes are matched against all configured binding rules for that auth method to determine what privileges to grant the Consul ACL token it will ultimately create.

-
{{#each items as |item|}} -
{{/each}} {{else}}