chore: timeagocell default fallback (#10475)

https://linear.app/unleash/issue/2-3759/set-timeagocell-default-fallback-to-never Sets the default `emptyText` fallback to 'Never'. This should help with consistency and DRYness. Also noticed some of our TimeAgoCell `title` properties were redundant, so I removed them for simplicity. Examples: <img width="1268" height="1063" alt="image" src="https://github.com/user-attachments/assets/b7a8118b-bd73-45bc-8823-fa9f211f9ea9" /> <img width="793" height="366" alt="image" src="https://github.com/user-attachments/assets/f494e1de-2bbb-46c8-ad87-adc7a1d4ea56" />
2025-08-09 13:47:13 +02:00 · 2025-08-07 18:05:28 +01:00 · 2025-08-07 18:05:28 +01:00 · 57424312b5
commit 57424312b5
parent 057a906892
10 changed files with 39 additions and 71 deletions
--- 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) => (
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `Last login: ${date}`}
-                    />
-                ),
+                accessor: 'seenAt',
+                Cell: TimeAgoCell,
                maxWidth: 150,
            },
            {
--- 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) => (
-                        <TimeAgoCell
-                            value={user.seenAt}
-                            emptyText='Never'
-                            title={(date) => `Last login: ${date}`}
-                        />
-                    ),
+                    accessor: 'seenAt',
+                    Cell: TimeAgoCell,
                    maxWidth: 150,
                },
            ] as Column<IUser>[],
--- 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) => (
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `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) => (
-                    <TimeAgoCell
-                        value={user.patSeenAt}
-                        emptyText='Never'
-                        title={(date) => `Last used: ${date}`}
-                    />
-                ),
+                accessor: 'patSeenAt',
+                Cell: TimeAgoCell,
                maxWidth: 150,
            },
            {
--- 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) => (
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `Last login: ${date}`}
-                    />
-                ),
+                accessor: 'seenAt',
+                Cell: TimeAgoCell,
                maxWidth: 150,
            },
            {
--- 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<ITimeAgoCellProps> = ({
    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<ITimeAgoCellProps> = ({

    return (
        <TextCell>
-            <Tooltip title={title?.(date) ?? date} arrow>
+            <Tooltip title={title(date)} arrow>
                <Typography
                    noWrap
                    sx={{
--- a/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx
+++ b/frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx
@ -75,8 +75,12 @@ export const LoginHistoryTable = () => {
            {
                Header: 'Created',
                accessor: 'created_at',
-                Cell: ({ value }: { value: Date }) => (
-                    <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
+                Cell: ({ value, column }) => (
+                    <TimeAgoCell
+                        value={value}
+                        column={column}
+                        dateFormat={formatDateYMDHMS}
+                    />
                ),
                maxWidth: 150,
            },
--- 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 }) => (
-                    <TimeAgoCell value={value} emptyText='Never' />
-                ),
+                accessor: 'entity.addedAt',
+                Cell: TimeAgoCell,
                maxWidth: 130,
            },
            {
@ -202,9 +197,7 @@ export const ProjectAccessTable: VFC = () => {
                        .sort()
                        .reverse()[0];
                },
-                Cell: ({ value }: { value: Date }) => (
-                    <TimeAgoCell value={value} emptyText='Never' />
-                ),
+                Cell: TimeAgoCell,
                maxWidth: 130,
            },
            {
--- 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) => (
-            <TimeAgoCell
-                value={user.seenAt}
-                emptyText='Never'
-                title={(date) => `Last login: ${date}`}
-            />
-        ),
+        accessor: 'seenAt',
+        Cell: TimeAgoCell,
        maxWidth: 150,
    },
    // Always hidden -- for search
--- 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 }) => (
                    <TimeAgoCell
-                        value={
-                            row.original.lastUpdatedAt || row.original.createdAt
-                        }
+                        value={value}
+                        column={column}
                        dateFormat={formatDateYMDHMS}
                    />
                ),
--- 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 }) => (
-                    <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
+                Cell: ({ value, column }) => (
+                    <TimeAgoCell
+                        value={value}
+                        column={column}
+                        dateFormat={formatDateYMDHMS}
+                    />
                ),
            },
            {