feat(Authoring): Allow adding branch from add step button (#1935)

Co-authored-by: Hiroki Terashima <honchikun@gmail.com>
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.html

@@ -48,7 +48,7 @@ <h6 *ngIf="item.order != 0 && item.node.type == 'group'">
       mat-button
       color="primary"
       routerLink="../choose-unit"
-      [state]="{ targetId: targetId }"
+      [state]="target"
       aria-label="Back"
       i18n-aria-label
       i18n

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.ts

@@ -5,6 +5,7 @@ import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { CopyNodesService } from '../../../../assets/wise5/services/copyNodesService';
 import { InsertNodesService } from '../../../../assets/wise5/services/insertNodesService';
 import { AbstractImportStepComponent } from '../../../../assets/wise5/authoringTool/addNode/abstract-import-step/abstract-import-step.component';
+import { InsertFirstNodeInBranchPathService } from '../../../../assets/wise5/services/insertFirstNodeInBranchPathService';
 
 @Component({
   selector: 'choose-import-step',
@@ -19,12 +20,21 @@ export class ChooseImportStepComponent extends AbstractImportStepComponent {
   constructor(
     protected configService: ConfigService,
     protected copyNodesService: CopyNodesService,
+    protected insertFirstNodeInBranchPathService: InsertFirstNodeInBranchPathService,
     protected insertNodesService: InsertNodesService,
     protected projectService: TeacherProjectService,
     protected route: ActivatedRoute,
     protected router: Router
   ) {
-    super(configService, copyNodesService, insertNodesService, projectService, route, router);
+    super(
+      configService,
+      copyNodesService,
+      insertFirstNodeInBranchPathService,
+      insertNodesService,
+      projectService,
+      route,
+      router
+    );
   }
 
   ngOnInit() {

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.html

@@ -25,13 +25,7 @@ <h5 i18n>Choose a unit from which to import step(s).</h5>
 <div class="nav-controls">
   <mat-divider></mat-divider>
   <div fxLayout="row" fxLayoutGap="16px" fxLayoutAlign="end center">
-    <button
-      mat-button
-      color="primary"
-      routerLink="../../choose-template"
-      [state]="{ targetId: targetId }"
-      i18n
-    >
+    <button mat-button color="primary" routerLink="../../choose-template" [state]="target" i18n>
       Back
     </button>
     <span fxFlex></span>

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts

@@ -3,6 +3,7 @@ import { ConfigService } from '../../../../assets/wise5/services/configService';
 import { ProjectLibraryService } from '../../../../assets/wise5/services/projectLibraryService';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
+import { AddStepTarget } from '../../../domain/addStepTarget';
 
 @Component({
   selector: 'choose-import-unit',
@@ -12,8 +13,8 @@ import { Subscription } from 'rxjs';
 export class ChooseImportUnitComponent {
   protected libraryProjects: any[];
   protected myProjects: any[];
-  protected targetId: string;
   private subscriptions: Subscription = new Subscription();
+  protected target: AddStepTarget;
 
   constructor(
     private configService: ConfigService,
@@ -23,7 +24,7 @@ export class ChooseImportUnitComponent {
   ) {}
 
   ngOnInit(): void {
-    this.targetId = history.state.targetId;
+    this.target = history.state;
     this.myProjects = this.configService.getAuthorableProjects();
     this.subscriptions.add(
       this.projectLibraryService.getLibraryProjects().subscribe((libraryProjects) => {
@@ -37,12 +38,10 @@ export class ChooseImportUnitComponent {
   }
 
   protected chooseProject(project: any): void {
+    this.target.importProjectId = project.id;
     this.router.navigate(['../choose-step'], {
       relativeTo: this.route,
-      state: {
-        importProjectId: project.id,
-        targetId: this.targetId
-      }
+      state: this.target
     });
   }
 }

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

@@ -29,6 +29,13 @@ export class SelectComponentComponent {
       this.calculateComponents(this.nodeId);
       this.setComponentId();
     }
+    if (changes.allowedComponentTypes) {
+      this.allowedComponentTypes = changes.allowedComponentTypes.currentValue;
+      this.calculateComponents(this.nodeId);
+    }
+    if (changes.componentId) {
+      this.componentId = changes.componentId.currentValue;
+    }
   }
 
   private calculateComponents(nodeId: string): void {

src/app/domain/addStepTarget.ts

@@ -0,0 +1,20 @@
+export class AddStepTarget {
+  branchNodeId?: string;
+  firstNodeIdInBranchPath?: string;
+  importProjectId?: number;
+  node?: any;
+  targetId?: string;
+  type: 'in' | 'after' | 'firstStepInBranchPath';
+
+  constructor(
+    type: 'in' | 'after' | 'firstStepInBranchPath',
+    targetId: string,
+    branchNodeId?: string,
+    firstNodeIdInBranchPath?: string
+  ) {
+    this.type = type;
+    this.targetId = targetId;
+    this.branchNodeId = branchNodeId;
+    this.firstNodeIdInBranchPath = firstNodeIdInBranchPath;
+  }
+}

src/app/domain/branchCriteria.ts

@@ -0,0 +1,28 @@
+export const CHOICE_CHOSEN_VALUE = 'choiceChosen';
+export const RANDOM_VALUE = 'random';
+export const SCORE_VALUE = 'score';
+export const WORKGROUP_ID_VALUE = 'workgroupId';
+
+export interface BranchCriteria {
+  text: string;
+  value: string;
+}
+
+export const BRANCH_CRITERIA: BranchCriteria[] = [
+  {
+    text: $localize`Workgroup ID`,
+    value: WORKGROUP_ID_VALUE
+  },
+  {
+    text: $localize`Score`,
+    value: SCORE_VALUE
+  },
+  {
+    text: $localize`Choice Chosen`,
+    value: CHOICE_CHOSEN_VALUE
+  },
+  {
+    text: $localize`Random`,
+    value: RANDOM_VALUE
+  }
+];

src/app/services/branchServiceTestHelperFunctions.ts

@@ -0,0 +1,19 @@
+import { copy } from '../../assets/wise5/common/object/object';
+import { TransitionLogic } from '../../assets/wise5/common/TransitionLogic';
+
+export function expectTransitionLogic(node: any, transitionLogic: TransitionLogic) {
+  expect(copy(node.transitionLogic)).toEqual(copy(transitionLogic));
+}
+
+export function expectConstraint(
+  constraint: any,
+  expectedAction: string,
+  expectedTargetId: string,
+  expectedRemovalCriteria: any[]
+) {
+  expect(constraint.action).toEqual(expectedAction);
+  expect(constraint.targetId).toEqual(expectedTargetId);
+  for (let i = 0; i < expectedRemovalCriteria.length; i++) {
+    expect(copy(constraint.removalCriteria[i])).toEqual(copy(expectedRemovalCriteria[i]));
+  }
+}