feat(ShowMyWork): Additional option to show detected ideas for OR and DG components (#2280)

Author: hirokiterashima

src/assets/wise5/components/component-show-work.directive.ts

@@ -4,6 +4,7 @@ import { NodeService } from '../services/nodeService';
 
 @Directive()
 export abstract class ComponentShowWorkDirective {
+  @Input() additionalSettings: any;
   @Input() nodeId: string;
   @Input() componentId: string;
   @Input() componentState: any;

src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.spec.ts

@@ -9,6 +9,7 @@ import { UserService } from '../../../../../app/services/user.service';
 describe('DialogGuidanceShowWorkComponent', () => {
   let component: DialogGuidanceShowWorkComponent;
   let fixture: ComponentFixture<DialogGuidanceShowWorkComponent>;
+  let userService: UserService;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
@@ -24,14 +25,25 @@ describe('DialogGuidanceShowWorkComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(DialogGuidanceShowWorkComponent);
     component = fixture.componentInstance;
+    userService = TestBed.inject(UserService);
     spyOn(TestBed.inject(CRaterService), 'getCRaterRubric').and.returnValue(new CRaterRubric());
     component.componentState = {
       studentData: {}
     };
-    fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  describe('ngOnInit', () => {
+    it('should show detected ideas when user is teacher', () => {
+      spyOn(userService, 'isTeacher').and.returnValue(true);
+      fixture.detectChanges();
+      expect(component['showDetectedIdeas']).toBe(true);
+    });
+
+    it('should show detected ideas when user is not a teacher but there is additional settings', () => {
+      spyOn(userService, 'isTeacher').and.returnValue(false);
+      component.additionalSettings = { showDetectedIdeas: true };
+      fixture.detectChanges();
+      expect(component['showDetectedIdeas']).toBe(true);
+    });
   });
 });

src/assets/wise5/components/dialogGuidance/dialog-guidance-show-work/dialog-guidance-show-work.component.ts

@@ -23,15 +23,15 @@ import { UserService } from '../../../../../app/services/user.service';
         [computerAvatar]="computerAvatar"
         [cRaterRubric]="cRaterRubric"
         [responses]="componentState.studentData.responses"
-        [showDetectedIdeas]="isTeacher"
+        [showDetectedIdeas]="showDetectedIdeas"
       />
     </mat-card>
   `
 })
 export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective {
   protected computerAvatar: ComputerAvatar;
   protected cRaterRubric: CRaterRubric;
-  protected isTeacher: boolean = false;
+  protected showDetectedIdeas: boolean = false;
 
   constructor(
     private computerAvatarService: ComputerAvatarService,
@@ -44,7 +44,8 @@ export class DialogGuidanceShowWorkComponent extends ComponentShowWorkDirective
   }
 
   ngOnInit(): void {
-    this.isTeacher = this.userService.isTeacher();
+    this.showDetectedIdeas =
+      this.userService.isTeacher() || this.additionalSettings?.showDetectedIdeas;
     this.computerAvatar = this.computerAvatarService.getAvatar(
       this.componentState.studentData.computerAvatarId
     );

src/assets/wise5/components/openResponse/open-response-show-work/open-response-show-work.component.spec.ts

@@ -96,11 +96,21 @@ describe('OpenResponseShowWorkComponent', () => {
       expect(component['showDetectedIdeas']).toBe(true);
     });
 
-    it('should not show detected ideas when user is not a teacher', () => {
+    it('should not show detected ideas when user is not a teacher and there is no additional settings', () => {
       spyOn(annotationService, 'getAnnotationsByStudentWorkId').and.returnValue([]);
       spyOn(userService, 'isTeacher').and.returnValue(false);
       fixture.detectChanges();
-      expect(component['showDetectedIdeas']).toBe(false);
+      expect(component['showDetectedIdeas']).toBe(undefined);
+    });
+
+    it('should show detected ideas when user is not a teacher but there is additional settings', () => {
+      spyOn(annotationService, 'getAnnotationsByStudentWorkId').and.returnValue([
+        mockCRaterAnnotation
+      ] as any);
+      spyOn(userService, 'isTeacher').and.returnValue(false);
+      component.additionalSettings = { showDetectedIdeas: true };
+      fixture.detectChanges();
+      expect(component['showDetectedIdeas']).toBe(true);
     });
   });
 });

src/assets/wise5/components/openResponse/open-response-show-work/open-response-show-work.component.ts

@@ -42,10 +42,12 @@ export class OpenResponseShowWorkComponent extends ComponentShowWorkDirective {
         this.annotations = this.annotationService.getAnnotationsByStudentWorkId(
           this.componentState.id
         );
-        this.cRaterAnnotation = this.annotations.find((annotation) => annotation.type === 'autoScore' && annotation.data.ideas);
+        this.cRaterAnnotation = this.annotations.find(
+          (annotation) => annotation.type === 'autoScore' && annotation.data.ideas
+        );
       }
       this.showDetectedIdeas =
-        this.userService.isTeacher() &&
+        (this.userService.isTeacher() || this.additionalSettings?.showDetectedIdeas) &&
         this.cRaterRubric?.ideas.length &&
         this.cRaterAnnotation != null;
       this.processAttachments();

src/assets/wise5/components/showMyWork/show-my-work-student/show-my-work-student.component.html

@@ -9,6 +9,7 @@
         [componentContent]="showWorkComponentContent"
         [componentId]="showWorkComponentId"
         [nodeId]="showWorkNodeId"
+        [additionalSettings]="componentContent.additionalSettings"
       />
     }
   </mat-card-content>

src/assets/wise5/components/showWork/show-work-student/show-work-student.component.ts

@@ -16,6 +16,7 @@ import { ComponentShowWorkDirective } from '../../component-show-work.directive'
   template: '<div #component></div>'
 })
 export class ShowWorkStudentComponent {
+  @Input() additionalSettings: any;
   @Input() componentContent: any;
   @Input() componentId: string;
   @ViewChild('component') private componentElementRef: ElementRef;
@@ -49,6 +50,7 @@ export class ShowWorkStudentComponent {
         environmentInjector: this.injector
       });
       Object.assign(this.componentRef.instance, {
+        additionalSettings: this.additionalSettings,
         componentId: this.componentId,
         componentState: this.studentWork,
         isDisabled: true,