diff --git a/frontend/src/component/admin/groups/Group/Group.tsx b/frontend/src/component/admin/groups/Group/Group.tsx index f74e019d43..b9a2e31a8f 100644 --- a/frontend/src/component/admin/groups/Group/Group.tsx +++ b/frontend/src/component/admin/groups/Group/Group.tsx @@ -117,14 +117,8 @@ export const Group: VFC = () => { }, { Header: 'Last login', - accessor: (row: IGroupUser) => row.seenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last login: ${date}`} - /> - ), + accessor: 'seenAt', + Cell: TimeAgoCell, maxWidth: 150, }, { diff --git a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx index 6b56734c4b..631e590b70 100644 --- a/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx +++ b/frontend/src/component/admin/roles/RolesTable/RoleDeleteDialog/RoleDeleteDialogRootRole/RoleDeleteDialogUsers.tsx @@ -47,14 +47,8 @@ export const RoleDeleteDialogUsers = ({ { id: 'last-login', Header: 'Last login', - accessor: (row: any) => row.seenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last login: ${date}`} - /> - ), + accessor: 'seenAt', + Cell: TimeAgoCell, maxWidth: 150, }, ] as Column[], diff --git a/frontend/src/component/admin/users/InactiveUsersList/InactiveUsersList.tsx b/frontend/src/component/admin/users/InactiveUsersList/InactiveUsersList.tsx index 6f416131b5..670cb60535 100644 --- a/frontend/src/component/admin/users/InactiveUsersList/InactiveUsersList.tsx +++ b/frontend/src/component/admin/users/InactiveUsersList/InactiveUsersList.tsx @@ -147,27 +147,15 @@ export const InactiveUsersList = () => { { id: 'last-login', Header: 'Last login', - accessor: (row: any) => row.seenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last login: ${date}`} - /> - ), + accessor: 'seenAt', + Cell: TimeAgoCell, maxWidth: 150, }, { id: 'pat-last-login', Header: 'PAT last used', - accessor: (row: any) => row.patSeenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last used: ${date}`} - /> - ), + accessor: 'patSeenAt', + Cell: TimeAgoCell, maxWidth: 150, }, { diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx index cc6353c3e0..86958a4ccc 100644 --- a/frontend/src/component/admin/users/UsersList/UsersList.tsx +++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx @@ -186,14 +186,8 @@ const UsersList = () => { { id: 'last-login', Header: 'Last login', - accessor: (row: any) => row.seenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last login: ${date}`} - /> - ), + accessor: 'seenAt', + Cell: TimeAgoCell, maxWidth: 150, }, { diff --git a/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx b/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx index dcdb7ef87d..88800de52c 100644 --- a/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx +++ b/frontend/src/component/common/Table/cells/TimeAgoCell/TimeAgoCell.tsx @@ -4,9 +4,11 @@ import type { FC } from 'react'; import { formatDateYMD } from 'utils/formatDate'; import { TextCell } from '../TextCell/TextCell.tsx'; import { TimeAgo } from 'component/common/TimeAgo/TimeAgo'; +import type { ColumnInstance } from 'react-table'; interface ITimeAgoCellProps { - value?: string | number | Date; + value?: string | number | Date | null; + column?: ColumnInstance; live?: boolean; emptyText?: string; title?: (date: string) => string; @@ -15,9 +17,10 @@ interface ITimeAgoCellProps { export const TimeAgoCell: FC = ({ value, + column, live = false, - emptyText, - title, + emptyText = 'Never', + title = (date) => (column ? `${column.Header}: ${date}` : date), dateFormat = formatDateYMD, }) => { const { locationSettings } = useLocationSettings(); @@ -28,7 +31,7 @@ export const TimeAgoCell: FC = ({ return ( - + { { Header: 'Created', accessor: 'created_at', - Cell: ({ value }: { value: Date }) => ( - + Cell: ({ value, column }) => ( + ), maxWidth: 150, }, diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx index 4276eded09..e44ee1b52f 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx @@ -179,13 +179,8 @@ export const ProjectAccessTable: VFC = () => { { id: 'added', Header: 'Added', - accessor: (row: IProjectAccess) => { - const userRow = row.entity as IUser | IGroup; - return userRow.addedAt || ''; - }, - Cell: ({ value }: { value: Date }) => ( - - ), + accessor: 'entity.addedAt', + Cell: TimeAgoCell, maxWidth: 130, }, { @@ -202,9 +197,7 @@ export const ProjectAccessTable: VFC = () => { .sort() .reverse()[0]; }, - Cell: ({ value }: { value: Date }) => ( - - ), + Cell: TimeAgoCell, maxWidth: 130, }, { diff --git a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx index 3bcfdade23..678ab0390a 100644 --- a/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx +++ b/frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx @@ -88,14 +88,8 @@ const columns = [ { id: 'lastLogin', Header: 'Last login', - accessor: (row: IGroupUser) => row.seenAt || '', - Cell: ({ row: { original: user } }: any) => ( - `Last login: ${date}`} - /> - ), + accessor: 'seenAt', + Cell: TimeAgoCell, maxWidth: 150, }, // Always hidden -- for search diff --git a/frontend/src/component/project/ProjectList/ProjectsListTable/ProjectsListTable.tsx b/frontend/src/component/project/ProjectList/ProjectsListTable/ProjectsListTable.tsx index 4424b32d2b..dc04ac0b6c 100644 --- a/frontend/src/component/project/ProjectList/ProjectsListTable/ProjectsListTable.tsx +++ b/frontend/src/component/project/ProjectList/ProjectsListTable/ProjectsListTable.tsx @@ -55,12 +55,12 @@ export const ProjectsListTable = ({ projects }: ProjectsListTableProps) => { }, { Header: 'Last updated', - id: 'lastUpdatedAt', - Cell: ({ row }: { row: { original: ProjectSchema } }) => ( + accessor: (row: ProjectSchema) => + row.lastUpdatedAt || row.createdAt, + Cell: ({ value, column }) => ( ), diff --git a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx index 3685a4e336..9bda4c41a0 100644 --- a/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx +++ b/frontend/src/component/unknownFlags/UnknownFlagsTable.tsx @@ -62,8 +62,12 @@ export const UnknownFlagsTable = () => { { Header: 'Last seen', accessor: 'seenAt', - Cell: ({ value }: { value: Date }) => ( - + Cell: ({ value, column }) => ( + ), }, {