feat: allow restoring secret values from history (#121)

* feat: allow restoring secret values from history

* feat: added label to the restore button

* fix: button ui

---------

Co-authored-by: Nimish <nimish@phase.dev>
Co-authored-by: Nimish <85357445+nimish-ks@users.noreply.github.com>

Author: rohan-chaturvedi

frontend/components/environments/SecretPropertyDiffs.tsx

@@ -1,13 +1,16 @@
 import { SecretEventType, SecretTagType, SecretType } from '@/apollo/graphql'
 import { areTagsAreSame } from '@/utils/tags'
 import { Tag } from './SecretRow'
+import { FaRedoAlt, FaUndoAlt } from 'react-icons/fa'
+import { Button } from '../common/Button'
 
 export const SecretPropertyDiffs = (props: {
   secret: SecretType
   historyItem: SecretEventType
   index: number
+  handlePropertyChange: Function
 }) => {
-  const { secret, historyItem, index } = props
+  const { secret, historyItem, index, handlePropertyChange } = props
 
   const previousItem = secret.history![index - 1]!
 
@@ -25,6 +28,10 @@ export const SecretPropertyDiffs = (props: {
     return removedTags
   }
 
+  const handleRestoreValue = (value: string) => {
+    handlePropertyChange(secret.id, 'value', value)
+  }
+
   return (
     <>
       {historyItem!.key !== previousItem.key && (
@@ -40,14 +47,26 @@ export const SecretPropertyDiffs = (props: {
       )}
 
       {historyItem!.value !== previousItem.value && (
-        <div className="pl-3 font-mono">
-          <span className="text-neutral-500 mr-2">VALUE:</span>
-          <s className="bg-red-200 dark:bg-red-950 text-red-500 ph-no-capture">
-            {previousItem.value}
-          </s>
-          <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
-            {historyItem!.value}
-          </span>
+        <div className="pl-3 font-mono space-y-1">
+          <div className="flex items-center gap-2">
+            <span className="text-neutral-500 mr-2">VALUE:</span>
+          </div>
+          <div className="flex flex-col">
+            <div className="flex items-center justify-between bg-red-200 dark:bg-red-950">
+              <s className=" text-red-500 ph-no-capture">{previousItem.value}</s>
+              <Button
+                variant="outline"
+                onClick={() => handleRestoreValue(previousItem.value)}
+                title="Restore this value"
+              >
+                <FaRedoAlt />
+                <span className="font-sans text-xs">Restore</span>
+              </Button>
+            </div>
+            <span className="bg-emerald-100 dark:bg-emerald-950 text-emerald-500 ph-no-capture">
+              {historyItem!.value}
+            </span>
+          </div>
         </div>
       )}
 

frontend/components/environments/SecretRow.tsx

@@ -240,8 +240,8 @@ const TagsDialog = (props: {
   )
 }
 
-const HistoryDialog = (props: { secret: SecretType }) => {
-  const { secret } = props
+const HistoryDialog = (props: { secret: SecretType; handlePropertyChange: Function }) => {
+  const { secret, handlePropertyChange } = props
 
   const [isOpen, setIsOpen] = useState<boolean>(false)
 
@@ -358,6 +358,7 @@ const HistoryDialog = (props: { secret: SecretType }) => {
                                 secret={secret}
                                 historyItem={historyItem!}
                                 index={index}
+                                handlePropertyChange={handlePropertyChange}
                               />
                             )}
                           </div>
@@ -887,7 +888,7 @@ export default function SecretRow(props: {
           </div>
 
           <div className="opacity-0 group-hover:opacity-100 transition-opacity ease">
-            <HistoryDialog secret={secret} />
+            <HistoryDialog secret={secret} handlePropertyChange={handlePropertyChange} />
           </div>
 
           <div