WIP plugins: add plugin settings/uninstall in client

3 files changed, 97 insertions, 8 deletions

diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
index 6bb8bcd75..d4501490f 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.html
@@ -7,7 +7,31 @@
 </div>
 
 <div class="plugins" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [autoInit]="true">
-  <div class="section plugin" *ngFor="let plugin of plugins">
-    {{ plugin.name }}
+  <div class="card plugin" *ngFor="let plugin of plugins">
+    <div class="card-body">
+      <div class="first-row">
+        <a class="plugin-name" [routerLink]="getShowRouterLink(plugin)" title="Show plugin settings">{{ plugin.name }}</a>
+
+        <span class="plugin-version">{{ plugin.version }}</span>
+      </div>
+
+      <div class="second-row">
+        <div class="description">{{ plugin.description }}</div>
+
+        <div class="buttons">
+          <a class="action-button action-button-edit grey-button" target="_blank" rel="noopener noreferrer"
+             [href]="plugin.homepage" i18n-title title="Go to the plugin homepage"
+          >
+            <my-global-icon iconName="go"></my-global-icon>
+            <span i18n class="button-label">Homepage</span>
+          </a>
+
+
+          <my-edit-button [routerLink]="getShowRouterLink(plugin)" label="Settings" i18n-label></my-edit-button>
+
+          <my-delete-button (click)="uninstall(plugin)" label="Uninstall" i18n-label></my-delete-button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
index 9e98fcd34..f250404ed 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss
@@ -1,8 +1,37 @@
 @import '_variables';
 @import '_mixins';
 
-.toggle-plugin-type {
+.first-row {
+  margin-bottom: 10px;
+
+  .plugin-name {
+    font-size: 16px;
+    margin-right: 10px;
+    font-weight: $font-semibold;
+  }
+
+  .plugin-version {
+    opacity: 0.6;
+  }
+}
+
+.second-row {
   display: flex;
-  justify-content: center;
-  margin-bottom: 30px;
+  align-items: center;
+  justify-content: space-between;
+
+  .description {
+    opacity: 0.8
+  }
+
+  .buttons {
+    > *:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+.action-button {
+  @include peertube-button-link;
+  @include button-with-icon(21px, 0, -2px);
 }
diff --git a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
index 9745bc36b..26a9a616e 100644
--- a/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
+++ b/client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.ts
@@ -3,13 +3,17 @@ import { PluginType } from '@shared/models/plugins/plugin.type'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { PluginApiService } from '@app/+admin/plugins/shared/plugin-api.service'
 import { ComponentPagination, hasMoreItems } from '@app/shared/rest/component-pagination.model'
-import { Notifier } from '@app/core'
+import { ConfirmService, Notifier } from '@app/core'
 import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
+import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
   selector: 'my-plugin-list-installed',
   templateUrl: './plugin-list-installed.component.html',
-  styleUrls: [ './plugin-list-installed.component.scss' ]
+  styleUrls: [
+    '../shared/toggle-plugin-type.scss',
+    './plugin-list-installed.component.scss'
+  ]
 })
 export class PluginListInstalledComponent implements OnInit {
   pluginTypeOptions: { label: string, value: PluginType }[] = []
@@ -26,12 +30,18 @@ export class PluginListInstalledComponent implements OnInit {
   constructor (
     private i18n: I18n,
     private pluginService: PluginApiService,
-    private notifier: Notifier
+    private notifier: Notifier,
+    private confirmService: ConfirmService,
+    private router: Router,
+    private route: ActivatedRoute
   ) {
     this.pluginTypeOptions = this.pluginService.getPluginTypeOptions()
   }
 
   ngOnInit () {
+    const query = this.route.snapshot.queryParams
+    if (query['pluginType']) this.pluginType = parseInt(query['pluginType'], 10)
+
     this.reloadPlugins()
   }
 
@@ -39,6 +49,8 @@ export class PluginListInstalledComponent implements OnInit {
     this.pagination.currentPage = 1
     this.plugins = []
 
+    this.router.navigate([], { queryParams: { pluginType: this.pluginType }})
+
     this.loadMorePlugins()
   }
 
@@ -69,4 +81,28 @@ export class PluginListInstalledComponent implements OnInit {
 
     return this.i18n('You don\'t have themes installed yet.')
   }
+
+  async uninstall (plugin: PeerTubePlugin) {
+    const res = await this.confirmService.confirm(
+      this.i18n('Do you really want to uninstall {{pluginName}}?', { pluginName: plugin.name }),
+      this.i18n('Uninstall')
+    )
+    if (res === false) return
+
+    this.pluginService.uninstall(plugin.name, plugin.type)
+      .subscribe(
+        () => {
+          this.notifier.success(this.i18n('{{pluginName}} uninstalled.', { pluginName: plugin.name }))
+
+          this.plugins = this.plugins.filter(p => p.name !== plugin.name)
+          this.pagination.totalItems--
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  getShowRouterLink (plugin: PeerTubePlugin) {
+    return [ '/admin', 'plugins', 'show', this.pluginService.nameToNpmName(plugin.name, plugin.type) ]
+  }
 }