improvements: address feedback

frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDetailsSection.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { faBan, faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -5,7 +6,8 @@ import { format } from "date-fns";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import { SecretSyncLabel, SecretSyncStatusBadge } from "@app/components/secret-syncs";
 import { Badge, IconButton } from "@app/components/v2";
-import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSub } from "@app/context";
+import { ProjectPermissionSecretSyncActions } from "@app/context/ProjectPermissionContext/types";
 import { SecretSyncStatus, TSecretSync } from "@app/hooks/api/secretSyncs";
 
 type Props = {
@@ -16,12 +18,26 @@ type Props = {
 export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) => {
   const { syncStatus, lastSyncMessage, lastSyncedAt, name, description, isEnabled } = secretSync;
 
+  const failureMessage = useMemo(() => {
+    if (syncStatus === SecretSyncStatus.Failed) {
+      if (lastSyncMessage)
+        try {
+          return JSON.stringify(JSON.parse(lastSyncMessage), null, 2);
+        } catch {
+          return lastSyncMessage;
+        }
+
+      return "An Unknown Error Occurred.";
+    }
+    return null;
+  }, [syncStatus, lastSyncMessage]);
+
   return (
     <div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
       <div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
         <h3 className="font-semibold text-mineshaft-100">Details</h3>
         <ProjectPermissionCan
-          I={ProjectPermissionActions.Edit}
+          I={ProjectPermissionSecretSyncActions.Edit}
           a={ProjectPermissionSub.SecretSyncs}
         >
           {(isAllowed) => (
@@ -56,9 +72,9 @@ export const SecretSyncDetailsSection = ({ secretSync, onEditDetails }: Props) =
               {format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
             </SecretSyncLabel>
           )}
-          {syncStatus === SecretSyncStatus.Failed && lastSyncMessage && (
+          {syncStatus === SecretSyncStatus.Failed && failureMessage && (
             <SecretSyncLabel labelClassName="text-red" label="Last Sync Error">
-              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{lastSyncMessage}</p>
+              <p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
             </SecretSyncLabel>
           )}
         </div>