refactor(Teacher Tools): Convert all components to standalone (#2237)

Author: hirokiterashima

package-lock.json

@@ -8,16 +8,20 @@ import { MilestoneService } from '../../../assets/wise5/services/milestoneServic
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 import { Milestone } from '../../domain/milestone';
 import { Annotation } from '../../../assets/wise5/common/Annotation';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgClass } from '@angular/common';
+import { MatIcon } from '@angular/material/icon';
 
 @Component({
-    selector: 'milestones',
-    styleUrls: ['milestones.component.scss'],
-    templateUrl: 'milestones.component.html',
-    standalone: false
+  imports: [MatCard, MatCardContent, MatProgressSpinner, NgClass, MatIcon],
+  selector: 'milestones',
+  styleUrl: 'milestones.component.scss',
+  templateUrl: 'milestones.component.html'
 })
 export class MilestonesComponent {
-  milestones: Milestone[];
-  subscriptions: Subscription = new Subscription();
+  protected milestones: Milestone[];
+  private subscriptions: Subscription = new Subscription();
 
   constructor(
     private achievementService: AchievementService,

src/app/classroom-monitor/milestones/milestones.component.ts

@@ -2,7 +2,6 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'workgroup-node-status',
-  standalone: true,
   template: `<span class="md-body-2 block center {{ statusClass }}">{{ statusText }}</span>`
 })
 export class WorkgroupNodeStatusComponent {

src/app/classroom-monitor/workgroup-node-status/workgroup-node-status.component.ts

@@ -10,17 +10,17 @@ import { filter, map, startWith } from 'rxjs/operators';
 import { copy } from '../../../../assets/wise5/common/object/object';
 
 @Component({
-    encapsulation: ViewEncapsulation.None,
-    imports: [
-        CommonModule,
-        MatAutocompleteModule,
-        MatFormFieldModule,
-        MatInputModule,
-        ReactiveFormsModule
-    ],
-    selector: 'workgroup-select-autocomplete',
-    styleUrl: 'workgroup-select-autocomplete.component.scss',
-    templateUrl: 'workgroup-select-autocomplete.component.html'
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    CommonModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  selector: 'workgroup-select-autocomplete',
+  styleUrl: 'workgroup-select-autocomplete.component.scss',
+  templateUrl: 'workgroup-select-autocomplete.component.html'
 })
 export class WorkgroupSelectAutocompleteComponent extends WorkgroupSelectComponent {
   protected filteredWorkgroups: Observable<any>;

src/app/classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component.ts

@@ -3,10 +3,7 @@ import { Subscription } from 'rxjs';
 import { ConfigService } from '../../../assets/wise5/services/configService';
 import { TeacherDataService } from '../../../assets/wise5/services/teacherDataService';
 
-@Directive({
-    selector: 'workgroup-select',
-    standalone: false
-})
+@Directive()
 export class WorkgroupSelectComponent {
   @Input() customClass: string;
   protected canViewStudentNames: boolean;

src/app/classroom-monitor/workgroup-select/workgroup-select.component.ts

@@ -17,7 +17,6 @@ import { GoogleUser } from '../GoogleUser';
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'google-sign-in-button',
-  standalone: true,
   styleUrl: 'google-sign-in-button.component.scss',
   template: '<div #googleButton class="googleButton center"></div>'
 })
@@ -26,7 +25,10 @@ export class GoogleSignInButtonComponent implements AfterViewInit {
   @Output() signedIn = new EventEmitter<GoogleUser>();
   @Input() text: string = 'signin_with';
 
-  constructor(private configService: ConfigService, private ngZone: NgZone) {}
+  constructor(
+    private configService: ConfigService,
+    private ngZone: NgZone
+  ) {}
 
   ngAfterViewInit(): void {
     google.accounts.id.initialize({

src/app/modules/google-sign-in/google-sign-in-button/google-sign-in-button.component.ts

@@ -2,7 +2,6 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-privacy',
-  standalone: true,
   styleUrl: './privacy.component.scss',
   templateUrl: './privacy.component.html'
 })

src/app/privacy/privacy.component.ts

@@ -2,17 +2,10 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TeacherEditProfileComponent } from './edit-profile.component';
 import { UserService } from '../../../services/user.service';
 import { Teacher } from '../../../domain/teacher';
-import { Observable, of, BehaviorSubject } from 'rxjs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { Observable, BehaviorSubject } from 'rxjs';
 import { TeacherService } from '../../teacher.service';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { User } from '../../../domain/user';
-import { MatDialogModule } from '@angular/material/dialog';
 
 export class MockUserService {
   user: User;
@@ -86,20 +79,11 @@ describe('TeacherEditProfileComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [TeacherEditProfileComponent],
-      imports: [
-        BrowserAnimationsModule,
-        ReactiveFormsModule,
-        MatDialogModule,
-        MatInputModule,
-        MatSelectModule,
-        MatSnackBarModule
-      ],
+      imports: [TeacherEditProfileComponent],
       providers: [
         { provide: TeacherService, useClass: MockTeacherService },
         { provide: UserService, useClass: MockUserService }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
+      ]
     });
     fixture = TestBed.createComponent(TeacherEditProfileComponent);
     component = fixture.componentInstance;

src/app/teacher/account/edit-profile/edit-profile.component.spec.ts

@@ -1,5 +1,12 @@
 import { Component } from '@angular/core';
-import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  Validators,
+  FormBuilder,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { UserService } from '../../../services/user.service';
@@ -9,10 +16,28 @@ import { MatDialog } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { SchoolLevel, schoolLevels } from '../../../domain/profile.constants';
 import { EditProfileComponent } from '../../../common/edit-profile/edit-profile.component';
+import { MatFormField, MatLabel, MatError, MatHint } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import { MatSelect } from '@angular/material/select';
+import { MatOption } from '@angular/material/autocomplete';
+import { MatButton } from '@angular/material/button';
+import { MatProgressBar } from '@angular/material/progress-bar';
 
 @Component({
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    MatFormField,
+    MatLabel,
+    MatInput,
+    MatError,
+    MatHint,
+    MatSelect,
+    MatOption,
+    MatButton,
+    MatProgressBar
+  ],
   selector: 'teacher-edit-profile',
-  standalone: false,
   styleUrls: [
     '../../../common/edit-profile/edit-profile.component.scss',
     './edit-profile.component.scss'

src/app/teacher/account/edit-profile/edit-profile.component.ts

@@ -1,16 +1,23 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { EditComponent } from './edit.component';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MockComponents, MockProvider } from 'ng-mocks';
+import { TeacherEditProfileComponent } from '../edit-profile/edit-profile.component';
+import { UserService } from '../../../services/user.service';
+import { BehaviorSubject } from 'rxjs';
+import { User } from '../../../domain/user';
 
 describe('EditComponent', () => {
   let component: EditComponent;
   let fixture: ComponentFixture<EditComponent>;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [EditComponent],
-      providers: [],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [EditComponent, MockComponents(TeacherEditProfileComponent)],
+      providers: [
+        MockProvider(UserService, {
+          getUser: () => new BehaviorSubject<User>(null)
+        })
+      ]
     }).compileComponents();
   }));