Merge branch 'events' of ssh://github.com/coralproject/talk into events

client/coral-admin/src/components/AccountHistory.js

@@ -19,14 +19,30 @@ const buildUserHistory = (userState = {}) => {
   );
 };
 
-const buildActionResponse = (typename, until, status) => {
+/** readableDuration returns a readable duration of the suspension/ban in hours or days
+ * @param  {} startDate
+ * @param  {} endDate
+ */
+const readableDuration = (startDate, endDate) => {
+  const dur = moment.duration(moment(endDate).diff(moment(startDate)));
+  const durAsDays = dur.asDays().toFixed(0);
+  const durAsHours = dur.asHours().toFixed(0);
+
+  return durAsHours > 23
+    ? `${durAsDays} ${durAsDays > 1 ? 'days' : 'day'}`
+    : `${durAsHours} ${durAsHours > 1 ? 'hours' : 'hour'}`;
+};
+
+const buildActionResponse = (typename, created_at, until, status) => {
   switch (typename) {
     case 'UsernameStatusHistory':
       return `Username ${status}`;
     case 'BannedStatusHistory':
       return status ? 'User banned' : 'Ban removed';
     case 'SuspensionStatusHistory':
-      return until ? 'Account Suspended' : 'Suspension removed';
+      return until
+        ? `Suspended, ${readableDuration(created_at, until)}`
+        : 'Suspension removed';
     default:
       return '-';
   }
@@ -77,7 +93,7 @@ class AccountHistory extends React.Component {
                     'talk-admin-account-history-row-status'
                   )}
                 >
-                  {buildActionResponse(__typename, until, status)}
+                  {buildActionResponse(__typename, created_at, until, status)}
                 </div>
                 <div
                   className={cn(

client/coral-admin/src/components/UserInfoTooltip.css

@@ -28,8 +28,8 @@
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
   z-index: 10;
   top: 32px;
-  right: 0px;
-  width: 140px;
+  left: -100px;
+  width: 200px;
   text-align: left;
   color: #616161;
 }
@@ -39,7 +39,7 @@
   border: 10px solid transparent;
   border-top-color: #999;
   position: absolute;
-  right: 0px;
+  left: 96px;
   top: -20px;
   transform: rotate(180deg);
 }
@@ -49,7 +49,7 @@
   border: 10px solid transparent;
   border-top-color: white;
   position: absolute;
-  right: 0px;
+  left: 96px;
   top: -19px;
   transform: rotate(180deg);
 }

client/coral-admin/src/components/UserInfoTooltip.js

@@ -67,7 +67,7 @@ class UserInfoTooltip extends React.Component {
                           new Date(
                             this.getLastHistoryItem(user, 'banned').created_at
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                     <li
@@ -139,7 +139,7 @@ class UserInfoTooltip extends React.Component {
                               'suspension'
                             ).created_at
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                     <li
@@ -154,7 +154,7 @@ class UserInfoTooltip extends React.Component {
                           new Date(
                             this.getLastHistoryItem(user, 'suspension').until
                           )
-                        ).format('MMMM Do YYYY, h:mm:ss a')}
+                        ).format('MMM Do YYYY, h:mm:ss a')}
                       </span>
                     </li>
                   </ul>