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"
/>

frontend/src/component/admin/groups/Group/Group.tsx

@@ -117,14 +117,8 @@ export const Group: VFC = () => {
             },
             {
                 Header: 'Last login',
-                accessor: (row: IGroupUser) => row.seenAt || '',
+                accessor: 'seenAt',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: TimeAgoCell,
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `Last login: ${date}`}
-                    />
-                ),
                 maxWidth: 150,
             },
             {

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 || '',
+                    accessor: 'seenAt',
-                    Cell: ({ row: { original: user } }: any) => (
+                    Cell: TimeAgoCell,
-                        <TimeAgoCell
-                            value={user.seenAt}
-                            emptyText='Never'
-                            title={(date) => `Last login: ${date}`}
-                        />
-                    ),
                     maxWidth: 150,
                 },
             ] as Column<IUser>[],

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 || '',
+                accessor: 'seenAt',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: TimeAgoCell,
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `Last login: ${date}`}
-                    />
-                ),
                 maxWidth: 150,
             },
             {
                 id: 'pat-last-login',
                 Header: 'PAT last used',
-                accessor: (row: any) => row.patSeenAt || '',
+                accessor: 'patSeenAt',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: TimeAgoCell,
-                    <TimeAgoCell
-                        value={user.patSeenAt}
-                        emptyText='Never'
-                        title={(date) => `Last used: ${date}`}
-                    />
-                ),
                 maxWidth: 150,
             },
             {

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 || '',
+                accessor: 'seenAt',
-                Cell: ({ row: { original: user } }: any) => (
+                Cell: TimeAgoCell,
-                    <TimeAgoCell
-                        value={user.seenAt}
-                        emptyText='Never'
-                        title={(date) => `Last login: ${date}`}
-                    />
-                ),
                 maxWidth: 150,
             },
             {

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,
+    emptyText = 'Never',
-    title,
+    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={{

frontend/src/component/loginHistory/LoginHistoryTable/LoginHistoryTable.tsx

@@ -75,8 +75,12 @@ export const LoginHistoryTable = () => {
             {
                 Header: 'Created',
                 accessor: 'created_at',
-                Cell: ({ value }: { value: Date }) => (
+                Cell: ({ value, column }) => (
-                    <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
+                    <TimeAgoCell
+                        value={value}
+                        column={column}
+                        dateFormat={formatDateYMDHMS}
+                    />
                 ),
                 maxWidth: 150,
             },

frontend/src/component/project/ProjectAccess/ProjectAccessTable/ProjectAccessTable.tsx

@@ -179,13 +179,8 @@ export const ProjectAccessTable: VFC = () => {
             {
                 id: 'added',
                 Header: 'Added',
-                accessor: (row: IProjectAccess) => {
+                accessor: 'entity.addedAt',
-                    const userRow = row.entity as IUser | IGroup;
+                Cell: TimeAgoCell,
-                    return userRow.addedAt || '';
-                },
-                Cell: ({ value }: { value: Date }) => (
-                    <TimeAgoCell value={value} emptyText='Never' />
-                ),
                 maxWidth: 130,
             },
             {
@@ -202,9 +197,7 @@ export const ProjectAccessTable: VFC = () => {
                         .sort()
                         .reverse()[0];
                 },
-                Cell: ({ value }: { value: Date }) => (
+                Cell: TimeAgoCell,
-                    <TimeAgoCell value={value} emptyText='Never' />
-                ),
                 maxWidth: 130,
             },
             {

frontend/src/component/project/ProjectAccess/ProjectGroupView/ProjectGroupView.tsx

@@ -88,14 +88,8 @@ const columns = [
     {
         id: 'lastLogin',
         Header: 'Last login',
-        accessor: (row: IGroupUser) => row.seenAt || '',
+        accessor: 'seenAt',
-        Cell: ({ row: { original: user } }: any) => (
+        Cell: TimeAgoCell,
-            <TimeAgoCell
-                value={user.seenAt}
-                emptyText='Never'
-                title={(date) => `Last login: ${date}`}
-            />
-        ),
         maxWidth: 150,
     },
     // Always hidden -- for search

frontend/src/component/project/ProjectList/ProjectsListTable/ProjectsListTable.tsx

@@ -55,12 +55,12 @@ export const ProjectsListTable = ({ projects }: ProjectsListTableProps) => {
             },
             {
                 Header: 'Last updated',
-                id: 'lastUpdatedAt',
+                accessor: (row: ProjectSchema) =>
-                Cell: ({ row }: { row: { original: ProjectSchema } }) => (
+                    row.lastUpdatedAt || row.createdAt,
+                Cell: ({ value, column }) => (
                     <TimeAgoCell
-                        value={
+                        value={value}
-                            row.original.lastUpdatedAt || row.original.createdAt
+                        column={column}
-                        }
                         dateFormat={formatDateYMDHMS}
                     />
                 ),

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 }) => (
-                    <TimeAgoCell value={value} dateFormat={formatDateYMDHMS} />
+                    <TimeAgoCell
+                        value={value}
+                        column={column}
+                        dateFormat={formatDateYMDHMS}
+                    />
                 ),
             },
             {