discourse/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs
Ella E. c817a94c89
UX: Move revoked API key status to dedicated column (#30125)
* DEV: add table heading for status

* UX: Move revoked status to its own column with a badge; remove revoked icon

* UX: Increase text contrast for revoked rows
2024-12-05 04:24:01 -07:00

104 lines
3.5 KiB
Handlebars

<DButton
@action={{route-action "new"}}
@icon="plus"
@label="admin.api.new_key"
class="btn-primary"
/>
{{#if this.model}}
<LoadMore @selector=".api-keys tr" @action={{action "loadMore"}}>
<table class="d-admin-table api-keys">
<thead>
<th>{{i18n "admin.api.key"}}</th>
<th>{{i18n "admin.api.description"}}</th>
<th>{{i18n "admin.api.user"}}</th>
<th>{{i18n "admin.api.created"}}</th>
<th>{{i18n "admin.api.last_used"}}</th>
<th>{{i18n "admin.site_settings.table_column_heading.status"}}</th>
<th>&nbsp;</th>
</thead>
<tbody>
{{#each this.model as |k|}}
<tr class="d-admin-row__content {{if k.revoked_at 'revoked'}}">
<td class="d-admin-row__overview key">
{{k.truncatedKey}}
</td>
<td class="d-admin-row__detail key-description">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.description"
}}</div>
{{k.shortDescription}}
</td>
<td class="d-admin-row__detail key-user">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.user"
}}</div>
{{#if k.user}}
<LinkTo @route="adminUser" @model={{k.user}}>
{{avatar k.user imageSize="small"}}
</LinkTo>
{{else}}
{{i18n "admin.api.all_users"}}
{{/if}}
</td>
<td class="d-admin-row__detail key-created">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.created"
}}</div>
{{format-date k.created_at}}
</td>
<td class="d-admin-row__detail key-last-used">
<div class="d-admin-row__mobile-label">{{i18n
"admin.api.last_used"
}}</div>
{{#if k.last_used_at}}
{{format-date k.last_used_at}}
{{else}}
{{i18n "admin.api.never_used"}}
{{/if}}
</td>
<td class="d-admin-row__detail">
<div class="d-admin-row__mobile-label">{{i18n
"admin.site_settings.table_column_heading.status"
}}</div>
{{#if k.revoked_at}}
<div role="status" class="status-label">
<div class="status-label-indicator">
</div>
<div class="status-label-text">
{{i18n "admin.api.revoked"}}
</div>
</div>
{{/if}}
</td>
<td class="d-admin-row__controls key-controls">
<DButton
@action={{route-action "show" k}}
@icon="far-eye"
@title="admin.api.show_details"
/>
{{#if k.revoked_at}}
<DButton
@action={{fn this.undoRevokeKey k}}
@icon="arrow-rotate-left"
@title="admin.api.undo_revoke"
/>
{{else}}
<DButton
@action={{fn this.revokeKey k}}
@icon="xmark"
@title="admin.api.revoke"
class="btn-danger"
/>
{{/if}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</LoadMore>
<ConditionalLoadingSpinner @condition={{this.loading}} />
{{else}}
<p>{{i18n "admin.api.none"}}</p>
{{/if}}