From 139d036b42d39d9ec55a295b5232a31186b0d61c Mon Sep 17 00:00:00 2001
From: Wyatt Johnson <wyattjoh@gmail.com>
Date: Thu, 22 Feb 2018 17:32:37 -0700
Subject: [PATCH] changed styles + added translations

---
 .../src/components/AccountHistory.css         |  6 ++-
 .../src/components/AccountHistory.js          | 46 ++++++++++++-------
 locales/en.yml                                | 14 +++++-
 3 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/client/coral-admin/src/components/AccountHistory.css b/client/coral-admin/src/components/AccountHistory.css
index 09b324f08..1d94ae82e 100644
--- a/client/coral-admin/src/components/AccountHistory.css
+++ b/client/coral-admin/src/components/AccountHistory.css
@@ -15,6 +15,10 @@
   }
 }
 
+.username {
+  word-break: break-all;
+}
+
 .headerRowItem {
   color: #595959;
   font-weight: bold;
@@ -24,7 +28,7 @@
   border-bottom: 1px solid #e0e0e0;
 }
 
-.action {
+.action, .system {
   color: black;
   font-weight: bold;
 }
diff --git a/client/coral-admin/src/components/AccountHistory.js b/client/coral-admin/src/components/AccountHistory.js
index 52f3af92d..e945e9c8e 100644
--- a/client/coral-admin/src/components/AccountHistory.js
+++ b/client/coral-admin/src/components/AccountHistory.js
@@ -5,7 +5,9 @@ import styles from './AccountHistory.css';
 import cn from 'classnames';
 import flatten from 'lodash/flatten';
 import orderBy from 'lodash/orderBy';
+import has from 'lodash/has';
 import moment from 'moment';
+import t from 'coral-framework/services/i18n';
 
 const buildUserHistory = (userState = {}) => {
   return orderBy(
@@ -29,31 +31,35 @@ const readableDuration = (startDate, endDate) => {
   const durAsHours = dur.asHours().toFixed(0);
 
   return durAsHours > 23
-    ? `${durAsDays} ${durAsDays > 1 ? 'days' : 'day'}`
-    : `${durAsHours} ${durAsHours > 1 ? 'hours' : 'hour'}`;
+    ? durAsDays > 1
+      ? t('suspenduser.days', durAsDays)
+      : t('suspenduser.day', durAsDays)
+    : durAsHours > 1
+      ? t('suspenduser.hours', durAsHours)
+      : t('suspenduser.hour', durAsHours);
 };
 
 const buildActionResponse = (typename, created_at, until, status) => {
   switch (typename) {
     case 'UsernameStatusHistory':
-      return `Username ${status}`;
+      return t('account_history.username_status', status);
     case 'BannedStatusHistory':
-      return status ? 'User banned' : 'Ban removed';
+      return status
+        ? t('account_history.user_banned')
+        : t('account_history.ban_removed');
     case 'SuspensionStatusHistory':
       return until
-        ? `Suspended, ${readableDuration(created_at, until)}`
-        : 'Suspension removed';
+        ? t('account_history.suspended', readableDuration(created_at, until))
+        : t('account_history.suspension_removed');
     default:
       return '-';
   }
 };
 
-const getModerationValue = (userId, assignedBy = {}) => {
-  if (assignedBy && userId !== assignedBy.id) {
-    return assignedBy.username;
-  }
-  return 'SYSTEM';
-};
+const hasUsername = user => has(user, 'username');
+
+const getModerationValue = assignedBy =>
+  hasUsername(assignedBy) ? assignedBy.username : t('account_history.system');
 
 class AccountHistory extends React.Component {
   render() {
@@ -68,9 +74,15 @@ class AccountHistory extends React.Component {
               'talk-admin-account-history-header-row'
             )}
           >
-            <div className={styles.headerRowItem}>Date</div>
-            <div className={styles.headerRowItem}>Action</div>
-            <div className={styles.headerRowItem}>Moderation</div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.date')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.action')}
+            </div>
+            <div className={styles.headerRowItem}>
+              {t('account_history.actor')}
+            </div>
           </div>
           {userHistory.map(
             ({ __typename, created_at, assigned_by, until, status }) => (
@@ -98,10 +110,12 @@ class AccountHistory extends React.Component {
                 <div
                   className={cn(
                     styles.item,
+                    styles.username,
+                    !hasUsername(assigned_by) && styles.system,
                     'talk-admin-account-history-row-assigned-by'
                   )}
                 >
-                  {getModerationValue(user.id, assigned_by)}
+                  {getModerationValue(assigned_by)}
                 </div>
               </div>
             )
diff --git a/locales/en.yml b/locales/en.yml
index 8f7a3853b..3d5c9bba5 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -396,6 +396,8 @@ en:
     one_hour: "1 hour"
     hours: "{0} hours"
     days: "{0} days"
+    hour: "{0} hours"
+    day: "{0} days"
     cancel: "Cancel"
     suspend_user: "Suspend User"
     email_message_suspend: "Dear {0},\n\nIn accordance with {1}’s community guidelines, your account has been temporarily suspended. During the suspension, you will be unable to comment, flag or engage with fellow commenters. Please rejoin the conversation {2}."
@@ -434,6 +436,16 @@ en:
     all: "All"
     rejected: "Rejected"
     account_history: "Account History"
+  account_history:
+    user_banned: "User banned"
+    ban_removed: "Ban removed"
+    username_status: "Username {0}"
+    suspended: "Suspended, {0}"
+    suspension_removed: "Suspension removed"
+    system: "SYSTEM"
+    date: "Date"
+    action: "Action"
+    actor: "Actor"
   user_impersonating: "This user is impersonating"
   user_no_comment: "You've never left a comment. Join the conversation!"
   username_offensive: "This username is offensive"
@@ -462,4 +474,4 @@ en:
       close: "Close this Installer"
   admin_sidebar:
     view_options: "View Options"
-    sort_comments: "Sort Comments"
+    sort_comments: "Sort Comments"
\ No newline at end of file