[#12552] Session Copy Modal: Instructors able to select the Course that they are copying from

src/web/app/components/copy-session-modal/__snapshots__/copy-session-modal.component.spec.ts.snap

@@ -6,7 +6,9 @@ exports[`CopySessionModalComponent should snap with default fields 1`] = `
   activeModal={[Function NgbActiveModal]}
   copyToCourseSet={[Function Set]}
   courseCandidates={[Function Array]}
+  isNameCollision="false"
   newFeedbackSessionName=""
+  originalSessionName=""
   sessionToCopyCourseId=""
 >
   <div
@@ -96,7 +98,9 @@ exports[`CopySessionModalComponent should snap with some session and courses can
   activeModal={[Function NgbActiveModal]}
   copyToCourseSet={[Function Set]}
   courseCandidates={[Function Array]}
+  isNameCollision="false"
   newFeedbackSessionName={[Function String]}
+  originalSessionName=""
   sessionToCopyCourseId={[Function String]}
 >
   <div

src/web/app/components/copy-session-modal/copy-session-modal.component.html

@@ -11,13 +11,16 @@ <h5 class="modal-title">
       <div class="form-group">
         <label><b>Name for copied session*</b></label>
         <input id="copy-session-name" type="text" class="form-control" [(ngModel)]="newFeedbackSessionName" [maxlength]="FEEDBACK_SESSION_NAME_MAX_LENGTH"
-               required #newSessionName="ngModel">
+               required #newSessionName="ngModel" (input)="checkNameCollision()">
         <div [hidden]="newSessionName.valid || (newSessionName.pristine && newSessionName.untouched)" class="invalid-field">
             <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
             The field "Name for copied session" should not be empty.
         </div>
         <span>{{ FEEDBACK_SESSION_NAME_MAX_LENGTH - newFeedbackSessionName.length }} characters left</span>
       </div>
+      <div *ngIf="isNameCollision" class="alert alert-danger">
+        The new session name and course match the original session. Please change the session name to avoid duplication.
+      </div>
       <div class="form-check" *ngFor="let course of courseCandidates">
         <label class="form-check-label text-break">
           <input type="checkbox" name="copySessionChooseCourse" class="form-check-input"
@@ -35,5 +38,5 @@ <h5 class="modal-title">
 <div class="modal-footer">
   <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Cancel</button>
   <button id="btn-confirm-copy-course" type="button" class="btn btn-primary" (click)="copy()"
-          [disabled]="!newFeedbackSessionName || copyToCourseSet.size < 1">Copy</button>
+          [disabled]="!newFeedbackSessionName || copyToCourseSet.size < 1 || isNameCollision">Copy</button>
 </div>

src/web/app/components/copy-session-modal/copy-session-modal.component.spec.ts

@@ -146,4 +146,66 @@ describe('CopySessionModalComponent', () => {
     expect(component.copyToCourseSet.has(courseId)).toBe(false);
   });
 
+  it('should detect name collision correctly', () => {
+    component.newFeedbackSessionName = 'Test Feedback Session';
+    component.originalSessionName = 'Test Feedback Session';
+    component.sessionToCopyCourseId = 'TestCourseID';
+    component.select('TestCourseID');
+    expect(component.isNameCollision).toBe(true);
+  });
+
+  it('should not detect name collision when new name is different', () => {
+    component.newFeedbackSessionName = 'New Feedback Session';
+    component.originalSessionName = 'Test Feedback Session';
+    component.sessionToCopyCourseId = 'TestCourseID';
+    component.select('TestCourseID');
+    expect(component.isNameCollision).toBe(false);
+  });
+
+  it('should not detect name collision when selected course is different', () => {
+    component.newFeedbackSessionName = 'Test Feedback Session';
+    component.originalSessionName = 'Test Feedback Session';
+    component.sessionToCopyCourseId = 'TestCourseID';
+    component.select('DifferentCourseID');
+    expect(component.isNameCollision).toBe(false);
+  });
+
+  it('should detect name collision when name matches original session and courseId is selected', () => {
+    component.newFeedbackSessionName = 'Test session';
+    component.originalSessionName = 'Test session';
+    component.sessionToCopyCourseId = 'Test01';
+    component.select('Test01');
+    fixture.detectChanges();
+    expect(component.isNameCollision).toBe(true);
+  });
+
+  it('should not detect name collision when name matches original session but courseId is not selected', () => {
+    component.newFeedbackSessionName = 'Test session';
+    component.originalSessionName = 'Test session';
+    component.sessionToCopyCourseId = 'Test01';
+    component.select('Test02');
+    fixture.detectChanges();
+    expect(component.isNameCollision).toBe(false);
+  });
+
+  it('should update name collision status on input change', () => {
+    component.newFeedbackSessionName = 'Test session';
+    component.originalSessionName = 'Test session';
+    component.sessionToCopyCourseId = 'Test01';
+    component.select('Test01');
+    component.newFeedbackSessionName = 'New session name';
+    component.checkNameCollision();
+    fixture.detectChanges();
+    expect(component.isNameCollision).toBe(false);
+  });
+
+  it('should update name collision status on course selection change', () => {
+    component.newFeedbackSessionName = 'Test session';
+    component.originalSessionName = 'Test session';
+    component.sessionToCopyCourseId = 'Test01';
+    component.select('Test01');
+    component.select('Test01');
+    fixture.detectChanges();
+    expect(component.isNameCollision).toBe(false);
+  });
 });

src/web/app/components/copy-session-modal/copy-session-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { Course } from '../../../types/api-output';
 import { FEEDBACK_SESSION_NAME_MAX_LENGTH } from '../../../types/field-validator';
@@ -11,7 +11,7 @@ import { FEEDBACK_SESSION_NAME_MAX_LENGTH } from '../../../types/field-validator
   templateUrl: './copy-session-modal.component.html',
   styleUrls: ['./copy-session-modal.component.scss'],
 })
-export class CopySessionModalComponent {
+export class CopySessionModalComponent implements OnInit {
 
   // const
   FEEDBACK_SESSION_NAME_MAX_LENGTH: number = FEEDBACK_SESSION_NAME_MAX_LENGTH;
@@ -24,13 +24,23 @@ export class CopySessionModalComponent {
 
   newFeedbackSessionName: string = '';
   copyToCourseSet: Set<string> = new Set<string>();
+  originalSessionName: string = '';
+  isNameCollision: boolean = false;
 
   constructor(public activeModal: NgbActiveModal) {}
 
+  ngOnInit(): void {
+    this.originalSessionName = this.newFeedbackSessionName;
+    this.checkNameCollision();
+  }
+
   /**
    * Fires the copy event.
    */
   copy(): void {
+    if (this.isNameCollision) {
+      return;
+    }
     this.activeModal.close({
       newFeedbackSessionName: this.newFeedbackSessionName,
       sessionToCopyCourseId: this.sessionToCopyCourseId,
@@ -47,5 +57,14 @@ export class CopySessionModalComponent {
     } else {
       this.copyToCourseSet.add(courseId);
     }
+    this.checkNameCollision();
+  }
+
+  /**
+   * Checks for name collision.
+   */
+  checkNameCollision(): void {
+    this.isNameCollision = this.newFeedbackSessionName === this.originalSessionName
+      && this.copyToCourseSet.has(this.sessionToCopyCourseId);
   }
 }