From 0494fd82b782612895974f56fd369fa3f4a80697 Mon Sep 17 00:00:00 2001
From: Hiroki Terashima <honchikun@gmail.com>
Date: Tue, 17 Dec 2024 16:23:54 -0800
Subject: [PATCH] refactor(TopBarComponent): Convert to standalone (#2024)

---
 src/app/teacher/classroom-monitor.module.ts   |  6 +--
 .../shared/top-bar/top-bar.component.html     | 50 +++++++++--------
 .../shared/top-bar/top-bar.component.spec.ts  | 23 +-------
 .../shared/top-bar/top-bar.component.ts       | 54 ++++++++++---------
 src/messages.xlf                              | 28 ++++------
 5 files changed, 68 insertions(+), 93 deletions(-)

diff --git a/src/app/teacher/classroom-monitor.module.ts b/src/app/teacher/classroom-monitor.module.ts
index 548257a6193..b7df2a90d57 100644
--- a/src/app/teacher/classroom-monitor.module.ts
+++ b/src/app/teacher/classroom-monitor.module.ts
@@ -48,8 +48,7 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
-    ToolBarComponent,
-    TopBarComponent
+    ToolBarComponent
   ],
   imports: [
     ComponentGradingComponent,
@@ -74,7 +73,8 @@ import { GradingNodeService } from '../../assets/wise5/services/gradingNodeServi
     StepInfoComponent,
     StudentProgressComponent,
     StudentTeacherCommonModule,
-    TeacherSummaryDisplayComponent
+    TeacherSummaryDisplayComponent,
+    TopBarComponent
   ],
   providers: [GradingNodeService]
 })
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html
index a089d36f399..c2ea7edb4c2 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html
@@ -8,28 +8,21 @@ <h3 fxLayout="row" fxLayoutAlign="start center" class="title-header">
     <span class="title">{{ projectTitle }}</span
     >&nbsp;
     <span class="mat-caption" fxHide.lt-lg>({{ runInfo }})</span>
-    <button
-      mat-icon-button
-      fxHide.gt-md
-      aria-label="Unit Info"
-      i18n-aria-label
-      matTooltip="Unit Info"
-      i18n-matTooltip
-    >
+    <button mat-icon-button fxHide.gt-md matTooltip="Unit Info" i18n-matTooltip>
       <mat-icon>info</mat-icon>
     </button>
-    <button
-      mat-icon-button
-      *ngIf="canAuthorProject"
-      fxHide.xs
-      aria-label="Switch to Authoring View"
-      i18n-aria-label
-      (click)="switchToAuthoringView()"
-      matTooltip="Switch to Authoring View"
-      i18n-matTooltip
-    >
-      <mat-icon mat-menu-origin>edit</mat-icon>
-    </button>
+    @if (canAuthorProject) {
+      <button
+        mat-icon-button
+        fxHide.xs
+        (click)="switchToAuthoringView()"
+        matTooltip="Switch to Authoring View"
+        i18n-matTooltip
+      >
+        <mat-icon mat-menu-origin>edit</mat-icon>
+      </button>
+    }
+
     <button
       mat-icon-button
       fxHide.xs
@@ -47,9 +40,9 @@ <h3 fxLayout="row" fxLayoutAlign="start center" class="title-header">
     i18n-aria-label
     [matMenuTriggerFor]="notificationsMenu"
   >
-    <span *ngIf="newNotifications.length > 0" class="notification-count"
-      >{{ newNotifications.length }}
-    </span>
+    @if (newNotifications.length > 0) {
+      <span class="notification-count">{{ newNotifications.length }} </span>
+    }
     <mat-icon mat-menu-origin>notifications</mat-icon>
   </button>
   <mat-menu #notificationsMenu class="account-menu account-menu--fixed-width">
@@ -62,11 +55,16 @@ <h3 fxLayout="row" fxLayoutAlign="start center" class="title-header">
     [ngClass]="{ 'has-indicator has-indicator--icon-button': isAnyPeriodPaused() }"
     [matMenuTriggerFor]="pauseScreensMenu"
   >
-    <mat-icon mat-menu-origin *ngIf="isAnyPeriodPaused()">pause_circle_filled</mat-icon>
-    <mat-icon mat-menu-origin *ngIf="!isAnyPeriodPaused()">pause_circle_outline</mat-icon>
+    <mat-icon mat-menu-origin>
+      @if (isAnyPeriodPaused()) {
+        pause_circle_filled
+      } @else {
+        pause_circle_outline
+      }
+    </mat-icon>
   </button>
   <mat-menu #pauseScreensMenu class="account-menu account-menu--fixed-width">
-    <pause-screens-menu (click)="$event.stopPropagation()"></pause-screens-menu>
+    <pause-screens-menu (click)="$event.stopPropagation()" />
   </mat-menu>
   <button
     mat-icon-button
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts
index 2ae1023ae36..586969928a1 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts
@@ -1,14 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIconModule } from '@angular/material/icon';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
 import { ConfigService } from '../../../../services/configService';
 import { NotificationService } from '../../../../services/notificationService';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
-import { PauseScreensMenuComponent } from '../../pause-screens-menu/pause-screens-menu.component';
-import { NotificationsMenuComponent } from '../notifications-menu/notifications-menu.component';
 import { TopBarComponent } from './top-bar.component';
 import { provideRouter } from '@angular/router';
 
@@ -18,17 +11,7 @@ describe('TopBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [TopBarComponent],
-      imports: [
-        ClassroomMonitorTestingModule,
-        NotificationsMenuComponent,
-        PauseScreensMenuComponent,
-        MatIconModule,
-        MatListModule,
-        MatMenuModule,
-        MatToolbarModule,
-        MatTooltipModule
-      ],
+      imports: [ClassroomMonitorTestingModule, TopBarComponent],
       providers: [provideRouter([])]
     }).compileComponents();
   });
@@ -46,10 +29,6 @@ describe('TopBarComponent', () => {
       TestBed.inject(NotificationService),
       'getLatestActiveNotificationsFromUniqueSource'
     ).and.returnValue([]);
-    spyOn(
-      TestBed.inject(NotificationService),
-      'getDismissedNotificationsForWorkgroup'
-    ).and.returnValue([]);
     fixture.detectChanges();
   });
 
diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
index aac2bdda51d..d3214fb0cba 100644
--- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
+++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts
@@ -3,40 +3,55 @@ import { Subscription } from 'rxjs';
 import { ConfigService } from '../../../../services/configService';
 import { TeacherDataService } from '../../../../services/teacherDataService';
 import { SessionService } from '../../../../services/sessionService';
-import { TeacherProjectService } from '../../../../services/teacherProjectService';
 import { NotificationService } from '../../../../services/notificationService';
 import { Notification } from '../../../../../../app/domain/notification';
 import { getAvatarColorForWorkgroupId } from '../../../../common/workgroup/workgroup';
 import { Router } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { NotificationsMenuComponent } from '../notifications-menu/notifications-menu.component';
+import { PauseScreensMenuComponent } from '../../pause-screens-menu/pause-screens-menu.component';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
+    NotificationsMenuComponent,
+    PauseScreensMenuComponent
+  ],
   selector: 'top-bar',
-  templateUrl: './top-bar.component.html',
-  styleUrls: ['./top-bar.component.scss']
+  standalone: true,
+  styleUrl: './top-bar.component.scss',
+  templateUrl: './top-bar.component.html'
 })
 export class TopBarComponent implements OnInit {
-  avatarColor: any;
-  canAuthorProject: boolean;
-  contextPath: string;
-  dismissedNotifications: Notification[] = [];
+  protected avatarColor: any;
+  protected canAuthorProject: boolean;
+  protected contextPath: string;
   @Input() logoPath: string;
-  newNotifications: Notification[] = [];
-  notificationChangedSubscription: Subscription;
+  protected newNotifications: Notification[] = [];
+  private notificationChangedSubscription: Subscription;
   @Input() notifications: any;
   @Input() projectId: number;
   @Input() projectTitle: string;
   @Input() runId: number;
   @Input() runCode: string;
-  runInfo: string;
-  themePath: string;
-  userInfo: any;
-  workgroupId: number;
+  protected runInfo: string;
+  protected userInfo: any;
+  private workgroupId: number;
 
   constructor(
     private configService: ConfigService,
     private dataService: TeacherDataService,
     private notificationService: NotificationService,
-    private projectService: TeacherProjectService,
     private router: Router,
     private sessionService: SessionService
   ) {}
@@ -53,11 +68,10 @@ export class TopBarComponent implements OnInit {
         this.setNotifications();
       }
     );
-    this.themePath = this.projectService.getThemePath();
     this.contextPath = this.configService.getContextPath();
     const permissions = this.configService.getPermissions();
     this.canAuthorProject = permissions.canAuthorProject;
-    this.runInfo = this.getRunInfo();
+    this.runInfo = $localize`Run ID: ${this.runId} | Access Code: ${this.runCode}`;
     this.setNotifications();
   }
 
@@ -71,10 +85,6 @@ export class TopBarComponent implements OnInit {
     }
   }
 
-  private getRunInfo(): string {
-    return $localize`Run ID: ${this.runId} | Access Code: ${this.runCode}`;
-  }
-
   /**
    * Find all teacher notifications and separate into new and dismissed arrays
    * TODO: move to TeacherDataService?
@@ -85,10 +95,6 @@ export class TopBarComponent implements OnInit {
       this.notifications,
       this.workgroupId
     );
-    this.dismissedNotifications = this.notificationService.getDismissedNotificationsForWorkgroup(
-      this.notifications,
-      this.workgroupId
-    );
   }
 
   protected isAnyPeriodPaused(): boolean {
diff --git a/src/messages.xlf b/src/messages.xlf
index a47ac4051eb..989ed0b873d 100644
--- a/src/messages.xlf
+++ b/src/messages.xlf
@@ -1424,7 +1424,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">37</context>
+          <context context-type="linenumber">30</context>
         </context-group>
       </trans-unit>
       <trans-unit id="0fb1aad24bc0920a8c5e9d43e320e261dbca3f09" datatype="html">
@@ -8719,11 +8719,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">14</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">16</context>
+          <context context-type="linenumber">11</context>
         </context-group>
       </trans-unit>
       <trans-unit id="c182679b176fe796dea0ffeba15359edec6fffbc" datatype="html">
@@ -10302,7 +10298,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">69</context>
         </context-group>
       </trans-unit>
       <trans-unit id="198c48cd09b7766410bfeca2dad7f3fa08bf8e48" datatype="html">
@@ -10313,7 +10309,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">98,100</context>
+          <context context-type="linenumber">94,96</context>
         </context-group>
       </trans-unit>
       <trans-unit id="d03a265c20b6d1b20ceabc5938d1046689c73891" datatype="html">
@@ -10324,7 +10320,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">102,104</context>
+          <context context-type="linenumber">98,100</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2548722187082258540" datatype="html">
@@ -10342,7 +10338,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/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts</context>
-          <context context-type="linenumber">75</context>
+          <context context-type="linenumber">74</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1572694953180596523" datatype="html">
@@ -14287,7 +14283,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">60</context>
+          <context context-type="linenumber">53</context>
         </context-group>
       </trans-unit>
       <trans-unit id="a552ad46813fe1b88086583d3397a241d41c1b2e" datatype="html">
@@ -14445,7 +14441,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">46</context>
+          <context context-type="linenumber">39</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/notifications-dialog/notifications-dialog.component.html</context>
@@ -14502,11 +14498,7 @@ The branches will be removed but the steps will remain in the unit.</source>
         <source>Switch to Authoring View</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">25</context>
-        </context-group>
-        <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.html</context>
-          <context context-type="linenumber">28</context>
+          <context context-type="linenumber">19</context>
         </context-group>
       </trans-unit>
       <trans-unit id="3546597756684436742" datatype="html">
@@ -14515,7 +14507,7 @@ The branches will be removed but the steps will remain in the unit.</source>
 Are you sure you want to proceed?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.ts</context>
-          <context context-type="linenumber">101</context>
+          <context context-type="linenumber">107</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2533bf42152adabc1092cc52494ab0cc211c350a" datatype="html">