Improve runner management

 * Add ability to remove runner jobs
 * Add runner job state quick filter
 * Merge registration tokens and runners tables in the same page
 * Add copy button to copy registration token

8 files changed, 55 insertions, 12 deletions

diff --git a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
index 4efbeb85d..f5438ffdb 100644
--- a/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
+++ b/client/src/app/shared/shared-forms/advanced-input-filter.component.scss
@@ -33,6 +33,5 @@ my-global-icon {
 
 div[role=menu] {
   max-height: 50vh;
-  min-height: 200px;
   overflow: auto;
 }
diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index abb53a085..4747e2f8f 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -11,13 +11,12 @@
     <my-global-icon *ngIf="!show" iconName="eye-close"></my-global-icon>
   </button>
 
-  <button
-    *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
-    class="btn btn-outline-secondary text-uppercase" i18n-title title="Copy"
+  <my-copy-button
+    *ngIf="withCopy" [value]="input.value" i18n-notification notification="Copied"
+    [isInputGroup]="true" i18n
   >
-    <my-global-icon iconName="copy"></my-global-icon>
-    <span class="copy-text">Copy</span>
-  </button>
+    COPY
+  </my-copy-button>
 </div>
 
 <div *ngIf="formError" class="form-error">{{ formError }}</div>
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index aa4a1cba8..be03f25b9 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -46,10 +46,6 @@ export class InputTextComponent implements ControlValueAccessor {
     this.show = !this.show
   }
 
-  activateCopiedMessage () {
-    this.notifier.success($localize`Copied`)
-  }
-
   propagateChange = (_: any) => { /* empty */ }
 
   writeValue (value: string) {
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.html b/client/src/app/shared/shared-main/buttons/copy-button.component.html
new file mode 100644
index 000000000..a99c0a93a
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.html
@@ -0,0 +1,9 @@
+<button
+  class="btn btn-outline-secondary btn-sm copy-button"
+  [cdkCopyToClipboard]="value" (click)="activateCopiedMessage()"
+  [title]="title" [ngClass]="{ 'is-input-group': isInputGroup }"
+>
+  <my-global-icon iconName="copy"></my-global-icon>
+
+  <ng-content></ng-content>
+</button>
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.scss b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
new file mode 100644
index 000000000..7e3720418
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.scss
@@ -0,0 +1,15 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+button:not(.is-input-group) {
+  border: 0;
+}
+
+.is-input-group {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+my-global-icon {
+  width: 15px;
+}
diff --git a/client/src/app/shared/shared-main/buttons/copy-button.component.ts b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
new file mode 100644
index 000000000..aac9ab8b0
--- /dev/null
+++ b/client/src/app/shared/shared-main/buttons/copy-button.component.ts
@@ -0,0 +1,22 @@
+import { Component, Input } from '@angular/core'
+import { Notifier } from '@app/core'
+
+@Component({
+  selector: 'my-copy-button',
+  styleUrls: [ './copy-button.component.scss' ],
+  templateUrl: './copy-button.component.html'
+})
+export class CopyButtonComponent {
+  @Input() value: string
+  @Input() title: string
+  @Input() notification: string
+  @Input() isInputGroup = false
+
+  constructor (private notifier: Notifier) {
+
+  }
+
+  activateCopiedMessage () {
+    if (this.notification) this.notifier.success(this.notification)
+  }
+}
diff --git a/client/src/app/shared/shared-main/buttons/index.ts b/client/src/app/shared/shared-main/buttons/index.ts
index 775a47a39..75efbdea3 100644
--- a/client/src/app/shared/shared-main/buttons/index.ts
+++ b/client/src/app/shared/shared-main/buttons/index.ts
@@ -1,4 +1,5 @@
 export * from './action-dropdown.component'
 export * from './button.component'
+export * from './copy-button.component'
 export * from './delete-button.component'
 export * from './edit-button.component'
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 480277450..243394bda 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -31,7 +31,7 @@ import {
   PeerTubeTemplateDirective
 } from './angular'
 import { AUTH_INTERCEPTOR_PROVIDER } from './auth'
-import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
+import { ActionDropdownComponent, ButtonComponent, CopyButtonComponent, DeleteButtonComponent, EditButtonComponent } from './buttons'
 import { CustomPageService } from './custom-page'
 import { DateToggleComponent } from './date'
 import { FeedComponent } from './feeds'
@@ -100,6 +100,7 @@ import { VideoChannelService } from './video-channel'
 
     ActionDropdownComponent,
     ButtonComponent,
+    CopyButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,
 
@@ -162,6 +163,7 @@ import { VideoChannelService } from './video-channel'
 
     ActionDropdownComponent,
     ButtonComponent,
+    CopyButtonComponent,
     DeleteButtonComponent,
     EditButtonComponent,