feat(Activity Icons): Show activity icons in authoring and teacher tools

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

@@ -16,6 +16,6 @@ <h2 mat-dialog-title i18n>Add New Activity</h2>
     }
   </div>
 </mat-dialog-content>
-<mat-dialog-actions class="flex justify-end items-center">
+<mat-dialog-actions align="end">
   <button mat-button color="primary" (click)="cancel()" i18n>Cancel</button>
 </mat-dialog-actions>

src/app/authoring-tool/component-type-group/component-type-group.component.html

@@ -4,7 +4,7 @@
   </mat-card-header>
   <mat-card-content>
     <div class="@container">
-      <div class="grid @sm:grid-cols-2 gap-2">
+      <div class="grid @md:grid-cols-2 gap-1">
         @for (componentType of componentGroup.types; track componentType.type) {
           <component-type-button
             [componentType]="componentType.type"

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

@@ -1,7 +1,7 @@
-<div class="flex justify-start items-center">
+<div class="flex justify-between items-center">
   <h2 mat-dialog-title i18n>Activity Info</h2>
-  <div class="flex grow"></div>
   <component-type-selector
+    class="px-2"
     [componentType]="componentType"
     (componentTypeSelectedEvent)="displayComponent($event)"
   />

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

@@ -20,7 +20,6 @@ import { MatDividerModule } from '@angular/material/divider';
     MatTabsModule,
     PreviewComponentComponent
   ],
-  styleUrl: './component-info-dialog.component.scss',
   templateUrl: './component-info-dialog.component.html'
 })
 export class ComponentInfoDialogComponent {

src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html

@@ -2,15 +2,10 @@
   <div class="flex justify-start items-center">
     <button mat-button (click)="componentSelectedEvent.emit()" class="select-button">
       {{ label }}
+      <mat-icon>{{ icon }}</mat-icon>
     </button>
-    <button
-      mat-icon-button
-      (click)="preview()"
-      matTooltip="More Info"
-      matTooltipPosition="above"
-      i18n-matTooltip
-    >
-      <mat-icon>info</mat-icon>
+    <button mat-icon-button (click)="preview()" title="More info" i18n-title>
+      <mat-icon>info_outline</mat-icon>
     </button>
   </div>
 </mat-card>

src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss

@@ -7,5 +7,5 @@ mat-card {
   justify-content: flex-start;
   text-transform: capitalize;
   text-align: start;
-  padding: 0 8px;
+  padding: 0 8px !important;
 }

src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts

@@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 export class ComponentTypeButtonComponent {
   @Output() componentSelectedEvent: EventEmitter<void> = new EventEmitter<void>();
   @Input() componentType: string;
+  protected icon: string;
   protected label: string;
 
   constructor(
@@ -24,6 +25,7 @@ export class ComponentTypeButtonComponent {
   ) {}
 
   ngOnInit(): void {
+    this.icon = this.componentInfoService.getInfo(this.componentType).getIcon();
     this.label = this.componentInfoService.getInfo(this.componentType).getLabel();
   }
 

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

@@ -10,8 +10,21 @@
   </button>
   <mat-form-field [subscriptSizing]="'dynamic'">
     <mat-select [(value)]="componentType" (selectionChange)="selectComponent(componentType)">
-      @for (componentTypeOption of componentTypes; track componentTypeOption.type) {
-        <mat-option [value]="componentTypeOption.type">{{ componentTypeOption.name }}</mat-option>
+      <mat-select-trigger>
+        <div class="flex items-center gap-2">
+          <mat-icon class="mat-18">{{ selectedComponentTypeOption?.icon }}</mat-icon>
+          {{ selectedComponentTypeOption?.name }}
+        </div>
+      </mat-select-trigger>
+      @for (group of componentGroups; track group.name) {
+        <mat-optgroup [label]="group.name">
+          @for (componentTypeOption of group.types; track componentTypeOption.type) {
+            <mat-option [value]="componentTypeOption.type">
+              <mat-icon class="mat-18">{{ componentTypeOption.icon }}</mat-icon>
+              {{ componentTypeOption.name }}
+            </mat-option>
+          }
+        </mat-optgroup>
       }
     </mat-select>
   </mat-form-field>

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

@@ -25,27 +25,127 @@ describe('ComponentTypeSelectorComponent', () => {
     });
     fixture = TestBed.createComponent(ComponentTypeSelectorComponent);
     const componentTypeService = TestBed.inject(ComponentTypeService);
-    spyOn(componentTypeService, 'getComponentTypes').and.returnValue([
-      { type: 'AiChat', name: 'AI Chat' },
-      { type: 'Animation', name: 'Animation' },
-      { type: 'AudioOscillator', name: 'Audio Oscillator' },
-      { type: 'ConceptMap', name: 'Concept Map' },
-      { type: 'DialogGuidance', name: 'Dialog Guidance' },
-      { type: 'Discussion', name: 'Discussion' },
-      { type: 'Draw', name: 'Draw' },
-      { type: 'Embedded', name: 'Embedded' },
-      { type: 'Graph', name: 'Graph' },
-      { type: 'Label', name: 'Label' },
-      { type: 'Match', name: 'Match' },
-      { type: 'MultipleChoice', name: 'Multiple Choice' },
-      { type: 'OpenResponse', name: 'Open Response' },
-      { type: 'OutsideURL', name: 'Outside URL' },
-      { type: 'PeerChat', name: 'Peer Chat' },
-      { type: 'HTML', name: 'HTML' },
-      { type: 'ShowGroupWork', name: 'Show Group Work' },
-      { type: 'ShowMyWork', name: 'Show My Work' },
-      { type: 'Summary', name: 'Summary' },
-      { type: 'Table', name: 'Table' }
+    spyOn(componentTypeService, 'getComponentGroups').and.returnValue([
+      {
+        name: 'View Information',
+        types: [
+          {
+            type: 'HTML',
+            name: 'Display Content',
+            icon: 'newspaper'
+          },
+          {
+            type: 'ShowMyWork',
+            name: 'Show Student Work',
+            icon: 'assignment'
+          },
+          {
+            type: 'Summary',
+            name: 'Summary Graph',
+            icon: 'pie_chart'
+          }
+        ]
+      },
+      {
+        name: 'Explain and Assess',
+        types: [
+          {
+            type: 'ConceptMap',
+            name: 'Concept Map',
+            icon: 'account_tree'
+          },
+          {
+            type: 'Draw',
+            name: 'Draw',
+            icon: 'draw'
+          },
+          {
+            type: 'Label',
+            name: 'Label',
+            icon: 'sticky_note_2'
+          },
+          {
+            type: 'MultipleChoice',
+            name: 'Multiple Choice',
+            icon: 'ballot'
+          },
+          {
+            type: 'OpenResponse',
+            name: 'Open Response',
+            icon: 'edit_note'
+          },
+          {
+            type: 'Match',
+            name: 'Sort',
+            icon: 'category'
+          }
+        ]
+      },
+      {
+        name: 'Experiment, Discover, Distinguish',
+        types: [
+          {
+            type: 'AiChat',
+            name: 'AI Chat',
+            icon: 'assistant'
+          },
+          {
+            type: 'Animation',
+            name: 'Animation',
+            icon: 'animation'
+          },
+          {
+            type: 'AudioOscillator',
+            name: 'Audio Oscillator',
+            icon: 'waves'
+          },
+          {
+            type: 'Embedded',
+            name: 'Custom',
+            icon: 'handyman'
+          },
+          {
+            type: 'Graph',
+            name: 'Graph',
+            icon: 'bar_chart'
+          },
+          {
+            type: 'OutsideURL',
+            name: 'Outside Resource',
+            icon: 'web'
+          },
+          {
+            type: 'Table',
+            name: 'Table',
+            icon: 'table_chart'
+          }
+        ]
+      },
+      {
+        name: 'Collaborate',
+        types: [
+          {
+            type: 'DialogGuidance',
+            name: 'Dialog',
+            icon: 'chat'
+          },
+          {
+            type: 'Discussion',
+            name: 'Discussion',
+            icon: 'forum'
+          },
+          {
+            type: 'PeerChat',
+            name: 'Peer Chat',
+            icon: 'people'
+          },
+          {
+            type: 'ShowGroupWork',
+            name: 'Show Group Work',
+            icon: 'co_present'
+          }
+        ]
+      }
     ]);
 
     configService = TestBed.inject(ConfigService);
@@ -81,7 +181,7 @@ function goToNextComponent() {
     it('changes to the next component type', async () => {
       expect(component.componentType).toEqual('OpenResponse');
       await (await componentTypeSelectorHarness.getNextComponentTypeButton()).click();
-      expect(component.componentType).toEqual('OutsideURL');
+      expect(component.componentType).toEqual('Match');
     });
   });
 }
@@ -92,9 +192,9 @@ function selectComponent() {
       await (
         await componentTypeSelectorHarness.getComponentTypeSelect()
       ).clickOptions({
-        text: 'AI Chat'
+        text: 'Display Content'
       });
-      expect(component.componentType).toEqual('AiChat');
+      expect(component.componentType).toEqual('HTML');
       expect(
         await (await componentTypeSelectorHarness.getPreviousComponentTypeButton()).isDisabled()
       ).toBeTrue();
@@ -105,9 +205,9 @@ function selectComponent() {
       await (
         await componentTypeSelectorHarness.getComponentTypeSelect()
       ).clickOptions({
-        text: 'Table'
+        text: 'Show Group Work'
       });
-      expect(component.componentType).toEqual('Table');
+      expect(component.componentType).toEqual('ShowGroupWork');
       expect(
         await (await componentTypeSelectorHarness.getNextComponentTypeButton()).isDisabled()
       ).toBeTrue();

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

@@ -12,21 +12,25 @@ import { MatIconModule } from '@angular/material/icon';
 })
 export class ComponentTypeSelectorComponent {
   @Input() componentType: string;
-  protected componentTypes: any[];
+  protected componentGroups: any[];
+  private componentTypes: any[];
+  protected selectedComponentTypeOption: any;
   @Output() componentTypeSelectedEvent: EventEmitter<string> = new EventEmitter<string>();
   protected firstComponent: boolean;
   protected lastComponent: boolean;
 
   constructor(private componentTypeService: ComponentTypeService) {}
 
   ngOnInit(): void {
-    this.componentTypes = this.componentTypeService.getComponentTypes();
+    this.componentGroups = this.componentTypeService.getComponentGroups();
+    this.componentTypes = this.componentGroups.flatMap((group) => group.types);
     this.selectComponent(this.componentType);
   }
 
   protected selectComponent(componentType: string): void {
     this.componentType = componentType;
     const index = this.getComponentIndex(this.componentType);
+    this.selectedComponentTypeOption = this.componentTypes[index];
     this.firstComponent = index === 0;
     this.lastComponent = index === this.componentTypes.length - 1;
     this.componentTypeSelectedEvent.emit(this.componentType);
@@ -41,6 +45,6 @@ export class ComponentTypeSelectorComponent {
   }
 
   private getComponentIndex(componentType: string): number {
-    return this.componentTypes.findIndex((type) => type.type === componentType);
+    return this.componentTypes?.findIndex((type) => type?.type === componentType) ?? -1;
   }
 }

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

@@ -3,12 +3,13 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
 import { EditComponentComponent } from '../edit-component/edit-component.component';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
-import { ComponentTypeService } from '../../../services/componentTypeService';
+import { MatIconModule } from '@angular/material/icon';
 import { MatSlideToggle } from '@angular/material/slide-toggle';
 import { FormsModule } from '@angular/forms';
 import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { ComponentInfoService } from '../../../services/componentInfoService';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -19,11 +20,15 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
     MatButtonModule,
     MatDialogModule,
     MatDividerModule,
+    MatIconModule,
     MatSlideToggle
   ],
   template: `
-    <div class="flex items-center justify-between pe-4">
-      <h2 mat-dialog-title i18n>Edit: {{ componentIndex }}. {{ componentTypeLabel }}</h2>
+    <div class="flex items-center justify-between p-4">
+      <h2 class="flex items-center gap-1 !m-0">
+        <span i18n>Edit: {{ componentIndex }}. {{ componentTypeLabel }}</span>
+        <mat-icon>{{ componentTypeIcon }}</mat-icon>
+      </h2>
       <mat-slide-toggle color="primary" [(ngModel)]="advancedMode" i18n>Advanced</mat-slide-toggle>
     </div>
     <mat-divider class="!m-0" />
@@ -74,10 +79,11 @@ export class EditComponentDialogComponent {
   protected advancedMode = false;
   protected component: WISEComponent;
   protected componentIndex: number;
+  protected componentTypeIcon: string;
   protected componentTypeLabel: string;
 
   constructor(
-    private componentTypeService: ComponentTypeService,
+    private componentInfoService: ComponentInfoService,
     @Inject(MAT_DIALOG_DATA) public data: any,
     private projectService: TeacherProjectService
   ) {
@@ -86,8 +92,11 @@ export class EditComponentDialogComponent {
       this.projectService
         .getNode(this.data.nodeId)
         .getComponentIndex(this.data.componentContent.id) + 1;
-    this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel(
-      this.data.componentContent.type
-    );
+    this.componentTypeIcon = this.componentInfoService
+      .getInfo(this.data.componentContent.type)
+      .getIcon();
+    this.componentTypeLabel = this.componentInfoService
+      .getInfo(this.data.componentContent.type)
+      .getLabel();
   }
 }