4 files changed, 55 insertions, 18 deletions

diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
index 48b31b99c..9fae5667f 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.html
@@ -46,6 +46,7 @@
       <th i18n>Video/Comment/Account</th>
       <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
       <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th i18n style="width: 80px;">Messages</th>
       <th style="width: 150px;"></th>
     </tr>
   </ng-template>
@@ -157,6 +158,12 @@
         <span *ngIf="abuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment" class="glyphicon glyphicon-comment"></span>
       </td>
 
+      <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
+        {{ abuse.countMessages }}
+
+        <my-global-icon iconName="message-circle"></my-global-icon>
+      </td>
+
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
@@ -187,3 +194,4 @@
 </p-table>
 
 <my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
+<my-abuse-message-modal #abuseMessagesModal (countMessagesUpdated)="onCountMessagesUpdated($event)"></my-abuse-message-modal>
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
index c22f98c47..48536e3c2 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.scss
@@ -21,3 +21,12 @@
     margin-left: 0;
   }
 }
+
+.abuse-messages {
+  my-global-icon {
+    width: 22px;
+    margin-left: 3px;
+    position: relative;
+    top: -2px;
+  }
+}
diff --git a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
index 74c5fe2b3..86121fe58 100644
--- a/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
+++ b/client/src/app/+admin/moderation/abuse-list/abuse-list.component.ts
@@ -8,17 +8,17 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { ActivatedRoute, Params, Router } from '@angular/router'
 import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
 import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
-import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+import { AbuseService, BlocklistService, VideoBlockService, AbuseMessageModalComponent } from '@app/shared/shared-moderation'
 import { VideoCommentService } from '@app/shared/shared-video-comment'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Abuse, AbuseState } from '@shared/models'
+import { AdminAbuse, AbuseState } from '@shared/models'
 import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
 
 const logger = debug('peertube:moderation:AbuseListComponent')
 
 // Don't use an abuse model because we need external services to compute some properties
 // And this model is only used in this component
-export type ProcessedAbuse = Abuse & {
+export type ProcessedAbuse = AdminAbuse & {
   moderationCommentHtml?: string,
   reasonHtml?: string
   embedHtml?: SafeHtml
@@ -31,8 +31,8 @@ export type ProcessedAbuse = Abuse & {
   truncatedCommentHtml?: string
   commentHtml?: string
 
-  video: Abuse['video'] & {
-    channel: Abuse['video']['channel'] & {
+  video: AdminAbuse['video'] & {
+    channel: AdminAbuse['video']['channel'] & {
       ownerAccount: Account
     }
   }
@@ -45,6 +45,7 @@ export type ProcessedAbuse = Abuse & {
 })
 export class AbuseListComponent extends RestTable implements OnInit, AfterViewInit {
   @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
+  @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
 
   abuses: ProcessedAbuse[] = []
   totalRecords = 0
@@ -104,7 +105,7 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
     return 'AbuseListComponent'
   }
 
-  openModerationCommentModal (abuse: Abuse) {
+  openModerationCommentModal (abuse: AdminAbuse) {
     this.moderationCommentModal.openModal(abuse)
   }
 
@@ -132,19 +133,19 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
   }
   /* END Table filter functions */
 
-  isAbuseAccepted (abuse: Abuse) {
+  isAbuseAccepted (abuse: AdminAbuse) {
     return abuse.state.id === AbuseState.ACCEPTED
   }
 
-  isAbuseRejected (abuse: Abuse) {
+  isAbuseRejected (abuse: AdminAbuse) {
     return abuse.state.id === AbuseState.REJECTED
   }
 
-  getVideoUrl (abuse: Abuse) {
+  getVideoUrl (abuse: AdminAbuse) {
     return Video.buildClientUrl(abuse.video.uuid)
   }
 
-  getCommentUrl (abuse: Abuse) {
+  getCommentUrl (abuse: AdminAbuse) {
     return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
   }
 
@@ -152,7 +153,7 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
     return '/accounts/' + abuse.flaggedAccount.nameWithHost
   }
 
-  getVideoEmbed (abuse: Abuse) {
+  getVideoEmbed (abuse: AdminAbuse) {
     return buildVideoEmbed(
       buildVideoLink({
         baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
@@ -168,7 +169,7 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
     ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
   }
 
-  async removeAbuse (abuse: Abuse) {
+  async removeAbuse (abuse: AdminAbuse) {
     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
     if (res === false) return
 
@@ -182,7 +183,7 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
     )
   }
 
-  updateAbuseState (abuse: Abuse, state: AbuseState) {
+  updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
     this.abuseService.updateAbuse(abuse, { state })
       .subscribe(
         () => this.loadData(),
@@ -191,10 +192,25 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
       )
   }
 
+  onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
+    const abuse = this.abuses.find(a => a.id === event.abuseId)
+
+    if (!abuse) {
+      console.error('Cannot find abuse %d.', event.abuseId)
+      return
+    }
+
+    abuse.countMessages = event.countMessages
+  }
+
+  openAbuseMessagesModal (abuse: AdminAbuse) {
+    this.abuseMessagesModal.openModal(abuse)
+  }
+
   protected loadData () {
     logger('Load data.')
 
-    return this.abuseService.getAbuses({
+    return this.abuseService.getAdminAbuses({
       pagination: this.pagination,
       sort: this.sort,
       search: this.search
@@ -257,7 +273,11 @@ export class AbuseListComponent extends RestTable implements OnInit, AfterViewIn
         handler: abuse => this.removeAbuse(abuse)
       },
       {
-        label: this.i18n('Add note'),
+        label: this.i18n('Messages'),
+        handler: abuse => this.openAbuseMessagesModal(abuse)
+      },
+      {
+        label: this.i18n('Add internal note'),
         handler: abuse => this.openModerationCommentModal(abuse),
         isDisplayed: abuse => !abuse.moderationComment
       },
diff --git a/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
index 23738f9cd..ecb7966bf 100644
--- a/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
+++ b/client/src/app/+admin/moderation/abuse-list/moderation-comment-modal.component.ts
@@ -5,7 +5,7 @@ import { AbuseService } from '@app/shared/shared-moderation'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Abuse } from '@shared/models'
+import { AdminAbuse } from '@shared/models'
 
 @Component({
   selector: 'my-moderation-comment-modal',
@@ -16,7 +16,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
   @ViewChild('modal', { static: true }) modal: NgbModal
   @Output() commentUpdated = new EventEmitter<string>()
 
-  private abuseToComment: Abuse
+  private abuseToComment: AdminAbuse
   private openedModal: NgbModalRef
 
   constructor (
@@ -36,7 +36,7 @@ export class ModerationCommentModalComponent extends FormReactive implements OnI
     })
   }
 
-  openModal (abuseToComment: Abuse) {
+  openModal (abuseToComment: AdminAbuse) {
     this.abuseToComment = abuseToComment
     this.openedModal = this.modalService.open(this.modal, { centered: true })