fix: audit actor name column width (#1319)

Author: rohanchkrabrty

ui/src/pages/audit-logs/list/actor-cell.tsx

@@ -7,10 +7,15 @@ import KeyIcon from "~/assets/icons/key.svg?react";
 type ActorCellProps = {
   size?: "large" | "small";
   value: AuditRecordActor;
+  maxLength?: number;
 };
 
-export default function ActorCell({ size = "large", value }: ActorCellProps) {
-  const name = getAuditLogActorName(value);
+export default function ActorCell({
+  size = "large",
+  value,
+  maxLength,
+}: ActorCellProps) {
+  const name = getAuditLogActorName(value, maxLength);
   const isSystem = value.type === ACTOR_TYPES.SYSTEM;
   const isServiceUser = value.type === ACTOR_TYPES.SERVICE_USER;
 

ui/src/pages/audit-logs/list/list.module.css

@@ -26,7 +26,7 @@
 
 .name-column {
   padding-left: var(--rs-space-7);
-  max-width: 200px;
+  max-width: 240px;
 }
 .org-column {
   max-width: 200px;

ui/src/pages/audit-logs/list/sidepanel-details.tsx

@@ -69,7 +69,7 @@ export default function SidePanelDetails({
             href={`/users/${actor?.id}`}
             label="Actor"
             data-test-id="actor-link">
-            <ActorCell value={actor!} size="small" />
+            <ActorCell value={actor!} size="small" maxLength={12} />
           </SidepanelListItemLink>
           <SidepanelListItemLink
             isLink={!!orgId && !isZeroUUID(orgId)}

ui/src/pages/audit-logs/util.ts

@@ -5,12 +5,18 @@ import {
   AuditRecordSchema,
 } from "@raystack/proton/frontier";
 
-export const getAuditLogActorName = (actor?: AuditRecordActor) => {
+export const getAuditLogActorName = (
+  actor?: AuditRecordActor,
+  maxLength = 15,
+) => {
   if (actor?.type === ACTOR_TYPES.SYSTEM) return "System";
 
   const name = actor?.title || actor?.name || "-";
 
-  if (actor?.metadata?.["is_super_user"] === true) return name + " (Admin)";
+  if (actor?.metadata?.["is_super_user"] === true)
+    if (name.length > maxLength)
+      return name.substring(0, maxLength) + "..." + " (Admin)";
+    else return name + " (Admin)";
 
   return name;
 };