From c6ecce6c6bb86241af23e1823f50d284271e9e70 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Sat, 7 Oct 2023 19:21:00 -0700
Subject: [PATCH] refactor(NodeAuthoringComponent): Extract
 NodeAuthoringParentComponent (#1454)

---
 src/app/teacher/authoring-routing.module.ts   |  32 +-
 src/app/teacher/authoring-tool.module.ts      |   2 +
 ...ode-advanced-branch-authoring.component.ts |   2 +-
 ...ced-constraint-authoring.component.spec.ts |   2 +-
 ...advanced-constraint-authoring.component.ts |   2 +-
 ...de-advanced-general-authoring.component.ts |   2 +-
 .../node-advanced-json-authoring.component.ts |   2 +-
 .../node-advanced-authoring.component.html    |   2 +-
 ...-advanced-path-authoring.component.spec.ts |   2 +-
 .../node-advanced-path-authoring.component.ts |   2 +-
 .../edit-node-rubric.component.spec.ts        |   2 +-
 .../editRubric/edit-node-rubric.component.ts  |   2 +-
 .../node-authoring-parent.component.html      |   1 +
 .../node-authoring-parent.component.ts        |   6 +
 .../node-authoring.component.html             | 463 +++++++++---------
 .../node-authoring.component.ts               |  20 +-
 src/messages.xlf                              |  50 +-
 17 files changed, 294 insertions(+), 300 deletions(-)
 create mode 100644 src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
 create mode 100644 src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts

diff --git a/src/app/teacher/authoring-routing.module.ts b/src/app/teacher/authoring-routing.module.ts
index 7260d1f48d4..860caaca2f2 100644
--- a/src/app/teacher/authoring-routing.module.ts
+++ b/src/app/teacher/authoring-routing.module.ts
@@ -36,6 +36,7 @@ import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringToo
 import { ChooseCopyNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
+import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
 
 const routes: Routes = [
   {
@@ -124,8 +125,24 @@ const routes: Routes = [
           { path: 'milestones', component: MilestonesAuthoringComponent },
           {
             path: 'node/:nodeId',
-            component: NodeAuthoringComponent,
+            component: NodeAuthoringParentComponent,
             children: [
+              {
+                path: '',
+                component: NodeAuthoringComponent
+              },
+              {
+                path: 'advanced',
+                component: NodeAdvancedAuthoringComponent,
+                children: [
+                  { path: 'branch', component: NodeAdvancedBranchAuthoringComponent },
+                  { path: 'constraint', component: NodeAdvancedConstraintAuthoringComponent },
+                  { path: 'general', component: NodeAdvancedGeneralAuthoringComponent },
+                  { path: 'json', component: NodeAdvancedJsonAuthoringComponent },
+                  { path: 'path', component: NodeAdvancedPathAuthoringComponent },
+                  { path: 'rubric', component: EditNodeRubricComponent }
+                ]
+              },
               {
                 path: 'choose-component-location',
                 component: ChooseComponentLocationComponent
@@ -136,19 +153,6 @@ const routes: Routes = [
               }
             ]
           },
-
-          {
-            path: 'node/:nodeId/advanced',
-            component: NodeAdvancedAuthoringComponent,
-            children: [
-              { path: 'branch', component: NodeAdvancedBranchAuthoringComponent },
-              { path: 'constraint', component: NodeAdvancedConstraintAuthoringComponent },
-              { path: 'general', component: NodeAdvancedGeneralAuthoringComponent },
-              { path: 'json', component: NodeAdvancedJsonAuthoringComponent },
-              { path: 'path', component: NodeAdvancedPathAuthoringComponent },
-              { path: 'rubric', component: EditNodeRubricComponent }
-            ]
-          },
           { path: 'notebook', component: NotebookAuthoringComponent },
           { path: 'recovery', component: RecoveryAuthoringComponent },
           {
diff --git a/src/app/teacher/authoring-tool.module.ts b/src/app/teacher/authoring-tool.module.ts
index bbdf33f7d3e..0bcbb700b54 100644
--- a/src/app/teacher/authoring-tool.module.ts
+++ b/src/app/teacher/authoring-tool.module.ts
@@ -50,6 +50,7 @@ import { NodeIconAndTitleComponent } from '../../assets/wise5/authoringTool/choo
 import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-with-move-after-button/node-with-move-after-button.component';
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
+import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
 
 @NgModule({
   declarations: [
@@ -78,6 +79,7 @@ import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-
     InsertNodeInsideButtonComponent,
     MilestonesAuthoringComponent,
     NodeAuthoringComponent,
+    NodeAuthoringParentComponent,
     NodeIconChooserDialog,
     NodeIconAndTitleComponent,
     NodeWithMoveAfterButtonComponent,
diff --git a/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
index 6a2a38c3595..3f714220e23 100644
--- a/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/branch/node-advanced-branch-authoring.component.ts
@@ -53,7 +53,7 @@ export class NodeAdvancedBranchAuthoringComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.nodeId = params.nodeId;
       this.node = this.projectService.getNodeById(this.nodeId);
       this.nodeIds = this.projectService.getFlattenedProjectAsNodeIds(true);
diff --git a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
index 534c56a6fb2..cf48d212a40 100644
--- a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.spec.ts
@@ -38,7 +38,7 @@ describe('NodeAdvancedConstraintAuthoringComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ]
diff --git a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
index 9cc14a32de7..b037ceff475 100644
--- a/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/constraint/node-advanced-constraint-authoring.component.ts
@@ -16,7 +16,7 @@ export class NodeAdvancedConstraintAuthoringComponent extends ConstraintsAuthori
   }
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       const node = this.projectService.getNodeById(params.nodeId);
       if (node.constraints == null) {
         node.constraints = [];
diff --git a/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
index 73b08771849..2d32eb85907 100644
--- a/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/general/node-advanced-general-authoring.component.ts
@@ -12,7 +12,7 @@ export class NodeAdvancedGeneralAuthoringComponent implements OnInit {
   constructor(private projectService: TeacherProjectService, private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
     });
   }
diff --git a/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
index 85c07e7db17..e5ac7652b4a 100644
--- a/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/json/node-advanced-json-authoring.component.ts
@@ -23,7 +23,7 @@ export class NodeAdvancedJsonAuthoringComponent implements OnInit {
   ) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.nodeId = params.nodeId;
       this.node = this.projectService.getNodeById(this.nodeId);
       this.nodeContentJSONString = JSON.stringify(this.node, null, 4);
diff --git a/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html b/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
index c574e21dfd5..19514995cf2 100644
--- a/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/advanced/node-advanced-authoring/node-advanced-authoring.component.html
@@ -2,7 +2,7 @@
   <button
     mat-raised-button
     color="primary"
-    [routerLink]="['/teacher/edit/unit', projectId, 'node', nodeId]"
+    routerLink=".."
     matTooltip="Back"
     matTooltipPosition="above"
     i18n-matTooltip
diff --git a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
index 6036f9cad49..58738774bd3 100644
--- a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.spec.ts
@@ -37,7 +37,7 @@ describe('NodeAdvancedPathAuthoringComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ]
diff --git a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
index 1b9198af8cb..96847430699 100644
--- a/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/advanced/path/node-advanced-path-authoring.component.ts
@@ -60,7 +60,7 @@ export class NodeAdvancedPathAuthoringComponent implements OnInit {
   constructor(private projectService: TeacherProjectService, private route: ActivatedRoute) {}
 
   ngOnInit() {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
       this.nodeIds = this.projectService.getFlattenedProjectAsNodeIds(true);
     });
diff --git a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
index 9f830ec9454..20dfbc3181f 100644
--- a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
+++ b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.spec.ts
@@ -39,7 +39,7 @@ describe('EditNodeRubricComponent', () => {
         {
           provide: ActivatedRoute,
           useValue: {
-            parent: { params: of({ nodeId: 'node1' }) }
+            parent: { parent: { params: of({ nodeId: 'node1' }) } }
           }
         }
       ],
diff --git a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
index bf57aca052d..4d5544f7501 100644
--- a/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
+++ b/src/assets/wise5/authoringTool/node/editRubric/edit-node-rubric.component.ts
@@ -19,7 +19,7 @@ export class EditNodeRubricComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.route.parent.params.subscribe((params) => {
+    this.route.parent.parent.params.subscribe((params) => {
       this.node = this.projectService.getNodeById(params.nodeId);
       this.rubric = this.projectService.replaceAssetPaths(replaceWiseLinks(this.node.rubric));
     });
diff --git a/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
new file mode 100644
index 00000000000..0680b43f9c6
--- /dev/null
+++ b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.html
@@ -0,0 +1 @@
+<router-outlet></router-outlet>
diff --git a/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts
new file mode 100644
index 00000000000..621c8863ecc
--- /dev/null
+++ b/src/assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component.ts
@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './node-authoring-parent.component.html'
+})
+export class NodeAuthoringParentComponent {}
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
index 479d4f580db..00eb1e69f58 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -1,258 +1,255 @@
-<router-outlet></router-outlet>
-<div *ngIf="showNodeView">
-  <div class="top-button-bar">
-    <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
-      <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
-      <mat-form-field class="step-title form-field-no-hint">
-        <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
-        <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
-        <input
-          matInput
-          [(ngModel)]="nodeJson.title"
-          [ngModelOptions]="{ debounce: 500 }"
-          (change)="authoringViewNodeChanged()"
-          aria-label="Title"
-          i18n-aria-label
-        />
-      </mat-form-field>
-      <div class="node-buttons" fxLayoutGap="16px">
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="showAdvancedView()"
-          matTooltip="Advanced"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>build</mat-icon>
-        </button>
-        <button
-          *ngIf="!isGroupNode"
-          mat-raised-button
-          color="primary"
-          class="top-button"
-          (click)="previewStepInNewWindow()"
-          [disabled]="showEditTransitions"
-          matTooltip="Preview Step"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>visibility</mat-icon>
-        </button>
-      </div>
-      <span fxFlex></span>
+<div class="top-button-bar">
+  <div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="16px">
+    <teacher-node-icon [nodeId]="nodeId" [canEdit]="true" size="18"></teacher-node-icon>
+    <mat-form-field class="step-title form-field-no-hint">
+      <mat-label *ngIf="!isGroupNode" i18n>Step Title {{ nodePosition }}:</mat-label>
+      <mat-label *ngIf="isGroupNode" i18n> Activity Title {{ nodePosition }}: </mat-label>
+      <input
+        matInput
+        [(ngModel)]="nodeJson.title"
+        [ngModelOptions]="{ debounce: 500 }"
+        (change)="authoringViewNodeChanged()"
+        aria-label="Title"
+        i18n-aria-label
+      />
+    </mat-form-field>
+    <div class="node-buttons" fxLayoutGap="16px">
       <button
-        mat-icon-button
-        (click)="close()"
-        matTooltip="Back to unit"
+        mat-raised-button
+        color="primary"
+        routerLink="advanced"
+        matTooltip="Advanced"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>build</mat-icon>
+      </button>
+      <button
+        *ngIf="!isGroupNode"
+        mat-raised-button
+        color="primary"
+        class="top-button"
+        (click)="previewStepInNewWindow()"
+        [disabled]="showEditTransitions"
+        matTooltip="Preview Step"
         matTooltipPosition="above"
         i18n-matTooltip
       >
-        <mat-icon>close</mat-icon>
+        <mat-icon>visibility</mat-icon>
       </button>
     </div>
-    <ng-template #addComponentButtonTemplate let-componentId="componentId">
+    <span fxFlex></span>
+    <button
+      mat-icon-button
+      (click)="close()"
+      matTooltip="Back to unit"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <mat-icon>close</mat-icon>
+    </button>
+  </div>
+  <ng-template #addComponentButtonTemplate let-componentId="componentId">
+    <button
+      mat-icon-button
+      color="primary"
+      matTooltip="Add a new component"
+      i18n-matTooltip
+      matTooltipPosition="above"
+      (click)="addComponent(componentId)"
+    >
+      <mat-icon>add_circle</mat-icon>
+    </button>
+  </ng-template>
+  <div
+    *ngIf="!isGroupNode"
+    class="components-header"
+    fxLayout="row"
+    fxLayoutAlign="start center"
+    fxLayoutGap="4px"
+  >
+    <h5 i18n>Components</h5>
+    <ng-container
+      *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
+    ></ng-container>
+    <div *ngIf="isAnyComponentSelected">
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="chooseComponentLocation('move')"
+        matTooltip="Move Components"
+        matTooltipPosition="above"
+        i18n-matTooltip
+      >
+        <mat-icon>redo</mat-icon>
+      </button>
       <button
         mat-icon-button
         color="primary"
-        matTooltip="Add a new component"
+        (click)="chooseComponentLocation('copy')"
+        matTooltip="Copy Components"
+        matTooltipPosition="above"
         i18n-matTooltip
+      >
+        <mat-icon>content_copy</mat-icon>
+      </button>
+      <button
+        mat-icon-button
+        color="primary"
+        (click)="deleteComponents()"
+        matTooltip="Delete Components"
         matTooltipPosition="above"
-        (click)="addComponent(componentId)"
+        i18n-matTooltip
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    </div>
+    <span fxFlex></span>
+    <div *ngIf="!isGroupNode" fxLayoutGap="16px">
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="setAllComponentsIsExpanded(true)"
+        [disabled]="getNumberOfComponentsExpanded() === components.length"
+        i18n
+      >
+        + Expand All
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        (click)="setAllComponentsIsExpanded(false)"
+        [disabled]="getNumberOfComponentsExpanded() === 0"
+        i18n
       >
-        <mat-icon>add_circle</mat-icon>
+        - Collapse All
       </button>
-    </ng-template>
+    </div>
+  </div>
+</div>
+<div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
+  <em i18n>This step does not have any components. Click the + button to add a component.</em>
+</div>
+<div cdkDropList (cdkDropListDropped)="dropComponent($event)" cdkScrollable>
+  <div *ngFor="let component of components; let i = index">
     <div
-      *ngIf="!isGroupNode"
-      class="components-header"
+      [id]="component.id"
+      class="component"
+      cdkDrag
+      [cdkDragDisabled]="components.length < 2"
       fxLayout="row"
-      fxLayoutAlign="start center"
-      fxLayoutGap="4px"
+      fxLayoutAlign="start"
+      [ngClass]="{
+        'component-header-highlight': !componentsToExpanded[component.id]
+      }"
     >
-      <h5 i18n>Components</h5>
-      <ng-container
-        *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: null }"
-      ></ng-container>
-      <div *ngIf="isAnyComponentSelected">
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="chooseComponentLocation('move')"
-          matTooltip="Move Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>redo</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="chooseComponentLocation('copy')"
-          matTooltip="Copy Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>content_copy</mat-icon>
-        </button>
-        <button
-          mat-icon-button
-          color="primary"
-          (click)="deleteComponents()"
-          matTooltip="Delete Components"
-          matTooltipPosition="above"
-          i18n-matTooltip
-        >
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-      <span fxFlex></span>
-      <div *ngIf="!isGroupNode" fxLayoutGap="16px">
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="setAllComponentsIsExpanded(true)"
-          [disabled]="getNumberOfComponentsExpanded() === components.length"
-          i18n
-        >
-          + Expand All
-        </button>
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="setAllComponentsIsExpanded(false)"
-          [disabled]="getNumberOfComponentsExpanded() === 0"
-          i18n
+      <div style="width: 100%">
+        <div
+          (click)="toggleComponent(component.id)"
+          class="component-header"
+          fxLayout="row"
+          fxLayoutAlign="start center"
+          fxLayoutGap="8px"
+          aria-label="Toggle component authoring"
+          i18n-aria-label
         >
-          - Collapse All
-        </button>
-      </div>
-    </div>
-  </div>
-  <div *ngIf="components.length === 0 && !isGroupNode" class="no-components-message">
-    <em i18n>This step does not have any components. Click the + button to add a component.</em>
-  </div>
-  <div cdkDropList (cdkDropListDropped)="dropComponent($event)" cdkScrollable>
-    <div *ngFor="let component of components; let i = index">
-      <div
-        [id]="component.id"
-        class="component"
-        cdkDrag
-        [cdkDragDisabled]="components.length < 2"
-        fxLayout="row"
-        fxLayoutAlign="start"
-        [ngClass]="{
-          'component-header-highlight': !componentsToExpanded[component.id]
-        }"
-      >
-        <div style="width: 100%">
-          <div
-            (click)="toggleComponent(component.id)"
-            class="component-header"
-            fxLayout="row"
-            fxLayoutAlign="start center"
-            fxLayoutGap="8px"
-            aria-label="Toggle component authoring"
-            i18n-aria-label
-          >
-            <div fxLayout="row" fxLayoutAlign="start center">
-              <mat-icon
-                class="drag-handle"
-                *ngIf="components.length > 1"
-                cdkDragHandle
-                title="Drag to reorder"
-                i18n-title
-                >drag_indicator</mat-icon
-              >
-              <mat-checkbox
-                color="primary"
-                [(ngModel)]="componentsToChecked[component.id]"
-                (change)="updateIsAnyComponentSelected()"
-                (click)="componentCheckboxClicked($event)"
-                aria-label="Select component"
-                i18n-aria-label
-              >
-                <span class="component-label"
-                  >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span
-                >
-              </mat-checkbox>
-            </div>
-            <ng-container>
-              <div
-                class="component-expand-collapse-div"
-                matTooltip="Click to expand/collapse"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              ></div>
-              <button
-                *ngIf="componentsToExpanded[component.id]"
-                mat-icon-button
-                color="primary"
-                (click)="showComponentAdvancedAuthoring(component, $event)"
-                matTooltip="Advanced"
-                matTooltipPosition="above"
-                i18n-matTooltip
+          <div fxLayout="row" fxLayoutAlign="start center">
+            <mat-icon
+              class="drag-handle"
+              *ngIf="components.length > 1"
+              cdkDragHandle
+              title="Drag to reorder"
+              i18n-title
+              >drag_indicator</mat-icon
+            >
+            <mat-checkbox
+              color="primary"
+              [(ngModel)]="componentsToChecked[component.id]"
+              (change)="updateIsAnyComponentSelected()"
+              (click)="componentCheckboxClicked($event)"
+              aria-label="Select component"
+              i18n-aria-label
+            >
+              <span class="component-label"
+                >{{ i + 1 }}. {{ getComponentTypeLabel(component.type) }}</span
               >
-                <mat-icon>build</mat-icon>
-              </button>
-              <preview-component-button
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                [nodeId]="nodeId"
-                [componentId]="component.id"
-              ></preview-component-button>
-              <button
-                mat-icon-button
-                color="primary"
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                (click)="copyComponent($event, component)"
-                matTooltip="Copy Component"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              >
-                <mat-icon>content_copy</mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                color="primary"
-                class="dynamic-component-button"
-                [ngClass]="{
-                  'show-dynamic-component-button': componentsToExpanded[component.id]
-                }"
-                (click)="deleteComponent($event, i + 1, component)"
-                matTooltip="Delete Component"
-                matTooltipPosition="above"
-                i18n-matTooltip
-              >
-                <mat-icon>delete</mat-icon>
-              </button>
-            </ng-container>
-            <div fxLayout="row" fxLayoutAlign="end center">
-              <div *ngIf="!componentsToExpanded[component.id]" fxLayoutAlign="end center">
-                <mat-icon>expand_more</mat-icon>
-              </div>
-              <div *ngIf="componentsToExpanded[component.id]" fxLayoutAlign="end center">
-                <mat-icon>expand_less</mat-icon>
-              </div>
-            </div>
+            </mat-checkbox>
           </div>
-          <div *ngIf="componentsToExpanded[component.id]" class="component-authoring">
-            <component-authoring-component
+          <ng-container>
+            <div
+              class="component-expand-collapse-div"
+              matTooltip="Click to expand/collapse"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            ></div>
+            <button
+              *ngIf="componentsToExpanded[component.id]"
+              mat-icon-button
+              color="primary"
+              (click)="showComponentAdvancedAuthoring(component, $event)"
+              matTooltip="Advanced"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>build</mat-icon>
+            </button>
+            <preview-component-button
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
               [nodeId]="nodeId"
-              [componentContent]="component"
-            ></component-authoring-component>
-          </div>
-          <div class="add-component">
-            <ng-container
-              *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: component.id }"
-            ></ng-container>
+              [componentId]="component.id"
+            ></preview-component-button>
+            <button
+              mat-icon-button
+              color="primary"
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
+              (click)="copyComponent($event, component)"
+              matTooltip="Copy Component"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>content_copy</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              color="primary"
+              class="dynamic-component-button"
+              [ngClass]="{
+                'show-dynamic-component-button': componentsToExpanded[component.id]
+              }"
+              (click)="deleteComponent($event, i + 1, component)"
+              matTooltip="Delete Component"
+              matTooltipPosition="above"
+              i18n-matTooltip
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </ng-container>
+          <div fxLayout="row" fxLayoutAlign="end center">
+            <div *ngIf="!componentsToExpanded[component.id]" fxLayoutAlign="end center">
+              <mat-icon>expand_more</mat-icon>
+            </div>
+            <div *ngIf="componentsToExpanded[component.id]" fxLayoutAlign="end center">
+              <mat-icon>expand_less</mat-icon>
+            </div>
           </div>
         </div>
+        <div *ngIf="componentsToExpanded[component.id]" class="component-authoring">
+          <component-authoring-component
+            [nodeId]="nodeId"
+            [componentContent]="component"
+          ></component-authoring-component>
+        </div>
+        <div class="add-component">
+          <ng-container
+            *ngTemplateOutlet="addComponentButtonTemplate; context: { componentId: component.id }"
+          ></ng-container>
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
index 6979023abcf..0e7ad700ecb 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts
@@ -14,7 +14,7 @@ import { EditComponentAdvancedComponent } from '../../../../../app/authoring-too
 import { Component as WiseComponent } from '../../../common/Component';
 import { ChooseNewComponent } from '../../../../../app/authoring-tool/add-component/choose-new-component/choose-new-component.component';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'node-authoring',
@@ -32,7 +32,6 @@ export class NodeAuthoringComponent implements OnInit {
   nodeId: string;
   nodePosition: any;
   projectId: number;
-  showNodeView: boolean = true;
   subscriptions: Subscription = new Subscription();
 
   constructor(
@@ -45,14 +44,9 @@ export class NodeAuthoringComponent implements OnInit {
     private dataService: TeacherDataService,
     private route: ActivatedRoute,
     private router: Router
-  ) {
-    this.router.events
-      .pipe(filter((event) => event instanceof NavigationEnd))
-      .subscribe(() => this.updateShowNodeView());
-  }
+  ) {}
 
   ngOnInit(): void {
-    this.updateShowNodeView();
     this.nodeId = this.route.snapshot.paramMap.get('nodeId');
     this.route.parent.params.subscribe((params) => {
       this.projectId = Number(params.unitId);
@@ -82,12 +76,6 @@ export class NodeAuthoringComponent implements OnInit {
     }
   }
 
-  private updateShowNodeView(): void {
-    this.showNodeView = /\/teacher\/edit\/unit\/(\d*)\/node\/(node|group)(\d*)$/.test(
-      this.router.url
-    );
-  }
-
   ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
@@ -189,10 +177,6 @@ export class NodeAuthoringComponent implements OnInit {
     return this.projectService.saveProject();
   }
 
-  protected showAdvancedView(): void {
-    this.router.navigate([`/teacher/edit/unit/${this.projectId}/node/${this.nodeId}/advanced`]);
-  }
-
   protected getSelectedComponents(): ComponentContent[] {
     return this.components.filter(
       (component: ComponentContent) => this.componentsToChecked[component.id]
diff --git a/src/messages.xlf b/src/messages.xlf
index aa83700b406..c19dd018668 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1150,7 +1150,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">163</context>
+          <context context-type="linenumber">161</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.html</context>
@@ -1474,7 +1474,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">36</context>
+          <context context-type="linenumber">34</context>
         </context-group>
       </trans-unit>
       <trans-unit id="cda31dbd724cf5f4fa7a4274d9120651490c8a8c" datatype="html">
@@ -11425,21 +11425,21 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Step Title <x id="INTERPOLATION" equiv-text="{{ nodePosition }}"/>:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">5</context>
         </context-group>
       </trans-unit>
       <trans-unit id="dcd8b6c1f614e50769b4d26e4a1d542ef14d3fe8" datatype="html">
         <source> Activity Title <x id="INTERPOLATION" equiv-text="{{ nodePosition }}"/>: </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">8</context>
+          <context context-type="linenumber">6</context>
         </context-group>
       </trans-unit>
       <trans-unit id="fdf7cbdc140d0aab0f0b6c06065a0fd448ed6a2e" datatype="html">
         <source>Title</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">14</context>
+          <context context-type="linenumber">12</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component.html</context>
@@ -11466,11 +11466,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Advanced</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">23</context>
+          <context context-type="linenumber">21</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">192</context>
+          <context context-type="linenumber">190</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/project-authoring/project-authoring.component.html</context>
@@ -11481,98 +11481,98 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Back to unit</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">47</context>
+          <context context-type="linenumber">45</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2998257cb98e73a3cfaf686ef9c2bbbf618f6fb0" datatype="html">
         <source>Add a new component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">58</context>
+          <context context-type="linenumber">56</context>
         </context-group>
       </trans-unit>
       <trans-unit id="16f48e8858552177f3da7a0ccf2449b2522ebe14" datatype="html">
         <source>Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">71</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7c5b499b46f7ab611026c2e07b19d8d70e51853a" datatype="html">
         <source>Move Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">82</context>
+          <context context-type="linenumber">80</context>
         </context-group>
       </trans-unit>
       <trans-unit id="835ab9ba787d9e73a77b6f723e200ca24a5808a9" datatype="html">
         <source>Copy Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">92</context>
+          <context context-type="linenumber">90</context>
         </context-group>
       </trans-unit>
       <trans-unit id="646e338d93a6cafb1c27766c746ce8f2fde3c2a6" datatype="html">
         <source>Delete Components</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">102</context>
+          <context context-type="linenumber">100</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="4d78280b4290901b50914c0d78a721503c397554" datatype="html">
+      <trans-unit id="67145eb769f4fe04e8b9f3c24d4452cf18ac196b" datatype="html">
         <source> + Expand All </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">117,119</context>
+          <context context-type="linenumber">115,117</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="e3fb2c845b0e0af10ee3496ce0653bb31a593820" datatype="html">
+      <trans-unit id="22137335ce02968992f1f2fb73c630e68be673cb" datatype="html">
         <source> - Collapse All </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">126,128</context>
+          <context context-type="linenumber">124,126</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1944eaae32b2002e6f552fd9c1f5a113c412ad25" datatype="html">
         <source>This step does not have any components. Click the + button to add a component.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">133</context>
+          <context context-type="linenumber">131</context>
         </context-group>
       </trans-unit>
       <trans-unit id="534f4fefca77da56b8b0ea6fb63ff18bae415a92" datatype="html">
         <source>Toggle component authoring</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">155</context>
+          <context context-type="linenumber">153</context>
         </context-group>
       </trans-unit>
       <trans-unit id="11cd90245b41b1506efabdcea69d3c5c0964a432" datatype="html">
         <source>Select component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">172</context>
+          <context context-type="linenumber">170</context>
         </context-group>
       </trans-unit>
       <trans-unit id="47f8ae23f1be55b30a01abc41c7ca4b770f5d1b2" datatype="html">
         <source>Click to expand/collapse</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">183</context>
+          <context context-type="linenumber">181</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6e04c490706ecafe8e0c842513b700e165d97bc2" datatype="html">
         <source>Copy Component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">214</context>
+          <context context-type="linenumber">212</context>
         </context-group>
       </trans-unit>
       <trans-unit id="46c242cc262ba3a868dfd6bd37f555c1ada6877c" datatype="html">
         <source>Delete Component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html</context>
-          <context context-type="linenumber">228</context>
+          <context context-type="linenumber">226</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7035134055292483273" datatype="html">
@@ -11580,7 +11580,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
 </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts</context>
-          <context context-type="linenumber">274</context>
+          <context context-type="linenumber">258</context>
         </context-group>
       </trans-unit>
       <trans-unit id="5170405945214763287" datatype="html">
@@ -11588,7 +11588,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
 </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.ts</context>
-          <context context-type="linenumber">275</context>
+          <context context-type="linenumber">259</context>
         </context-group>
       </trans-unit>
       <trans-unit id="bb39841df2c03f771748c1f986e615bffa7f2593" datatype="html">