Skip to content

ui: migrate auth-methods components to HDS #23852

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

Open
suresh-hashicorp wants to merge 2 commits into from
Open

ui: migrate auth-methods components to HDS #23852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a022d6b
ui: migrate auth-methods list/toolbar/type to HDS components
suresh-hashicorp Aug 21, 2026
189bd5f
ui: migrate auth-methods components to HDS
suresh-hashicorp Aug 22, 2026
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
60 changes: 33 additions & 27 deletions ui/packages/consul-ui/app/components/consul/auth-method/binding-list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,40 @@

<div class="consul-auth-method-binding-list">
<h2>{{@item.BindName}}</h2>
<dl>
<dt class="type">{{t "models.binding-rule.BindType"}}</dt>
<dd>
{{@item.BindType}}
{{#let
(if
(eq @item.BindType 'service')
(t "components.consul.auth-method.binding-list.bind-type.service")
<Hds::Card::Container
@level="base"
@hasBorder={{true}}
class="consul-auth-method-binding-list__card"
>
<dl class="consul-auth-method-binding-list__dl">
<dt class="type">{{t "models.binding-rule.BindType"}}</dt>
<dd>
{{@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}}
<span {{hds-tooltip bindTypeTooltip options=(detached-tooltip-options)}}></span>
{{/if}}
{{/let}}
</dd>
<dt>{{t "models.binding-rule.Selector"}}</dt>
<dd><code>{{@item.Selector}}</code></dd>
<dt>{{t "models.binding-rule.Description"}}</dt>
<dd>{{@item.Description}}</dd>
</dl>
</div>
as |bindTypeTooltip|
}}
{{#if bindTypeTooltip}}
<span {{hds-tooltip bindTypeTooltip options=(detached-tooltip-options)}}></span>
{{/if}}
{{/let}}
</dd>
<dt>{{t "models.binding-rule.Selector"}}</dt>
<dd><code>{{@item.Selector}}</code></dd>
<dt>{{t "models.binding-rule.Description"}}</dt>
<dd>{{@item.Description}}</dd>
</dl>
</Hds::Card::Container>
</div>
124 changes: 78 additions & 46 deletions ui/packages/consul-ui/app/components/consul/auth-method/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -21,73 +25,101 @@
@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;
}
h2 {
@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;
}
3 changes: 2 additions & 1 deletion ui/packages/consul-ui/app/components/consul/auth-method/list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) ---- }}
Expand All @@ -24,7 +25,7 @@
badge next to the name. }}
{{#if (eq item.TokenLocality 'global')}}
<span {{hds-tooltip "Creates global tokens" options=(detached-tooltip-options)}}>
<Hds::Badge @text="Global tokens" @color="highlight" @size="small" data-test-locality-global />
<Hds::Badge @text="Global Tokens" @color="highlight" @size="medium" data-test-locality-global />
</span>
{{/if}}
</span>
Expand Down
8 changes: 6 additions & 2 deletions ui/packages/consul-ui/app/components/consul/auth-method/list/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
29 changes: 14 additions & 15 deletions ui/packages/consul-ui/app/components/consul/auth-method/nspace-list/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,20 @@
}}

<div class="consul-auth-method-nspace-list">
<table>
<thead>
<tr>
<td>{{t "models.auth-method.Selector"}}</td>
<td>{{t "models.auth-method.BindNamespace"}}</td>
</tr>
</thead>
<tbody>
<Hds::Table>
<:head as |H|>
<H.Tr>
<H.Th>{{t "models.auth-method.Selector"}}</H.Th>
<H.Th>{{t "models.auth-method.BindNamespace"}}</H.Th>
</H.Tr>
</:head>
<:body as |B|>
{{#each @items as |item|}}
<tr>
<td>{{item.Selector}}</td>
<td>{{item.BindNamespace}}</td>
</tr>
<B.Tr>
<B.Td>{{item.Selector}}</B.Td>
<B.Td>{{item.BindNamespace}}</B.Td>
</B.Tr>
{{/each}}
</tbody>
</table>
</:body>
</Hds::Table>
</div>

16 changes: 16 additions & 0 deletions ui/packages/consul-ui/app/components/consul/auth-method/toolbar/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion ui/packages/consul-ui/app/components/consul/auth-method/type/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
@icon={{flightIcon}}
@color="neutral"
@type="filled"
@size="small"
@size="large"
/>
</span>
{{/let}}
Loading
Loading