refactor(GenerateImageDialogComponent): Convert to standalone

src/app/student/vle/student-vle.module.ts

@@ -38,7 +38,6 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
 @NgModule({
   declarations: [
     ChooseBranchPathDialogComponent,
-    GenerateImageDialogComponent,
     GroupTabsComponent,
     NodeNavigationComponent,
     RunEndedAndLockedMessageComponent,
@@ -49,6 +48,7 @@ import { NodeStatusIconComponent } from '../../../assets/wise5/themes/default/th
   imports: [
     CommonModule,
     ComponentStudentModule,
+    GenerateImageDialogComponent,
     MatDialogModule,
     NavigationComponent,
     NodeModule,

src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.html

@@ -1,26 +1,26 @@
 <div class="modal-overlay" fxLayout="row" fxLayoutAlign="center center">
-  <div
-    *ngIf="isImportingWork"
-    class="importing-work-message yellow-background"
-    fxLayout="column"
-    fxLayoutAlign="center center"
-    fxLayoutGap="20px"
-  >
-    <span i18n>Importing Work...</span>
-    <mat-spinner></mat-spinner>
-  </div>
-  <div
-    *ngIf="isFailedToImportWork"
-    class="importing-work-message red-background"
-    fxLayout="column"
-    fxLayoutAlign="center center"
-    fxLayoutGap="20px"
-  >
-    <span i18n>Error: Failed to import work.</span>
-    <button mat-stroked-button class="white" (click)="closeDialog()">
-      <span i18n>Close</span>
-    </button>
-  </div>
+  @if (importingWork) {
+    <div class="importing-work-message yellow-background"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayoutGap="20px"
+    >
+      <span i18n>Importing Work...</span>
+      <mat-spinner></mat-spinner>
+    </div>
+  }
+  @if (failedToImportWork) {
+    <div class="importing-work-message red-background"
+      fxLayout="column"
+      fxLayoutAlign="center center"
+      fxLayoutGap="20px"
+    >
+      <span i18n>Error: Failed to import work.</span>
+      <button mat-stroked-button class="white" (click)="closeDialog()">
+        <span i18n>Close</span>
+      </button>
+    </div>
+  }
 </div>
 <component
   [nodeId]="componentState.nodeId"

src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.spec.ts

@@ -1,16 +1,8 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { StudentTeacherCommonServicesModule } from '../../../../app/student-teacher-common-services.module';
 import { ComponentContent } from '../../common/ComponentContent';
-import { ConceptMapService } from '../../components/conceptMap/conceptMapService';
-import { DrawService } from '../../components/draw/drawService';
-import { EmbeddedService } from '../../components/embedded/embeddedService';
-import { GraphService } from '../../components/graph/graphService';
-import { LabelService } from '../../components/label/labelService';
-import { TableService } from '../../components/table/tableService';
 import { ProjectService } from '../../services/projectService';
 import { GenerateImageDialogComponent } from './generate-image-dialog.component';
 
@@ -23,41 +15,28 @@ describe('GenerateImageDialogComponent', () => {
       imports: [
         HttpClientTestingModule,
         MatDialogModule,
-        MatProgressSpinnerModule,
+        GenerateImageDialogComponent,
         StudentTeacherCommonServicesModule
       ],
-      declarations: [GenerateImageDialogComponent],
       providers: [
         { provide: MAT_DIALOG_DATA, useValue: {} },
         { provide: MatDialogRef, useValue: { close() {} } }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
+      ]
     }).compileComponents();
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(GenerateImageDialogComponent);
-    spyOn(TestBed.inject(ProjectService), 'getComponent').and.returnValue({} as ComponentContent);
+    const projectService = TestBed.inject(ProjectService);
+    projectService.project = {};
+    spyOn(projectService, 'getComponent').and.returnValue({
+      type: 'OutsideURL'
+    } as ComponentContent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
 
-  it('should get component service', () => {
-    expect(component.getComponentService('ConceptMap')).toEqual(TestBed.inject(ConceptMapService));
-    expect(component.getComponentService('Draw')).toEqual(TestBed.inject(DrawService));
-    expect(component.getComponentService('Embedded')).toEqual(TestBed.inject(EmbeddedService));
-    expect(component.getComponentService('Graph')).toEqual(TestBed.inject(GraphService));
-    expect(component.getComponentService('Label')).toEqual(TestBed.inject(LabelService));
-    expect(component.getComponentService('Table')).toEqual(TestBed.inject(TableService));
-  });
-
-  it('should call generateImageFromRenderedComponentState', () => {
-    component.componentState = { componentType: 'Draw' };
-    const generateImageSpy = spyOn(
-      TestBed.inject(DrawService),
-      'generateImageFromRenderedComponentState'
-    ).and.returnValue(Promise.resolve({}));
-    component.generateImage();
-    expect(generateImageSpy).toHaveBeenCalled();
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.ts

@@ -8,22 +8,33 @@ import { GraphService } from '../../components/graph/graphService';
 import { LabelService } from '../../components/label/labelService';
 import { TableService } from '../../components/table/tableService';
 import { NodeService } from '../../services/nodeService';
+import { CommonModule } from '@angular/common';
+import { ComponentComponent } from '../../components/component/component.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 
 @Component({
-  selector: 'generate-image-dialog',
-  templateUrl: './generate-image-dialog.component.html',
-  styleUrls: ['./generate-image-dialog.component.scss']
+  imports: [
+    CommonModule,
+    ComponentComponent,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatProgressSpinnerModule
+  ],
+  standalone: true,
+  styleUrl: './generate-image-dialog.component.scss',
+  templateUrl: './generate-image-dialog.component.html'
 })
 export class GenerateImageDialogComponent implements OnInit {
-  componentState: any;
-  destroyDoneRenderingComponentListenerTimeout: any;
-  doneRenderingComponentSubscription: Subscription;
-  isFailedToImportWork: boolean = false;
-  isImportingWork: boolean = true;
+  private destroyDoneRenderingComponentListenerTimeout: any;
+  private doneRenderingComponentSubscription: Subscription;
+  protected failedToImportWork: boolean;
+  protected importingWork: boolean = true;
 
   constructor(
+    @Inject(MAT_DIALOG_DATA) public componentState: any,
     private conceptMapService: ConceptMapService,
-    @Inject(MAT_DIALOG_DATA) public data: any,
     private dialogRef: MatDialogRef<GenerateImageDialogComponent>,
     private drawService: DrawService,
     private embeddedService: EmbeddedService,
@@ -34,12 +45,11 @@ export class GenerateImageDialogComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.componentState = this.data;
     this.subscribeToDoneRenderingComponent();
     this.setDestroyTimeout();
   }
 
-  subscribeToDoneRenderingComponent(): void {
+  private subscribeToDoneRenderingComponent(): void {
     this.doneRenderingComponentSubscription = this.nodeService.doneRenderingComponent$.subscribe(
       ({ nodeId, componentId }) => {
         if (
@@ -54,7 +64,7 @@ export class GenerateImageDialogComponent implements OnInit {
     );
   }
 
-  generateImage(): void {
+  private generateImage(): void {
     this.getComponentService(this.componentState.componentType)
       .generateImageFromRenderedComponentState(this.componentState)
       .then((image: any) => {
@@ -68,23 +78,23 @@ export class GenerateImageDialogComponent implements OnInit {
    * Set a timeout to destroy the listener in case there is an error creating the image and
    * we don't get to destroying it after we generate the image.
    */
-  setDestroyTimeout(): void {
+  private setDestroyTimeout(): void {
     this.destroyDoneRenderingComponentListenerTimeout = setTimeout(() => {
       this.doneRenderingComponentSubscription.unsubscribe();
       this.setFailedToImportWork();
     }, 10000);
   }
 
-  setFailedToImportWork(): void {
-    this.isImportingWork = false;
-    this.isFailedToImportWork = true;
+  private setFailedToImportWork(): void {
+    this.importingWork = false;
+    this.failedToImportWork = true;
   }
 
-  closeDialog(): void {
+  protected closeDialog(): void {
     this.dialogRef.close();
   }
 
-  getComponentService(componentType: string): any {
+  private getComponentService(componentType: string): any {
     switch (componentType) {
       case 'ConceptMap':
         return this.conceptMapService;

src/messages.xlf

@@ -339,7 +339,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.html</context>
-          <context context-type="linenumber">21</context>
+          <context context-type="linenumber">20</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/vle/notifications-dialog/notifications-dialog.component.html</context>
@@ -21267,14 +21267,14 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Importing Work...</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.html</context>
-          <context context-type="linenumber">9</context>
+          <context context-type="linenumber">8</context>
         </context-group>
       </trans-unit>
       <trans-unit id="ac9248cc7545978fb89515097d1d9913a0e5f5c2" datatype="html">
         <source>Error: Failed to import work.</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/directives/generate-image-dialog/generate-image-dialog.component.html</context>
-          <context context-type="linenumber">19</context>
+          <context context-type="linenumber">18</context>
         </context-group>
       </trans-unit>
       <trans-unit id="e0a9d4bf9fa677b18e0c334249274957d3ee7fab" datatype="html">