[#750] Zoom Tab: display commit message body (#755)

In the zoom tab, only the commit message titles were listed.

The commit message title alone may be too abstract for users to 
understand the rationale of large implementations.

Let's display the commit message body below each commit message title 
so that users get more clarity to the purpose of each commits.

This is a front-end implementation of displaying commit message body 
after the merged PR #751 that handles the storing of commit message
body in the commit report files.

docs/UserGuide.md

@@ -93,11 +93,16 @@ The `Code Panel` allows users to see the code attributed to a specific author. C
 * Non-trivial code segments that are not written by the selected author are hidden by default, but you can toggle them by clicking on the `...` icon.
 
 ### Commits Panel
+<img src="/docs/images/commits-panel.png" alt="commits panel" width="468">
 
-The `Commits Panel` allows users to see the commits attributed to a specific author. Hold `Command`&#8984; (MacOS) or `Ctrl` (Others) and click on the ramp chart in the `Chart Panel` to select the time range where you want to display the `Commit Panel` for on the right.
-* The `Commits Panel` shows the commits that contain author's contributions, sorted by the date it was commited.
+The `Commits Panel` allows users to see the commits attributed to a specific author. Hold `Command`&#8984; **(MacOS)** or `Ctrl` **(other OSes)** and click on the ramp chart in the `Chart Panel` to select the time range where you want to display the `Commit Panel` for on the right. <br>
+
+![Opening commits panel](/docs/images/opening-commits-panel.gif)
+
+* The `Commits Panel` shows the commits that contain author's contributions, sorted by the date it was committed.
 * The date range for the `Chart Panel` can be updated by clicking on the "Show ramp chart for this period" below the name of the author.
 * The ramp slices displayed in the ramp chart for the `Commits Panel` represents individual commits.
+* The commit messages body can be expanded or collapsed by clicking on the `...` icon beside each commit message title.
 
 ### Tool Bar
 The `Tool Bar` at the top provides a set of configuration options that control the Chart Panel.

frontend/src/static/css/style.scss

@@ -669,4 +669,41 @@ header {
       margin-top: .5rem;
     }
   }
+
+  &__toggle-commit-message-body {
+    padding-top: 10px;
+  }
+}
+
+/* Commit Message Body in Zoom Tab */
+.commit-message {
+  &.active {
+    .body {
+      background-color: mui-color('white');
+      border: 1px solid mui-color('grey', '700');
+      display: inherit;
+      margin-bottom: 1rem;
+      overflow-x: auto;
+      padding: .4rem;
+      resize: none;
+      width: 100%;
+    }
+  }
+
+  .body {
+    display: none;
+  }
+
+  &--button {
+    color: mui-color('grey', '700');
+    padding-left: .5rem;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  pre {
+    margin: 0;
+  }
 }

frontend/src/static/js/v_zoom.js

@@ -4,6 +4,8 @@ window.vZoom = {
   data() {
     return {
       filterTimeFrame: window.hashParams.timeframe,
+      showAllCommitMessageBody: true,
+      expandedCommitMessagesCount: this.getCommitMessageBodyCount(),
     };
   },
   methods: {
@@ -23,10 +25,44 @@ window.vZoom = {
     getSliceLink(slice) {
       return `${window.getBaseLink(this.info.user.repoId)}/commit/${slice.hash}`;
     },
+
+    getCommitMessageBodyCount() {
+      let nonEmptyCommitMessageCount = 0;
+      this.info.user.commits.forEach((commit) => {
+        commit.commitResults.forEach((commitResult) => {
+          if (commitResult.messageBody !== '') {
+            nonEmptyCommitMessageCount += 1;
+          }
+        });
+      });
+
+      return nonEmptyCommitMessageCount;
+    },
+
+    toggleAllCommitMessagesBody(isActive) {
+      this.showAllCommitMessageBody = isActive;
+
+      const toRename = this.showAllCommitMessageBody ? 'commit-message active' : 'commit-message';
+
+      const commitMessageClasses = document.getElementsByClassName('commit-message');
+      Array.from(commitMessageClasses).forEach((commitMessageClass) => {
+        commitMessageClass.className = toRename;
+      });
+
+      this.expandedCommitMessagesCount = isActive ? this.getCommitMessageBodyCount() : 0;
+    },
+
+    updateExpandedCommitMessagesCount() {
+      this.expandedCommitMessagesCount = document.getElementsByClassName('commit-message active')
+          .length;
+    },
   },
   created() {
     this.filterCommits();
   },
+  mounted() {
+    this.updateExpandedCommitMessagesCount();
+  },
   components: {
     v_ramp: window.vRamp,
   },

frontend/src/tabs/zoom.pug

@@ -21,11 +21,25 @@
       v-bind:avgsize="info.avgCommitSize",
       v-bind:mergegroup="info.isMergeGroup")
 
+  .zoom__toggle-commit-message-body(v-if="info.user.commits.length")
+    button(v-if="expandedCommitMessagesCount === 0" v-on:click="toggleAllCommitMessagesBody(true)") show all commit messages body
+    button(v-else v-on:click="toggleAllCommitMessagesBody(false)") hide all commit messages body
+
   .zoom__day(v-for="day in info.user.commits")
     template(v-if="day.insertions > 0")
       h3(v-if="filterTimeFrame === 'week'") Week of {{ day.date }}
       h3(v-else) {{ day.date }}
       ul
-        li(v-for="slice in day.commitResults")
-          a(v-bind:href="getSliceLink(slice)", target="_blank") {{ slice.messageTitle }}
+        li(v-for="slice in day.commitResults").commit-message.active
+          a(v-bind:href="getSliceLink(slice)" target="_blank") {{ slice.messageTitle }}
           span   ({{ slice.insertions }} lines)
+          a(
+            v-if="slice.messageBody !== ''",
+            v-on:click="updateExpandedCommitMessagesCount",
+            onclick="toggleNext(this)",
+            title="Click to show/hide the commit message body"
+          )
+            i.commit-message--button.fas.fa-ellipsis-h
+          .body(v-if="slice.messageBody !== ''")
+            pre {{ slice.messageBody }}
+