ls1intum · musaberkay · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026 · Jul 1, 2026
@@ -1,105 +1,15 @@
-<div (drop)="updateFeedbackOnDrop($event)" (dragover)="$event.preventDefault()" class="unreferenced-feedback-detail card mb-3" [class.is-suggestion]="isSuggestion()">
-    <div class="card-header">
-        @if (isSuggestion() || Feedback.isFeedbackSuggestion(feedback())) {
-            <jhi-feedback-suggestion-badge [feedback]="feedback()" [useDefaultText]="useDefaultFeedbackSuggestionBadgeText()" />
-        }
-        @if (feedback().gradingInstruction) {
-            <jhi-grading-instruction-link-icon [feedback]="feedback()" />
-        }
-        @if (!readOnly()) {
-            <button
-                jhiDeleteButton
-                [buttonSize]="ButtonSize.SMALL"
-                [translateValues]="{ text: this.feedback() | feedbackContent | quoted: ' ' }"
-                deleteQuestion="artemisApp.feedback.delete.question"
-                (delete)="delete()"
-                [dialogError]="dialogError$"
-                [renderButtonStyle]="false"
-                [renderButtonText]="false"
-                class="btn float-end"
-            >
-                <fa-icon [icon]="faTrashAlt" />
-            </button>
-        }
-        <!-- Accept/Discard for feedback suggestions -->
-        @if (isSuggestion()) {
-            <div class="row float-end suggestion-action-buttons">
-                <button class="btn btn-success m-1 btn-sm" (click)="onAcceptSuggestion.emit(feedback())">
-                    <fa-icon [icon]="faCheck" />
-                    <span jhiTranslate="artemisApp.assessment.detail.accept"></span>
-                </button>
-                <button class="btn btn-danger m-1 btn-sm" (click)="onDiscardSuggestion.emit(feedback())">
-                    <fa-icon [icon]="faTrash" />
-                    <span jhiTranslate="artemisApp.assessment.detail.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()"
-                [disabled]="!!feedback().gradingInstruction || readOnly()"
-                [readOnly]="!!feedback().gradingInstruction || 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>
-                @if (feedback().gradingInstruction) {
-                    <div>
-                        <fa-icon [icon]="faQuestionCircle" class="text-secondary ps-1" [ngbTooltip]="'artemisApp.assessment.feedbackHint' | artemisTranslate" />
-                    </div>
-                }
-            </div>
-            <div class="col p-0">
-                @if (feedback().gradingInstruction) {
-                    <div>
-                        <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) -->
-        @if (feedback().correctionStatus !== undefined) {
-            <div>
-                @if (feedback().correctionStatus === 'CORRECT') {
-                    <span class="text-success">{{ 'artemisApp.exampleSubmission.feedback.' + feedback().correctionStatus! | artemisTranslate }} </span>
-                }
-                @if (feedback().correctionStatus !== 'CORRECT') {
-                    <span 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 -->
-                @if (feedback().correctionStatus !== 'CORRECT') {
-                    <fa-layers>
-                        <fa-icon class="text-warning" [icon]="faExclamationTriangle" />
-                        <fa-icon class="text-dark exclamation-icon" [icon]="faExclamation" size="2x" transform="shrink-10" />
-                    </fa-layers>
-                }
-            </div>
-        }
-        <jhi-assessment-correction-round-badge [feedback]="feedback()" [highlightDifferences]="highlightDifferences()" />
-    </div>
+<div class="unreferenced-feedback-detail" (drop)="updateFeedbackOnDrop($event)" (dragover)="$event.preventDefault()">
+    <jhi-unified-feedback
+        [editable]="true"
+        [readOnly]="readOnly()"
+        [feedback]="feedback()"
+        [highlightDifferences]="highlightDifferences()"
+        [(feedbackTitle)]="feedback().text"
+        [(feedbackDetail)]="feedback().detailText"
+        [(feedbackCredits)]="feedback().credits!"
+        (feedbackTitleChange)="emitChanges()"
+        (feedbackDetailChange)="emitChanges()"
+        (feedbackCreditsChange)="emitChanges()"
+        (onDelete)="delete()"
+    />
 </div>
@@ -1,42 +0,0 @@
-.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;
-}

@@ -41,6 +41,26 @@ describe('Unreferenced Feedback Detail Component', () => {
         expect(getLongFeedbackTextSpy).toHaveBeenCalledWith(feedbackId);
     });
 
+    it('should clear hasLongFeedbackText on the hydrated clone so a remount does not refetch indefinitely', async () => {
+        const feedbackId = 42;
+        const exampleText = 'This is a long feedback text';
+
+        fixture.componentRef.setInput('feedback', { id: feedbackId, hasLongFeedbackText: true } as Feedback);
+        fixture.componentRef.setInput('resultId', 1);
+        const getLongFeedbackTextSpy = vi.spyOn(feedbackService, 'getLongFeedbackText').mockResolvedValue(exampleText);
+
+        await comp.loadLongFeedback();
+
+        expect(comp.feedback().hasLongFeedbackText).toBeFalsy();
+        expect(comp.feedback().detailText).toBe(exampleText);
+
+        // Simulate the parent remounting the component with the hydrated feedback it just received.
+        fixture.componentRef.setInput('feedback', comp.feedback());
+        await comp.loadLongFeedback();
+
+        expect(getLongFeedbackTextSpy).toHaveBeenCalledOnce();
+    });
+
     it('should update feedback with SGI and emit to parent', () => {
         const instruction: GradingInstruction = { id: 1, credits: 2, feedback: 'test', gradingScale: 'good', instructionDescription: 'description of instruction', usageCount: 0 };
         const feedback = {
@@ -68,19 +88,17 @@ describe('Unreferenced Feedback Detail Component', () => {
         expect(emitSpy).toHaveBeenCalledOnce();
     });
 
-    it('should emit the assessment change after deletion', () => {
-        fixture.componentRef.setInput('feedback', {
-            id: 1,
-            detailText: 'feedback1',
-            credits: 1.5,
-        } as Feedback);
+    it('exposes delete() as the sole deletion entry point for the unified feedback card', () => {
+        fixture.componentRef.setInput('feedback', { id: 1, detailText: 'feedback1', credits: 1.5 } as Feedback);
         const emitSpy = vi.spyOn(comp.onFeedbackDelete, 'emit');
+
         comp.delete();
 
-        expect(emitSpy).toHaveBeenCalledTimes(1);
+        expect(emitSpy).toHaveBeenCalledOnce();
+        expect(emitSpy).toHaveBeenCalledWith(comp.feedback());
     });
 
-    it('should mark automatic feedback and feedback suggestions as adapted when they are modified', () => {
+    it('should mark automatic feedback as AUTOMATIC_ADAPTED when modified, without touching the suggestion badge text', () => {
         fixture.componentRef.setInput('feedback', {
             id: 1,
             type: FeedbackType.AUTOMATIC,
@@ -93,7 +111,7 @@ describe('Unreferenced Feedback Detail Component', () => {
         expect(emitSpy).toHaveBeenCalledWith({
             id: 1,
             type: FeedbackType.AUTOMATIC_ADAPTED,
-            text: 'FeedbackSuggestion:adapted:feedback1',
+            text: 'FeedbackSuggestion:accepted:feedback1',
             detailText: 'feedback1',
             credits: 1.5,
         } as Feedback);

@@ -1,72 +1,28 @@
 import { Component, OnInit, inject, input, model, output } from '@angular/core';
-import { faCheck, faExclamation, faExclamationTriangle, faQuestionCircle, faTrash, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 import { Feedback, FeedbackType } from 'app/assessment/shared/entities/feedback.model';
 import { StructuredGradingCriterionService } from 'app/exercise/structured-grading-criterion/structured-grading-criterion.service';
-import { ButtonSize } from 'app/shared-ui/components/buttons/button/button.component';
-import { Subject } from 'rxjs';
 import { FeedbackService } from 'app/exercise/feedback/services/feedback.service';
-import { GradingInstructionLinkIconComponent } from 'app/shared-ui/grading-instruction-link-icon/grading-instruction-link-icon.component';
-import { DeleteButtonDirective } from 'app/shared-ui/delete-dialog/directive/delete-button.directive';
-import { FaIconComponent, FaLayersComponent } from '@fortawesome/angular-fontawesome';
-import { TranslateDirective } from 'app/foundation/language/translate.directive';
-import { FormsModule } from '@angular/forms';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { AssessmentCorrectionRoundBadgeComponent } from './assessment-correction-round-badge/assessment-correction-round-badge.component';
-import { ArtemisTranslatePipe } from 'app/foundation/pipes/artemis-translate.pipe';
-import { FeedbackContentPipe } from 'app/foundation/pipes/feedback-content.pipe';
-import { QuotePipe } from 'app/foundation/pipes/quote.pipe';
-import { FeedbackSuggestionBadgeComponent } from 'app/exercise/feedback/feedback-suggestion-badge/feedback-suggestion-badge.component';
+import { UnifiedFeedbackComponent } from 'app/shared/components/unified-feedback/unified-feedback.component';
+import { cloneWith } from 'app/foundation/util/deep-clone.util';
 
 @Component({
     selector: 'jhi-unreferenced-feedback-detail',
     templateUrl: './unreferenced-feedback-detail.component.html',
     styleUrls: ['./unreferenced-feedback-detail.component.scss'],
-    imports: [
-        FeedbackSuggestionBadgeComponent,
-        GradingInstructionLinkIconComponent,
-        DeleteButtonDirective,
-        FaIconComponent,
-        TranslateDirective,
-        FormsModule,
-        NgbTooltip,
-        FaLayersComponent,
-        AssessmentCorrectionRoundBadgeComponent,
-        ArtemisTranslatePipe,
-        FeedbackContentPipe,
-        QuotePipe,
-    ],
+    imports: [UnifiedFeedbackComponent],
 })
 export class UnreferencedFeedbackDetailComponent implements OnInit {
     structuredGradingCriterionService = inject(StructuredGradingCriterionService);
 
     public readonly feedback = model.required<Feedback>();
     readonly resultId = input.required<number>();
-    readonly isSuggestion = input<boolean>();
     public readonly readOnly = input.required<boolean>();
     readonly highlightDifferences = input<boolean>(false);
-    readonly useDefaultFeedbackSuggestionBadgeText = input.required<boolean>();
 
     public readonly onFeedbackChange = output<Feedback>();
     public readonly onFeedbackDelete = output<Feedback>();
-    readonly onAcceptSuggestion = output<Feedback>();
-    readonly onDiscardSuggestion = output<Feedback>();
     private feedbackService = inject(FeedbackService);
 
-    // Icons
-    faTrashAlt = faTrashAlt;
-    faQuestionCircle = faQuestionCircle;
-    faExclamation = faExclamation;
-    faExclamationTriangle = faExclamationTriangle;
-    faCheck = faCheck;
-    faTrash = faTrash;
-
-    // Expose to template
-    protected readonly Feedback = Feedback;
-    readonly ButtonSize = ButtonSize;
-
-    private dialogErrorSource = new Subject<string>();
-    dialogError$ = this.dialogErrorSource.asObservable();
-
     ngOnInit() {
         void this.loadLongFeedback();
     }
@@ -77,9 +33,10 @@ export class UnreferencedFeedbackDetailComponent implements OnInit {
     public async loadLongFeedback() {
         const feedback = this.feedback();
         if (feedback.id && feedback.hasLongFeedbackText) {
-            feedback.detailText = await this.feedbackService.getLongFeedbackText(feedback.id);
-            this.feedback.set(feedback);
-            this.onFeedbackChange.emit(feedback);
+            const detailText = await this.feedbackService.getLongFeedbackText(feedback.id);
+            const updatedFeedback = cloneWith(feedback, { detailText, hasLongFeedbackText: false });
+            this.feedback.set(updatedFeedback);
+            this.onFeedbackChange.emit(updatedFeedback);
         }
     }
 
@@ -91,7 +48,6 @@ export class UnreferencedFeedbackDetailComponent implements OnInit {
         if (feedback.type === FeedbackType.AUTOMATIC) {
             feedback.type = FeedbackType.AUTOMATIC_ADAPTED;
         }
-        Feedback.updateFeedbackTypeOnChange(feedback);
         this.feedback.set(feedback);
         this.onFeedbackChange.emit(feedback);
     }
@@ -101,7 +57,6 @@ export class UnreferencedFeedbackDetailComponent implements OnInit {
      */
     public delete() {
         this.onFeedbackDelete.emit(this.feedback());
-        this.dialogErrorSource.next('');
     }
 
     updateFeedbackOnDrop(event: Event) {

@@ -1,6 +1,12 @@
 import { describe, expect, it } from 'vitest';
 
-import { Feedback } from 'app/assessment/shared/entities/feedback.model';
+import {
+    FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER,
+    FEEDBACK_SUGGESTION_ADAPTED_IDENTIFIER,
+    FEEDBACK_SUGGESTION_IDENTIFIER,
+    Feedback,
+    FeedbackSuggestionType,
+} from 'app/assessment/shared/entities/feedback.model';
 
 describe('Feedback', () => {
     describe('getReferenceLineRange', () => {
@@ -16,4 +22,26 @@ describe('Feedback', () => {
             },
         );
     });
+
+    describe('getFeedbackSuggestionType', () => {
+        it('should return NO_SUGGESTION for plain feedback text', () => {
+            expect(Feedback.getFeedbackSuggestionType('Just a comment')).toBe(FeedbackSuggestionType.NO_SUGGESTION);
+            expect(Feedback.getFeedbackSuggestionType(undefined)).toBe(FeedbackSuggestionType.NO_SUGGESTION);
+            expect(Feedback.getFeedbackSuggestionType({ text: 'Just a comment' })).toBe(FeedbackSuggestionType.NO_SUGGESTION);
+        });
+
+        it('should return SUGGESTED for a bare suggestion prefix', () => {
+            expect(Feedback.getFeedbackSuggestionType(`${FEEDBACK_SUGGESTION_IDENTIFIER}Missing null check`)).toBe(FeedbackSuggestionType.SUGGESTED);
+        });
+
+        it('should return ACCEPTED for an accepted-suggestion prefix', () => {
+            expect(Feedback.getFeedbackSuggestionType(`${FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER}Missing null check`)).toBe(FeedbackSuggestionType.ACCEPTED);
+            expect(Feedback.getFeedbackSuggestionType({ text: `${FEEDBACK_SUGGESTION_ACCEPTED_IDENTIFIER}Missing null check` })).toBe(FeedbackSuggestionType.ACCEPTED);
+        });
+
+        it('should return ADAPTED for an adapted-suggestion prefix, accepting either a string or a Feedback object', () => {
+            expect(Feedback.getFeedbackSuggestionType(`${FEEDBACK_SUGGESTION_ADAPTED_IDENTIFIER}Missing null check`)).toBe(FeedbackSuggestionType.ADAPTED);
+            expect(Feedback.getFeedbackSuggestionType({ text: `${FEEDBACK_SUGGESTION_ADAPTED_IDENTIFIER}Missing null check` })).toBe(FeedbackSuggestionType.ADAPTED);
+        });
+    });
 });