fix: Audit log human parse message and nullable diffs (#3978)

* fix: Audit log human parse message and nullable diffs

* Fix diff values

site/src/components/AuditLogRow/AuditLogDiff.tsx

@@ -4,11 +4,20 @@ import { colors } from "theme/colors"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import { combineClasses } from "util/combineClasses"
 
-const getDiffValue = (value: number | string | boolean) => {
+const getDiffValue = (value: unknown): string => {
   if (typeof value === "string") {
     return `"${value}"`
   }
 
+  if (Array.isArray(value)) {
+    const values = value.map((v) => getDiffValue(v))
+    return `[${values.join(", ")}]`
+  }
+
+  if (value === null || value === undefined) {
+    return "null"
+  }
+
   return value.toString()
 }
 

site/src/components/AuditLogRow/AuditLogRow.tsx

@@ -7,7 +7,6 @@ import { CloseDropdown, OpenDropdown } from "components/DropdownArrows/DropdownA
 import { Pill } from "components/Pill/Pill"
 import { Stack } from "components/Stack/Stack"
 import { UserAvatar } from "components/UserAvatar/UserAvatar"
-import { t } from "i18next"
 import { ComponentProps, useState } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import userAgentParser from "ua-parser-js"
@@ -26,26 +25,10 @@ const pillTypeByHttpStatus = (httpStatus: number): ComponentProps<typeof Pill>["
   return "success"
 }
 
-const actionLabelByAction: Record<AuditLog["action"], string> = {
-  create: t("actions.create", { ns: "auditLog" }),
-  write: t("actions.write", { ns: "auditLog" }),
-  delete: t("actions.delete", { ns: "auditLog" }),
-}
-
-const resourceLabelByResourceType: Record<AuditLog["resource_type"], string> = {
-  organization: "organization",
-  template: "template",
-  template_version: "template version",
-  user: "user",
-  workspace: "workspace",
-  git_ssh_key: "git ssh key",
-  api_key: "api key",
-}
-
 const readableActionMessage = (auditLog: AuditLog) => {
-  return `${actionLabelByAction[auditLog.action]} ${
+  return auditLog.description
-    resourceLabelByResourceType[auditLog.resource_type]
+    .replace("{user}", `<strong>${auditLog.user?.username}</strong>`)
-  }`
+    .replace("{target}", `<strong>${auditLog.resource_target}</strong>`)
 }
 
 export interface AuditLogRowProps {
@@ -98,10 +81,10 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
                 avatarURL={auditLog.user?.avatar_url}
               />
               <div>
-                <span className={styles.auditLogResume}>
+                <span
-                  <strong>{auditLog.user?.username}</strong> {readableActionMessage(auditLog)}{" "}
+                  className={styles.auditLogResume}
-                  <strong>{auditLog.resource_target}</strong>
+                  dangerouslySetInnerHTML={{ __html: readableActionMessage(auditLog) }}
-                </span>
+                />
                 <span className={styles.auditLogTime}>{createDayString(auditLog.time)}</span>
               </div>
             </Stack>

site/src/testHelpers/entities.ts

@@ -775,7 +775,7 @@ export const MockAuditLog: TypesGen.AuditLog = {
   diff: {},
   status_code: 200,
   additional_fields: "",
-  description: "Colin Adler updated the workspace bruno-dev",
+  description: "{user} updated workspace {target}",
   user: MockUser,
 }
 
@@ -799,5 +799,10 @@ export const MockAuditLog2: TypesGen.AuditLog = {
       new: "53bded77-7b9d-4e82-8771-991a34d759f9",
       secret: false,
     },
+    roles: {
+      old: null,
+      new: ["admin", "auditor"],
+      secret: false,
+    },
   },
 }