feat(Authoring): Show component info button when adding a component

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.html

@@ -1,35 +1,20 @@
-<h2 mat-dialog-title class="mat-dialog-title" i18n>Add New Component</h2>
+<h2 mat-dialog-title i18n>Add New Component</h2>
 <mat-dialog-content>
-  <div layout="row" style="margin-left: 10px">
-    <div layout="row">
-      <h5 i18n>
-        Click the new component type you want to add, or
-        <button
-          mat-raised-button
-          color="primary"
-          (click)="goToImportComponent()"
-          arial-label="import components"
-        >
-          import component(s) from other units
-        </button>
-      </h5>
-    </div>
-  </div>
-  <div fxLayout="row wrap" fxLayoutAlign="start center">
-    <button
-      mat-stroked-button
-      *ngFor="let componentType of componentTypes"
-      class="mat-card component-type"
-      (click)="selectComponent(componentType.type)"
-    >
-      <mat-card-content>
-        <mat-card-title>
-          {{ componentType.name }}
-        </mat-card-title>
-      </mat-card-content>
+  <p fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="8px">
+    <span i18n>Select the component type you want to add or</span>
+    <button mat-raised-button color="primary" (click)="goToImportComponent()" i18n>
+      import from another unit
     </button>
+  </p>
+  <div fxLayout="row wrap" fxLayoutAlign="start center">
+    <ng-container *ngFor="let componentType of componentTypes">
+      <component-selector
+        [componentType]="componentType.type"
+        (componentSelectedEvent)="selectComponent(componentType.type)"
+      ></component-selector>
+    </ng-container>
   </div>
 </mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button color="primary" (click)="cancel()" aria-label="cancel" i18n>Cancel</button>
+<mat-dialog-actions fxLayoutAlign="end center">
+  <button mat-button color="primary" (click)="cancel()" i18n>Cancel</button>
 </mat-dialog-actions>

src/app/authoring-tool/add-component/choose-new-component/choose-new-component.component.scss

@@ -1,6 +1,3 @@
-.component-type {
-  margin: 8px;
-}
-.component-type--selected {
-  border-color:black;
+component-selector {
+  padding: 4px;
 }

src/app/teacher/authoring-tool.module.ts

@@ -52,6 +52,8 @@ import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringToo
 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';
 import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component';
+import { ComponentSelectorComponent } from '../../assets/wise5/authoringTool/components/component-selector/component-selector.component';
+import { ComponentInfoDialogComponent } from '../../assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component';
 
 @NgModule({
   declarations: [
@@ -75,6 +77,8 @@ import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTo
     ChooseNewNodeTemplate,
     ChooseMoveNodeLocationComponent,
     ChooseSimulationComponent,
+    ComponentInfoDialogComponent,
+    ComponentSelectorComponent,
     ConcurrentAuthorsMessageComponent,
     ConfigureAutomatedAssessmentComponent,
     InsertNodeAfterButtonComponent,

src/app/teacher/teacher-authoring.module.ts

@@ -31,11 +31,13 @@ import { TeacherNodeService } from '../../assets/wise5/services/teacherNodeServi
 import { MilestoneReportService } from '../../assets/wise5/services/milestoneReportService';
 import { AuthoringRoutingModule } from './authoring-routing.module';
 import { RouterModule } from '@angular/router';
+import { ComponentInfoService } from '../../assets/wise5/services/componentInfoService';
 
 @NgModule({
   imports: [StudentTeacherCommonModule, AuthoringToolModule, RouterModule, AuthoringRoutingModule],
   providers: [
     ClassroomStatusService,
+    ComponentInfoService,
     CopyNodesService,
     CopyProjectService,
     DataExportService,

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -8,7 +8,7 @@
   </mat-form-field>
   <h5 i18n>Select components to add to your new step (optional):</h5>
   <div fxLayout="column" fxLayout.gt-sm="row">
-    <div class="initial-components notice-bg-bg" fxFlex="100" fxFlex.gt-sm="33">
+    <div class="initial-components notice-bg-bg" fxFlex="100" fxFlex.gt-sm="25">
       <div *ngIf="initialComponents.length == 0" class="mat-small" i18n>No components added</div>
       <div
         class="component-list"
@@ -38,12 +38,13 @@ <h5 i18n>Select components to add to your new step (optional):</h5>
         </div>
       </div>
     </div>
-    <div fxFlex="100" fxFlex.gt-sm="67">
-      <div fxLayout="row wrap" fxLayoutAlign="start start">
+    <div fxFlex="100" fxFlex.gt-sm="75">
+      <div class="component-types" fxLayout="row wrap" fxLayoutAlign="start start">
         <div class="component-type" *ngFor="let componentType of componentTypes">
-          <button mat-stroked-button (click)="addComponent(componentType)">
-            {{ componentType.name }}
-          </button>
+          <component-selector
+            [componentType]="componentType.type"
+            (componentSelectedEvent)="addComponent(componentType)"
+          ></component-selector>
         </div>
       </div>
       <p class="info mat-small" i18n>

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.scss

@@ -29,6 +29,7 @@ $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
 .component-type {
+  width: 30%;
   padding: 4px;
 
   button {
@@ -54,3 +55,8 @@ $transform: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 .component-list.cdk-drop-list-dragging .component-list-item:not(.cdk-drag-placeholder) {
   transition: $transform;
 }
+
+.component-types {
+  overflow-y: scroll;
+  max-height: 50vh;
+}

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

@@ -0,0 +1,10 @@
+<h2 mat-dialog-title i18n>{{ label }}</h2>
+<mat-dialog-content>
+  <p>{{ description }}</p>
+  <mat-divider></mat-divider>
+  <h3 i18n>Example</h3>
+  <preview-component [component]="component"> </preview-component>
+</mat-dialog-content>
+<mat-dialog-actions fxLayoutAlign="end">
+  <button mat-button mat-dialog-close cdkFocusRegionstart i18n>Close</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,3 @@
+.example-label {
+  padding: 0 24px;
+}

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

@@ -0,0 +1,31 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentInfoDialogComponent } from './component-info-dialog.component';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { PreviewComponentModule } from '../preview-component/preview-component.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { PreviewComponentComponent } from '../preview-component/preview-component.component';
+import { ProjectService } from '../../../services/projectService';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+
+describe('ComponentInfoDialogComponent', () => {
+  let component: ComponentInfoDialogComponent;
+  let fixture: ComponentFixture<ComponentInfoDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ComponentInfoDialogComponent, PreviewComponentComponent],
+      imports: [HttpClientTestingModule, MatDialogModule, MatDividerModule, PreviewComponentModule],
+      providers: [ComponentInfoService, { provide: MAT_DIALOG_DATA, useValue: 'OpenResponse' }]
+    }).compileComponents();
+    fixture = TestBed.createComponent(ComponentInfoDialogComponent);
+    const projectService = TestBed.inject(ProjectService);
+    projectService.project = {};
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +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 {
+  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

@@ -0,0 +1,8 @@
+<mat-card appearance="outlined">
+  <div fxLayout="row" fxLayoutAlign="start center">
+    <button mat-button (click)="select()" i18n>{{ label }}</button>
+    <button mat-icon-button (click)="preview()" aria-label="Component type details" i18n-aria-label>
+      <mat-icon>info</mat-icon>
+    </button>
+  </div>
+</mat-card>

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

@@ -0,0 +1,3 @@
+mat-card {
+  padding: 0 8px;
+}

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

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentSelectorComponent } from './component-selector.component';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
+import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+
+describe('ComponentSelectorComponent', () => {
+  let component: ComponentSelectorComponent;
+  let fixture: ComponentFixture<ComponentSelectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ComponentSelectorComponent],
+      imports: [
+        HttpClientTestingModule,
+        MatCardModule,
+        MatDialogModule,
+        MatIconModule,
+        StudentTeacherCommonServicesModule
+      ],
+      providers: [ComponentInfoService, ComponentServiceLookupService]
+    }).compileComponents();
+    fixture = TestBed.createComponent(ComponentSelectorComponent);
+    component = fixture.componentInstance;
+    component.componentType = 'OpenResponse';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,34 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ComponentInfoService } from '../../../services/componentInfoService';
+import { ComponentInfoDialogComponent } from '../component-info-dialog/component-info-dialog.component';
+
+@Component({
+  selector: 'component-selector',
+  templateUrl: './component-selector.component.html',
+  styleUrls: ['./component-selector.component.scss']
+})
+export class ComponentSelectorComponent {
+  private componentInfo: any;
+  @Output() componentSelectedEvent: EventEmitter<void> = new EventEmitter<void>();
+  @Input() componentType: string;
+  protected label: string;
+
+  constructor(private componentInfoService: ComponentInfoService, private dialog: MatDialog) {}
+
+  ngOnInit(): void {
+    this.componentInfo = this.componentInfoService.getInfo(this.componentType);
+    this.label = this.componentInfo.getLabel();
+  }
+
+  protected preview(): void {
+    this.dialog.open(ComponentInfoDialogComponent, {
+      data: this.componentType,
+      panelClass: 'dialog-lg'
+    });
+  }
+
+  protected select(): void {
+    this.componentSelectedEvent.emit();
+  }
+}

src/assets/wise5/components/ComponentInfo.ts

@@ -0,0 +1,17 @@
+export abstract class ComponentInfo {
+  protected abstract description: string;
+  protected abstract label: string;
+  protected abstract previewContent: any;
+
+  getDescription(): string {
+    return this.description;
+  }
+
+  getLabel(): string {
+    return this.label;
+  }
+
+  getPreviewContent(): any {
+    return this.previewContent;
+  }
+}