5 files changed, 24 insertions, 14 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 17b3742d6..d90b93fff 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -42,6 +42,7 @@
       <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 i18n *ngIf="isAdminView()" style="width: 100px;">Internal note</th>
       <th style="width: 150px;"></th>
     </tr>
   </ng-template>
@@ -144,13 +145,11 @@
 
       </ng-container>
 
-
       <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
 
       <td class="c-hand abuse-states" [pRowToggler]="abuse">
         <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
         <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
-        <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)">
@@ -161,6 +160,10 @@
         </ng-container>
       </td>
 
+      <td *ngIf="isAdminView()" class="internal-note" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment">
+        {{ abuse.moderationComment }}
+      </td>
+
       <td class="action-cell">
         <my-action-dropdown
           [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 1d17c9ec9..21d2ea47d 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -278,7 +278,7 @@ export class AbuseListTableComponent extends RestTable implements OnInit, AfterV
         isDisplayed: abuse => this.isLocalAbuse(abuse)
       },
       {
-        label: this.i18n('Update note'),
+        label: this.i18n('Update internal note'),
         handler: abuse => this.openModerationCommentModal(abuse),
         isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
       },
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
index cb965b71d..17e9ce4cf 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -9,7 +9,7 @@
   </div>
 
   <div class="modal-body">
-    <div class="messages" #messagesBlock>
+    <div class="messages">
       <div
         *ngFor="let message of abuseMessages"
         class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }"
@@ -18,7 +18,7 @@
         <div class="author">{{ message.account.name }}</div>
 
         <div class="bubble">
-          <div class="content">{{ message.message }}</div>
+          <div class="content" [innerHTML]="message.messageHtml"></div>
           <div class="date">{{ message.createdAt | date }}</div>
         </div>
       </div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
index 4dd025fc4..4163722dd 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -20,6 +20,7 @@ textarea {
   display: flex;
   flex-direction: column;
   overflow-y: scroll;
+  max-height: 50vh;
 }
 
 .no-messages {
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
index 03f5ad735..6686d91f4 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
@@ -1,5 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
-import { AuthService, Notifier } from '@app/core'
+import { AuthService, Notifier, HtmlRendererService } from '@app/core'
 import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
@@ -14,13 +14,12 @@ import { AbuseService } from '../shared-moderation'
 })
 export class AbuseMessageModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal
-  @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef
 
   @Input() isAdminView: boolean
 
   @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>()
 
-  abuseMessages: AbuseMessage[] = []
+  abuseMessages: (AbuseMessage & { messageHtml: string })[] = []
   textareaMessage: string
   sendingMessage = false
   noResults = false
@@ -33,6 +32,7 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
     private abuseValidatorsService: AbuseValidatorsService,
     private modalService: NgbModal,
     private i18n: I18n,
+    private htmlRenderer: HtmlRendererService,
     private auth: AuthService,
     private notifier: Notifier,
     private abuseService: AbuseService
@@ -108,15 +108,21 @@ export class AbuseMessageModalComponent extends FormReactive implements OnInit {
   private loadMessages () {
     this.abuseService.listAbuseMessages(this.abuse)
       .subscribe(
-        res => {
-          this.abuseMessages = res.data
+        async res => {
+          this.abuseMessages = []
+
+          for (const m of res.data) {
+            this.abuseMessages.push(Object.assign(m, {
+              messageHtml: await this.htmlRenderer.convertToBr(m.message)
+            }))
+          }
+
           this.noResults = this.abuseMessages.length === 0
 
           setTimeout(() => {
-            if (!this.messagesBlock) return
-
-            const element = this.messagesBlock.nativeElement as HTMLElement
-            element.scrollIntoView({ block: 'end', inline: 'nearest' })
+            // Don't use ViewChild: it is not supported inside a ng-template
+            const messagesBlock = document.querySelector('.messages')
+            messagesBlock.scroll(0, messagesBlock.scrollHeight)
           })
         },