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 } from 'app/entities/feedback.model';
+import { TextBlockRef } from 'app/entities/text-block-ref.model';
 
 @Injectable({ providedIn: 'root' })
 export class AthenaService {
@@ -13,13 +14,28 @@ 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[]> {
+        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="unreferenced-feedback-detail card mb-3" [class.is-suggestion]="isSuggestion">
+    <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" 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 class="text-dark exclamation-icon" [icon]="faExclamation" size="2x" 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,42 @@
+.card-body {
+    padding-top: 5px;
+    padding-bottom: 5px;
+}
+
+.assessment-label > label {
+    float: left;
+}
+
+fa-icon.exclamation-icon {
+    width: 16px;
+    margin-top: -6px;
+}
+
+.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;
+}