[issue_tracker] Improve readability of comments and history (#6138)

The comments and history were jumbled together in a way that made
it very difficult to determine what was a comment and what was an
item being changed. This updates the display in a way that is
much more readable and should make it possible to follow the conversation
of what is happening in an issue.

CHANGELOG.md

@@ -17,7 +17,8 @@ changes in the following format: PR #1234***
 #### Bug Fixes
 - *Add item here*
 ### Modules
-#### *Add module here*
+#### Issue Tracker
+- Readability of comments and history was improved. (PR #6138)
 ### Clean Up
 - *Add item here*
 ### Notes For Existing Projects

modules/issue_tracker/css/issue_tracker.css

@@ -78,10 +78,11 @@ h3 {
     margin: 25px 0;
 }
 
-.history-item-label > span {
-  font-weight: bold;
-}
 
 .history-item-changes {
   margin-left: 2em;
 }
+
+.history-item-user {
+    font-weight: bold;
+}

modules/issue_tracker/jsx/CommentList.js

@@ -22,41 +22,65 @@ class CommentList extends Component {
     const changes = this.props.commentHistory.reduce(function(carry, item) {
       let label = item.dateAdded.concat(' - ', item.addedBy);
       if (!carry[label]) {
-        carry[label] = {};
+        carry[label] = {
+            data: {},
+            user: item.addedBy,
+            date: new Date(item.dateAdded),
+        };
       }
-      carry[label][item.fieldChanged] = item.newValue;
+      carry[label].data[item.fieldChanged] = item.newValue;
       return carry;
     }, {});
 
     const history = Object.keys(changes).sort().reverse().map(function(key, i) {
-      const textItems = Object.keys(changes[key]).map(function(index, j) {
+      let comment;
+      const item = changes[key];
+      const textItems = Object.keys(item.data).map(function(index, j) {
+        if (index == 'comment') {
+            comment = <div style={{marginTop: '1em'}}><Markdown content={item.data[index]} /></div>;
+            return;
+        }
         return (
-          <div key={j} className='row'>
+          <li key={j} className='row' style={{color: 'rgb(149, 149, 149)'}}>
             <div className='col-md-2'>
-              <div className='col-md-8'><b>{index}</b></div>
+              <div className='col-md-8'><strong>{index}</strong></div>
               <div className='col-md-4'> to </div>
             </div>
-            <div className='col-md-10'><i>{changes[key][index]}</i></div>
-          </div>
+            <div className='col-md-10'><i>{item.data[index]}</i></div>
+          </li>
         );
       }, this);
 
+      let now = new Date();
+      const datediffSec = (now.getTime() - item.date.getTime()) / 1000;
+      let timestr;
+      if (datediffSec < 60) {
+          timestr = <span> {Math.round(datediffSec)} seconds ago</span>;
+      } else if (datediffSec < 60*60) {
+          timestr = <span> {Math.round(datediffSec / 60)} minutes ago</span>;
+      } else if (datediffSec < 60*60*24) {
+          timestr = <span> {Math.round(datediffSec / (60*60))} hours ago</span>;
+      } else {
+          timestr = <span> on {item.date.toLocaleDateString()} at {item.date.toTimeString()}</span>;
+      }
+
       return (
         <div key={i}>
           <hr/>
           <div className='history-item-label'>
-            <span>{key}</span> updated :
+            Updated by <span className="history-item-user">{item.user}</span>{timestr}:
           </div>
-          <div className='history-item-changes'>
+          <ul className='history-item-changes'>
             {textItems}
-          </div>
+          </ul>
+          {comment}
         </div>
       );
     }, this);
 
     return (
       <div id='comment-history'>
-        <h3>Comment History</h3>
+        <h3>Comments and History</h3>
         {history}
       </div>
     );