diff --git a/services/web/frontend/js/features/project-list/components/table/cells/last-updated-by.tsx b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-by.tsx new file mode 100644 index 0000000000..1d5aa5c0ea --- /dev/null +++ b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-by.tsx @@ -0,0 +1,22 @@ +import { FC } from 'react' +import { UserRef } from '../../../../../../../types/project/dashboard/api' +import { useTranslation } from 'react-i18next' +import { getUserName } from '@/features/project-list/util/user' + +export const LastUpdatedBy: FC<{ + lastUpdatedBy: UserRef + lastUpdatedDate: string +}> = ({ lastUpdatedBy, lastUpdatedDate }) => { + const { t } = useTranslation() + + const userName = getUserName(lastUpdatedBy) + + return ( + + {t('last_updated_date_by_x', { + lastUpdatedDate, + person: userName === 'You' ? t('you') : userName, + })} + + ) +} diff --git a/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx index b0b54d5b29..f44021ba34 100644 --- a/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx +++ b/services/web/frontend/js/features/project-list/components/table/cells/last-updated-cell.tsx @@ -1,22 +1,14 @@ -import { useTranslation } from 'react-i18next' import { formatDate, fromNowDate } from '../../../../../utils/dates' import { Project } from '../../../../../../../types/project/dashboard/api' import Tooltip from '../../../../../shared/components/tooltip' -import { getUserName } from '../../../util/user' +import { LastUpdatedBy } from '@/features/project-list/components/table/cells/last-updated-by' type LastUpdatedCellProps = { project: Project } export default function LastUpdatedCell({ project }: LastUpdatedCellProps) { - const { t } = useTranslation() - - const displayText = project.lastUpdatedBy - ? t('last_updated_date_by_x', { - lastUpdatedDate: fromNowDate(project.lastUpdated), - person: getUserName(project.lastUpdatedBy), - }) - : fromNowDate(project.lastUpdated) + const lastUpdatedDate = fromNowDate(project.lastUpdated) const tooltipText = formatDate(project.lastUpdated) return ( @@ -26,8 +18,14 @@ export default function LastUpdatedCell({ project }: LastUpdatedCellProps) { description={tooltipText} overlayProps={{ placement: 'top', trigger: ['hover', 'focus'] }} > - {/* OverlayTrigger won't fire unless icon is wrapped in a span */} - {displayText} + {project.lastUpdatedBy ? ( + + ) : ( + {lastUpdatedDate} + )} ) } diff --git a/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx b/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx index 8e3d605a0b..82fa8a61b8 100644 --- a/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx +++ b/services/web/frontend/js/features/project-list/components/table/cells/owner-cell.tsx @@ -41,11 +41,13 @@ type OwnerCellProps = { } export default function OwnerCell({ project }: OwnerCellProps) { + const { t } = useTranslation() + const ownerName = getOwnerName(project) return ( <> - {ownerName} + {ownerName === 'You' ? t('you') : ownerName} {project.source === 'token' ? ( ( + ({ ownerName }) => { + const { t } = useTranslation() + + const x = ownerName === 'You' ? t('you') : ownerName + + return <> — {t('owned_by_x', { x })} + } +) +ProjectListOwnerName.displayName = 'ProjectListOwnerName' diff --git a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx index 235c839ccd..8fcb047efb 100644 --- a/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx +++ b/services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx @@ -8,12 +8,14 @@ import ActionsDropdown from '../dropdown/actions-dropdown' import { getOwnerName } from '../../util/project' import { Project } from '../../../../../../types/project/dashboard/api' import { ProjectCheckbox } from './project-checkbox' +import { ProjectListOwnerName } from '@/features/project-list/components/table/project-list-owner-name' type ProjectListTableRowProps = { project: Project } function ProjectListTableRow({ project }: ProjectListTableRowProps) { const { t } = useTranslation() + const ownerName = getOwnerName(project) return ( @@ -30,7 +32,7 @@ function ProjectListTableRow({ project }: ProjectListTableRowProps) { - {ownerName ? <> — {t('owned_by_x', { x: ownerName })} : null} + {ownerName ? : null}