zitadel/console/src/app/pages/users/user-detail/external-idps/external-idps.component.html

<cnsl-card title="{{ 'USER.EXTERNALIDP.TITLE' | translate }}" description="{{ 'USER.EXTERNALIDP.DESC' | translate }}">
  <button
    card-actions
    mat-icon-button
    (click)="refreshPage()"
    class="icon-button"
    matTooltip="{{ 'ACTIONS.REFRESH' | translate }}"
  >
    <mat-icon class="icon">refresh</mat-icon>
  </button>
  <cnsl-refresh-table
    [hideRefresh]="true"
    [loading]="loading$ | async"
    [dataSize]="dataSource.data.length"
    [timestamp]="viewTimestamp"
    [selection]="selection"
  >
    <div class="table-wrapper">
      <table class="table" mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox
              color="primary"
              (change)="$event ? masterToggle() : null"
              [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()"
            >
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let idp">
            <mat-checkbox
              color="primary"
              (click)="$event.stopPropagation()"
              (change)="$event ? selection.toggle(idp) : null"
              [checked]="selection.isSelected(idp)"
            >
            </mat-checkbox>
          </td>
        </ng-container>

        <ng-container matColumnDef="idpConfigId">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.IDPCONFIGID' | translate }}</th>
          <td mat-cell *matCellDef="let idp">{{ idp?.idpId }}</td>
        </ng-container>

        <ng-container matColumnDef="idpName">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.IDPNAME' | translate }}</th>
          <td mat-cell *matCellDef="let idp">{{ idp?.idpName }}</td>
        </ng-container>

        <ng-container matColumnDef="externalUserDisplayName">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.USERDISPLAYNAME' | translate }}</th>
          <td mat-cell *matCellDef="let idp">{{ idp?.providedUserName }}</td>
        </ng-container>

        <ng-container matColumnDef="externalUserId">
          <th mat-header-cell *matHeaderCellDef>{{ 'USER.EXTERNALIDP.EXTERNALUSERID' | translate }}</th>
          <td mat-cell *matCellDef="let idp">{{ idp?.providedUserId }}</td>
        </ng-container>

        <ng-container matColumnDef="actions" stickyEnd>
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let idp">
            <cnsl-table-actions>
              <button
                actions
                color="warn"
                mat-icon-button
                matTooltip="{{ 'ACTIONS.REMOVE' | translate }}"
                (click)="removeExternalIdp(idp)"
              >
                <i class="las la-trash"></i>
              </button>
            </cnsl-table-actions>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>

    <div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
      <i class="las la-exclamation"></i>
      <span>{{ 'USER.EXTERNALIDP.EMPTY' | translate }}</span>
    </div>

    <cnsl-paginator
      #paginator
      class="paginator"
      [timestamp]="viewTimestamp"
      [length]="totalResult || 0"
      [pageSize]="20"
      [pageSizeOptions]="[10, 20, 50, 100]"
      (page)="changePage($event)"
    ></cnsl-paginator>
  </cnsl-refresh-table>
</cnsl-card>