From c37852c0e2cc20b0cea73bf6769c21439a2768ed Mon Sep 17 00:00:00 2001
From: alihadi-mazeh <113048174+alihadi-mazeh@users.noreply.github.com>
Date: Wed, 8 Feb 2023 20:33:00 +0000
Subject: [PATCH] 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
---
.../components/admin/manage_users/BannedPendingRow.jsx | 8 ++++++--
.../admin/manage_users/BannedPendingUsersTable.jsx | 1 -
.../components/admin/manage_users/InvitedUsers.jsx | 5 ++++-
3 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/app/javascript/components/admin/manage_users/BannedPendingRow.jsx b/app/javascript/components/admin/manage_users/BannedPendingRow.jsx
index 4c0b8d66..f5e515fb 100644
--- a/app/javascript/components/admin/manage_users/BannedPendingRow.jsx
+++ b/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,
};
diff --git a/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx b/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx
index 9c1da060..a598f9d9 100644
--- a/app/javascript/components/admin/manage_users/BannedPendingUsersTable.jsx
+++ b/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">
diff --git a/app/javascript/components/admin/manage_users/InvitedUsers.jsx b/app/javascript/components/admin/manage_users/InvitedUsers.jsx
index fa476d8d..688f9124 100644
--- a/app/javascript/components/admin/manage_users/InvitedUsers.jsx
+++ b/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>
--
GitLab