feat(Authoring): Move component info retrieval inside dialog

#1457

src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html

@@ -1,11 +1,11 @@
-<h2 mat-dialog-title i18n>{{ data.label }}</h2>
+<h2 mat-dialog-title i18n>{{ label }}</h2>
 <mat-dialog-content>
-  <p>{{ data.description }}</p>
+  <p>{{ description }}</p>
 </mat-dialog-content>
 <mat-divider></mat-divider>
 <mat-dialog-content>
   <div class="example-label" i18n>Example</div>
-  <preview-component [component]="data.component"> </preview-component>
+  <preview-component [component]="component"> </preview-component>
 </mat-dialog-content>
 <mat-divider></mat-divider>
 <mat-dialog-actions align="end">

src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.spec.ts

@@ -6,7 +6,7 @@ import { PreviewComponentModule } from '../preview-component/preview-component.m
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { PreviewComponentComponent } from '../preview-component/preview-component.component';
 import { ProjectService } from '../../../services/projectService';
-import { Component } from '../../../common/Component';
+import { ComponentInfoService } from '../../../services/componentInfoService';
 
 describe('ComponentInfoDialogComponent', () => {
   let component: ComponentInfoDialogComponent;
@@ -16,14 +16,7 @@ describe('ComponentInfoDialogComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [ComponentInfoDialogComponent, PreviewComponentComponent],
       imports: [HttpClientTestingModule, MatDialogModule, MatDividerModule, PreviewComponentModule],
-      providers: [
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {
-            component: new Component({ id: 'abcde12345', type: 'OpenResponse' }, 'node1')
-          }
-        }
-      ]
+      providers: [ComponentInfoService, { provide: MAT_DIALOG_DATA, useValue: 'OpenResponse' }]
     }).compileComponents();
     fixture = TestBed.createComponent(ComponentInfoDialogComponent);
     const projectService = TestBed.inject(ProjectService);

src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts

@@ -1,11 +1,32 @@
 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentInfo } from '../../../components/ComponentInfo';
+import { ComponentFactory } from '../../../common/ComponentFactory';
 
 @Component({
   selector: 'component-info-dialog',
   templateUrl: './component-info-dialog.component.html',
   styleUrls: ['./component-info-dialog.component.scss']
 })
 export class ComponentInfoDialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) protected data: any) {}
+  protected component: any;
+  private componentInfo: ComponentInfo;
+  protected description: string;
+  protected label: string;
+
+  constructor(
+    private componentInfoService: ComponentInfoService,
+    @Inject(MAT_DIALOG_DATA) private componentType: string
+  ) {}
+
+  ngOnInit(): void {
+    this.componentInfo = this.componentInfoService.getInfo(this.componentType);
+    this.label = this.componentInfo.getLabel();
+    this.description = this.componentInfo.getDescription();
+    this.component = new ComponentFactory().getComponent(
+      this.componentInfo.getPreviewContent(),
+      'node1'
+    );
+  }
 }

src/assets/wise5/authoringTool/components/component-selector/component-selector.component.html

@@ -1,8 +1,4 @@
 <div class="component-div" fxLayoutAlign="space-between center">
-  <button mat-flat-button class="component-button" (click)="select()">
-    {{ label }}
-  </button>
-  <button mat-flat-button (click)="preview()">
-    <mat-icon>info</mat-icon>
-  </button>
+  <button mat-flat-button class="component-button" (click)="select()">{{ label }}</button>
+  <button mat-flat-button (click)="preview()"><mat-icon>info</mat-icon></button>
 </div>

src/assets/wise5/authoringTool/components/component-selector/component-selector.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { ComponentFactory } from '../../../common/ComponentFactory';
 import { MatDialog } from '@angular/material/dialog';
 import { ComponentInfoService } from '../../../services/componentInfoService';
 import { ComponentInfoDialogComponent } from '../component-info-dialog/component-info-dialog.component';
@@ -24,14 +23,7 @@ export class ComponentSelectorComponent {
 
   protected preview(): void {
     this.dialog.open(ComponentInfoDialogComponent, {
-      data: {
-        component: new ComponentFactory().getComponent(
-          this.componentInfo.getPreviewContent(),
-          'node1'
-        ),
-        description: this.componentInfo.getDescription(),
-        label: this.label
-      },
+      data: this.componentType,
       panelClass: 'dialog-lg'
     });
   }