Localized Time and Date to more Manage Users tabs (#4775)

* Localized Time and Date to more Manage Users tabs

* fixed date & time localization in Banned and Pending rows to current user

* Fixed bug from previous commit

app/javascript/components/admin/manage_users/BannedPendingRow.jsx

@@ -12,10 +12,14 @@ import {
 } from '@heroicons/react/24/outline';
 import Avatar from '../../users/user/Avatar';
 import useUpdateUserStatus from '../../../hooks/mutations/admin/manage_users/useUpdateUserStatus';
+import { localizeDateTimeString } from '../../../helpers/DateTimeHelper';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function BannedPendingRow({ user, pendingTable }) {
   const { t } = useTranslation();
   const updateUserStatus = useUpdateUserStatus();
+  const currentUser = useAuth();
+  const localizedTime = localizeDateTimeString(user?.created_at, currentUser?.language);
 
   return (
     <tr key={user.id} className="align-middle text-muted border border-2">
@@ -26,13 +30,12 @@ export default function BannedPendingRow({ user, pendingTable }) {
           </div>
           <Stack>
             <span className="text-dark fw-bold"> {user.name} </span>
-            <span className="small"> { t('admin.manage_users.user_created_at', { user }) }</span>
+            <span className="small"> { localizedTime }</span>
           </Stack>
         </Stack>
       </td>
 
       <td className="border-0"> {user.email} </td>
-      <td className="border-0"> {user.created_at} </td>
       <td className="border-start-0">
         <Dropdown className="float-end cursor-pointer">
           <Dropdown.Toggle className="hi-s" as={EllipsisVerticalIcon} />
@@ -68,6 +71,7 @@ BannedPendingRow.propTypes = {
     name: PropTypes.string.isRequired,
     email: PropTypes.string.isRequired,
     created_at: PropTypes.string.isRequired,
+    language: PropTypes.string.isRequired,
   }).isRequired,
   pendingTable: PropTypes.bool.isRequired,
 };

app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx

@@ -23,7 +23,6 @@ export default function BannedPendingUsersTable({ users, pendingTable }) {
           <tr className="text-muted small">
             <th className="fw-normal border-end-0">{ t('user.name') } </th>
             <th className="fw-normal border-0">{ t('user.email_address') } </th>
-            <th className="fw-normal border-0">{ t('created_at') } </th>
           </tr>
         </thead>
         <tbody className="border-top-0">

app/javascript/components/admin/manage_users/InvitedUsers.jsx

@@ -8,11 +8,14 @@ import useInvitations from '../../../hooks/queries/admin/manage_users/useInvitat
 import Pagination from '../../shared_components/Pagination';
 import NoSearchResults from '../../shared_components/search/NoSearchResults';
 import EmptyUsersList from './EmptyUsersList';
+import { localizeDateTimeString } from '../../../helpers/DateTimeHelper';
+import { useAuth } from '../../../contexts/auth/AuthProvider';
 
 export default function InvitedUsers({ searchInput }) {
   const { t } = useTranslation();
   const [page, setPage] = useState();
   const { data: invitations } = useInvitations(searchInput, page);
+  const currentUser = useAuth();
 
   if (!searchInput && invitations?.data?.length === 0) {
     return <EmptyUsersList text={t('admin.manage_users.empty_invited_users')} subtext={t('admin.manage_users.empty_invited_users_subtext')} />;
@@ -42,7 +45,7 @@ export default function InvitedUsers({ searchInput }) {
                     invitations?.data?.map((invitation) => (
                       <tr key={invitation.email} className="align-middle text-muted">
                         <td className="text-dark border-0">{invitation.email}</td>
-                        <td className="text-dark border-0">{invitation.updated_at}</td>
+                        <td className="text-dark border-0">{localizeDateTimeString(invitation.updated_at, currentUser?.language)}</td>
                         <td className="text-dark border-0">
                           { invitation.valid ? <CheckIcon className="text-success hi-s" /> : <XMarkIcon className="text-danger hi-s" />}
                         </td>