matrix-dimension/web/app/integration/integration.component.html

<div class="integration">
    <img [src]="integration.avatar" class="avatar">
    <div class="title">
        <b>{{ integration.name }}</b>
        <div style="display: flex;">
            <div class="switch" *ngIf="integration.type !== 'bridge'">
                <ui-switch [checked]="integration.isEnabled" size="small" [disabled]="integration.isBroken" (change)="update()"></ui-switch>
            </div>
            <div class="switch" *ngIf="integration.type == 'bridge' && integration.isEnabled">
                <ui-switch [checked]="true" size="small" [disabled]="true" ngbTooltip="This integration is always enabled. Click the cog to configure it."></ui-switch>
            </div>
            <div class="switch" *ngIf="integration.type == 'bridge' && !integration.isEnabled">
                <ui-switch [checked]="false" size="small" [disabled]="true" ngbTooltip="{{ integration.bridgeError }}"></ui-switch>
            </div>
            <div class="toolbar">
                <i class="fa fa-question-circle text-info" ngbTooltip="{{integration.about}}" *ngIf="integration.about"></i>
                <i class="fa fa-cog text-info config-icon" (click)="configureIntegration()" *ngIf="integration.isEnabled && integration.hasConfig"></i>
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>