discourse/app/assets/javascripts/admin/addon/templates/api-keys-index.hbs

<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}}