From d5a0fb5bbd2a81b48bbf9fdd7a670f19cbfe8b00 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 12 Aug 2024 17:03:52 +0000
Subject: [PATCH] fix(site): fix user agent data on audit row

---
 .../AuditLogRow/AuditLogRow.stories.tsx       | 32 +++++++++++++++++++
 .../AuditPage/AuditLogRow/AuditLogRow.tsx     | 21 ++++++------
 2 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
index 55451aa51c75c..bf0112f6efe22 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx
@@ -12,6 +12,7 @@ import {
   MockAuditLogWithWorkspaceBuild,
   MockAuditLogWithDeletedResource,
   MockAuditLogGitSSH,
+  MockUser,
 } from "testHelpers/entities";
 import { AuditLogRow } from "./AuditLogRow";
 
@@ -120,3 +121,34 @@ export const WithOrganization: Story = {
     showOrgDetails: true,
   },
 };
+
+export const NoUserAgent: Story = {
+  args: {
+    auditLog: {
+      id: "8073939e-2f18-41f6-9cec-c1e61293b0d5",
+      request_id: "79d1df16-b387-4d47-8f47-dc2b919c78b9",
+      time: "2024-07-15T19:30:16.327247Z",
+      organization_id: "703f72a1-76f6-4f89-9de6-8a3989693fe5",
+      ip: "",
+      user_agent: "",
+      resource_type: "workspace_build",
+      resource_id: "605e8bda-2d1e-43c3-beec-97ebedc1b88c",
+      resource_target: "",
+      resource_icon: "",
+      action: "delete",
+      diff: {},
+      status_code: 500,
+      additional_fields: {
+        build_number: "35",
+        build_reason: "autodelete",
+        workspace_id: "649742dc-1b4a-43d8-8539-2fbc11b1bbac",
+        workspace_name: "yeee",
+        workspace_owner: "",
+      },
+      description: "{user} deleted workspace {target}",
+      resource_link: "/@jon/yeee/builds/35",
+      is_deleted: false,
+      user: MockUser,
+    },
+  },
+};
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
index 9c243c95a318e..383eeadad3735 100644
--- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
+++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -48,7 +48,9 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
   const [isDiffOpen, setIsDiffOpen] = useState(defaultIsDiffOpen);
   const diffs = Object.entries(auditLog.diff);
   const shouldDisplayDiff = diffs.length > 0;
-  const { os, browser } = userAgentParser(auditLog.user_agent);
+  const userAgent = auditLog.user_agent
+    ? userAgentParser(auditLog.user_agent)
+    : undefined;
 
   let auditDiff = auditLog.diff;
 
@@ -129,17 +131,18 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
                               <div>{auditLog.ip}</div>
                             </div>
                           )}
-                          {os.name && (
+                          {userAgent?.os.name && (
                             <div>
                               <h4 css={styles.auditLogInfoHeader}>OS:</h4>
-                              <div>{os.name}</div>
+                              <div>{userAgent.os.name}</div>
                             </div>
                           )}
-                          {browser.name && (
+                          {userAgent?.browser.name && (
                             <div>
                               <h4 css={styles.auditLogInfoHeader}>Browser:</h4>
                               <div>
-                                {browser.name} {browser.version}
+                                {userAgent.browser.name}{" "}
+                                {userAgent.browser.version}
                               </div>
                             </div>
                           )}
@@ -175,17 +178,17 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
                           <strong>{auditLog.ip}</strong>
                         </span>
                       )}
-                      {os.name && (
+                      {userAgent?.os.name && (
                         <span css={styles.auditLogInfo}>
                           <span>OS: </span>
-                          <strong>{os.name}</strong>
+                          <strong>{userAgent.os.name}</strong>
                         </span>
                       )}
-                      {browser.name && (
+                      {userAgent?.browser.name && (
                         <span css={styles.auditLogInfo}>
                           <span>Browser: </span>
                           <strong>
-                            {browser.name} {browser.version}
+                            {userAgent.browser.name} {userAgent.browser.version}
                           </strong>
                         </span>
                       )}