Revert "refactor(Authoring): Create select component component"

This reverts commit 1b9b54b.

src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html

@@ -3,10 +3,16 @@
   [nodeId]="referenceComponent.nodeId"
   (stepChangedEvent)="stepChanged($event)"
 ></select-step>
-<select-component
-  [allowedComponentTypes]="allowedComponentTypes"
-  [nodeId]="referenceComponent.nodeId"
-  [componentId]="referenceComponent.componentId"
-  [thisComponentId]="thisComponentId"
-  (componentChangedEvent)="componentChanged($event)"
-></select-component>
+<mat-form-field>
+  <mat-label i18n>Component</mat-label>
+  <mat-select [(ngModel)]="referenceComponent.componentId" (ngModelChange)="componentChanged()">
+    <mat-option
+      *ngFor="let component of components; index as componentIndex"
+      [value]="component.id"
+      [disabled]="!componentToIsAllowed.get(component.id) || component.id === thisComponentId"
+    >
+      <span>{{ componentIndex + 1 }}. {{ component.type }} </span>
+      <span *ngIf="component.id === thisComponentId" i18n>(This Component)</span>
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/authoring-tool/select-step-and-component/select-step-and-component.component.spec.ts

@@ -7,7 +7,9 @@ import { StudentTeacherCommonServicesModule } from '../../student-teacher-common
 import { SelectStepAndComponentComponent } from './select-step-and-component.component';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatSelectHarness } from '@angular/material/select/testing';
 import { SelectStepAndComponentHarness } from './select-step-and-component.harness';
+import { SelectStepComponent } from '../select-step/select-step.component';
 
 let component: SelectStepAndComponentComponent;
 const componentId1 = 'component1';
@@ -31,14 +33,14 @@ describe('SelectStepAndComponentComponent', () => {
         HttpClientTestingModule,
         SelectStepAndComponentComponent,
         StudentTeacherCommonServicesModule
-      ]
+      ],
+      providers: [ProjectService]
     }).compileComponents();
     fixture = TestBed.createComponent(SelectStepAndComponentComponent);
     loader = TestbedHarnessEnvironment.loader(fixture);
     component = fixture.componentInstance;
     component.referenceComponent = new ReferenceComponent(null, null);
     component.allowedComponentTypes = ['OpenResponse'];
-    component.thisComponentId = componentId1;
     projectService = TestBed.inject(ProjectService);
     spyOn(projectService, 'getStepNodeIds').and.returnValue(nodeIds);
     spyOn(projectService, 'getFlattenedProjectAsNodeIds').and.returnValue(nodeIds);
@@ -56,45 +58,41 @@ describe('SelectStepAndComponentComponent', () => {
       SelectStepAndComponentHarness
     );
   });
-  selectStep();
+  selectComponent();
+  stepChanged();
 });
 
-function selectStep() {
-  describe('selecting a step', () => {
-    describe('when the step has compnents that can and cannot be selected', () => {
-      it('disables certain options in the select component', async () => {
-        setUpThreeComponentsSpy('OpenResponse', 'Graph', 'OpenResponse');
-        const selectStepHarness = await harness.getSelectStep();
-        const selectStep = await selectStepHarness.getSelect();
-        await selectStep.open();
-        await selectStep.clickOptions({ text: nodeTitle1 });
-        const selectComponentHarness = await harness.getSelectComponent();
-        const selectComponent = await selectComponentHarness.getSelect();
-        await selectComponent.open();
-        const options = await selectComponent.getOptions();
-        expect(await options[0].isDisabled()).toBeTrue();
-        expect(await options[1].isDisabled()).toBeTrue();
-        expect(await options[2].isDisabled()).toBeFalse();
-      });
-    });
-    describe('when the step has no components that can be selected', () => {
-      it('does not automatically select a component', async () => {
-        await setComponentsAndCallStepChanged('Draw', 'Graph', 'Table');
-        expectReferenceComponentValues(nodeId1, null);
-      });
+function selectComponent() {
+  it('should disable certain options in the select component', async () => {
+    setUpThreeComponentsSpy('OpenResponse', 'Graph', 'OpenResponse');
+    component.referenceComponent.nodeId = nodeId1;
+    component.thisComponentId = componentId1;
+    component.ngOnInit();
+    const selects = await loader.getAllHarnesses(MatSelectHarness);
+    const selectComponent = selects[1];
+    await selectComponent.open();
+    const options = await selectComponent.getOptions();
+    expect(await options[0].isDisabled()).toBeTrue();
+    expect(await options[1].isDisabled()).toBeTrue();
+    expect(await options[2].isDisabled()).toBeFalse();
+  });
+}
+
+function stepChanged() {
+  describe('stepChanged()', () => {
+    it('should handle step changed when there are no allowed components', async () => {
+      await setComponentsAndCallStepChanged('Draw', 'Graph', 'Table');
+      expectReferenceComponentValues(nodeId1, null);
     });
 
-    describe('when the step has one component that can be selected', () => {
-      it('automatically selects the one allowed component', async () => {
-        await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'Table');
-        expectReferenceComponentValues(nodeId1, componentId2);
-      });
+    it('should handle step changed when there is one allowed component', async () => {
+      await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'Table');
+      expectReferenceComponentValues(nodeId1, componentId2);
     });
-    describe('when the step has many components that can be selected', () => {
-      it('doesn not automatically select a component', async () => {
-        await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'OpenResponse');
-        expectReferenceComponentValues(nodeId1, null);
-      });
+
+    it('should handle step changed when there are multiple allowed components', async () => {
+      await setComponentsAndCallStepChanged('Draw', 'OpenResponse', 'OpenResponse');
+      expectReferenceComponentValues(nodeId1, null);
     });
   });
 }

src/app/authoring-tool/select-step-and-component/select-step-and-component.component.ts

@@ -1,33 +1,76 @@
-import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProjectService } from '../../../assets/wise5/services/projectService';
 import { ReferenceComponent } from '../../domain/referenceComponent';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 import { SelectStepComponent } from '../select-step/select-step.component';
-import { SelectComponentComponent } from '../select-component/select-component.component';
 
 @Component({
   selector: 'select-step-and-component',
   templateUrl: './select-step-and-component.component.html',
   styleUrls: ['./select-step-and-component.component.scss'],
   standalone: true,
-  imports: [SelectComponentComponent, SelectStepComponent]
+  imports: [CommonModule, FormsModule, MatFormFieldModule, MatSelectModule, SelectStepComponent]
 })
-export class SelectStepAndComponentComponent {
+export class SelectStepAndComponentComponent implements OnInit {
   @Input() allowedComponentTypes: string[] = [];
   @Output() componentChange: EventEmitter<ReferenceComponent> = new EventEmitter();
+  protected components: any[] = [];
+  protected componentToIsAllowed: Map<string, boolean> = new Map<string, boolean>();
   @Input() referenceComponent: ReferenceComponent;
   @Output() stepChange: EventEmitter<ReferenceComponent> = new EventEmitter();
   @Input() thisComponentId: string;
 
-  constructor(private changeDetector: ChangeDetectorRef) {}
+  constructor(private projectService: ProjectService) {}
+
+  ngOnInit(): void {
+    if (this.referenceComponent.nodeId != null) {
+      this.calculateComponents(this.referenceComponent.nodeId);
+      if (this.referenceComponent.componentId == null) {
+        this.automaticallySetComponentIfPossible(this.referenceComponent.nodeId);
+      }
+    }
+  }
+
+  private calculateComponents(nodeId: string): void {
+    this.components = this.projectService.getComponents(nodeId);
+    for (const component of this.components) {
+      this.componentToIsAllowed.set(
+        component.id,
+        this.allowedComponentTypes.includes(component.type)
+      );
+    }
+  }
 
   protected stepChanged(nodeId: string): void {
     this.referenceComponent.nodeId = nodeId;
-    this.changeDetector.detectChanges();
+    this.referenceComponent.componentId = null;
+    this.automaticallySetComponentIfPossible(nodeId);
+    this.calculateComponents(nodeId);
     this.stepChange.emit(this.referenceComponent);
   }
 
-  protected componentChanged(componentId: string): void {
-    this.referenceComponent.componentId = componentId;
-    this.changeDetector.detectChanges();
+  protected componentChanged(): void {
     this.componentChange.emit(this.referenceComponent);
   }
+
+  private automaticallySetComponentIfPossible(nodeId: string): void {
+    let numAllowedComponents = 0;
+    let allowedComponent = null;
+    for (const component of this.projectService.getComponents(nodeId)) {
+      if (
+        this.allowedComponentTypes.includes(component.type) &&
+        component.id !== this.thisComponentId
+      ) {
+        numAllowedComponents += 1;
+        allowedComponent = component;
+      }
+    }
+    if (numAllowedComponents === 1) {
+      this.referenceComponent.componentId = allowedComponent.id;
+      this.componentChanged();
+    }
+  }
 }

src/app/authoring-tool/select-step-and-component/select-step-and-component.harness.ts

@@ -1,9 +1,7 @@
 import { ComponentHarness } from '@angular/cdk/testing';
 import { SelectStepHarness } from '../select-step/select-step.harness';
-import { SelectComponentHarness } from '../select-component/select-component.harness';
 
 export class SelectStepAndComponentHarness extends ComponentHarness {
   static hostSelector = 'select-step-and-component';
-  getSelectComponent = this.locatorFor(SelectComponentHarness);
   getSelectStep = this.locatorFor(SelectStepHarness);
 }

src/messages.xlf

@@ -1641,8 +1641,8 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
       <trans-unit id="e78170d2eb79d84d7927b8df23950715263ae478" datatype="html">
         <source>Component</source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/select-component/select-component.component.html</context>
-          <context context-type="linenumber">2</context>
+          <context context-type="sourcefile">src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html</context>
+          <context context-type="linenumber">7</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html</context>
@@ -1660,8 +1660,8 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
       <trans-unit id="5d2007bc11d50873e2e87582f6c13c80f37b65e5" datatype="html">
         <source>(This Component)</source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/app/authoring-tool/select-component/select-component.component.html</context>
-          <context context-type="linenumber">10</context>
+          <context context-type="sourcefile">src/app/authoring-tool/select-step-and-component/select-step-and-component.component.html</context>
+          <context context-type="linenumber">15</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/openResponse/edit-open-response-advanced/edit-open-response-advanced.component.html</context>