Handle rejected follows in client

Also add quick filters so it's easier to find pending follows

4 files changed, 25 insertions, 19 deletions

diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html
index 3081098c4..4f11f261d 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.html
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html
@@ -13,7 +13,7 @@
   <ng-template pTemplate="caption">
     <div class="caption">
       <div class="ms-auto">
-        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="searchFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>
@@ -31,12 +31,10 @@
   <ng-template pTemplate="body" let-follow>
     <tr>
       <td class="action-cell">
-        <ng-container *ngIf="follow.state === 'pending'">
-          <my-button i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
-          <my-button i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
-        </ng-container>
+        <my-button *ngIf="follow.state !== 'accepted'" i18n-title title="Accept" icon="tick" (click)="acceptFollower(follow)"></my-button>
+        <my-button *ngIf="follow.state !== 'rejected'" i18n-title title="Refuse" icon="cross" (click)="rejectFollower(follow)"></my-button>
 
-        <my-delete-button label *ngIf="follow.state === 'accepted'" (click)="deleteFollower(follow)"></my-delete-button>
+        <my-delete-button *ngIf="follow.state === 'rejected'" (click)="deleteFollower(follow)"></my-delete-button>
       </td>
       <td>
         <a [href]="follow.follower.url" i18n-title title="Open actor page in a new tab" target="_blank" rel="noopener noreferrer">
@@ -45,11 +43,10 @@
         </a>
       </td>
 
-      <td *ngIf="follow.state === 'accepted'">
-        <span class="pt-badge badge-green" i18n>Accepted</span>
-      </td>
-      <td *ngIf="follow.state === 'pending'">
-        <span class="pt-badge badge-yellow" i18n>Pending</span>
+      <td>
+        <span *ngIf="follow.state === 'accepted'" class="pt-badge badge-green" i18n>Accepted</span>
+        <span *ngIf="follow.state === 'pending'" class="pt-badge badge-yellow" i18n>Pending</span>
+        <span *ngIf="follow.state === 'rejected'" class="pt-badge badge-red" i18n>Rejected</span>
       </td>
 
       <td>{{ follow.score }}</td>
diff --git a/client/src/app/+admin/follows/followers-list/followers-list.component.ts b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
index 329e3bcc7..d09e74fef 100644
--- a/client/src/app/+admin/follows/followers-list/followers-list.component.ts
+++ b/client/src/app/+admin/follows/followers-list/followers-list.component.ts
@@ -1,6 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { ActorFollow } from '@shared/models'
 
@@ -15,12 +16,16 @@ export class FollowersListComponent extends RestTable implements OnInit {
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
+  searchFilters: AdvancedInputFilter[]
+
   constructor (
     private confirmService: ConfirmService,
     private notifier: Notifier,
     private followService: InstanceFollowService
   ) {
     super()
+
+    this.searchFilters = this.followService.buildFollowsListFilters()
   }
 
   ngOnInit () {
@@ -70,7 +75,7 @@ export class FollowersListComponent extends RestTable implements OnInit {
   }
 
   async deleteFollower (follow: ActorFollow) {
-    const message = $localize`Do you really want to delete this follower?`
+    const message = $localize`Do you really want to delete this follower? It will be able to send again another follow request.`
     const res = await this.confirmService.confirm(message, $localize`Delete`)
     if (res === false) return
 
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html
index 302dc9528..856c4a31f 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.html
+++ b/client/src/app/+admin/follows/following-list/following-list.component.html
@@ -20,7 +20,7 @@
       </div>
 
       <div class="ms-auto">
-        <my-advanced-input-filter (search)="onSearch($event)"></my-advanced-input-filter>
+        <my-advanced-input-filter [filters]="searchFilters" (search)="onSearch($event)"></my-advanced-input-filter>
       </div>
     </div>
   </ng-template>
@@ -47,11 +47,10 @@
         </a>
       </td>
 
-      <td *ngIf="follow.state === 'accepted'">
-        <span class="pt-badge badge-green" i18n>Accepted</span>
-      </td>
-      <td *ngIf="follow.state === 'pending'">
-        <span class="pt-badge badge-yellow" i18n>Pending</span>
+      <td>
+        <span *ngIf="follow.state === 'accepted'" class="pt-badge badge-green" i18n>Accepted</span>
+        <span *ngIf="follow.state === 'pending'" class="pt-badge badge-yellow" i18n>Pending</span>
+        <span *ngIf="follow.state === 'rejected'" class="pt-badge badge-red" i18n>Rejected</span>
       </td>
 
       <td>{{ follow.createdAt | date: 'short' }}</td>
@@ -66,7 +65,7 @@
 
   <ng-template pTemplate="emptymessage">
     <tr>
-      <td colspan="6">
+      <td colspan="5">
         <div class="no-results">
           <ng-container *ngIf="search" i18n>No host found matching current filters.</ng-container>
           <ng-container *ngIf="!search" i18n>Your instance is not following anyone.</ng-container>
diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts
index 2c0f6db0c..7a854be81 100644
--- a/client/src/app/+admin/follows/following-list/following-list.component.ts
+++ b/client/src/app/+admin/follows/following-list/following-list.component.ts
@@ -1,6 +1,7 @@
 import { SortMeta } from 'primeng/api'
 import { Component, OnInit, ViewChild } from '@angular/core'
 import { ConfirmService, Notifier, RestPagination, RestTable } from '@app/core'
+import { AdvancedInputFilter } from '@app/shared/shared-forms'
 import { InstanceFollowService } from '@app/shared/shared-instance'
 import { ActorFollow } from '@shared/models'
 import { FollowModalComponent } from './follow-modal.component'
@@ -17,12 +18,16 @@ export class FollowingListComponent extends RestTable implements OnInit {
   sort: SortMeta = { field: 'createdAt', order: -1 }
   pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
 
+  searchFilters: AdvancedInputFilter[]
+
   constructor (
     private notifier: Notifier,
     private confirmService: ConfirmService,
     private followService: InstanceFollowService
   ) {
     super()
+
+    this.searchFilters = this.followService.buildFollowsListFilters()
   }
 
   ngOnInit () {