zitadel/console/src/app/modules/idp-table/idp-table.component.html

<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
    emitRefreshOnPreviousRoute="/iam/idp/create" [timestamp]="idpResult?.viewTimestamp" [selection]="selection">
    <ng-template appHasRole [appHasRole]="['iam.write']" actions>
        <button (click)="deactivateSelectedIdps()" matTooltip="{{'IDP.DEACTIVATE' | translate}}" class="icon-button"
            mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
            <mat-icon>block</mat-icon>
        </button>
        <button (click)="reactivateSelectedIdps()" matTooltip="{{'IDP.ACTIVATE' | translate}}" class="icon-button"
            mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
            <mat-icon>play_circle_outline</mat-icon>
        </button>
        <button color="warn" (click)="removeSelectedIdps()" matTooltip="{{'IDP.DELETE' | translate}}"
            class="icon-button" mat-icon-button *ngIf="selection.hasValue()" [disabled]="disabled">
            <i class="las la-trash"></i>
        </button>
        <a [routerLink]="createRouterLink" color="primary" mat-raised-button [disabled]="disabled">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>

    <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()"
                        [disabled]="serviceType==PolicyComponentServiceType.MGMT">
                    </mat-checkbox>
                </th>
                <td mat-cell *matCellDef="let idp">
                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
                        [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
                        (change)="$event ? selection.toggle(idp) : null" [checked]="selection.isSelected(idp)">
                        <ng-template #genAvatar>
                            <div class="avatar">
                                <span>{{idp.name.charAt(0)}}</span>
                            </div>
                        </ng-template>
                    </mat-checkbox>
                </td>
            </ng-container>

            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.NAME' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp"> {{idp?.name}} </td>
            </ng-container>

            <ng-container matColumnDef="config">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CONFIG' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
                    <div *ngFor="let elem of idp?.oidcConfig | keyvalue" class="flex-row">
                        <span class="key">{{elem.key}}:</span>
                        <span class="value">{{elem.value}}</span>
                    </div>
                </td>
            </ng-container>

            <ng-container matColumnDef="state">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.STATE' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" mat-cell *matCellDef="let idp">
                    {{ 'IDP.STATES.'+idp.state | translate }} </td>
            </ng-container>

            <ng-container matColumnDef="creationDate">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CREATIONDATE' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                    {{idp.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
            </ng-container>

            <ng-container matColumnDef="changeDate">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.CHANGEDATE' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                    {{idp.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }} </td>
            </ng-container>

            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef> {{ 'IDP.TYPE' | translate }} </th>
                <td [routerLink]="routerLinkForRow(idp)" class="pointer" mat-cell *matCellDef="let idp">
                    {{'IDP.TYPES.'+idp.providerType | translate }} </td>
            </ng-container>

            <ng-container matColumnDef="actions" stickyEnd>
                <th mat-header-cell *matHeaderCellDef></th>
                <td mat-cell *matCellDef="let idp">
                    <button
                        [disabled]="serviceType==PolicyComponentServiceType.MGMT && idp?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM"
                        mat-icon-button color="warn" matTooltip="{{'IAM.VIEWS.CLEAR' | translate}}"
                        (click)="removeIdp(idp)">
                        <i class="las la-trash"></i>
                    </button>
                </td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr class="highlight"
                [ngClass]="{'disabled': serviceType==PolicyComponentServiceType.MGMT && row?.providerType == IdpProviderType.IDPPROVIDERTYPE_SYSTEM}"
                mat-row *matRowDef="let row; columns: displayedColumns;">
            </tr>
        </table>
    </div>
    <mat-paginator #paginator class="paginator" [length]="idpResult?.totalResult || 0" [pageSize]="10"
        [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</app-refresh-table>