Translate You on project dashboard (#18122)

GitOrigin-RevId: 5157df9079460c5aa8122fc29b14babf12a32bc4

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 (
+    <span>
+      {t('last_updated_date_by_x', {
+        lastUpdatedDate,
+        person: userName === 'You' ? t('you') : userName,
+      })}
+    </span>
+  )
+}

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 */}
-      <span>{displayText}</span>
+      {project.lastUpdatedBy ? (
+        <LastUpdatedBy
+          lastUpdatedBy={project.lastUpdatedBy}
+          lastUpdatedDate={lastUpdatedDate}
+        />
+      ) : (
+        <span>{lastUpdatedDate}</span>
+      )}
     </Tooltip>
   )
 }

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' ? (
         <LinkSharingIcon
           className="hidden-xs"

services/web/frontend/js/features/project-list/components/table/project-list-owner-name.tsx

@@ -0,0 +1,13 @@
+import { memo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export const ProjectListOwnerName = memo<{ ownerName: string }>(
+  ({ ownerName }) => {
+    const { t } = useTranslation()
+
+    const x = ownerName === 'You' ? t('you') : ownerName
+
+    return <> — {t('owned_by_x', { x })}</>
+  }
+)
+ProjectListOwnerName.displayName = 'ProjectListOwnerName'

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) {
       </td>
       <td className="dash-cell-date-owner visible-xs pb-0">
         <LastUpdatedCell project={project} />
-        {ownerName ? <> — {t('owned_by_x', { x: ownerName })}</> : null}
+        {ownerName ? <ProjectListOwnerName ownerName={ownerName} /> : null}
       </td>
       <td className="dash-cell-owner hidden-xs">
         <OwnerCell project={project} />