Communication: Fix reply button message editing issue in exercise view

src/main/webapp/app/shared/metis/answer-post/answer-post.component.html

@@ -5,7 +5,6 @@
             [isReadOnlyMode]="isReadOnlyMode"
             [isCommunicationPage]="isCommunicationPage"
             [lastReadDate]="lastReadDate"
-            [hasChannelModerationRights]="hasChannelModerationRights"
             [isDeleted]="isDeleted"
         />
     }
@@ -34,6 +33,7 @@
                         (reactionsUpdated)="onReactionsUpdated($event)"
                         (mayEditOrDeleteOutput)="onMayEditOrDelete($event)"
                         (isDeleteEvent)="onDeleteEvent(true)"
+                        [hasChannelModerationRights]="hasChannelModerationRights()"
                     />
                 </div>
             </div>

src/main/webapp/app/shared/metis/answer-post/answer-post.component.ts

@@ -54,6 +54,7 @@ export class AnswerPostComponent extends PostingDirective<AnswerPost> {
     static activeDropdownPost: AnswerPostComponent | null = null;
     mayEditOrDelete: boolean = false;
     @ViewChild(AnswerPostReactionsBarComponent) private reactionsBarComponent!: AnswerPostReactionsBarComponent;
+    hasChannelModerationRights = input<boolean>(false);
 
     constructor(
         public changeDetector: ChangeDetectorRef,

src/main/webapp/app/shared/metis/post/post.component.html

@@ -6,7 +6,6 @@
             [posting]="posting"
             [isDeleted]="isDeleted"
             [isCommunicationPage]="isCommunicationPage"
-            [hasChannelModerationRights]="hasChannelModerationRights"
             (isModalOpen)="displayInlineInput = true"
             [lastReadDate]="lastReadDate"
         />
@@ -68,6 +67,7 @@
                         ></jhi-posting-content>
                         <div class="hover-actions post-content-margin" [ngClass]="{ 'mb-2': previewMode }">
                             @if (!previewMode) {
+                                <!-- Post reactions (that appear when post is hovered) -->
                                 <jhi-post-reactions-bar
                                     [lastReadDate]="lastReadDate"
                                     [readOnlyMode]="readOnlyMode"
@@ -83,6 +83,7 @@
                                     (mayEditOrDeleteOutput)="onMayEditOrDelete($event)"
                                     (canPinOutput)="onCanPin($event)"
                                     (isDeleteEvent)="onDeleteEvent(true)"
+                                    [hasChannelModerationRights]="hasChannelModerationRights()"
                                 />
                             }
                         </div>
@@ -98,7 +99,7 @@
     }
     @if (!isDeleted) {
         <div class="post-content-margin justify-content-between" [ngClass]="{ 'mb-2': previewMode }">
-            <!-- Post reactions -->
+            <!-- Post reactions (to show replies & reactions under the post) -->
             @if (!previewMode) {
                 <jhi-post-reactions-bar
                     [lastReadDate]="lastReadDate"
@@ -110,6 +111,7 @@
                     [isCommunicationPage]="isCommunicationPage"
                     [isThreadSidebar]="isThreadSidebar"
                     (openPostingCreateEditModal)="openCreateAnswerPostModal()"
+                    (closePostingCreateEditModal)="closeCreateAnswerPostModal()"
                     (openThread)="openThread.emit()"
                     (isModalOpen)="displayInlineInput = true"
                     [isEmojiCount]="true"
@@ -133,7 +135,7 @@
     [lastReadDate]="lastReadDate"
     (userReferenceClicked)="onUserReferenceClicked($event)"
     (channelReferenceClicked)="onChannelReferenceClicked($event)"
-    [hasChannelModerationRights]="hasChannelModerationRights"
+    [hasChannelModerationRights]="hasChannelModerationRights()"
 />
 
 <!-- Right-Click Dropdown -->
@@ -158,7 +160,7 @@
             <span jhiTranslate="artemisApp.metis.post.deleteMessage"></span>
         </button>
     }
-    <button class="dropdown-item d-flex" (click)="openThread.emit()">
+    <button class="dropdown-item d-flex" (click)="isCommunicationPage ? openThread.emit() : reactionsBarComponent?.openAnswerView()">
         <fa-icon [icon]="faComments" class="item-icon"></fa-icon>
         <span jhiTranslate="artemisApp.metis.post.replyMessage"></span>
     </button>

src/main/webapp/app/shared/metis/post/post.component.scss

@@ -20,6 +20,7 @@
     top: -1.8rem;
     right: 1%;
     display: flex;
+    max-height: 2.2rem;
     gap: 10px;
     visibility: hidden;
     transition:

src/main/webapp/app/shared/metis/post/post.component.ts

@@ -90,7 +90,7 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
 
     isConsecutive = input<boolean>(false);
     dropdownPosition = { x: 0, y: 0 };
-    @ViewChild(PostReactionsBarComponent) private reactionsBarComponent!: PostReactionsBarComponent;
+    @ViewChild(PostReactionsBarComponent) protected reactionsBarComponent!: PostReactionsBarComponent;
 
     constructor(
         public metisService: MetisService,
@@ -218,6 +218,13 @@ export class PostComponent extends PostingDirective<Post> implements OnInit, OnC
         this.postFooterComponent.openCreateAnswerPostModal();
     }
 
+    /**
+     * Close create answer modal
+     */
+    closeCreateAnswerPostModal() {
+        this.postFooterComponent.closeCreateAnswerPostModal();
+    }
+
     /**
      * sorts answerPosts by two criteria
      * 1. criterion: resolvesPost -> true comes first

src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.html

@@ -25,7 +25,7 @@
                     (openPostingCreateEditModal)="createAnswerPostModal.open()"
                     (userReferenceClicked)="userReferenceClicked.emit($event)"
                     (channelReferenceClicked)="channelReferenceClicked.emit($event)"
-                    [hasChannelModerationRights]="hasChannelModerationRights"
+                    [hasChannelModerationRights]="hasChannelModerationRights()"
                 />
             }
         }

src/main/webapp/app/shared/metis/posting-footer/post-footer/post-footer.component.ts

@@ -11,6 +11,7 @@ import {
     SimpleChanges,
     ViewChild,
     ViewContainerRef,
+    input,
 } from '@angular/core';
 import { PostingFooterDirective } from 'app/shared/metis/posting-footer/posting-footer.directive';
 import { Post } from 'app/entities/metis/post.model';
@@ -36,7 +37,6 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
     @Input() readOnlyMode = false;
     @Input() previewMode = false;
     @Input() modalRef?: NgbModalRef;
-    @Input() hasChannelModerationRights = false;
     @Input() showAnswers = false;
     @Input() isCommunicationPage = false;
     @Input() sortedAnswerPosts: AnswerPost[] = [];
@@ -48,6 +48,7 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
     @ViewChild(AnswerPostCreateEditModalComponent) answerPostCreateEditModal?: AnswerPostCreateEditModalComponent;
     @ViewChild('createEditAnswerPostContainer', { read: ViewContainerRef }) containerRef!: ViewContainerRef;
     @ViewChild('createAnswerPostModal') createAnswerPostModalComponent!: AnswerPostCreateEditModalComponent;
+    hasChannelModerationRights = input<boolean>(false);
 
     createdAnswerPost: AnswerPost;
     isAtLeastTutorInCourse = false;
@@ -173,6 +174,13 @@ export class PostFooterComponent extends PostingFooterDirective<Post> implements
         this.createAnswerPostModalComponent.open();
     }
 
+    /**
+     * Close create answer modal
+     */
+    closeCreateAnswerPostModal() {
+        this.createAnswerPostModalComponent.close();
+    }
+
     protected postsTrackByFn(index: number, post: Post): number {
         return post.id!;
     }

src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.html

@@ -89,13 +89,4 @@
             }
         }
     </div>
-    <!-- add new answer to expanded discussion -->
-    @if (isLastAnswer && !isThreadSidebar) {
-        <div>
-            <button class="reaction-button clickable reply-btn" (click)="openPostingCreateEditModal.emit()">
-                <jhi-emoji [emoji]="speechBalloonId" />
-                <span jhiTranslate="artemisApp.metis.reply" class="emoji-count"></span>
-            </button>
-        </div>
-    }
 </div>

src/main/webapp/app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, input } from '@angular/core';
 import { Reaction } from 'app/entities/metis/reaction.model';
 import { PostingsReactionsBarDirective } from 'app/shared/metis/posting-reactions-bar/posting-reactions-bar.directive';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
@@ -27,6 +27,7 @@ export class AnswerPostReactionsBarComponent extends PostingsReactionsBarDirecti
     readonly faPencilAlt = faPencilAlt;
     @Input() isEmojiCount: boolean = false;
     @Output() postingUpdated = new EventEmitter<void>();
+    hasChannelModerationRights = input<boolean>(false);
 
     constructor(metisService: MetisService) {
         super(metisService);
@@ -70,8 +71,7 @@ export class AnswerPostReactionsBarComponent extends PostingsReactionsBarDirecti
         this.isAnswerOfAnnouncement = getAsChannelDTO(this.posting.post?.conversation)?.isAnnouncementChannel ?? false;
         const isCourseWideChannel = getAsChannelDTO(this.posting.post?.conversation)?.isCourseWide ?? false;
         const isAtLeastInstructorInCourse = this.metisService.metisUserIsAtLeastInstructorInCourse();
-        const mayEditOrDeleteOtherUsersAnswer =
-            (isCourseWideChannel && isAtLeastInstructorInCourse) || (getAsChannelDTO(this.metisService.getCurrentConversation())?.hasChannelModerationRights ?? false);
+        const mayEditOrDeleteOtherUsersAnswer = (isCourseWideChannel && isAtLeastInstructorInCourse) || (this.hasChannelModerationRights() ?? false);
         this.mayEditOrDelete = !this.isReadOnlyMode && (this.isAuthorOfPosting || mayEditOrDeleteOtherUsersAnswer);
         this.mayEditOrDeleteOutput.emit(this.mayEditOrDelete);
     }

src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.html

@@ -1,19 +1,27 @@
-<div class="d-flex flex-wrap gap-2 fs-xx-small align-items-center">
+<div class="d-flex flex-wrap gap-2 fs-xx-small align-items-center" style="width: max-content">
+    @if (hoverBar && sortedAnswerPosts.length === 0) {
+        <div>
+            <button class="reaction-button clickable reply-btn" (click)="isCommunicationPage ? openThread.emit() : openAnswerView()">
+                <fa-icon class="fa-xs align-self-center" [icon]="faArrowRight" />
+                <span jhiTranslate="artemisApp.conversationsLayout.threadSideBar.reply" class="emoji-count px-2"></span>
+            </button>
+        </div>
+    }
     @if (!isCommunicationPage) {
         @if (sortedAnswerPosts.length) {
             <!-- collapse answers -->
             @if (showAnswers) {
                 <div>
-                    <button class="reaction-button clickable collapse-answers-btn" [class.reaction-button--reacted]="showAnswers" (click)="showAnswersChange.emit(false)">
+                    <button class="reaction-button clickable collapse-answers-btn" [class.reaction-button--reacted]="showAnswers" (click)="closeAnswerView()">
                         <jhi-emoji [emoji]="closeCrossId" />
                         <span jhiTranslate="artemisApp.metis.collapseAnswers" class="emoji-count"></span>
                     </button>
                 </div>
             } @else {
                 <!-- expand answers -->
                 <div>
-                    <button class="reaction-button clickable expand-answers-btn" (click)="showAnswersChange.emit(true)">
-                        <jhi-emoji [emoji]="speechBalloonId" />
+                    <button class="reaction-button clickable expand-answers-btn" (click)="openAnswerView()">
+                        <fa-icon class="fa-xs align-self-center" [icon]="faArrowRight" />
                         <span class="emoji-count">{{
                             sortedAnswerPosts.length === 1
                                 ? ('artemisApp.metis.showSingleAnswer' | artemisTranslate)
@@ -22,26 +30,9 @@
                     </button>
                 </div>
             }
-        } @else {
-            <!-- start discussion -->
-            <div>
-                <button class="reaction-button clickable reply-btn" (click)="openPostingCreateEditModal.emit()" [disabled]="readOnlyMode">
-                    <jhi-emoji [emoji]="speechBalloonId" />
-                    <span jhiTranslate="artemisApp.metis.reply" class="emoji-count"></span>
-                </button>
-            </div>
         }
     } @else {
         @if (!isThreadSidebar) {
-            <!-- start discussion -->
-            @if (hoverBar && sortedAnswerPosts.length === 0) {
-                <div>
-                    <button class="reaction-button clickable reply-btn" (click)="openThread.emit()">
-                        <fa-icon class="fa-xs align-self-center" [icon]="faArrowRight" />
-                        <span jhiTranslate="artemisApp.conversationsLayout.threadSideBar.reply" class="emoji-count px-2"></span>
-                    </button>
-                </div>
-            }
             <!-- expand answers -->
             @if (!showAnswers && sortedAnswerPosts.length) {
                 <div>
@@ -142,7 +133,7 @@
         }
     </div>
     <div>
-        @if (getShowNewMessageIcon()) {
+        @if (isEmojiCount && getShowNewMessageIcon()) {
             <div jhiTranslate="global.generic.new" class="badge bg-secondary hideAfter5Seconds"></div>
         }
     </div>

src/main/webapp/app/shared/metis/posting-reactions-bar/post-reactions-bar/post-reactions-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, ViewChild, input } from '@angular/core';
 import { Reaction } from 'app/entities/metis/reaction.model';
 import { Post } from 'app/entities/metis/post.model';
 import { PostingsReactionsBarDirective } from 'app/shared/metis/posting-reactions-bar/posting-reactions-bar.directive';
@@ -41,6 +41,7 @@ export class PostReactionsBarComponent extends PostingsReactionsBarDirective<Pos
 
     @Output() showAnswersChange = new EventEmitter<boolean>();
     @Output() openPostingCreateEditModal = new EventEmitter<void>();
+    @Output() closePostingCreateEditModal = new EventEmitter<void>();
     @Output() openThread = new EventEmitter<void>();
     @Input() previewMode: boolean;
     isAtLeastInstructorInCourse: boolean;
@@ -51,6 +52,7 @@ export class PostReactionsBarComponent extends PostingsReactionsBarDirective<Pos
     @Input() isEmojiCount = false;
     @Input() hoverBar: boolean = true;
     @ViewChild('createEditModal') createEditModal!: PostCreateEditModalComponent;
+    hasChannelModerationRights = input<boolean>(false);
 
     constructor(
         metisService: MetisService,
@@ -63,6 +65,16 @@ export class PostReactionsBarComponent extends PostingsReactionsBarDirective<Pos
         return Object.values(this.reactionMetaDataMap).some((reaction) => reaction.count >= 1);
     }
 
+    openAnswerView() {
+        this.showAnswersChange.emit(true);
+        this.openPostingCreateEditModal.emit();
+    }
+
+    closeAnswerView() {
+        this.showAnswersChange.emit(false);
+        this.closePostingCreateEditModal.emit();
+    }
+
     /**
      * on initialization: call resetTooltipsAndPriority
      */
@@ -188,8 +200,7 @@ export class PostReactionsBarComponent extends PostingsReactionsBarDirective<Pos
     setMayEditOrDelete(): void {
         this.isAtLeastInstructorInCourse = this.metisService.metisUserIsAtLeastInstructorInCourse();
         const isCourseWideChannel = getAsChannelDTO(this.posting.conversation)?.isCourseWide ?? false;
-        const mayEditOrDeleteOtherUsersAnswer =
-            (isCourseWideChannel && this.isAtLeastInstructorInCourse) || (getAsChannelDTO(this.metisService.getCurrentConversation())?.hasChannelModerationRights ?? false);
+        const mayEditOrDeleteOtherUsersAnswer = (isCourseWideChannel && this.isAtLeastInstructorInCourse) || (this.hasChannelModerationRights() ?? false);
         this.mayEditOrDelete = !this.readOnlyMode && !this.previewMode && (this.isAuthorOfPosting || mayEditOrDeleteOtherUsersAnswer);
         this.mayEditOrDeleteOutput.emit(this.mayEditOrDelete);
     }

src/main/webapp/app/shared/metis/posting-reactions-bar/posting-reactions-bar.component.scss

@@ -13,6 +13,7 @@
     border-radius: 1rem;
     align-items: center;
     height: 1.2rem;
+    display: inline-flex;
 
     &.open-selector {
         box-shadow: inset 0 0 0 1px var(--metis-gray);

src/main/webapp/app/shared/metis/posting.directive.ts

@@ -1,5 +1,5 @@
 import { Posting } from 'app/entities/metis/posting.model';
-import { ChangeDetectorRef, Directive, Input, OnDestroy, OnInit, inject } from '@angular/core';
+import { ChangeDetectorRef, Directive, Input, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { DisplayPriority } from 'app/shared/metis/metis.util';
 
@@ -9,7 +9,7 @@ export abstract class PostingDirective<T extends Posting> implements OnInit, OnD
     @Input() isCommunicationPage: boolean;
     @Input() showChannelReference?: boolean;
 
-    @Input() hasChannelModerationRights = false;
+    hasChannelModerationRights = input<boolean>(false);
     @Input() isThreadSidebar: boolean;
     abstract get reactionsBar(): any;
     showDropdown = false;

src/test/javascript/spec/component/shared/metis/post/post.component.spec.ts

@@ -170,6 +170,15 @@ describe('PostComponent', () => {
         expect(postFooterOpenCreateAnswerPostModal).toHaveBeenCalledOnce();
     });
 
+    it('should close create answer post modal', () => {
+        component.posting = metisPostExerciseUser1;
+        component.ngOnInit();
+        fixture.detectChanges();
+        const postFooterOpenCreateAnswerPostModal = jest.spyOn(component.postFooterComponent, 'closeCreateAnswerPostModal');
+        component.closeCreateAnswerPostModal();
+        expect(postFooterOpenCreateAnswerPostModal).toHaveBeenCalledOnce();
+    });
+
     it('should create or navigate to oneToOneChat when not on messaging page', () => {
         const navigateSpy = jest.spyOn(router, 'navigate');
         const oneToOneChatService = TestBed.inject(OneToOneChatService);

src/test/javascript/spec/component/shared/metis/postings-footer/post-footer/post-footer.component.spec.ts

@@ -151,4 +151,13 @@ describe('PostFooterComponent', () => {
         component.openCreateAnswerPostModal();
         expect(createAnswerPostModalOpen).toHaveBeenCalledOnce();
     });
+
+    it('should close create answer post modal', () => {
+        component.posting = metisPostExerciseUser1;
+        component.ngOnInit();
+        fixture.detectChanges();
+        const createAnswerPostModalClose = jest.spyOn(component.createAnswerPostModalComponent, 'close');
+        component.closeCreateAnswerPostModal();
+        expect(createAnswerPostModalClose).toHaveBeenCalledOnce();
+    });
 });

src/test/javascript/spec/component/shared/metis/postings-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component.spec.ts

@@ -193,15 +193,6 @@ describe('AnswerPostReactionsBarComponent', () => {
         expect(answerNowButton).toBeNull();
     });
 
-    it('answer now button should be visible if answer is the last one', () => {
-        component.posting = post;
-        component.isLastAnswer = true;
-        component.ngOnInit();
-        fixture.detectChanges();
-        const answerNowButton = fixture.debugElement.query(By.css('.reply-btn')).nativeElement;
-        expect(answerNowButton.innerHTML).toContain('reply');
-    });
-
     it('should invoke metis service when toggle resolve is clicked', () => {
         metisServiceUserPostingAuthorMock.mockReturnValue(true);
         fixture.detectChanges();