feat(NodeAuthoring): Toggle Edit/Preview component

src/app/student-teacher-common.module.ts

@@ -39,6 +39,7 @@ import { MathModule } from './math/math.module';
 import { MatMenuModule } from '@angular/material/menu';
 import { MainMenuComponent } from '../assets/wise5/common/main-menu/main-menu.component';
 import { SideMenuComponent } from '../assets/wise5/common/side-menu/side-menu.component';
+import { ScrollingModule } from '@angular/cdk/scrolling';
 
 @NgModule({
   declarations: [
@@ -82,6 +83,7 @@ import { SideMenuComponent } from '../assets/wise5/common/side-menu/side-menu.co
     NodeStatusIconComponent,
     NotebookModule,
     ReactiveFormsModule,
+    ScrollingModule,
     StudentTeacherCommonServicesModule
   ],
   exports: [

src/app/teacher/authoring-routing.module.ts

@@ -9,7 +9,6 @@ import { ProjectAuthoringComponent } from '../../assets/wise5/authoringTool/proj
 import { NodeAuthoringComponent } from '../../assets/wise5/authoringTool/node/node-authoring/node-authoring.component';
 import { NodeAdvancedAuthoringComponent } from '../../assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component';
 import { NodeAdvancedConstraintAuthoringComponent } from '../../assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component';
-import { ChooseComponentLocationComponent } from '../../assets/wise5/authoringTool/node/chooseComponentLocation/choose-component-location.component';
 import { AddLessonConfigureComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component';
 import { ChooseNewNodeTemplateComponent } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
 import { AddYourOwnNodeComponent } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
@@ -153,10 +152,6 @@ const routes: Routes = [
                   { path: 'rubric', component: EditNodeRubricComponent }
                 ]
               },
-              {
-                path: 'choose-component-location',
-                component: ChooseComponentLocationComponent
-              },
               {
                 path: 'import-component',
                 children: [{ path: 'choose-component', component: ChooseImportComponentComponent }]

src/app/teacher/authoring-tool.module.ts

@@ -22,7 +22,6 @@ import { WiseTinymceEditorModule } from '../../assets/wise5/directives/wise-tiny
 import { NotebookAuthoringComponent } from '../../assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component';
 import { StructureAuthoringModule } from '../../assets/wise5/authoringTool/structure/structure-authoring.module';
 import { MilestonesAuthoringComponent } from '../../assets/wise5/authoringTool/milestones-authoring/milestones-authoring.component';
-import { ChooseComponentLocationComponent } from '../../assets/wise5/authoringTool/node/chooseComponentLocation/choose-component-location.component';
 import { TopBarComponent } from '../../assets/wise5/authoringTool/components/top-bar/top-bar.component';
 import { ProjectAssetAuthoringModule } from '../../assets/wise5/authoringTool/project-asset-authoring/project-asset-authoring.module';
 import { ChooseSimulationComponent } from '../../assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component';
@@ -57,7 +56,6 @@ import { TranslatableTextareaComponent } from '../../assets/wise5/authoringTool/
 import { TranslatableRichTextEditorComponent } from '../../assets/wise5/authoringTool/components/translatable-rich-text-editor/translatable-rich-text-editor.component';
 import { AddStepButtonComponent } from '../../assets/wise5/authoringTool/add-step-button/add-step-button.component';
 import { CreateBranchComponent } from '../../assets/wise5/authoringTool/create-branch/create-branch.component';
-import { PreviewComponentButtonComponent } from '../../assets/wise5/authoringTool/components/preview-component-button/preview-component-button.component';
 import { EditBranchComponent } from '../../assets/wise5/authoringTool/edit-branch/edit-branch.component';
 import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/components/component-type-button/component-type-button.component';
 import { MatExpansionModule } from '@angular/material/expansion';
@@ -92,7 +90,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
     AddYourOwnNodeComponent,
     AuthoringToolBarComponent,
     ChooseAutomatedAssessmentComponent,
-    ChooseComponentLocationComponent,
     ChooseCopyNodeLocationComponent,
     ChooseImportStepComponent,
     ChooseImportUnitComponent,
@@ -116,7 +113,6 @@ import { MatExpansionModule } from '@angular/material/expansion';
     NodeAdvancedAuthoringModule,
     NodeIconAndTitleComponent,
     NodeWithMoveAfterButtonComponent,
-    PreviewComponentButtonComponent,
     ProjectAssetAuthoringModule,
     ProjectListComponent,
     RouterModule,

src/assets/wise5/authoringTool/authoring-tool.component.html

@@ -23,6 +23,7 @@
         class="l-main"
         [ngClass]="{ 'l-main--with-toolbar': showToolbar }"
         role="main"
+        cdkScrollable
       >
         <router-outlet></router-outlet>
       </content>

src/assets/wise5/authoringTool/components/component-authoring.component.ts

@@ -1,45 +1,65 @@
-import {
-  ApplicationRef,
-  Component,
-  ComponentRef,
-  ElementRef,
-  EnvironmentInjector,
-  Input,
-  ViewChild,
-  createComponent
-} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ComponentContent } from '../../common/ComponentContent';
-import { components } from '../../components/Components';
+import { PreviewComponentComponent } from './preview-component/preview-component.component';
+import { EditComponentComponent } from './edit-component/edit-component.component';
+import { ComponentFactory } from '../../common/ComponentFactory';
+import { Component as WISEComponent } from '../../common/Component';
+import { TeacherProjectService } from '../../services/teacherProjectService';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
+  imports: [PreviewComponentComponent, EditComponentComponent, MatTooltipModule],
   selector: 'component-authoring',
   standalone: true,
-  template: '<div #component></div>'
+  styles: [
+    `
+      preview-component {
+        display: block;
+        position: relative;
+        cursor: pointer;
+      }
+      preview-component:hover {
+        outline: 3px dashed #aaaaaa;
+        outline-offset: 8px;
+      }
+      preview-component:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+      }
+    `
+  ],
+  template: `@if (editing) {
+      <edit-component [componentContent]="componentContent" [nodeId]="nodeId" />
+    } @else {
+      <preview-component
+        role="button"
+        tabindex="0"
+        (click)="editComponentEvent.emit()"
+        (keyup.enter)="editComponentEvent.emit()"
+        [component]="component"
+        [disabled]="true"
+        matTooltip="Edit content"
+        i18n-matTooltip
+      />
+    }`
 })
 export class ComponentAuthoringComponent {
-  @Input() private componentContent: ComponentContent;
-  @ViewChild('component') private componentElementRef: ElementRef;
-  private componentRef: ComponentRef<any>;
-  @Input() private nodeId: string;
+  protected component: WISEComponent;
+  @Input() componentContent: ComponentContent;
+  @Input() editing: boolean;
+  @Output() editComponentEvent: EventEmitter<void> = new EventEmitter<void>();
+  @Input() nodeId: string;
 
-  constructor(
-    private applicationRef: ApplicationRef,
-    private injector: EnvironmentInjector
-  ) {}
+  constructor(private projectService: TeacherProjectService) {}
 
-  ngAfterViewInit(): void {
-    this.componentRef = createComponent(components[this.componentContent.type].authoring, {
-      hostElement: this.componentElementRef.nativeElement,
-      environmentInjector: this.injector
-    });
-    Object.assign(this.componentRef.instance, {
-      componentContent: this.componentContent,
-      nodeId: this.nodeId
-    });
-    this.applicationRef.attachView(this.componentRef.hostView);
-  }
-
-  ngOnDestroy(): void {
-    this.componentRef.destroy();
+  ngOnChanges(): void {
+    this.component = new ComponentFactory().getComponent(
+      this.projectService.injectAssetPaths(this.componentContent),
+      this.nodeId
+    );
   }
 }

src/assets/wise5/authoringTool/components/edit-component/edit-component.component.spec.ts

@@ -0,0 +1,75 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { EditComponentComponent } from './edit-component.component';
+import { Component } from '@angular/core';
+import { components } from '../../../components/Components';
+import { ComponentContent } from '../../../common/ComponentContent';
+
+@Component({
+  selector: 'mock-authoring',
+  template: '<div>Mock Authoring Component</div>'
+})
+class MockAuthoringComponent {
+  componentContent: any;
+  nodeId: string;
+}
+
+describe('EditComponentComponent', () => {
+  let component: EditComponentComponent;
+  let fixture: ComponentFixture<EditComponentComponent>;
+  const mockComponentContent = {
+    type: 'mockComponent'
+  };
+  const mockNodeId = 'node1';
+
+  beforeEach(async () => {
+    components['mockComponent'] = {
+      authoring: MockAuthoringComponent
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [EditComponentComponent]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditComponentComponent);
+    component = fixture.componentInstance;
+    component.componentContent = mockComponentContent as ComponentContent;
+    component.nodeId = mockNodeId;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should create the dynamic component after view init', () => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    const componentElement = fixture.nativeElement.querySelector('div');
+    expect(componentElement.textContent).toContain('Mock Authoring Component');
+  });
+
+  it('should pass inputs to the dynamic component', () => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    const componentInstance = (component as any).componentRef.instance;
+    expect(componentInstance.componentContent).toBe(mockComponentContent);
+    expect(componentInstance.nodeId).toBe(mockNodeId);
+  });
+
+  it('should destroy the component reference on destroy', () => {
+    component.ngAfterViewInit();
+    const destroySpy = spyOn((component as any).componentRef, 'destroy');
+    component.ngOnDestroy();
+    expect(destroySpy).toHaveBeenCalled();
+  });
+
+  it('should focus the host element after timeout', (done) => {
+    component.ngAfterViewInit();
+    fixture.detectChanges();
+    setTimeout(() => {
+      const hostElement = fixture.nativeElement.querySelector('div');
+      expect(document.activeElement).toBe(hostElement);
+      done();
+    }, 0);
+  });
+});

src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts

@@ -0,0 +1,47 @@
+import {
+  ApplicationRef,
+  Component,
+  ComponentRef,
+  ElementRef,
+  EnvironmentInjector,
+  Input,
+  ViewChild,
+  createComponent
+} from '@angular/core';
+import { ComponentContent } from '../../../common/ComponentContent';
+import { components } from '../../../components/Components';
+
+@Component({
+  selector: 'edit-component',
+  standalone: true,
+  template: '<div #component tabindex="-1"></div>'
+})
+export class EditComponentComponent {
+  @Input() componentContent: ComponentContent;
+  @ViewChild('component') private componentElementRef: ElementRef;
+  private componentRef: ComponentRef<any>;
+  @Input() nodeId: string;
+
+  constructor(
+    private applicationRef: ApplicationRef,
+    private injector: EnvironmentInjector
+  ) {}
+
+  ngAfterViewInit(): void {
+    const hostElement = this.componentElementRef.nativeElement;
+    this.componentRef = createComponent(components[this.componentContent.type].authoring, {
+      hostElement: hostElement,
+      environmentInjector: this.injector
+    });
+    Object.assign(this.componentRef.instance, {
+      componentContent: this.componentContent,
+      nodeId: this.nodeId
+    });
+    this.applicationRef.attachView(this.componentRef.hostView);
+    setTimeout(() => hostElement.focus());
+  }
+
+  ngOnDestroy(): void {
+    this.componentRef.destroy();
+  }
+}

src/assets/wise5/authoringTool/components/preview-component/preview-component.component.ts

@@ -16,16 +16,20 @@ import { components } from '../../../components/Components';
 @Component({
   selector: 'preview-component',
   standalone: true,
-  template: '<div class="component__wrapper"><div #component></div></div>'
+  template: '<div #component></div>'
 })
 export class PreviewComponentComponent {
-  @Input() protected component: WISEComponent;
+  @Input() component: WISEComponent;
   @ViewChild('component') private componentElementRef: ElementRef;
   private componentRef: ComponentRef<WISEComponent>;
-  @Input() protected periodId: number;
-  @Output() private starterStateChangedEvent: EventEmitter<any> = new EventEmitter<any>();
+  @Input() disabled: boolean;
+  @Input() periodId: number;
+  @Output() starterStateChangedEvent: EventEmitter<any> = new EventEmitter<any>();
 
-  constructor(private applicationRef: ApplicationRef, private injector: EnvironmentInjector) {}
+  constructor(
+    private applicationRef: ApplicationRef,
+    private injector: EnvironmentInjector
+  ) {}
 
   ngAfterViewInit(): void {
     this.renderComponent();
@@ -50,6 +54,7 @@ export class PreviewComponentComponent {
       component: this.component,
       mode: 'preview',
       periodId: this.periodId,
+      isDisabled: this.disabled,
       starterStateChangedEvent: this.starterStateChangedEvent
     });
     this.applicationRef.attachView(this.componentRef.hostView);

src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.html

@@ -1,3 +1,5 @@
-<div class="warn">
-  <b>{{ message }}</b>
-</div>
+@if (message) {
+  <div class="concurrent-authors">
+    <b class="warn">{{ message }}</b>
+  </div>
+}

src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.spec.ts

@@ -44,9 +44,6 @@ describe('ConcurrentAuthorsMessageComponent', () => {
 
 function ngOnInit() {
   describe('ngOnInit()', () => {
-    it('set empty message when there are no other authors', () => {
-      expectMessage('["aa"]', '');
-    });
     it('set message to author when there is one other author', () => {
       expectMessage(
         '["aa","bb"]',