Prevent multiple clicks on buttons (#3742)

* add directive for throttle clicks * adjust buttons * adjust * add missing license
kubermatic · Oct 1, 2021 · fc5fbbe · fc5fbbe
1 parent 137f2c4
commit fc5fbbe
Show file tree

Hide file tree

Showing 47 changed files with 142 additions and 37 deletions.
diff --git a/src/app/backup/list/automatic-backup/add-dialog/template.html b/src/app/backup/list/automatic-backup/add-dialog/template.html
@@ -103,7 +103,8 @@
 
   <mat-dialog-actions>
     <button mat-flat-button
-            (click)="save()"
+            kmThrottleClick
+            (throttleClick)="save()"
             [disabled]="form.invalid">
       Add Automatic Backup
     </button>

diff --git a/src/app/backup/list/restore/template.html b/src/app/backup/list/restore/template.html
@@ -85,7 +85,8 @@
                 <button mat-icon-button
                         [attr.id]="'km-delete-restore-' + backup.name"
                         matTooltip="Delete Automatic Backup"
-                        (click)="delete(backup); $event.stopPropagation()"
+                        kmThrottleClick
+                        (throttleClick)="delete(backup); $event.stopPropagation()"
                         [disabled]="!canDelete">
                   <i class="km-icon-delete"></i>
                 </button>

diff --git a/src/app/backup/list/snapshot/add-dialog/template.html b/src/app/backup/list/snapshot/add-dialog/template.html
@@ -44,7 +44,8 @@
 
   <mat-dialog-actions>
     <button mat-flat-button
-            (click)="save()"
+            kmThrottleClick
+            (throttleClick)="save()"
             [disabled]="form.invalid">
       Add Snapshot
     </button>

diff --git a/src/app/backup/list/snapshot/delete-dialog/template.html b/src/app/backup/list/snapshot/delete-dialog/template.html
@@ -24,7 +24,8 @@
 
   <mat-dialog-actions>
     <button mat-flat-button
-            (click)="delete()">
+            kmThrottleClick
+            (throttleClick)="delete()">
       <i class="km-icon-mask km-icon-delete"></i>
       <span>Delete Snapshot</span>
     </button>

diff --git a/src/app/backup/list/snapshot/restore-dialog/template.html b/src/app/backup/list/snapshot/restore-dialog/template.html
@@ -47,7 +47,8 @@
 
   <mat-dialog-actions>
     <button mat-flat-button
-            (click)="restore()">
+            kmThrottleClick
+            (throttleClick)="restore()">
       Restore Cluster
     </button>
   </mat-dialog-actions>

diff --git a/src/app/cluster-template/template.html b/src/app/cluster-template/template.html
@@ -19,7 +19,8 @@
     <button fxLayoutAlign="center center"
             mat-flat-button
             type="button"
-            (click)="create()"
+            kmThrottleClick
+            (throttleClick)="create()"
             [disabled]="!canCreate()">
       <i class="km-icon-mask km-icon-add"></i>
       <span>Create Cluster Template</span>
@@ -97,13 +98,15 @@
               <ng-container *ngSwitchCase="false">
                 <button mat-icon-button
                         matTooltip="Create Cluster from Template"
-                        (click)="createCluster(element)"
+                        kmThrottleClick
+                        (throttleClick)="createCluster(element)"
                         [disabled]="!canCreateCluster()">
                   <i class="km-icon-mask km-icon-cluster-from-template"></i>
                 </button>
                 <button mat-icon-button
                         matTooltip="Delete Cluster Template"
-                        (click)="delete(element)"
+                        kmThrottleClick
+                        (throttleClick)="delete(element)"
                         [disabled]="!canDelete(element)">
                   <i class="km-icon-mask km-icon-delete"></i>
                 </button>

diff --git a/src/app/cluster/cluster-details/add-machine-network/template.html b/src/app/cluster/cluster-details/add-machine-network/template.html
@@ -18,7 +18,8 @@
                        (valid)="valid = $event"></km-machine-networks>
 </mat-dialog-content>
 <mat-dialog-actions>
-  <button (click)="addMachineNetworks()"
+  <button kmThrottleClick
+          (throttleClick)="addMachineNetworks()"
           mat-flat-button
           [disabled]="!valid">
     <i class="km-icon-mask km-icon-add"></i>

diff --git a/src/app/cluster/cluster-details/change-cluster-version/template.html b/src/app/cluster/cluster-details/change-cluster-version/template.html
@@ -41,7 +41,8 @@
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-flat-button
-          (click)="changeVersion()"
+          kmThrottleClick
+          (throttleClick)="changeVersion()"
           [disabled]="!selectedVersion">
     <i class="km-icon-mask km-icon-check i-24"></i>
     <span>Change Version</span>

diff --git a/src/app/cluster/cluster-details/cluster-delete-confirmation/template.html b/src/app/cluster/cluster-details/cluster-delete-confirmation/template.html
@@ -55,6 +55,8 @@
   <button id="km-delete-cluster-dialog-delete-btn"
           type="submit"
           mat-flat-button
+          kmThrottleClick
+          (throttleClick)="deleteCluster()"
           form="km-delete-cluster-dialog"
           [disabled]="!inputNameMatches()">
     <i class="km-icon-mask km-icon-delete i-24"></i>

diff --git a/src/app/cluster/cluster-details/constraints/constraint-dialog/template.html b/src/app/cluster/cluster-details/constraints/constraint-dialog/template.html
@@ -48,7 +48,8 @@
 <mat-dialog-actions>
   <button id="km-constraint-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!form.valid">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Constraint</span>

diff --git a/src/app/cluster/cluster-details/edit-cluster/template.html b/src/app/cluster/cluster-details/edit-cluster/template.html
@@ -143,6 +143,8 @@
     <button id="km-edit-cluster-dialog-edit-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="editCluster()"
             form="edit-cluster-form"
             [disabled]="!form.valid || !providerSettingsPatch.isValid">
       <i class="km-icon-mask km-icon-save"></i>

diff --git a/src/app/cluster/cluster-details/gatekeeper-config/gatekeeper-config-dialog/template.html b/src/app/cluster/cluster-details/gatekeeper-config/gatekeeper-config-dialog/template.html
@@ -19,7 +19,8 @@
 <mat-dialog-actions>
   <button id="km-gatekeeper-config-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!isValid()">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Gatekeeper Config</span>

diff --git a/.../cluster/cluster-details/mla/alertmanager-config/alertmanager-config-dialog/template.html b/.../cluster/cluster-details/mla/alertmanager-config/alertmanager-config-dialog/template.html
@@ -19,7 +19,8 @@
 <mat-dialog-actions>
   <button id="km-alertmanager-config-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!isValid()">
     <i [ngClass]="getIconClass"></i>
     <span>{{data.confirmLabel}} Alertmanager Config</span>

diff --git a/src/app/cluster/cluster-details/mla/rule-groups/rule-group-dialog/template.html b/src/app/cluster/cluster-details/mla/rule-groups/rule-group-dialog/template.html
@@ -34,7 +34,8 @@
 <mat-dialog-actions>
   <button id="km-rule-group-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!isValid()">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Rule Group</span>

diff --git a/src/app/cluster/cluster-details/rbac/add-binding/template.html b/src/app/cluster/cluster-details/rbac/add-binding/template.html
@@ -145,6 +145,8 @@
     <button id="km-add-binding-dialog-add-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="addBinding()"
             form="add-binding-form"
             [disabled]="!form.valid">
       <i class="km-icon-mask km-icon-add"></i>

diff --git a/src/app/cluster/cluster-details/revoke-token/template.html b/src/app/cluster/cluster-details/revoke-token/template.html
@@ -28,7 +28,8 @@
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-flat-button
-          (click)="revokeToken()"
+          kmThrottleClick
+          (throttleClick)="revokeToken()"
           [disabled]="!revokeAdminToken && !revokeViewerToken">
     <i class="km-icon-mask km-icon-check i-24"></i>
     <span>Revoke Token</span>

diff --git a/src/app/cluster/cluster-details/template.html b/src/app/cluster/cluster-details/template.html
@@ -41,7 +41,8 @@
             fxLayoutAlign="center center"
             mat-flat-button
             type="button"
-            (click)="downloadKubeconfig()"
+            kmThrottleClick
+            (throttleClick)="downloadKubeconfig()"
             [disabled]="!isClusterRunning">
       <i class="km-icon-mask km-icon-download"></i>
       <span>Download</span>

diff --git a/src/app/cluster/external-cluster-details/template.html b/src/app/cluster/external-cluster-details/template.html
@@ -19,7 +19,8 @@
               mat-flat-button
               color="tertiary"
               fxLayoutAlign="center center"
-              (click)="disconnect()"
+              kmThrottleClick
+              (throttleClick)="disconnect()"
               [disabled]="!isDisconnectEnabled()">
         <i class="km-icon-mask km-icon-disconnect"></i>
         <span>Disconnect</span>

diff --git a/src/app/dynamic/enterprise/allowed-registries/allowed-registry-dialog/template.html b/src/app/dynamic/enterprise/allowed-registries/allowed-registry-dialog/template.html
@@ -36,7 +36,8 @@
 <mat-dialog-actions>
   <button id="km-allowed-registry-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="form.invalid">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Allowed Registry</span>

diff --git a/src/app/dynamic/enterprise/metering/config/config-dialog/template.html b/src/app/dynamic/enterprise/metering/config/config-dialog/template.html
@@ -44,7 +44,8 @@
                class="spinner"></mat-spinner>
 
   <button mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="form.invalid || saving">
     <i class="km-icon-mask km-icon-edit"></i>
     <span>Configure Metering</span>

diff --git a/src/app/dynamic/enterprise/metering/config/credentials-dialog/template.html b/src/app/dynamic/enterprise/metering/config/credentials-dialog/template.html
@@ -61,7 +61,8 @@
                class="spinner"></mat-spinner>
 
   <button mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="form.invalid || saving">
     <i class="km-icon-mask km-icon-edit"></i>
     <span>Edit Credentials</span>

diff --git a/src/app/dynamic/enterprise/metering/list/template.html b/src/app/dynamic/enterprise/metering/list/template.html
@@ -81,7 +81,8 @@
             </ng-container>
 
             <button mat-icon-button
-                    (click)="download(element)"
+                    kmThrottleClick
+                    (throttleClick)="download(element)"
                     [disabled]="!canDownload(element)">
               <i class="km-icon-mask km-icon-download"></i>
             </button>

diff --git a/src/app/member/add-member/template.html b/src/app/member/add-member/template.html
@@ -59,6 +59,8 @@
     <button id="km-add-member-dialog-add-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="addMember()"
             form="add-member-form"
             [disabled]="!addMemberForm.valid">
       <i class="km-icon-mask km-icon-add"></i>

diff --git a/src/app/member/edit-member/template.html b/src/app/member/edit-member/template.html
@@ -58,6 +58,8 @@
     <button id="km-edit-member-dialog-edit-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="editMember()"
             form="edit-member-form"
             [disabled]="!form.valid">
       <i class="km-icon-mask km-icon-edit w-24"></i>

diff --git a/src/app/project/edit-project/template.html b/src/app/project/edit-project/template.html
@@ -39,6 +39,8 @@
     <button id="km-edit-project-dialog-edit-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="editProject()"
             form="edit-project-form"
             [disabled]="!form.valid">
       <i class="km-icon-mask km-icon-edit w-24"></i>

diff --git a/src/app/serviceaccount/add-serviceaccount/template.html b/src/app/serviceaccount/add-serviceaccount/template.html
@@ -62,6 +62,8 @@
     <button id="km-add-serviceaccount-dialog-add-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="addServiceAccount()"
             form="add-service-account-form"
             [disabled]="!addServiceAccountForm.valid">
       <i class="km-icon-mask km-icon-add"></i>

diff --git a/src/app/serviceaccount/edit-serviceaccount/template.html b/src/app/serviceaccount/edit-serviceaccount/template.html
@@ -63,6 +63,8 @@
     <button id="km-edit-serviceaccount-dialog-edit-btn"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="editServiceAccount()"
             form="edit-service-account-form"
             [disabled]="!editServiceAccountForm.valid">
       <i class="km-icon-mask km-icon-edit w-24"></i>

diff --git a/src/app/serviceaccount/token/add/template.html b/src/app/serviceaccount/token/add/template.html
@@ -48,7 +48,8 @@
             id="km-serviceaccount-token-dialog-update-btn"
             mat-flat-button
             [disabled]="updating || form.invalid"
-            (click)="update()">
+            kmThrottleClick
+            (throttleClick)="update()">
       <i [ngClass]="getIconClass()"></i>
       <span>{{mode}} Token</span>
     </button>
@@ -86,7 +87,8 @@
                  *ngIf="updating"></mat-spinner>
     <button mat-flat-button
             [disabled]="updating || form.invalid"
-            (click)="update()">
+            kmThrottleClick
+            (throttleClick)="update()">
       <i [ngClass]="getIconClass()"></i>
       <span>{{mode}} Token</span>
     </button>

diff --git a/src/app/settings/admin/admins/add-admin-dialog/template.html b/src/app/settings/admin/admins/add-admin-dialog/template.html
@@ -33,6 +33,8 @@
 <mat-dialog-actions>
   <button mat-flat-button
           type="submit"
+          kmThrottleClick
+          (throttleClick)="add()"
           form="add-admin-form"
           id="km-add-admin-dialog-save-btn"
           [disabled]="!form.valid">

diff --git a/src/app/settings/admin/bucket-settings/edit-bucket-setting-dialog/template.html b/src/app/settings/admin/bucket-settings/edit-bucket-setting-dialog/template.html
@@ -36,7 +36,8 @@
 <mat-dialog-actions>
   <button mat-flat-button
           id="km-edit-bucket-setting-dialog-save-btn"
-          (click)="edit()"
+          kmThrottleClick
+          (throttleClick)="edit()"
           [disabled]="!form.valid">
     <i class="km-icon-mask km-icon-edit"></i>
     <span>Edit Bucket Settings</span>

diff --git a/src/app/settings/admin/bucket-settings/edit-credentials-dialog/template.html b/src/app/settings/admin/bucket-settings/edit-credentials-dialog/template.html
@@ -38,7 +38,8 @@
 <mat-dialog-actions>
   <button mat-flat-button
           id="km-edit-credentials-dialog-save-btn"
-          (click)="edit()"
+          kmThrottleClick
+          (throttleClick)="edit()"
           [disabled]="!form.valid">
     <i class="km-icon-mask km-icon-edit"></i>
     <span>Edit Credentials</span>

diff --git a/src/app/settings/admin/dynamic-datacenters/datacenter-data-dialog/template.html b/src/app/settings/admin/dynamic-datacenters/datacenter-data-dialog/template.html
@@ -140,7 +140,8 @@
 </mat-dialog-content>
 <mat-dialog-actions>
   <button mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           id="km-add-dc-save-btn"
           [disabled]="!form.valid">
     <i [ngClass]="getIconClass()"></i>

diff --git a/src/app/settings/admin/opa/constraint-templates/constraint-template-dialog/template.html b/src/app/settings/admin/opa/constraint-templates/constraint-template-dialog/template.html
@@ -19,7 +19,8 @@
 <mat-dialog-actions>
   <button id="km-constraint-template-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!isValid()">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Constraint Template</span>

diff --git a/src/app/settings/admin/opa/default-constraints/default-constraint-dialog/template.html b/src/app/settings/admin/opa/default-constraints/default-constraint-dialog/template.html
@@ -46,7 +46,8 @@
 <mat-dialog-actions>
   <button id="km-default-constraint-dialog-btn"
           mat-flat-button
-          (click)="save()"
+          kmThrottleClick
+          (throttleClick)="save()"
           [disabled]="!form.valid">
     <i [ngClass]="getIconClass()"></i>
     <span>{{data.confirmLabel}} Default Constraint</span>

diff --git a/src/app/settings/admin/presets/dialog/template.html b/src/app/settings/admin/presets/dialog/template.html
@@ -73,7 +73,8 @@
             id="km-settings-preset-create-btn"
             [disabled]="creating || invalid"
             *ngIf="last"
-            (click)="save()">
+            kmThrottleClick
+            (throttleClick)="save()">
       <i class="km-icon-mask km-icon-add"></i>
       <span>Create</span>
     </button>

diff --git a/src/app/settings/admin/presets/edit-dialog/template.html b/src/app/settings/admin/presets/edit-dialog/template.html
@@ -41,7 +41,8 @@
       </div>
 
       <button mat-icon-button
-              (click)="save(provider.name, !provider.enabled)"
+              kmThrottleClick
+              (throttleClick)="save(provider.name, !provider.enabled)"
               class="show-icon"
               fxLayoutAlign="center center">
         <i [ngClass]="provider.enabled ? 'km-icon-mask km-icon-show' : 'km-icon-mask km-icon-hide'"></i>

diff --git a/src/app/shared/components/add-project-dialog/template.html b/src/app/shared/components/add-project-dialog/template.html
@@ -39,6 +39,8 @@
     <button id="km-add-project-dialog-save"
             mat-flat-button
             type="submit"
+            kmThrottleClick
+            (throttleClick)="addProject()"
             form="add-project-form"
             [disabled]="!form.valid">
       <i class="km-icon-mask km-icon-save"></i>

diff --git a/src/app/shared/components/add-ssh-key-dialog/template.html b/src/app/shared/components/add-ssh-key-dialog/template.html
@@ -50,6 +50,8 @@
 <mat-dialog-actions>
   <button id="km-add-ssh-key-dialog-save"
           type="submit"
+          kmThrottleClick
+          (throttleClick)="addSSHKey()"
           mat-flat-button
           form="add-ssh-key-form"
           [disabled]="!addSSHKeyForm.valid">