2 files changed, 58 insertions, 2 deletions

diff --git a/client/src/app/+admin/plugins/shared/plugin-api.service.ts b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
index 89f190675..51f086a93 100644
--- a/client/src/app/+admin/plugins/shared/plugin-api.service.ts
+++ b/client/src/app/+admin/plugins/shared/plugin-api.service.ts
@@ -11,6 +11,7 @@ import { PeerTubePlugin } from '@shared/models/plugins/peertube-plugin.model'
 import { ManagePlugin } from '@shared/models/plugins/manage-plugin.model'
 import { InstallOrUpdatePlugin } from '@shared/models/plugins/install-plugin.model'
 import { RegisterSettingOptions } from '@shared/models/plugins/register-setting.model'
+import { PeerTubePluginIndex } from '@shared/models/plugins/peertube-plugin-index.model'
 
 @Injectable()
 export class PluginApiService {
@@ -45,7 +46,7 @@ export class PluginApiService {
   }
 
   getPlugins (
-    type: PluginType,
+    pluginType: PluginType,
     componentPagination: ComponentPagination,
     sort: string
   ) {
@@ -53,12 +54,30 @@ export class PluginApiService {
 
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination, sort)
-    params = params.append('type', type.toString())
+    params = params.append('pluginType', pluginType.toString())
 
     return this.authHttp.get<ResultList<PeerTubePlugin>>(PluginApiService.BASE_APPLICATION_URL, { params })
                .pipe(catchError(res => this.restExtractor.handleError(res)))
   }
 
+  searchAvailablePlugins (
+    pluginType: PluginType,
+    componentPagination: ComponentPagination,
+    sort: string,
+    search?: string
+  ) {
+    const pagination = this.restService.componentPaginationToRestPagination(componentPagination)
+
+    let params = new HttpParams()
+    params = this.restService.addRestGetParams(params, pagination, sort)
+    params = params.append('pluginType', pluginType.toString())
+
+    if (search) params = params.append('search', search)
+
+    return this.authHttp.get<ResultList<PeerTubePluginIndex>>(PluginApiService.BASE_APPLICATION_URL + '/available', { params })
+               .pipe(catchError(res => this.restExtractor.handleError(res)))
+  }
+
   getPlugin (npmName: string) {
     const path = PluginApiService.BASE_APPLICATION_URL + '/' + npmName
 
diff --git a/client/src/app/+admin/plugins/shared/plugin-list.component.scss b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
new file mode 100644
index 000000000..f250404ed
--- /dev/null
+++ b/client/src/app/+admin/plugins/shared/plugin-list.component.scss
@@ -0,0 +1,37 @@
+@import '_variables';
+@import '_mixins';
+
+.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;
+  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);
+}