Disable uninstall button on plugin uninstallation

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html

@@ -15,10 +15,15 @@
 
         <my-button
           class="update-button" *ngIf="isUpdateAvailable(plugin)" (click)="update(plugin)" [loading]="isUpdating(plugin)"
-          [label]="getUpdateLabel(plugin)" icon="refresh" [attr.disabled]="isUpdating(plugin)" [responsiveLabel]="true"
+          [attr.disabled]="isUpdating(plugin) || isUninstalling(plugin)"
+          [label]="getUpdateLabel(plugin)" icon="refresh" [responsiveLabel]="true"
         ></my-button>
 
-        <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label [responsiveLabel]="true"></my-delete-button>
+        <my-delete-button
+          (click)="uninstall(plugin)"
+          label="Uninstall" i18n-label [responsiveLabel]="true"
+          [disabled]="isUpdating(plugin) || isUninstalling(plugin)"
+        ></my-delete-button>
       </div>
     </my-plugin-card>
   </ng-container>

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts

@@ -24,6 +24,7 @@ export class PluginListInstalledComponent implements OnInit {
 
   plugins: PeerTubePlugin[] = []
   updating: { [name: string]: boolean } = {}
+  uninstalling: { [name: string]: boolean } = {}
 
   onDataSubject = new Subject<any[]>()
 
@@ -99,7 +100,11 @@ export class PluginListInstalledComponent implements OnInit {
   }
 
   isUpdating (plugin: PeerTubePlugin) {
-    return !!this.updating[this.getUpdatingKey(plugin)]
+    return !!this.updating[this.getPluginKey(plugin)]
+  }
+
+  isUninstalling (plugin: PeerTubePlugin) {
+    return !!this.uninstall[this.getPluginKey(plugin)]
   }
 
   isTheme (plugin: PeerTubePlugin) {
@@ -107,12 +112,17 @@ export class PluginListInstalledComponent implements OnInit {
   }
 
   async uninstall (plugin: PeerTubePlugin) {
+    const pluginKey = this.getPluginKey(plugin)
+    if (this.uninstalling[pluginKey]) return
+
     const res = await this.confirmService.confirm(
       $localize`Do you really want to uninstall ${plugin.name}?`,
       $localize`Uninstall`
     )
     if (res === false) return
 
+    this.uninstalling[pluginKey] = true
+
     this.pluginApiService.uninstall(plugin.name, plugin.type)
       .subscribe({
         next: () => {
@@ -120,15 +130,20 @@ export class PluginListInstalledComponent implements OnInit {
 
           this.plugins = this.plugins.filter(p => p.name !== plugin.name)
           this.pagination.totalItems--
+
+          this.uninstalling[pluginKey] = false
         },
 
-        error: err => this.notifier.error(err.message)
+        error: err => {
+          this.notifier.error(err.message)
+          this.uninstalling[pluginKey] = false
+        }
       })
   }
 
   async update (plugin: PeerTubePlugin) {
-    const updatingKey = this.getUpdatingKey(plugin)
+    const pluginKey = this.getPluginKey(plugin)
-    if (this.updating[updatingKey]) return
+    if (this.updating[pluginKey]) return
 
     if (this.isMajorUpgrade(plugin)) {
       const res = await this.confirmService.confirm(
@@ -140,20 +155,23 @@ export class PluginListInstalledComponent implements OnInit {
       if (res === false) return
     }
 
-    this.updating[updatingKey] = true
+    this.updating[pluginKey] = true
 
     this.pluginApiService.update(plugin.name, plugin.type)
         .pipe()
         .subscribe({
           next: res => {
-            this.updating[updatingKey] = false
+            this.updating[pluginKey] = false
 
             this.notifier.success($localize`${plugin.name} updated.`)
 
             Object.assign(plugin, res)
           },
 
-          error: err => this.notifier.error(err.message)
+          error: err => {
+            this.notifier.error(err.message)
+            this.updating[pluginKey] = false
+          }
         })
   }
 
@@ -165,7 +183,7 @@ export class PluginListInstalledComponent implements OnInit {
     return this.pluginApiService.getPluginOrThemeHref(this.pluginType, name)
   }
 
-  private getUpdatingKey (plugin: PeerTubePlugin) {
+  private getPluginKey (plugin: PeerTubePlugin) {
     return plugin.name + plugin.type
   }
 

client/src/app/+admin/plugins/plugin-search/plugin-search.component.html

@@ -46,7 +46,7 @@
         ></my-edit-button>
 
         <my-button
-          class="update-button" *ngIf="plugin.installed === false" (click)="install(plugin)"
+          *ngIf="plugin.installed === false" (click)="install(plugin)"
           [loading]="isInstalling(plugin)" label="Install" [responsiveLabel]="true"
           icon="cloud-download" [attr.disabled]="isInstalling(plugin)"
         ></my-button>

client/src/app/shared/shared-main/buttons/delete-button.component.ts

@@ -3,13 +3,18 @@ import { Component, Input, OnInit } from '@angular/core'
 @Component({
   selector: 'my-delete-button',
   template: `
-  <my-button icon="delete" className="grey-button" [label]="label" [title]="title" [responsiveLabel]="responsiveLabel"></my-button>
+    <my-button
+      icon="delete" className="grey-button"
+      [disabled]="disabled" [label]="label" [title]="title"
+      [responsiveLabel]="responsiveLabel"
+    ></my-button>
   `
 })
 export class DeleteButtonComponent implements OnInit {
   @Input() label: string
   @Input() title: string
   @Input() responsiveLabel = false
+  @Input() disabled: boolean
 
   ngOnInit () {
     if (this.label === undefined && !this.title) {