Development: Add client support for programming exercise feedback suggestions

src/main/webapp/app/assessment/assessment-shared.module.ts

@@ -4,16 +4,17 @@ import { AssessmentHeaderComponent } from './assessment-header/assessment-header
 import { AssessmentLayoutComponent } from './assessment-layout/assessment-layout.component';
 import { AssessmentComplaintAlertComponent } from './assessment-complaint-alert/assessment-complaint-alert.component';
 import { ScoreDisplayComponent } from '../shared/score-display/score-display.component';
-import { AssessmentDetailComponent } from './assessment-detail/assessment-detail.component';
+import { UnreferencedFeedbackDetailComponent } from 'app/assessment/unreferenced-feedback-detail/unreferenced-feedback-detail.component';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 import { ArtemisComplaintsForTutorModule } from 'app/complaints/complaints-for-tutor/complaints-for-tutor.module';
 import { AssessmentLocksComponent } from 'app/assessment/assessment-locks/assessment-locks.component';
 import { RouterModule } from '@angular/router';
 import { assessmentLocksRoute } from 'app/assessment/assessment-locks/assessment-locks.route';
 import { UnreferencedFeedbackComponent } from 'app/exercises/shared/unreferenced-feedback/unreferenced-feedback.component';
 import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
-import { AssessmentCorrectionRoundBadgeComponent } from 'app/assessment/assessment-detail/assessment-correction-round-badge/assessment-correction-round-badge.component';
+import { AssessmentCorrectionRoundBadgeComponent } from 'app/assessment/unreferenced-feedback-detail/assessment-correction-round-badge/assessment-correction-round-badge.component';
 import { ArtemisGradingInstructionLinkIconModule } from 'app/shared/grading-instruction-link-icon/grading-instruction-link-icon.module';
+import { ArtemisFeedbackModule } from 'app/exercises/shared/feedback/feedback.module';
 
 const ENTITY_STATES = [...assessmentLocksRoute];
 
@@ -25,21 +26,22 @@ const ENTITY_STATES = [...assessmentLocksRoute];
         RouterModule.forChild(ENTITY_STATES),
         ArtemisMarkdownModule,
         ArtemisGradingInstructionLinkIconModule,
+        ArtemisFeedbackModule,
     ],
     declarations: [
         AssessmentHeaderComponent,
         AssessmentLayoutComponent,
         AssessmentComplaintAlertComponent,
         ScoreDisplayComponent,
-        AssessmentDetailComponent,
+        UnreferencedFeedbackDetailComponent,
         AssessmentLocksComponent,
         UnreferencedFeedbackComponent,
         AssessmentCorrectionRoundBadgeComponent,
     ],
     exports: [
         AssessmentLayoutComponent,
         ScoreDisplayComponent,
-        AssessmentDetailComponent,
+        UnreferencedFeedbackDetailComponent,
         AssessmentLocksComponent,
         UnreferencedFeedbackComponent,
         AssessmentCorrectionRoundBadgeComponent,

src/main/webapp/app/assessment/athena.service.ts

@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable, of, switchMap } from 'rxjs';
-import { TextBlockRef } from 'app/entities/text-block-ref.model';
 import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
+import { Feedback, FeedbackType } from 'app/entities/feedback.model';
+import { TextBlockRef } from 'app/entities/text-block-ref.model';
 
 @Injectable({ providedIn: 'root' })
 export class AthenaService {
@@ -13,13 +14,59 @@ export class AthenaService {
         private profileService: ProfileService,
     ) {}
 
+    // TODO: The following two functions will be merged in a future PR
+
+    /**
+     * Get feedback suggestions for the given submission from Athena - for programming exercises
+     * Currently, this is separate for programming and text exercises (will be changed)
+     *
+     * @param exerciseId the id of the exercise
+     * @param submissionId the id of the submission
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getFeedbackSuggestionsForProgramming(exerciseId: number, submissionId: number): Observable<Feedback[]> {
+        // For debugging: Return basic feedback suggestions for BubbleSort.java
+        const referencedFeedbackSuggestion1 = new Feedback();
+        referencedFeedbackSuggestion1.credits = 1;
+        referencedFeedbackSuggestion1.text = 'FeedbackSuggestion:';
+        referencedFeedbackSuggestion1.detailText = 'This is a referenced feedback suggestion - test test';
+        referencedFeedbackSuggestion1.gradingInstruction = undefined;
+        referencedFeedbackSuggestion1.reference = 'file:src/de/athena/BubbleSort.java_line:9';
+        referencedFeedbackSuggestion1.type = FeedbackType.AUTOMATIC;
+        const referencedFeedbackSuggestion2 = new Feedback();
+        referencedFeedbackSuggestion2.credits = -1;
+        referencedFeedbackSuggestion2.text = 'FeedbackSuggestion:';
+        referencedFeedbackSuggestion2.detailText = 'Look at that TODO....';
+        referencedFeedbackSuggestion2.gradingInstruction = undefined;
+        referencedFeedbackSuggestion2.reference = 'file:src/de/athena/BubbleSort.java_line:13';
+        referencedFeedbackSuggestion2.type = FeedbackType.AUTOMATIC;
+        const referencedFeedbackSuggestion3 = new Feedback();
+        referencedFeedbackSuggestion3.credits = -4;
+        referencedFeedbackSuggestion3.text = 'FeedbackSuggestion:';
+        referencedFeedbackSuggestion3.detailText = 'You did not implement it correctly';
+        referencedFeedbackSuggestion3.gradingInstruction = undefined;
+        referencedFeedbackSuggestion3.reference = 'file:src/de/athena/MergeSort.java_line:13';
+        referencedFeedbackSuggestion3.type = FeedbackType.AUTOMATIC;
+        const unreferencedFeedbackSuggestion = new Feedback();
+        unreferencedFeedbackSuggestion.credits = -2;
+        unreferencedFeedbackSuggestion.text = 'FeedbackSuggestion:';
+        unreferencedFeedbackSuggestion.detailText = 'You did not implement it correctly';
+        unreferencedFeedbackSuggestion.gradingInstruction = undefined;
+        unreferencedFeedbackSuggestion.reference = undefined;
+        unreferencedFeedbackSuggestion.type = FeedbackType.AUTOMATIC;
+        return of([referencedFeedbackSuggestion1, referencedFeedbackSuggestion2, referencedFeedbackSuggestion3, unreferencedFeedbackSuggestion]);
+
+        return of([]); // Will be fetched in a future PR
+    }
+
     /**
-     * Get feedback suggestions for the given submission from Athena
+     * Get feedback suggestions for the given submission from Athena - for text exercises
+     * Currently, this is separate for programming and text exercises (will be changed)
      *
      * @param exerciseId the id of the exercise
      * @param submissionId the id of the submission
      */
-    getFeedbackSuggestions(exerciseId: number, submissionId: number): Observable<TextBlockRef[]> {
+    getFeedbackSuggestionsForText(exerciseId: number, submissionId: number): Observable<TextBlockRef[]> {
         return this.profileService.getProfileInfo().pipe(
             switchMap((profileInfo) => {
                 if (!profileInfo.activeProfiles.includes('athena')) {

src/main/webapp/app/assessment/unreferenced-feedback-detail/unreferenced-feedback-detail.component.html

@@ -0,0 +1,92 @@
+<div (drop)="updateFeedbackOnDrop($event)" (dragover)="$event.preventDefault()" class="card mb-3" [class.is-suggestion]="isSuggestion" id="unreferenced-feedback-detail">
+    <div class="card-header">
+        <jhi-feedback-suggestion-badge *ngIf="isSuggestion || Feedback.isFeedbackSuggestion(feedback)" [feedback]="feedback"></jhi-feedback-suggestion-badge>
+        <jhi-grading-instruction-link-icon *ngIf="feedback.gradingInstruction" [feedback]="feedback"></jhi-grading-instruction-link-icon>
+        <button
+            *ngIf="!readOnly"
+            jhiDeleteButton
+            [buttonSize]="ButtonSize.SMALL"
+            [translateValues]="{ text: feedback.detailText }"
+            deleteQuestion="artemisApp.feedback.delete.question"
+            (delete)="delete()"
+            [dialogError]="dialogError$"
+            [renderButtonStyle]="false"
+            [renderButtonText]="false"
+            class="btn float-end"
+        >
+            <fa-icon [icon]="faTrashAlt"></fa-icon>
+        </button>
+        <!-- Accept/Discard for feedback suggestions -->
+        <div class="row float-end suggestion-action-buttons" *ngIf="isSuggestion">
+            <button class="btn btn-success m-1 btn-sm" (click)="onAcceptSuggestion.emit(feedback)">
+                <fa-icon [icon]="faCheck"></fa-icon>
+                <span jhiTranslate="artemisApp.assessment.detail.accept">Accept</span>
+            </button>
+            <button class="btn btn-danger m-1 btn-sm" (click)="onDiscardSuggestion.emit(feedback)">
+                <fa-icon [icon]="faTrash"></fa-icon>
+                <span jhiTranslate="artemisApp.assessment.detail.discard">Discard</span>
+            </button>
+        </div>
+    </div>
+    <div class="card-body">
+        <div class="form-group row">
+            <label for="feedback-points" class="col-4 feedback-label" jhiTranslate="artemisApp.exercise.score"></label>
+            <input
+                id="feedback-points"
+                class="col form-control"
+                type="number"
+                step="0.5"
+                [(ngModel)]="feedback.credits"
+                (ngModelChange)="emitChanges()"
+                [readOnly]="feedback.gradingInstruction || readOnly"
+                [disabled]="readOnly"
+                [required]="!feedback.gradingInstruction"
+            />
+        </div>
+        <div class="form-group row">
+            <div class="col-4 assessment-label">
+                <label class="pe-0" style="float: left" jhiTranslate="artemisApp.assessment.detail.feedback"></label>
+                <div *ngIf="feedback.gradingInstruction">
+                    <fa-icon [icon]="faQuestionCircle" class="text-secondary ps-1" [ngbTooltip]="'artemisApp.assessment.feedbackHint' | artemisTranslate"></fa-icon>
+                </div>
+            </div>
+            <div class="col p-0">
+                <div *ngIf="feedback.gradingInstruction">
+                    <span>{{ feedback.gradingInstruction!.feedback }}</span>
+                </div>
+                <textarea
+                    id="feedback-textarea"
+                    class="form-control"
+                    rows="2"
+                    [(ngModel)]="feedback.detailText"
+                    (ngModelChange)="emitChanges()"
+                    [readOnly]="readOnly"
+                    [disabled]="readOnly"
+                    [placeholder]="
+                        feedback.gradingInstruction?.feedback
+                            ? ('artemisApp.assessment.additionalFeedbackCommentPlaceholder' | artemisTranslate)
+                            : ('artemisApp.assessment.feedbackCommentPlaceholder' | artemisTranslate)
+                    "
+                    [required]="!feedback.gradingInstruction?.feedback"
+                ></textarea>
+            </div>
+        </div>
+        <!-- Text showing whether the tutor feedback is correct or not (upon validation on the server) -->
+        <div *ngIf="feedback.correctionStatus !== undefined">
+            <span *ngIf="feedback.correctionStatus === 'CORRECT'" class="text-success"
+                >{{ 'artemisApp.exampleSubmission.feedback.' + feedback.correctionStatus! | artemisTranslate }}
+            </span>
+            <span *ngIf="feedback.correctionStatus !== 'CORRECT'" class="text-danger"
+                >{{ 'artemisApp.exampleSubmission.feedback.' + feedback.correctionStatus! | artemisTranslate }}
+            </span>
+
+            <!-- :warning: emoji was rendered as a black-white glyph, hence the solution with the fa-icon -->
+            <fa-layers *ngIf="feedback.correctionStatus !== 'CORRECT'">
+                <fa-icon class="text-warning" [icon]="faExclamationTriangle"></fa-icon>
+                <fa-icon [icon]="faExclamation" size="2x" [styles]="{ width: '16px', 'margin-top': '-6px' }" [classes]="['text-dark']" transform="shrink-10"></fa-icon>
+            </fa-layers>
+        </div>
+
+        <jhi-assessment-correction-round-badge [feedback]="feedback" [highlightDifferences]="highlightDifferences"></jhi-assessment-correction-round-badge>
+    </div>
+</div>