[#12329] Refactoring of sortable tables - Sessions table (#12501)

* refactor(sessions-table): add cell-with-tooltip component * refactor(sessions-table): add group-buttons component * refactor(sessions-table): add response-rate component * refactor(sessions-table): add mvp * refactor(sessions-table): add enum to header map * refactor(sessions-table): bug fixes and misc changes * refactor(sessions-table): fix linting * fix: linting * fix: linting max-len * fix: adjust stylings on response rate * fix: update failing snapshots * refactor(sessions-table): add header and table id * refactor(sessions-table): add setMainTableStyle and optional headers * feat: update id on sessions table * fix: update snapshots * refactor(sessions-table): update optional chaining * refactor(sessions-table): publish and unpublish behaviour * fix: linting * fix: update snapshots * fix: update id * fix: reset sorting when retrieving idx * refactor(sessions-table): rename components * fix: columns appeared when not expected * fix: failing e2etests and associated changes * cleanup(sessions-table): minor changes * misc: re-organisation * fix: linting * fix: remove e2e stability changes * misc: revert formatting * misc: revert formatting-1 * misc: revert formatting-2 * misc: revert formatting-3 * misc: revert formatting-4 * misc: revert formatting-5 * misc: revert formatting-6 * fix: update linting and component tests * fix: restore individual sessions * misc: switch initial sort by for instructor home page * feat: add sort order to sortable table * fix: linting * fix: update snapshots * misc: update stylings * misc: update snapshots * misc: update SessionsTableHeaderColorScheme to SortableTableColorScheme * fix: linting
TEAMMATES · Jul 24, 2023 · dacb849 · dacb849
1 parent f029bb2
commit dacb849
Show file tree

Hide file tree

Showing 44 changed files with 2,728 additions and 1,812 deletions.
diff --git a/src/e2e/java/teammates/e2e/cases/InstructorFeedbackSessionsPageE2ETest.java b/src/e2e/java/teammates/e2e/cases/InstructorFeedbackSessionsPageE2ETest.java
@@ -88,7 +88,6 @@ public void testAll() {
 
         ______TS("verify loaded data");
         FeedbackSessionAttributes[] loadedSessions = { openSession, closedSession };
-        feedbackSessionsPage.sortByCourseId();
         feedbackSessionsPage.verifySessionsTable(loadedSessions);
 
         ______TS("verify response rate");
@@ -218,7 +217,6 @@ public void testAll() {
         FeedbackSessionAttributes[] sessionsForRestore = { openSession, newSession, closedSession, copiedSession2,
                 copiedSession };
         feedbackSessionsPage.restoreSession(closedSession);
-
         feedbackSessionsPage.verifyStatusMessage("The feedback session has been restored.");
         feedbackSessionsPage.sortBySessionsName();
         feedbackSessionsPage.verifySessionsTable(sessionsForRestore);
@@ -229,6 +227,8 @@ public void testAll() {
         ______TS("permanently delete session");
         FeedbackSessionAttributes[] sessionsForDelete = { copiedSession, copiedSession2, closedSession,
                 openSession };
+
+        feedbackSessionsPage.sortBySessionsName();
         feedbackSessionsPage.moveToRecycleBin(newSession);
         feedbackSessionsPage.deleteSession(newSession);
 
@@ -239,8 +239,7 @@ public void testAll() {
         verifyAbsentInDatabase(newSession);
 
         ______TS("restore all session");
-        FeedbackSessionAttributes[] sessionsForRestoreAll = { openSession, closedSession, copiedSession2,
-                copiedSession };
+        FeedbackSessionAttributes[] sessionsForRestoreAll = { copiedSession, copiedSession2, closedSession, openSession };
         feedbackSessionsPage.moveToRecycleBin(copiedSession);
         feedbackSessionsPage.moveToRecycleBin(copiedSession2);
         feedbackSessionsPage.restoreAllSessions();

diff --git a/src/e2e/java/teammates/e2e/cases/InstructorHomePageE2ETest.java b/src/e2e/java/teammates/e2e/cases/InstructorHomePageE2ETest.java
@@ -207,8 +207,8 @@ public void testAll() {
         homePage.sortCoursesByCreationDate();
         courseIndex = 1;
         otherCourseIndex = 0;
-        FeedbackSessionAttributes[] otherCourseSessionsWithCopy2 = { copiedSession2, otherCourseSession };
-        homePage.verifyCourseTabDetails(otherCourseIndex, otherCourse, otherCourseSessionsWithCopy2);
+        FeedbackSessionAttributes[] otherCourseSessionsWithCopyTwo = { copiedSession2, otherCourseSession };
+        homePage.verifyCourseTabDetails(otherCourseIndex, otherCourse, otherCourseSessionsWithCopyTwo);
         assertNotNull(getSoftDeletedSession(copiedSession.getFeedbackSessionName(),
                 instructor.getGoogleId()));
 

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackSessionsPage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorFeedbackSessionsPage.java
@@ -96,7 +96,7 @@ public class InstructorFeedbackSessionsPage extends AppPage {
     @FindBy(id = "btn-create-session")
     private WebElement createSessionButton;
 
-    @FindBy(className = "sessions-table")
+    @FindBy(id = "sessions-table")
     private WebElement sessionsTable;
 
     @FindBy(id = "deleted-sessions-heading")
@@ -501,6 +501,8 @@ && getFeedbackSessionName(i).equals(sessionName)) {
 
     private int getSoftDeletedFeedbackSessionRowId(String courseId, String sessionName) {
         int i = 0;
+        assertEquals(courseId, getSoftDeletedFeedbackSessionCourseId(i));
+        assertEquals(sessionName, getSoftDeletedFeedbackSessionName(i));
 
         while (i < getNumSoftDeletedFeedbackSessions()) {
             if (getSoftDeletedFeedbackSessionCourseId(i).equals(courseId)

diff --git a/src/e2e/java/teammates/e2e/pageobjects/InstructorHomePage.java b/src/e2e/java/teammates/e2e/pageobjects/InstructorHomePage.java
@@ -151,7 +151,7 @@ private String getCourseDetails(int courseTabIndex) {
     }
 
     private WebElement getSessionsTable(int courseTabIndex) {
-        return getCourseTab(courseTabIndex).findElement(By.className("sessions-table"));
+        return getCourseTab(courseTabIndex).findElement(By.id("sessions-table-" + courseTabIndex));
     }
 
     private String getDateString(Instant instant, String timeZone) {

diff --git a/src/e2e/resources/data/InstructorHomePageE2ETest.json b/src/e2e/resources/data/InstructorHomePageE2ETest.json
@@ -175,7 +175,7 @@
       "creatorEmail": "IHome.instructor.tmms@gmail.tmt",
       "instructions": "Please please fill in the following questions.",
       "createdTime": "2012-03-20T23:59:00Z",
-      "startTime": "2012-03-29T15:00:00Z",
+      "startTime": "2012-03-29T04:00:00Z",
       "endTime": "2012-05-01T04:00:00Z",
       "sessionVisibleFromTime": "2012-03-28T16:00:00Z",
       "resultsVisibleFromTime": "2012-05-01T16:00:00Z",

diff --git a/...ts/question-types/question-statistics/constsum-options-question-statistics.component.html b/...ts/question-types/question-statistics/constsum-options-question-statistics.component.html
@@ -5,7 +5,7 @@
       <strong *ngIf="!isStudent">Response Summary</strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-sm-12 table-responsive">
       <tm-sortable-table [columns]="columnsData" [rows]="rowsData" [initialSortBy]="SortBy.CONSTSUM_OPTIONS_POINTS"></tm-sortable-table>
     </div>

diff --git a/...question-types/question-statistics/constsum-recipients-question-statistics.component.html b/...question-types/question-statistics/constsum-recipients-question-statistics.component.html
@@ -5,7 +5,7 @@
       <strong *ngIf="!isStudent">Response Summary</strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-sm-12 table-responsive">
       <tm-sortable-table [columns]="columnsData" [rows]="rowsData" [initialSortBy]="SortBy.CONSTSUM_RECIPIENTS_POINTS"></tm-sortable-table>
     </div>

diff --git a/...atistics/contribution-question-statistics/contribution-question-statistics.component.html b/...atistics/contribution-question-statistics/contribution-question-statistics.component.html
@@ -54,7 +54,7 @@
       [<a tmRouterLink="/web/instructor/help" [queryParams]="{questionId: QuestionsSectionQuestions.CONTRIBUTION, section: Sections.questions}" rel="noopener noreferrer" target="_blank">How do I interpret/use these values?</a>]
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-sm-12 table-responsive">
       <tm-sortable-table [rows]="rowsData" [columns]="columnsData"></tm-sortable-table>
     </div>

diff --git a/...statistics/contribution-question-statistics/contribution-question-statistics.component.ts b/...statistics/contribution-question-statistics/contribution-question-statistics.component.ts
@@ -88,27 +88,44 @@ export class ContributionQuestionStatisticsComponent
           value: statistics.results[email].claimed,
           customComponent: {
             component: ContributionComponent,
-            componentData: { value: statistics.results[email].claimed },
+            componentData: () => {
+              return {
+                value: statistics.results[email].claimed,
+              };
+            },
           },
         },
         {
           value: statistics.results[email].perceived,
           customComponent: {
             component: ContributionComponent,
-            componentData: { value: statistics.results[email].perceived },
+            componentData: () => {
+              return {
+                value: statistics.results[email].perceived,
+              };
+            },
           },
         },
         {
           value: this.emailToDiff[email],
           customComponent: {
             component: ContributionComponent,
-            componentData: { value: this.emailToDiff[email], diffOnly: true },
+            componentData: () => {
+              return {
+                value: this.emailToDiff[email],
+                diffOnly: true,
+              };
+            },
           },
         },
         {
           customComponent: {
             component: ContributionRatingsListComponent,
-            componentData: { ratingsList: statistics.results[email].perceivedOthers },
+            componentData: () => {
+              return {
+                ratingsList: statistics.results[email].perceivedOthers,
+              };
+            },
           },
         },
       ];

diff --git a/.../app/components/question-types/question-statistics/mcq-question-statistics.component.html b/.../app/components/question-types/question-statistics/mcq-question-statistics.component.html
@@ -7,14 +7,16 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-12 table-responsive">
+    <div class="col-sm-12 table-responsive mb-4">
       <tm-sortable-table [columns]="summaryColumnsData" [rows]="summaryRowsData"></tm-sortable-table>
     </div>
     <div class="col-sm-12 table-responsive" *ngIf="question.hasAssignedWeights" style="margin-top: 20px;">
       <strong class="text-color-gray">
         Per Recipient Statistics
       </strong>
-      <tm-sortable-table [columns]="perRecipientColumnsData" [rows]="perRecipientRowsData" [initialSortBy]="SortBy.MCQ_WEIGHT_AVERAGE"></tm-sortable-table>
+      <div class="mb-4">
+        <tm-sortable-table [columns]="perRecipientColumnsData" [rows]="perRecipientRowsData" [initialSortBy]="SortBy.MCQ_WEIGHT_AVERAGE"></tm-sortable-table>
+      </div>
     </div>
   </div>
 </div>
diff --git a/.../app/components/question-types/question-statistics/msq-question-statistics.component.html b/.../app/components/question-types/question-statistics/msq-question-statistics.component.html
@@ -6,15 +6,17 @@
       </strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-sm-12 table-responsive">
       <tm-sortable-table [rows]="summaryRowsData" [columns]="summaryColumnsData" [initialSortBy]="SortBy.MSQ_PERCENTAGE"></tm-sortable-table>
     </div>
     <div class="col-sm-12 table-responsive" *ngIf="question.hasAssignedWeights" style="margin-top: 20px;">
       <strong class="text-color-gray">
         Per Recipient Statistics
       </strong>
-      <tm-sortable-table [rows]="perRecipientRowsData" [columns]="perRecipientColumnsData" [initialSortBy]="SortBy.MSQ_WEIGHT_AVERAGE"></tm-sortable-table>
+      <div class="mb-4">
+        <tm-sortable-table [rows]="perRecipientRowsData" [columns]="perRecipientColumnsData" [initialSortBy]="SortBy.MSQ_WEIGHT_AVERAGE"></tm-sortable-table>
+      </div>
     </div>
   </div>
 </div>
diff --git a/...omponents/question-types/question-statistics/num-scale-question-statistics.component.html b/...omponents/question-types/question-statistics/num-scale-question-statistics.component.html
@@ -6,7 +6,7 @@
     </div>
   </div>
   <div class="row">
-    <div id="numscale-statistics" class="col-sm-12 table-responsive">
+    <div id="numscale-statistics" class="col-sm-12 table-responsive mb-4">
       <tm-sortable-table [rows]="rowsData" [columns]="columnsData"></tm-sortable-table>
     </div>
   </div>

diff --git a/...onents/question-types/question-statistics/rank-options-question-statistics.component.html b/...onents/question-types/question-statistics/rank-options-question-statistics.component.html
@@ -7,7 +7,7 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-sm-12 table-responsive">
+    <div class="col-sm-12 table-responsive mb-4">
       <tm-sortable-table [rows]="rowsData"
                          [columns]="columnsData"
                          [initialSortBy]="SortBy.RANK_OPTIONS_OVERALL_RANK"

diff --git a/...nts/question-types/question-statistics/rank-recipients-question-statistics.component.html b/...nts/question-types/question-statistics/rank-recipients-question-statistics.component.html
@@ -6,7 +6,7 @@
       </strong>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div class="col-sm-12 table-responsive">
       <tm-sortable-table [rows]="rowsData"
                          [columns]="columnsData"

diff --git a/...p/components/question-types/question-statistics/rubric-question-statistics.component.html b/...p/components/question-types/question-statistics/rubric-question-statistics.component.html
@@ -12,7 +12,7 @@
       </label>
     </div>
   </div>
-  <div class="row">
+  <div class="row mb-4">
     <div id="rubric-statistics" class="col-sm-12 table-responsive">
       <tm-sortable-table [rows]="summaryRowsData"
                          [columns]="summaryColumnsData"
@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="row">
-      <div id="rubric-recipient-statistics-per-criterion" class="col-sm-12 table-responsive">
+      <div id="rubric-recipient-statistics-per-criterion" class="col-sm-12 table-responsive mb-4">
         <tm-sortable-table [rows]="perRecipientPerCriterionRowsData"
                            [columns]="perRecipientPerCriterionColumnsData"
         ></tm-sortable-table>
@@ -45,7 +45,7 @@
       </div>
     </div>
     <div class="row">
-      <div id="rubric-recipient-statistics-overall" class="col-sm-12 table-responsive">
+      <div id="rubric-recipient-statistics-overall" class="col-sm-12 table-responsive mb-4">
         <tm-sortable-table [rows]="perRecipientOverallRowsData"
                            [columns]="perRecipientOverallColumnsData"
         ></tm-sortable-table>