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

@@ -0,0 +1,83 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpResponse } from '@angular/common/http';
+import { Observable, of, switchMap } from 'rxjs';
+import { ProfileService } from 'app/shared/layouts/profiles/profile.service';
+import { Feedback, FeedbackType } from 'app/entities/feedback.model';
+
+@Injectable({ providedIn: 'root' })
+export class AthenaService {
+    public resourceUrl = 'api/athena';
+
+    constructor(
+        protected http: HttpClient,
+        private profileService: ProfileService,
+    ) {}
+
+    /**
+     * Get feedback suggestions for the given submission from Athena
+     *
+     * @param exerciseId the id of the exercise
+     * @param submissionId the id of the submission
+     */
+    getFeedbackSuggestions(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 this.profileService.getProfileInfo().pipe(
+            switchMap((profileInfo) => {
+                if (!profileInfo.activeProfiles.includes('athena')) {
+                    return of([] as Feedback[]);
+                }
+                return this.http
+                    .get<Feedback[]>(`${this.resourceUrl}/exercises/${exerciseId}/submissions/${submissionId}/feedback-suggestions`, { observe: 'response' })
+                    .pipe(switchMap((res: HttpResponse<Feedback[]>) => of(res.body!)))
+                    .pipe(
+                        switchMap((feedbackSuggestions) => {
+                            // Make real Feedback objects out of the plain objects
+                            return of(
+                                feedbackSuggestions.map((feedbackSuggestion) => {
+                                    const suggestion = new Feedback();
+                                    suggestion.id = feedbackSuggestion.id;
+                                    suggestion.credits = feedbackSuggestion.credits;
+                                    suggestion.text = feedbackSuggestion.text;
+                                    suggestion.detailText = feedbackSuggestion.detailText;
+                                    suggestion.gradingInstruction = feedbackSuggestion.gradingInstruction;
+                                    suggestion.reference = feedbackSuggestion.reference;
+                                    suggestion.type = feedbackSuggestion.type;
+                                    return suggestion;
+                                }),
+                            );
+                        }),
+                    );
+            }),
+        );
+    }
+}

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

@@ -0,0 +1,79 @@
+<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>
+        <fa-icon [icon]="faTrashAlt" class="float-end" (click)="delete()" *ngIf="!readOnly"></fa-icon>
+        <!-- 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>

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

@@ -0,0 +1,33 @@
+.card-body {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.is-suggestion .card-header,
+.is-suggestion .card-body {
+    background-color: var(--feedback-suggestions-background);
+}
+
+.is-suggestion input,
+.is-suggestion textarea {
+    background-color: var(--feedback-suggestions-input-background);
+}
+
+/* Slight opacity for suggestions until they are hovered */
+.is-suggestion .card-body > * {
+    opacity: 0.6; /* grey out the suggestion content to indicate that it is not saved yet */
+    transition: opacity 0.2s ease-in-out;
+}
+
+.is-suggestion:hover .card-body > * {
+    opacity: 1; /* make the suggestion more readable on hover */
+}
+
+.suggestion-action-buttons button {
+    width: fit-content;
+}
+
+.assessment-label {
+    padding-left: 5px;
+    padding-right: 5px;
+}