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' )} > -