Merge pull request #2393 from intersective/prerelease

Release 2.4.3.2

Author: shawnm0705

.editorconfig

@@ -1,5 +1,4 @@
-# https://editorconfig.org
-
+# Root EditorConfig file
 root = true
 
 [*]
@@ -10,6 +9,30 @@ end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 
+# TypeScript & JavaScript
+[*.ts,*.js]
+quote_type = single
+
+# JSON (e.g., package.json, tsconfig.json)
+[*.json]
+quote_type = double
+indent_size = 2
+
+# YAML files (e.g., CI/CD, Firebase configs)
+[*.yml,*.yaml]
+indent_size = 2
+
+# HTML, CSS, SCSS files
+[*.html,*.css,*.scss]
+indent_size = 2
+
+# Markdown (e.g., README.md)
 [*.md]
+max_line_length = off
 insert_final_newline = false
 trim_trailing_whitespace = false
+
+# Prettier & ESLint config files
+[*.prettierrc,*.eslintrc,*.editorconfig]
+indent_size = 2
+quote_type = double

projects/v3/src/app/components/activity/activity.component.html

@@ -3,13 +3,9 @@
     [appBackgroundImage]="leadImage"
     aria-live="polite"
     aria-labelledby="activity-name">
-    <h1 id="activity-name" *ngIf="activity.name" class="headline-2 activity-info">
-      {{ activity.name }}
-    </h1>
+    <h1 id="activity-name" *ngIf="activity.name" class="headline-2 activity-info" [innerHtml]="activity.name"></h1>
     <ion-skeleton-text *ngIf="!activity.name" animated style="width: 50%;" aria-hidden="true"></ion-skeleton-text>
-
     <ion-skeleton-text *ngIf="!activity.tasks" animated style="width: 30px;"  aria-hidden="true"></ion-skeleton-text>
-
     <div class="overlay"></div>
   </div>
 
@@ -66,5 +62,3 @@ <h1 id="activity-name" *ngIf="activity.name" class="headline-2 activity-info">
     <ion-skeleton-text animated style="width: 90%"></ion-skeleton-text>
   </div>
 </ng-template>
-
-

projects/v3/src/app/components/assessment/assessment.component.html

@@ -1,7 +1,8 @@
+
 <div *ngIf="!assessment" class="ion-padding-horizontal">
   <ion-skeleton-text animated style="width: 50%;"></ion-skeleton-text>
-  <ion-skeleton-text animated ></ion-skeleton-text>
-  <ion-skeleton-text animated ></ion-skeleton-text>
+  <ion-skeleton-text animated></ion-skeleton-text>
+  <ion-skeleton-text animated></ion-skeleton-text>
 </div>
 
 <!-- Manual Save -->
@@ -19,7 +20,7 @@
         <ion-grid class="ion-padding-horizontal">
           <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
             <ion-col size="6" class="ion-align-self-center" i18n>Expert</ion-col>
-            <ion-col size="6" class="ion-align-self-center">{{ submission.reviewerName }}</ion-col>
+            <ion-col size="6" class="ion-align-self-center" [innerHTML]="submission.reviewerName"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
@@ -38,7 +39,8 @@
         <ion-grid class="ion-padding-horizontal">
           <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
             <ion-col size="6" class="ion-align-self-center" i18n>Learner</ion-col>
-            <ion-col size="6" class="ion-align-self-center">{{ submission.submitterName }}</ion-col>
+            <ion-col size="6" class="ion-align-self-center"
+            [innerHTML]="submission.submitterName"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
@@ -47,7 +49,8 @@
         <ion-grid class="ion-padding-horizontal">
           <ion-row size="12" class="ion-justify-content-center ion-align-items-center">
             <ion-col size="6" class="ion-align-self-center" i18n>Team</ion-col>
-            <ion-col size="6" class="ion-align-self-center">{{ review.teamName }}</ion-col>
+            <ion-col size="6" class="ion-align-self-center"
+            [innerHTML]="review.teamName"></ion-col>
           </ion-row>
         </ion-grid>
       </ion-item>
@@ -61,10 +64,13 @@
     <div [ngClass]="{'ion-padding-horizontal padding-top': isMobile}">
       <div class="headline-2 assessment-title"
         [attr.aria-describedby]="randomCode(assessment.name)"
-        role="heading" aria-level="2">{{ assessment.name }}</div>
+        role="heading"
+        aria-level="2"
+        [innerHTML]="assessment.name"
+      ></div>
 
       <ion-chip [class]="'label body-3 '+ labelColor" *ngIf="label">
-        <ion-label>{{ label }}</ion-label>
+        <ion-label [innerHTML]="label"></ion-label>
       </ion-chip>
 
       <p class="assessment subtitle-1 due-date" *ngIf="assessment.dueDate" style="margin: 10px 0;">
@@ -87,7 +93,7 @@
           </ion-avatar>
 
           <ion-label>
-            <p class="subtitle-1" i18n="indicator of a team member is working on the same assessment">Locked by {{ submission.submitterName }}</p>
+            <p class="subtitle-1" i18n="indicator of a team member is working on the same assessment">Locked by <span [innerHTML]="submission.submitterName"></span></p>
             <p class="caption gray-2" i18n>Please wait until the user finishes editing</p>
           </ion-label>
         </ion-item>
@@ -97,7 +103,7 @@
     <form [formGroup]="questionsForm" id="formgroup" #form>
       <ng-container *ngFor="let group of assessment.groups">
         <div [ngClass]="{'ion-padding': isMobile, 'ion-padding-top': !isMobile}">
-          <h3 [attr.aria-describedby]="randomCode(group.name)">{{ group.name }}</h3>
+          <h3 [attr.aria-describedby]="randomCode(group.name)" [innerHTML]="group.name"></h3>
           <ion-text color="dark" class="ion-text-left">
             <div
               *ngIf="group.description"
@@ -115,7 +121,7 @@ <h3 [attr.aria-describedby]="randomCode(group.name)">{{ group.name }}</h3>
               [attr.aria-label]="question.name"
               [attr.aria-describedby]="randomCode('reviewer-' + question.name)">
               <ion-label class="ion-margin-vertical">
-                {{ question.name }}
+                <span [innerHTML]="question.name"></span>
                 <span class="required-mark"
                   [ngClass]="{'contrast': isRedColor}"
                   *ngIf="question.isRequired"

projects/v3/src/app/components/description/description.component.html

@@ -6,15 +6,15 @@
     </ng-container>
     <ng-template #animated>
       <div id="{{name}}" #description [innerHtml]="content"
-      [ngClass]="{
-        'limit-height': isTruncating && !isInPopup,
-        'limit-height-popup': isTruncating && isInPopup,
-        'full-height-animated': !isTruncating && !isInPopup,
-        'full-height-popup': !isTruncating && isInPopup
-      }"
-      style="overflow-wrap: anywhere;">
-    </div>
-  </ng-template>
+        [ngClass]="{
+          'limit-height': isTruncating && !isInPopup,
+          'limit-height-popup': isTruncating && isInPopup,
+          'full-height-animated': !isTruncating && !isInPopup,
+          'full-height-popup': !isTruncating && isInPopup
+        }"
+        style="overflow-wrap: anywhere;">
+      </div>
+    </ng-template>
   </div>
 
   <ng-container *ngIf="isTruncating && heightExceeded">

projects/v3/src/app/components/fast-feedback/fast-feedback.component.html

@@ -20,10 +20,10 @@
         [ngClass]="{'ion-padding-horizontal': !isMobile }"
         [formGroup]="fastFeedbackForm">
         <ion-list-header class="question-title">
-          {{ question.name }}
+          <span [innerHTML]="question.name"></span>
           <ion-text class="required-mark" [ngClass]="{'contrast': isRedColor}" *ngIf="question.isRequired">*</ion-text>
           <ion-text>
-            <p><i>{{ question.description }}</i></p>
+            <p><i [innerHTML]="question.description"></i></p>
           </ion-text>
         </ion-list-header>
 
@@ -32,7 +32,7 @@
             *ngFor="let choice of question.choices"
             lines="none"
           >
-            <ion-label class="white-space-normal">{{ choice.name }}</ion-label>
+            <ion-label class="white-space-normal" [innerHTML]="choice.name"></ion-label>
             <ion-radio [value]="choice.id" slot="start" mode="md"></ion-radio>
           </ion-item>
         </ion-radio-group>

projects/v3/src/app/components/fast-feedback/fast-feedback.component.ts

@@ -74,12 +74,18 @@ export class FastFeedbackComponent implements OnInit {
       targetUserId: null,
     };
 
-    // if team_id exist, pass team_id
-    if (this.meta?.team_id) {
-      params.teamId = this.meta?.team_id;
-    } else if (this.meta?.target_user_id) {
-      // otherwise, pass target_user_id
-      params.targetUserId = this.meta?.target_user_id;
+
+    // for temporary, "closable = true" is an indicator of this pulsecheck is opened from the traffic light group (self-assessment)
+    if (this.closable === true) {
+      params.teamId = this.storage.getUser().teamId;
+    } else {
+      // if team_id exist, pass team_id
+      if (this.meta?.team_id) {
+        params.teamId = this.meta?.team_id;
+      } else if (this.meta?.target_user_id) {
+        // otherwise, pass target_user_id
+        params.targetUserId = this.meta?.target_user_id;
+      }
     }
 
     let submissionResult;

projects/v3/src/app/components/list-item/list-item.component.html

@@ -31,7 +31,7 @@
     <div class="item-content ion-padding-vertical"
       [ngClass]="{'event-item': isEventItem, 'content-expired': eventExpired}">
       <div *ngIf="isEventItem" style="display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center;">
-        <div class="'item-title body-2 ion-color-' + titleColor">{{ title }}</div>
+        <div class="'item-title body-2 ion-color-' + titleColor" [innerHTML]="title"></div>
         &nbsp; <!-- this is to add some space between two elements -->
         <span style="white-space: nowrap;"
           class="item-title subtitle-3"
@@ -42,17 +42,19 @@
       <div *ngIf="!isEventItem"
         [class]="'body-2 ' + titleColor"
         [attr.aria-label]="title"
-      >{{ title }}</div>
+        [innerHTML]="title"
+      ></div>
 
       <div *ngIf="subtitle1"
         [class]="'item-subtitle-1 subtitle-2 ion-color-' + subtitle1Color"
         [innerHTML]="subtitle1"
         [attr.aria-label]="subtitle1"
       ></div>
 
-      <div *ngIf="subtitle2" [class]="'item-subtitle-2 caption ion-color-' + subtitle2Color" [attr.aria-label]="subtitle2">
-        {{ subtitle2 }}
-      </div>
+      <div *ngIf="subtitle2" [class]="'item-subtitle-2 caption ion-color-' + subtitle2Color"
+        [attr.aria-label]="subtitle2"
+        [innerHTML]="subtitle2"
+      ></div>
 
       <div *ngIf="callToActionBtn"
         [class]="'call-to-action ion-color-' + callToActionBtn.color"
@@ -68,7 +70,7 @@
 
       <div *ngIf="label" [attr.aria-label]="label">
         <ion-chip [class]="'label ion-no-margin ' + labelColor">
-          <ion-label class="body-3">{{ label }}</ion-label>
+          <ion-label class="body-3" [innerHTML]="label"></ion-label>
         </ion-chip>
       </div>
     </div>
@@ -78,7 +80,8 @@
       [color]="endingTextColor"
       slot="end"
       [attr.aria-label]="endingText"
-    >{{ endingText }}</ion-text>
+      [innerHTML]="endingText"
+    ></ion-text>
 
     <ion-icon *ngIf="endingIcon"
       [name]="endingIcon"

projects/v3/src/app/components/lock-team-assessment-pop-up/lock-team-assessment-pop-up.component.html

@@ -9,7 +9,7 @@
   <div class="details-container">
     <div class="div-after-img">
       <div class="description body-1" *ngIf="name">
-        <b>{{ name }}</b> <span class="gray-2" i18n>is currently edting this team submission. Click on</span> <b i18n>'View Read Only'</b> <span class="gray-2" i18n>to open in read only mode</span>.
+        <b [innerHTML]="name"></b> <span class="gray-2" i18n>is currently editing this team submission. Click on</span> <b i18n>'View Read Only'</b> <span class="gray-2" i18n>to open in read only mode</span>.
       </div>
     </div>
 

projects/v3/src/app/components/multi-team-member-selector/multi-team-member-selector.component.html

@@ -4,7 +4,7 @@ <h3 class="for-accessibility" [id]="'multi-team-member-selector-question-' + que
     <ng-container *ngFor="let teamMember of question.teamMembers;let i = index">
       <ion-item class="item-bottom-border" lines="none">
         <ion-label>
-          {{ teamMember.userName }}
+          <span [innerHTML]="teamMember.userName"></span>
           <ion-chip *ngIf="submission?.answer?.includes(teamMember.key)" class="label orange" i18n>Learner's answer</ion-chip>
           <ion-chip *ngIf="review?.answer?.includes(teamMember.key)" class="label yellow black" i18n>Expert's answer</ion-chip>
         </ion-label>
@@ -31,7 +31,7 @@ <h3 class="for-accessibility" [id]="'multi-team-member-selector-question-' + que
       lines="none"
       *ngFor="let teamMember of question.teamMembers;let i = index"
       [ngClass]="{'item-bottom-border': i !== question.teamMembers.length - 1}">
-      <ion-label class="white-space-normal body-2 black">{{ teamMember.userName }}</ion-label>
+      <ion-label class="white-space-normal body-2 black" [innerHTML]="teamMember.userName"></ion-label>
       <ion-checkbox
         [attr.aria-label]="teamMember.userName"
         color="success"
@@ -56,7 +56,7 @@ <h3 class="for-accessibility" [id]="'multi-team-member-selector-question-' + que
       *ngFor="let teamMember of question.teamMembers;let i = index"
       [ngClass]="{'item-bottom-border': i !== question.teamMembers.length - 1 }">
       <ion-label class="white-space-normal body-2 black">
-        {{ teamMember.userName }}
+        <span [innerHTML]="teamMember.userName"></span>
         <p *ngIf="submission?.answer?.includes(teamMember.key)">
           <ion-chip class="label orange" i18n>Learner's answer</ion-chip>
         </p>

projects/v3/src/app/components/multiple/multiple.component.html

@@ -5,7 +5,7 @@ <h3 class="for-accessibility" [id]="'multiple-choice-question-' + question.id">{
       <ion-item lines="none"
         [ngClass]="{'item-bottom-border': !(choice.explanation && choice.explanation.changingThisBreaksApplicationSecurity && submission?.answer?.includes(choice.id))}">
         <ion-label class="ion-text-wrap body-2 gray-3">
-          <div class="answer-text" [ngClass]="{'explanation': submission?.answer?.includes(choice.id) || review?.answer?.includes(choice.id)}">{{ choice.name }}</div>
+          <div class="answer-text" [ngClass]="{'explanation': submission?.answer?.includes(choice.id) || review?.answer?.includes(choice.id)}" [innerHTML]="choice.name"></div>
           <ion-chip i18n
             class="label orange"
             *ngIf="submission?.answer?.includes(choice.id)"
@@ -44,7 +44,7 @@ <h3 class="for-accessibility" [id]="'multiple-choice-question-' + question.id">{
       <ng-container *ngFor="let choice of question.choices; let i = index">
         <ion-item [ngClass]="{'item-bottom-border': (i !== question.choices.length - 1 || !checkInnerValue(choice.id))}"
           lines='none'>
-          <ion-label class="ion-text-wrap body-2 black">{{ choice.name }}</ion-label>
+          <ion-label class="ion-text-wrap body-2 black" [innerHTML]="choice.name"></ion-label>
           <ion-checkbox color="success"
             [checked]="submission.answer ? submission.answer.includes(choice.id) : false"
             [value]="choice.id"
@@ -79,7 +79,7 @@ <h3 class="for-accessibility" [id]="'multiple-choice-question-' + question.id">{
       [ngClass]="{'item-bottom-border': i !== question.choices.length - 1}"
       lines="none">
       <ion-label class="ion-text-wrap body-2 black">
-        {{ choice.name }}
+        <span [innerHTML]="choice.name"></span>
         <p *ngIf="submission?.answer?.includes(choice.id)">
           <ion-chip class="label orange" i18n
             *ngIf="submission?.answer?.includes(choice.id)"