From 4bba773a596af41e82920b80c47ecc8c1b9a9cbd Mon Sep 17 00:00:00 2001
From: Jason Qiu <jason_qiu@hotmail.com>
Date: Thu, 23 Mar 2023 23:23:19 +0800
Subject: [PATCH] [#12081] Modify question headers for instructor  (#12228)

* Modify question headers in instructor edit sessions page

* Fix tests

* Fix e2e tests
---
 .../InstructorFeedbackEditPage.java           |   3 +-
 .../question-edit-form.component.spec.ts.snap |  29 ++--
 .../question-edit-form.component.html         |  20 +--
 .../question-edit-form.component.scss         |   5 +
 .../visibility-panel.component.html           |   2 +-
 ...r-session-edit-page.component.spec.ts.snap | 139 +++++++++++-------
 6 files changed, 124 insertions(+), 74 deletions(-)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
index 5761bbe5e39..4ada9f7d5a0 100644
--- a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
+++ b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackEditPage.java
@@ -972,8 +972,7 @@ private WebElement getQuestionForm(int questionNum) {
     }
 
     private FeedbackQuestionType getQuestionType(int questionNum) {
-        String questionDetails = getQuestionForm(questionNum).findElement(By.id("question-header")).getText();
-        String questionType = questionDetails.split(" \\d+ ")[1].trim();
+        String questionType = getQuestionForm(questionNum).findElement(By.id("question-type")).getText().trim();
 
         switch (questionType) {
         case "Essay question":
diff --git a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
index 0ea572bda1e..9df6a672596 100644
--- a/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
+++ b/src/web/app/components/question-edit-form/__snapshots__/question-edit-form.component.spec.ts.snap
@@ -32,8 +32,8 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
     class="card"
     id="question-form-0"
   >
-    <div
-      class="card-header bg-primary text-white cursor-pointer"
+    <button
+      class="card-header bg-primary text-white cursor-pointer border-0"
     >
       <div
         class="collapse-caret"
@@ -49,17 +49,28 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
         </tm-panel-chevron>
       </div>
       <div
+        class="d-flex flex-column text-start"
         id="question-header"
       >
-        <strong>
-          Question 
+        <div
+          class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
+        >
+          <h2
+            class="question-number fw-bold me-1"
+          >
+            Question 
+            <span
+              id="question-number"
+            >
+              0
+            </span>
+          </h2>
           <span
-            id="question-number"
+            id="question-type"
           >
-            0
+            Essay question
           </span>
-        </strong>
-         Essay question 
+        </div>
       </div>
       <div
         class="card-header-btn-toolbar"
@@ -99,7 +110,7 @@ exports[`QuestionEditFormComponent should snap with default view 1`] = `
           </button>
         </div>
       </div>
-    </div>
+    </button>
     <div
       class="ng-trigger ng-trigger-collapseAnim"
       style=""
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.html b/src/web/app/components/question-edit-form/question-edit-form.component.html
index aaa5ca76b9a..0f1e5e2e8c6 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.html
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.html
@@ -1,16 +1,18 @@
 <div id="question-form-{{ model.questionNumber }}" class="card">
-  <div class="card-header bg-primary text-white cursor-pointer" (click)="triggerModelChange('isCollapsed', !model.isCollapsed)">
+  <button class="card-header bg-primary text-white cursor-pointer border-0" (click)="triggerModelChange('isCollapsed', !model.isCollapsed)">
     <div class="collapse-caret">
       <tm-panel-chevron [isExpanded]="!model.isCollapsed"></tm-panel-chevron>
     </div>
-    <div id="question-header">
-      <strong>Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}</span></strong>
-      <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
-        <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
-      </select>
-      {{ model.questionType | questionTypeName }}
+    <div id="question-header" class="d-flex flex-column text-start">
+      <div class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start">
+        <h2 class="question-number fw-bold me-1">Question <span id="question-number" *ngIf="!model.isEditable">{{ model.questionNumber }}</span>
+          <select id="question-number-dropdown" class="form-control form-select question-number-select" [ngModel]="model.questionNumber" (ngModelChange)="triggerModelChange('questionNumber', $event)" *ngIf="model.isEditable" (click)="$event.stopPropagation()">
+            <option *ngFor="let i of range(numOfQuestions)" [ngValue]="i + 1">{{ i + 1 }}</option>
+          </select>
+        </h2>
+      <span id="question-type">{{ model.questionType | questionTypeName }}</span>
+      </div>
       <ng-container *ngIf="model.isCollapsed">
-        <br>
         <div class="collapse-qn-description">{{ model.questionBrief }}</div>
       </ng-container>
     </div>
@@ -53,7 +55,7 @@
         </button>
       </div>
     </div>
-  </div>
+  </button>
   <div *ngIf="!model.isCollapsed" @collapseAnim>
     <div class="card-body">
       <div class="background-color-light-blue">
diff --git a/src/web/app/components/question-edit-form/question-edit-form.component.scss b/src/web/app/components/question-edit-form/question-edit-form.component.scss
index 86bf5ea0206..297cdb9a467 100644
--- a/src/web/app/components/question-edit-form/question-edit-form.component.scss
+++ b/src/web/app/components/question-edit-form/question-edit-form.component.scss
@@ -6,6 +6,11 @@
   margin-right: 5px;
 }
 
+.question-number {
+  font-size: .875rem;
+  margin-bottom: 0;
+}
+
 .background-color-light-blue {
   background-color: #EAEFF5;
 }
diff --git a/src/web/app/components/visibility-panel/visibility-panel.component.html b/src/web/app/components/visibility-panel/visibility-panel.component.html
index da00ba78ae6..507aa2bf6d7 100644
--- a/src/web/app/components/visibility-panel/visibility-panel.component.html
+++ b/src/web/app/components/visibility-panel/visibility-panel.component.html
@@ -1,7 +1,7 @@
 <div class="margin-top-15px padding-15px" [ngClass]="{ 'background-color-light-green': !model.isQuestionHasResponses, 'alert alert-danger': model.isQuestionHasResponses }">
   <div>
     <div *ngIf="model.isQuestionHasResponses">
-      <h5>Changing the visibility after collecting responses is not recommended.</h5>
+      <p class="fs-6 fw-bold">Changing the visibility after collecting responses is not recommended.</p>
       <p>Reason: The existing responses were submitted under the 'promise' of a certain visibility and changing the visibility later 'breaks' that promise.</p>
     </div>
     <b [ngClass]="{ 'visibility-title': !model.isQuestionHasResponses }">Visibility</b> (Who can see the responses?)
diff --git a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
index 2a6f8282d83..570cfed8651 100644
--- a/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
+++ b/src/web/app/pages-instructor/instructor-session-edit-page/__snapshots__/instructor-session-edit-page.component.spec.ts.snap
@@ -1280,8 +1280,8 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             class="card"
             id="question-form-1"
           >
-            <div
-              class="card-header bg-primary text-white cursor-pointer"
+            <button
+              class="card-header bg-primary text-white cursor-pointer border-0"
             >
               <div
                 class="collapse-caret"
@@ -1297,27 +1297,38 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
+                class="d-flex flex-column text-start"
                 id="question-header"
               >
-                <strong>
-                  Question 
-                </strong>
-                <select
-                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-                  id="question-number-dropdown"
+                <div
+                  class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
-                  <option
-                    value="0: 1"
+                  <h2
+                    class="question-number fw-bold me-1"
                   >
-                    1
-                  </option>
-                  <option
-                    value="1: 2"
+                    Question 
+                    <select
+                      class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                      id="question-number-dropdown"
+                    >
+                      <option
+                        value="0: 1"
+                      >
+                        1
+                      </option>
+                      <option
+                        value="1: 2"
+                      >
+                        2
+                      </option>
+                    </select>
+                  </h2>
+                  <span
+                    id="question-type"
                   >
-                    2
-                  </option>
-                </select>
-                 Essay question 
+                    Essay question
+                  </span>
+                </div>
               </div>
               <div
                 class="card-header-btn-toolbar"
@@ -1366,7 +1377,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   </button>
                 </div>
               </div>
-            </div>
+            </button>
             <div
               class="ng-trigger ng-trigger-collapseAnim ng-animating"
               style=""
@@ -1988,8 +1999,8 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
             class="card"
             id="question-form-2"
           >
-            <div
-              class="card-header bg-primary text-white cursor-pointer"
+            <button
+              class="card-header bg-primary text-white cursor-pointer border-0"
             >
               <div
                 class="collapse-caret"
@@ -2005,27 +2016,38 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                 </tm-panel-chevron>
               </div>
               <div
+                class="d-flex flex-column text-start"
                 id="question-header"
               >
-                <strong>
-                  Question 
-                </strong>
-                <select
-                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-                  id="question-number-dropdown"
+                <div
+                  class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
                 >
-                  <option
-                    value="0: 1"
+                  <h2
+                    class="question-number fw-bold me-1"
                   >
-                    1
-                  </option>
-                  <option
-                    value="1: 2"
+                    Question 
+                    <select
+                      class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                      id="question-number-dropdown"
+                    >
+                      <option
+                        value="0: 1"
+                      >
+                        1
+                      </option>
+                      <option
+                        value="1: 2"
+                      >
+                        2
+                      </option>
+                    </select>
+                  </h2>
+                  <span
+                    id="question-type"
                   >
-                    2
-                  </option>
-                </select>
-                 Essay question 
+                    Essay question
+                  </span>
+                </div>
               </div>
               <div
                 class="card-header-btn-toolbar"
@@ -2074,7 +2096,7 @@ exports[`InstructorSessionEditPageComponent should snap with feedback session qu
                   </button>
                 </div>
               </div>
-            </div>
+            </button>
             <div
               class="ng-trigger ng-trigger-collapseAnim ng-animating"
               style=""
@@ -3886,8 +3908,8 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
         class="card"
         id="question-form-0"
       >
-        <div
-          class="card-header bg-primary text-white cursor-pointer"
+        <button
+          class="card-header bg-primary text-white cursor-pointer border-0"
         >
           <div
             class="collapse-caret"
@@ -3903,22 +3925,33 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
             </tm-panel-chevron>
           </div>
           <div
+            class="d-flex flex-column text-start"
             id="question-header"
           >
-            <strong>
-              Question 
-            </strong>
-            <select
-              class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
-              id="question-number-dropdown"
+            <div
+              class="d-flex flex-sm-row flex-column align-items-sm-center align-items-start"
             >
-              <option
-                value="0: 1"
+              <h2
+                class="question-number fw-bold me-1"
               >
-                1
-              </option>
-            </select>
-             Essay question 
+                Question 
+                <select
+                  class="form-control form-select question-number-select ng-untouched ng-pristine ng-valid"
+                  id="question-number-dropdown"
+                >
+                  <option
+                    value="0: 1"
+                  >
+                    1
+                  </option>
+                </select>
+              </h2>
+              <span
+                id="question-type"
+              >
+                Essay question
+              </span>
+            </div>
           </div>
           <div
             class="card-header-btn-toolbar"
@@ -3935,7 +3968,7 @@ exports[`InstructorSessionEditPageComponent should snap with new question added
               </button>
             </div>
           </div>
-        </div>
+        </button>
         <div
           class="ng-trigger ng-trigger-collapseAnim ng-animating"
           style=""