user-access-tokens.component.html

<div id="user-access-token-panel">
  <data-panel title="{{ 'user.access.tokens.title' | translate }}"
              text="{{ 'user.access.tokens.text' | translate }}"
              [labelColumnContent]="commonToolbar">

    <table mat-table id="user-access-token-table" [dataSource]="dataSource"
           class="panel smp-data-panel">
      <ng-container matColumnDef="accessTokens">
        <th mat-header-cell
            *matHeaderCellDef>{{ "user.access.tokens.label.access.tokens" | translate }}
        </th>
        <td mat-cell *matCellDef="let token"
            [ngClass]="{'datatable-row-error': token.invalid}"
            [matTooltip]="token.name"
        class="access-token-panel">
          <access-token-panel class="access-token-panel"
                              (onDeleteEvent)="onDeleteItemClicked(token)"
                              (onSaveEvent)="onSaveItemClicked(token)"
                              [credential]="token"></access-token-panel>

        </td>
        <tr mat-header-row class="user-access-token-table-header"
            *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row class="user-access-token-table-data"
            *matRowDef="let myRowData; columns: displayedColumns"></tr>
      </ng-container>
    </table>

    <mat-paginator class="mat-elevation-z2" id="tokens-paginator"
                   [hidePageSize]="true"
                   [pageSize]="5"
                   attr.aria-label="{{ 'user.access.tokens.label.select.page' | translate }}"></mat-paginator>
  </data-panel>

</div>

<ng-template #commonToolbar>

  <button id="createAccessTokenButton" mat-raised-button color="primary"
          matTooltip="{{ 'user.access.tokens.tooltip.create' | translate }}"
          style="margin: 2em "
          (click)="createNewAccessToken()">
    <mat-icon>key</mat-icon>
    <span>{{ "user.access.tokens.button.create" | translate }}</span>
  </button>

</ng-template>