From 7ff8a195183e75170f9b0ba9b5a7487876762788 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Mon, 14 Jul 2025 14:08:30 -0700
Subject: [PATCH] improvement: address feedback

---
 .../src/hooks/api/folderCommits/queries.tsx   |  3 +-
 .../CommitDetailsTab/CommitDetailsTab.tsx     | 17 ++++++-
 .../SecretVersionDiffView.tsx                 | 47 +++++++------------
 3 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/frontend/src/hooks/api/folderCommits/queries.tsx b/frontend/src/hooks/api/folderCommits/queries.tsx
index 8d0883c5b..785c13ad2 100644
--- a/frontend/src/hooks/api/folderCommits/queries.tsx
+++ b/frontend/src/hooks/api/folderCommits/queries.tsx
@@ -265,7 +265,8 @@ export const useGetFolderCommitHistory = ({
     ],
     queryFn: () =>
       fetchFolderCommitHistory(workspaceId, environment, directory, offset, limit, search, sort),
-    enabled: Boolean(workspaceId && environment)
+    enabled: Boolean(workspaceId && environment),
+    placeholderData: (prev) => prev
   });
 };
 
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
index 7c7fa3d0d..f1d6d8f7e 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/CommitDetailsTab/CommitDetailsTab.tsx
@@ -1,5 +1,10 @@
 import { useEffect, useState } from "react";
-import { faAngleDown, faCodeCommit, faWarning } from "@fortawesome/free-solid-svg-icons";
+import {
+  faAngleDown,
+  faChevronLeft,
+  faCodeCommit,
+  faWarning
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { DropdownMenuItem } from "@radix-ui/react-dropdown-menu";
 import { useSearch } from "@tanstack/react-router";
@@ -244,6 +249,16 @@ export const CommitDetailsTab = ({
 
   return (
     <>
+      <Button
+        variant="link"
+        type="submit"
+        leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+        onClick={() => {
+          goBackToHistory();
+        }}
+      >
+        Commit History
+      </Button>
       <PageHeader
         title={`${parsedCommitDetails.changes?.message}` || "No message"}
         description={
diff --git a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
index b3bda7368..7810ccdfc 100644
--- a/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
+++ b/frontend/src/pages/secret-manager/CommitDetailsPage/components/SecretVersionDiffView/SecretVersionDiffView.tsx
@@ -230,11 +230,6 @@ const renderJsonWithDiffs = (
       : "flex bg-green-500/50 rounded-sm text-green-300";
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const getHighlightClass = (_different: boolean) => {
-    return "";
-  };
-
   const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " ";
   const keyDisplay = keyName ? `"${keyName}": ` : "";
   const comma = !isLastItem ? "," : "";
@@ -257,8 +252,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>{valueDisplay}</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>{valueDisplay}</span>
           {comma}
         </div>
       </div>
@@ -271,8 +266,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>[]</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>[]</span>
           {comma}
         </div>
       </div>
@@ -285,8 +280,8 @@ const renderJsonWithDiffs = (
         <div className="w-4 flex-shrink-0">{prefix}</div>
         <div>
           {indent}
-          {keyName && <span className={getHighlightClass(isDifferent)}>{keyDisplay}</span>}
-          <span className={getHighlightClass(isDifferent)}>{"{}"}</span>
+          {keyName && <span>{keyDisplay}</span>}
+          <span>{"{}"}</span>
           {comma}
         </div>
       </div>
@@ -326,12 +321,8 @@ const renderJsonWithDiffs = (
           </div>
           <div>
             {indent}
-            {keyName && (
-              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
-                {keyDisplay}
-              </span>
-            )}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>[</span>
+            {keyName && <span>{keyDisplay}</span>}
+            <span>[</span>
           </div>
         </div>
 
@@ -363,7 +354,7 @@ const renderJsonWithDiffs = (
           </div>
           <div>
             {indent}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>]</span>
+            <span>]</span>
             {comma}
           </div>
         </div>
@@ -382,12 +373,8 @@ const renderJsonWithDiffs = (
           </div>
           <div>
             {indent}
-            {keyName && (
-              <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>
-                {keyDisplay}
-              </span>
-            )}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"{"}</span>
+            {keyName && <span>{keyDisplay}</span>}
+            <span>{"{"}</span>
           </div>
         </div>
 
@@ -420,7 +407,7 @@ const renderJsonWithDiffs = (
           </div>
           <div>
             {indent}
-            <span className={isContainerAddedOrRemoved ? getHighlightClass(true) : ""}>{"}"}</span>
+            <span>{"}"}</span>
             {comma}
           </div>
         </div>
@@ -630,18 +617,18 @@ export const SecretVersionDiffView = ({
     <div className="overflow-hidden border border-b-0 border-mineshaft-600 bg-mineshaft-800 first:rounded-t last:rounded-b last:border-b">
       {showHeader && renderHeader()}
       {!collapsed && (
-        <div className="border-t border-mineshaft-700 bg-bunker-900 p-3 text-mineshaft-100">
-          <div className="grid grid-cols-2 gap-3">
+        <div className="border-t border-mineshaft-700 bg-mineshaft-900 p-3 text-mineshaft-100">
+          <div className="flex gap-3">
             <div
               ref={oldContainerRef}
-              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
             >
               {oldVersionContent}
             </div>
-
+            <div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
             <div
               ref={newContainerRef}
-              className="thin-scrollbar max-h-96 overflow-auto whitespace-pre rounded border border-mineshaft-600 bg-mineshaft-900 p-4"
+              className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
             >
               {newVersionContent}
             </div>