feat(Unit Library): Add info about unit types (#2179)

Author: breity

src/app/modules/library/library-filters/library-filters.component.html

@@ -35,11 +35,12 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
   >
     @if (unitTypeOptions.length > 0) {
       <div
-        class="library-filter"
+        class="library-filter flex items-center gap-1"
         [ngClass]="{ 'md:w-full': isSplitScreen, 'md:w-1/4': !isSplitScreen }"
       >
         <app-select-menu
           id="unitTypeSelectMenu"
+          class="w-full"
           [options]="unitTypeOptions"
           i18n-placeholderText
           placeholderText="Type"
@@ -49,6 +50,9 @@ <h3 class="mat-subtitle-2" i18n>Filters</h3>
           [viewValueProp]="'name'"
           [multiple]="true"
         />
+        <a tabindex="0" (click)="showTypeInfo()" (keyup.enter)="showTypeInfo()">
+          <mat-icon aria-label="Type filter explanation" i18n-aria-label>info</mat-icon>
+        </a>
       </div>
     }
     @if (disciplineOptions.length > 0) {

src/app/modules/library/library-filters/library-filters.component.scss

@@ -29,3 +29,7 @@ h3 {
 .library-filter {
   margin: 0;
 }
+
+a {
+  cursor: pointer;
+}

src/app/modules/library/library-filters/library-filters.component.ts

@@ -14,6 +14,8 @@ import { SelectMenuComponent } from '../../shared/select-menu/select-menu.compon
 import { StandardsSelectMenuComponent } from '../../shared/standards-select-menu/standards-select-menu.component';
 import { Feature } from '../Feature';
 import { Grade, GradeLevel } from '../GradeLevel';
+import { MatDialog } from '@angular/material/dialog';
+import { DialogWithCloseComponent } from '../../../../assets/wise5/directives/dialog-with-close/dialog-with-close.component';
 
 @Component({
   imports: [
@@ -48,6 +50,7 @@ export class LibraryFiltersComponent {
   ];
 
   constructor(
+    private dialog: MatDialog,
     protected filterValues: ProjectFilterValues,
     private libraryService: LibraryService,
     private utilService: UtilService
@@ -177,4 +180,18 @@ export class LibraryFiltersComponent {
     this.filterValues.clear();
     this.emitFilterValues();
   }
+
+  protected showTypeInfo(): void {
+    const message = $localize`"Type" indicates the platform on which a unit runs. "WISE Platform" units are created 
+      using the WISE authoring tool. Students use WISE accounts to complete lessons and teachers can review and grade 
+      work on the WISE platform. "Other" units are created using different platforms. Resources for these units 
+      are linked in the unit details.`;
+    this.dialog.open(DialogWithCloseComponent, {
+      data: {
+        content: message,
+        title: $localize`Unit Type`
+      },
+      panelClass: 'dialog-sm'
+    });
+  }
 }

src/app/modules/library/library-project-details/library-project-details.component.html

@@ -68,6 +68,12 @@
           >
         </p>
       }
+      @if (project.metadata.unitType !== 'Platform') {
+        <p class="notice max-w-none" i18n>
+          Note: This unit was created outside of the WISE platform. Teaching resources are linked
+          below.
+        </p>
+      }
       @if (project.metadata.resources?.length > 0) {
         <p>
           <strong i18n>Resources:</strong>
@@ -210,7 +216,12 @@
   }
   @if (canPreview) {
     <button mat-flat-button color="primary" (click)="previewProject()">
-      <mat-icon>preview</mat-icon>&nbsp;<ng-container i18n>Preview</ng-container>
+      <mat-icon>preview</mat-icon>
+      @if (project.metadata.unitType === 'Platform') {
+        <ng-container i18n>Preview</ng-container>
+      } @else {
+        <ng-container i18n>Unit Resources</ng-container>
+      }
     </button>
   }
 </div>