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/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/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/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}} 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|}} +
+ + {{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}}