using Trans component

Kira-Pilot · Kira-Pilot · commit 0125d4f457f2 · 2023-02-07T16:49:55.000Z
diff --git a/site/src/components/AuditLogRow/AuditLogDescription.tsx b/site/src/components/AuditLogRow/AuditLogDescription.tsx
@@ -3,55 +3,19 @@ import { AuditLog } from "api/typesGenerated"
 import { Link as RouterLink } from "react-router-dom"
 import Link from "@material-ui/core/Link"
 import { makeStyles } from "@material-ui/core/styles"
-import i18next from "i18next"
-
-const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({
-  auditLog,
-}): JSX.Element => {
-  const { t } = i18next
-
-  // audit logs with a resource_type of workspace build use workspace name as a target
-  const target = auditLog.additional_fields?.workspace_name?.trim()
-  // workspaces can be started/stopped by a user, or kicked off automatically by Coder
-  const user =
-    auditLog.additional_fields?.build_reason &&
-    auditLog.additional_fields?.build_reason !== "initiator"
-      ? t("auditLog:table.logRow.buildReason")
-      : auditLog.user?.username.trim()
-
-  const actionVerb =
-    auditLog.action === "start"
-      ? t("auditLog:table.logRow.started")
-      : t("auditLog:table.logRow.stopped")
-
-  return (
-    <span>
-      <>
-        {user}{" "}
-        {auditLog.resource_link ? (
-          <Link component={RouterLink} to={auditLog.resource_link}>
-            <strong>{actionVerb}</strong>
-          </Link>
-        ) : (
-          { actionVerb }
-        )}{" "}
-        {t("auditLog:table.logRow.workspace")}
-        <strong>{target}</strong>
-      </>
-    </span>
-  )
-}
+import { useTranslation } from "react-i18next"
+import { BuildAuditDescription } from "./BuildAuditDescription"
 
 export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({
   auditLog,
 }): JSX.Element => {
   const classes = useStyles()
-  const { t } = i18next
+  const { t } = useTranslation("auditLog")
 
   const target = auditLog.resource_target.trim()
   const user = auditLog.user
     ? auditLog.user.username.trim()
-    : t("auditLog:table.logRow.unknownUser")
+    : t("table.logRow.unknownUser")
 
   if (auditLog.resource_type === "workspace_build") {
     return <BuildAuditDescription auditLog={auditLog} />
@@ -72,6 +36,21 @@ export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({
     .replace("{user}", `${user}`)
     .replace("{target}", "")
 
+  // return (
+  //   <span>
+  //     <Trans
+  //       t={t}
+  //       i18nKey="table.logRow.auditDescription"
+  //       values={{ truncatedDescription, target }}
+  //     >
+  //       {"{{truncatedDescription}}"}
+  //       <Link component={RouterLink} to={auditLog.resource_link}>
+  //         <strong>{"{{target}}"}</strong>
+  //       </Link>
+  //     </Trans>
+  //   </span>
+  // )
+
   return (
     <span>
       {truncatedDescription}
@@ -84,7 +63,7 @@ export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({
       )}
       {auditLog.is_deleted && (
         <span className={classes.deletedLabel}>
-          <>{t("auditLog:table.logRow.deletedLabel")}</>
+          <>{t("table.logRow.deletedLabel")}</>
         </span>
       )}
       {/* logs for workspaces created on behalf of other users indicate ownership in the description */}
@@ -94,7 +73,7 @@ export const AuditLogDescription: FC<{ auditLog: AuditLog }> = ({
           auditLog.user?.username && (
           <span>
             <>
-              {t("auditLog:table.logRow.onBehalfOf", {
+              {t("table.logRow.onBehalfOf", {
                 owner: auditLog.additional_fields.workspace_owner,
               })}
             </>
diff --git a/site/src/components/AuditLogRow/BuildAuditDescription.tsx b/site/src/components/AuditLogRow/BuildAuditDescription.tsx
@@ -0,0 +1,38 @@
+import { Trans, useTranslation } from "react-i18next"
+import { AuditLog } from "api/typesGenerated"
+import { FC } from "react"
+import { Link as RouterLink } from "react-router-dom"
+import Link from "@material-ui/core/Link"
+
+export const BuildAuditDescription: FC<{ auditLog: AuditLog }> = ({
+  auditLog,
+}): JSX.Element => {
+  const { t } = useTranslation("auditLog")
+
+  // audit logs with a resource_type of workspace build use workspace name as a target
+  const workspaceName = auditLog.additional_fields?.workspace_name?.trim()
+  // workspaces can be started/stopped by a user, or kicked off automatically by Coder
+  const user =
+    auditLog.additional_fields?.build_reason &&
+    auditLog.additional_fields?.build_reason !== "initiator"
+      ? "Coder automatically"
+      : auditLog.user?.username.trim()
+
+  const action = auditLog.action === "start" ? "started" : "stopped"
+
+  return (
+    <span>
+      <Trans
+        t={t}
+        i18nKey="table.logRow.workspaceBuild"
+        values={{ user, action, workspaceName }}
+      >
+        {"{{user}}"}
+        <Link component={RouterLink} to={auditLog.resource_link}>
+          {"{{action}}"}
+        </Link>
+        workspace{"{{workspaceName}}"}
+      </Trans>
+    </span>
+  )
+}
diff --git a/site/src/i18n/en/auditLog.json b/site/src/i18n/en/auditLog.json
@@ -13,11 +13,9 @@
       "os": "OS: ",
       "browser": "Browser: ",
       "onBehalfOf": " on behalf of {{owner}}",
-      "buildReason": "Coder automatically",
       "unknownUser": "an unknown user",
-      "started": "started",
-      "stopped": "stopped",
-      "workspace": " workspace "
+      "workspaceBuild": "{{user}} <1>{{action}}</1> workspace <strong>{{workspaceName}}</strong>",
+      "auditDescription": "{{truncatedDescription}} <1>{{target}}</1>"
     }
   },
   "paywall": {
