Finished secret snapshots

backend/src/ee/controllers/v1/workspaceController.ts

@@ -21,6 +21,7 @@ import {
 		secretSnapshots = await SecretSnapshot.find({
 			workspace: workspaceId
 		})
+		.sort({ createdAt: -1 })
 		.skip(offset)
 		.limit(limit);
 

backend/src/ee/routes/v1/workspace.ts

@@ -39,7 +39,9 @@ router.get(
 
 router.get(
 	'/:workspaceId/logs',
-	requireAuth,
+	requireAuth({
+		acceptedAuthModes: ['jwt']
+	}),
 	requireWorkspaceAuth({
 		acceptedRoles: [ADMIN, MEMBER]
 	}),

backend/src/helpers/secret.ts

@@ -470,11 +470,12 @@ const v1PushSecrets = async ({
 
 			// (EE) add secret versions for new secrets
 			EESecretService.addSecretVersions({
-				secretVersions: newSecrets.map((s) => ({
+				secretVersions: newSecrets.map((secretDocument) => { 
-					...s,
+					return {
-					secret: s._id,
+						...secretDocument.toObject(),
-					isDeleted: false
+						secret: secretDocument._id,
-				}))
+						isDeleted: false
+				}})
 			});
 
 			const addAction = await EELogService.createActionSecret({

frontend/components/basic/Layout.tsx

@@ -121,7 +121,7 @@ export default function Layout({ children }: LayoutProps) {
             }
           });
         }
-        router.push("/dashboard/" + newWorkspaceId + "?Development");
+        router.push("/dashboard/" + newWorkspaceId);
         setIsOpen(false);
         setNewWorkspaceName("");
       } else {
@@ -141,8 +141,7 @@ export default function Layout({ children }: LayoutProps) {
       {
         href:
           "/dashboard/" +
-          workspaceMapping[workspaceSelected as any] +
+          workspaceMapping[workspaceSelected as any],
-          "?Development",
         title: t("nav:menu.secrets"),
         emoji: <FontAwesomeIcon icon={faKey} />,
       },
@@ -199,7 +198,7 @@ export default function Layout({ children }: LayoutProps) {
             .map((workspace: { _id: string }) => workspace._id)
             .includes(intendedWorkspaceId)
         ) {
-          router.push("/dashboard/" + userWorkspaces[0]._id + "?Development");
+          router.push("/dashboard/" + userWorkspaces[0]._id);
         } else {
           setWorkspaceList(
             userWorkspaces.map((workspace: any) => workspace.name)
@@ -242,8 +241,7 @@ export default function Layout({ children }: LayoutProps) {
       ) {
         router.push(
           "/dashboard/" +
-            workspaceMapping[workspaceSelected as any] +
+            workspaceMapping[workspaceSelected as any]
-            "?Development"
         );
         localStorage.setItem(
           "projectData.id",

frontend/components/basic/buttons/Button.tsx

@@ -115,7 +115,7 @@ export default function Button(props: ButtonProps): JSX.Element {
           <FontAwesomeIcon
             icon={props.icon}
             className={`flex my-auto font-extrabold ${
-              props.size == "icon-sm" ? "text-sm" : "text-md"
+              props.size == "icon-sm" ? "text-sm" : "text-sm"
             } ${(props.text || props.textDisabled) && "mr-2"}`}
           />
         )}

frontend/components/context/Notifications/Notification.tsx

@@ -36,7 +36,7 @@ const Notification = ({
 
   return (
     <div
-      className="relative w-full flex items-center justify-between px-4 py-6 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
+      className="relative w-full flex items-center justify-between px-4 py-4 rounded-md border border-bunker-500 pointer-events-auto bg-bunker-500"
       role="alert"
     >
       {notification.type === 'error' && (
@@ -56,7 +56,7 @@ const Notification = ({
         onClick={() => clearNotification(notification.text)}
       >
         <FontAwesomeIcon
-          className="text-white w-4 h-3 hover:text-red"
+          className="text-white pl-2 w-4 h-3 hover:text-red"
           icon={faX}
         />
       </button>

frontend/components/context/Notifications/NotificationProvider.tsx

@@ -38,7 +38,7 @@ const NotificationProvider = ({ children }: NotificationProviderProps) => {
   const createNotification = ({
     text,
     type = 'success',
-    timeoutMs = 5000
+    timeoutMs = 4000
   }: Notification) => {
     const doesNotifExist = notifications.some((notif) => notif.text === text);
 

frontend/components/dashboard/KeyPair.tsx

@@ -21,6 +21,7 @@ interface KeyPairProps {
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
   sidebarSecretId: string;
+  isSnapshot: boolean;
 }
 
 /**
@@ -33,6 +34,7 @@ interface KeyPairProps {
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
+ * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar 
  * @returns
  */
 const KeyPair = ({
@@ -42,10 +44,11 @@ const KeyPair = ({
   isBlurred,
   isDuplicate,
   toggleSidebar,
-  sidebarSecretId
+  sidebarSecretId,
+  isSnapshot
 }: KeyPairProps) => {
   return (
-    <div className={`mx-1 flex flex-col items-center ml-1 ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
+    <div className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && "pointer-events-none"} ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
       <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
       {keyPair.type == "personal" && <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
         <div className='w-1 h-1 rounded-full bg-primary z-40'></div>
@@ -65,7 +68,7 @@ const KeyPair = ({
           </div>
         </div>
         <div className="w-full min-w-xl">
-          <div className="flex min-w-xl items-center pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10">
+          <div className={`flex min-w-xl items-center ${!isSnapshot && "pr-1.5"} rounded-lg mt-4 md:mt-0 max-h-10`}>
             <DashboardInputField
               onChangeHandler={modifyValue}
               type="value"
@@ -76,15 +79,15 @@ const KeyPair = ({
             />
           </div>
         </div>
-        <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
+        {!isSnapshot && <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
           <FontAwesomeIcon
             className="text-gray-300 px-2.5 text-lg mt-0.5"
             icon={faEllipsis}
           />
-        </div>
+        </div>}
       </div>
     </div>
   );
 };
 
-export default React.memo(KeyPair);
+export default KeyPair;

frontend/ee/api/secrets/GetProjectSercetShanpshots.ts

@@ -0,0 +1,39 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+
+interface workspaceProps {
+  workspaceId: string; 
+  offset: number;
+  limit: number;
+}
+
+/**
+ * This function fetches the secret snapshots for a certain project
+ * @param {object} obj
+ * @param {string} obj.workspaceId - project id for which we are trying to get project secret snapshots 
+ * @param {object} obj.offset - teh starting point of snapshots that we want to pull
+ * @param {object} obj.limit - how many snapshots will we output
+ * @returns
+ */
+const getProjectSecretShanpshots = async ({ workspaceId, offset, limit }: workspaceProps) => {
+  return SecurityClient.fetchCall(
+    '/api/v1/workspace/' + workspaceId + '/secret-snapshots?' +
+    new URLSearchParams({
+      offset: String(offset),
+      limit: String(limit)
+    }), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return (await res.json()).secretSnapshots;
+    } else {
+      console.log('Failed to get project secret snapshots');
+    }
+  });
+};
+
+export default getProjectSecretShanpshots;

frontend/ee/api/secrets/GetProjectSercetSnapshotsCount.ts

@@ -0,0 +1,31 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+
+interface workspaceProps {
+  workspaceId: string; 
+}
+
+/**
+ * This function fetches the count of secret snapshots for a certain project
+ * @param {object} obj
+ * @param {string} obj.workspaceId - project id for which we are trying to get project secret snapshots 
+ * @returns
+ */
+const getProjectSercetSnapshotsCount = async ({ workspaceId }: workspaceProps) => {
+  return SecurityClient.fetchCall(
+    '/api/v1/workspace/' + workspaceId + '/secret-snapshots/count', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return (await res.json()).count;
+    } else {
+      console.log('Failed to get the count of project secret snapshots');
+    }
+  });
+};
+
+export default getProjectSercetSnapshotsCount;

frontend/ee/api/secrets/GetSecretSnapshotData.ts

@@ -0,0 +1,31 @@
+import SecurityClient from '~/utilities/SecurityClient';
+
+
+interface SnapshotProps {
+  secretSnapshotId: string; 
+}
+
+/**
+ * This function fetches the secrets for a certain secret snapshot
+ * @param {object} obj
+ * @param {string} obj.secretSnapshotId - snapshot id for which we are trying to get secrets
+ * @returns
+ */
+const getSecretSnapshotData = async ({ secretSnapshotId }: SnapshotProps) => {
+  return SecurityClient.fetchCall(
+    '/api/v1/secret-snapshot/' + secretSnapshotId, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }
+  ).then(async (res) => {
+    if (res && res.status == 200) {
+      return (await res.json()).secretSnapshot;
+    } else {
+      console.log('Failed to get the secrets of a certain snapshot');
+    }
+  });
+};
+
+export default getSecretSnapshotData;

frontend/ee/components/PITRecoverySidebar.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+import { useTranslation } from "next-i18next";
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getProjectSecretShanpshots from "ee/api/secrets/GetProjectSercetShanpshots";
+import getSecretSnapshotData from "ee/api/secrets/GetSecretSnapshotData";
+import timeSince from "ee/utilities/timeSince";
+
+import Button from "~/components/basic/buttons/Button";
+import { decryptAssymmetric, decryptSymmetric } from "~/components/utilities/cryptography/crypto";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+
+
+interface SideBarProps {
+  toggleSidebar: (value: boolean) => void; 
+  setSnapshotData: (value: any) => void;
+  chosenSnapshot: string;
+}
+
+interface SnaphotProps {
+  _id: string;
+  createdAt: string;
+  secretVersions: string[];
+}
+
+interface EncrypetedSecretVersionListProps {
+  _id: string;
+  createdAt: string;
+  secretValueCiphertext: string;
+  secretValueIV: string;
+  secretValueTag: string;
+  secretKeyCiphertext: string;
+  secretKeyIV: string;
+  secretKeyTag: string;
+  environment: string;
+  type: "personal" | "shared";
+}
+
+/**
+ * @param {object} obj
+ * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
+ * @param {function} obj.setSnapshotData - state manager for snapshot data
+ * @param {string} obj.chosenSnaphshot - the snapshot id which is currently selected
+ * 
+ * 
+ * @returns the sidebar with the options for point-in-time recovery (commits)
+ */
+const PITRecoverySidebar = ({ 
+  toggleSidebar, 
+  setSnapshotData,
+  chosenSnapshot
+}: SideBarProps) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
+  const [secretSnapshotsMetadata, setSecretSnapshotsMetadata] = useState<SnaphotProps[]>([]);
+  const [currentOffset, setCurrentOffset] = useState(0);
+  const currentLimit = 15;
+
+  const loadMoreSnapshots = () => {
+    setCurrentOffset(currentOffset + currentLimit);
+  }
+
+  useEffect(() => {
+    const getLogData = async () => {
+      setIsLoading(true);
+      const results = await getProjectSecretShanpshots({ workspaceId: String(router.query.id), limit: currentLimit, offset: currentOffset })
+      setSecretSnapshotsMetadata(secretSnapshotsMetadata.concat(results));
+      setIsLoading(false);
+    }
+    getLogData();
+  }, [currentOffset]);
+
+  const exploreSnapshot = async ({ snapshotId }: { snapshotId: string; }) => {
+    const secretSnapshotData = await getSecretSnapshotData({ secretSnapshotId: snapshotId });
+
+    const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) })
+    const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY');
+
+    let decryptedLatestKey: string;
+    if (latestKey) {
+      // assymmetrically decrypt symmetric key with local private key
+      decryptedLatestKey = decryptAssymmetric({
+        ciphertext: latestKey.latestKey.encryptedKey,
+        nonce: latestKey.latestKey.nonce,
+        publicKey: latestKey.latestKey.sender.publicKey,
+        privateKey: String(PRIVATE_KEY)
+      });
+    }
+
+    const decryptedSecretVersions = secretSnapshotData.secretVersions.map((encryptedSecretVersion: EncrypetedSecretVersionListProps, pos: number) => { 
+      return {
+        id: encryptedSecretVersion._id,
+        pos: pos,
+        type: encryptedSecretVersion.type,
+        environment: encryptedSecretVersion.environment,
+        key: decryptSymmetric({
+          ciphertext: encryptedSecretVersion.secretKeyCiphertext,
+          iv: encryptedSecretVersion.secretKeyIV,
+          tag: encryptedSecretVersion.secretKeyTag,
+          key: decryptedLatestKey
+        }),
+        value: decryptSymmetric({
+          ciphertext: encryptedSecretVersion.secretValueCiphertext,
+          iv: encryptedSecretVersion.secretValueIV,
+          tag: encryptedSecretVersion.secretValueTag,
+          key: decryptedLatestKey
+        })
+      }
+    })
+
+    setSnapshotData({ id: secretSnapshotData._id, createdAt: secretSnapshotData.createdAt, secretVersions: decryptedSecretVersions })
+  }
+
+  return <div className={`absolute border-l border-mineshaft-500 ${isLoading ? "bg-bunker-800" : "bg-bunker"} fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between`}>
+    {isLoading ? (
+      <div className="flex items-center justify-center h-full mb-8">
+        <Image
+          src="/images/loading/loading.gif"
+          height={60}
+          width={100}
+          alt="infisical loading indicator"
+        ></Image>
+      </div> 
+    ) : (
+      <div className='h-min overflow-y-auto'>
+        <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
+          <p className="font-semibold text-lg text-bunker-200">{t("Point-in-time Recovery")}</p>
+          <div className='p-1' onClick={() => toggleSidebar(false)}>
+            <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
+          </div>
+        </div>
+        <div className='flex flex-col px-2 py-2'>
+          {secretSnapshotsMetadata?.map((snapshot: SnaphotProps, id: number) => <div key={snapshot._id} className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "bg-primary text-black" : "bg-mineshaft-700"} py-3 px-4 mb-2 rounded-md flex flex-row justify-between items-center`}>
+            <div className="flex flex-row items-start">
+              <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800" : "text-bunker-200"} text-sm mr-1.5`}>{timeSince(new Date(snapshot.createdAt))}</div>
+              <div className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-900" : "text-bunker-300"} text-sm `}>{" - " + snapshot.secretVersions.length + " Secrets"}</div>
+            </div>
+            <div 
+              onClick={() => exploreSnapshot({ snapshotId: snapshot._id })}
+              className={`${chosenSnapshot == snapshot._id || (id == 0 && chosenSnapshot === "") ? "text-bunker-800 pointer-events-none" : "text-bunker-200 hover:text-primary duration-200 cursor-pointer"} text-sm`}>
+              {id == 0 ? "Current Version" : chosenSnapshot == snapshot._id ? "Currently Viewing" : "Explore"}
+            </div>
+          </div>)}
+        <div className='flex justify-center w-full mb-14'>
+          <div className='items-center w-40'>
+            <Button text="View More" textDisabled="End of History" active={secretSnapshotsMetadata.length % 15 == 0 ? true : false} onButtonPressed={loadMoreSnapshots} size="md" color="mineshaft"/>
+          </div>
+        </div>
+        </div>
+      </div>
+    )}
+  </div>
+};
+
+export default PITRecoverySidebar;

frontend/pages/dashboard/[id].tsx

@@ -6,8 +6,9 @@ import { useTranslation } from "next-i18next";
 import {
   faArrowDownAZ,
   faArrowDownZA,
+  faArrowLeft,
   faCheck,
-  faCopy,
+  faClockRotateLeft,
   faDownload,
   faEye,
   faEyeSlash,
@@ -16,6 +17,8 @@ import {
   faPlus,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import getProjectSercetSnapshotsCount from 'ee/api/secrets/GetProjectSercetSnapshotsCount';
+import PITRecoverySidebar from 'ee/components/PITRecoverySidebar';
 
 import Button from '~/components/basic/buttons/Button';
 import ListBox from '~/components/basic/Listbox';
@@ -30,12 +33,13 @@ import pushKeys from '~/components/utilities/secrets/pushKeys';
 import { getTranslatedServerSideProps } from '~/components/utilities/withTranslateProps';
 import guidGenerator from '~/utilities/randomId';
 
-import { envMapping } from '../../public/data/frequentConstants';
+import { envMapping, reverseEnvMapping } from '../../public/data/frequentConstants';
 import getUser from '../api/user/getUser';
 import checkUserAction from '../api/userActions/checkUserAction';
 import registerUserAction from '../api/userActions/registerUserAction';
 import getWorkspaces from '../api/workspace/getWorkspaces';
 
+const queryString = require("query-string");
 
 interface SecretDataProps {
   type: 'personal' | 'shared';
@@ -46,6 +50,19 @@ interface SecretDataProps {
   comment: string;
 }
 
+interface SnapshotProps {
+  id: string;
+  createdAt: string;
+  secretVersions: {
+    id: string;
+    pos: number;
+    type: "personal" | "shared";
+    environment: string;
+    key: string;
+    value: string;
+  }[];
+}
+
 /**
  * this function finds the teh duplicates in an array
  * @param arr - array of anything (e.g., with secret keys and types (personal/shared))
@@ -76,21 +93,20 @@ export default function Dashboard() {
   const [workspaceId, setWorkspaceId] = useState('');
   const [blurred, setBlurred] = useState(true);
   const [isKeyAvailable, setIsKeyAvailable] = useState(true);
-  const [env, setEnv] = useState(
+  const [env, setEnv] = useState('Development');
-    router.asPath.split('?').length == 1
+  const [snapshotEnv, setSnapshotEnv] = useState('Development');
-      ? 'Development'
-      : Object.keys(envMapping).includes(router.asPath.split('?')[1])
-      ? router.asPath.split('?')[1]
-      : 'Development'
-  );
   const [isNew, setIsNew] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
   const [searchKeys, setSearchKeys] = useState('');
   const [errorDragAndDrop, setErrorDragAndDrop] = useState(false);
   const [sortMethod, setSortMethod] = useState('alphabetical');
   const [checkDocsPopUpVisible, setCheckDocsPopUpVisible] = useState(false);
   const [hasUserEverPushed, setHasUserEverPushed] = useState(false);
   const [sidebarSecretId, toggleSidebar] = useState("None");
+  const [PITSidebarOpen, togglePITSidebar] = useState(false);
   const [sharedToHide, setSharedToHide] = useState<string[]>([]);
+  const [snapshotData, setSnapshotData] = useState<SnapshotProps>();
+  const [numSnapshots, setNumSnapshots] = useState<number>();
 
   const { t } = useTranslation();
   const { createNotification } = useNotificationContext();
@@ -141,17 +157,39 @@ export default function Dashboard() {
   useEffect(() => {
     (async () => {
       try {
+        console.log(1, 'reloaded')
+        const tempNumSnapshots = await getProjectSercetSnapshotsCount({ workspaceId: String(router.query.id) })
+        setNumSnapshots(tempNumSnapshots);
         const userWorkspaces = await getWorkspaces();
         const listWorkspaces = userWorkspaces.map((workspace) => workspace._id);
         if (
-          !listWorkspaces.includes(router.asPath.split('/')[2].split('?')[0])
+          !listWorkspaces.includes(router.asPath.split('/')[2])
         ) {
           router.push('/dashboard/' + listWorkspaces[0]);
         }
 
-        if (env != router.asPath.split('?')[1]) {
+        const user = await getUser();
-          router.push(router.asPath.split('?')[0] + '?' + env);
+        setIsNew(
-        }
+          (Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
+            ? true
+            : false
+        );
+
+        const userAction = await checkUserAction({
+          action: 'first_time_secrets_pushed'
+        });
+        setHasUserEverPushed(userAction ? true : false);
+      } catch (error) {
+        console.log('Error', error);
+        setData(undefined);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        setIsLoading(true);
         setBlurred(true);
         setWorkspaceId(String(router.query.id));
 
@@ -173,18 +211,7 @@ export default function Dashboard() {
               dataToSort?.map((item) => item.key).indexOf(item)
           ).includes(row.key) && row.type == 'shared'))?.map((item) => item.id)
         )
-
+        setIsLoading(false);
-        const user = await getUser();
-        setIsNew(
-          (Date.parse(String(new Date())) - Date.parse(user.createdAt)) / 60000 < 3
-            ? true
-            : false
-        );
-
-        const userAction = await checkUserAction({
-          action: 'first_time_secrets_pushed'
-        });
-        setHasUserEverPushed(userAction ? true : false);
       } catch (error) {
         console.log('Error', error);
         setData(undefined);
@@ -321,12 +348,21 @@ export default function Dashboard() {
   /**
    * Save the changes of environment variables and push them to the database
    */
-  const savePush = async () => {
+  const savePush = async (dataToPush?: any[], envToPush?: string) => {
-    // Format the new object with environment variables
+    let obj;
-    const obj = Object.assign(
+    // dataToPush is mostly used for rollbacks, otherwise we always take the current state data
-      {},
+    if ((dataToPush ?? [])?.length > 0) {
-      ...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment] }))
+      obj = Object.assign(
-    );
+        {},
+        ...dataToPush!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
+      );
+    } else {
+      // Format the new object with environment variables
+      obj = Object.assign(
+        {},
+        ...data!.map((row: SecretDataProps) => ({ [row.type.charAt(0) + row.key]: [row.value, row.comment ?? ''] }))
+      );
+    }
 
     // Checking if any of the secret keys start with a number - if so, don't do anything
     const nameErrors = !Object.keys(obj)
@@ -350,13 +386,17 @@ export default function Dashboard() {
 
     // Once "Save changed is clicked", disable that button
     setButtonReady(false);
-    pushKeys({ obj, workspaceId: String(router.query.id), env });
+    console.log(envToPush ? envToPush : env, env, envToPush)
+    pushKeys({ obj, workspaceId: String(router.query.id), env: envToPush ? envToPush : env });
 
     // If this user has never saved environment variables before, show them a prompt to read docs
     if (!hasUserEverPushed) {
       setCheckDocsPopUpVisible(true);
       await registerUserAction({ action: 'first_time_secrets_pushed' });
     }
+
+    // increasing the number of project commits
+    setNumSnapshots(numSnapshots ?? 0 + 1);
   };
 
   const addData = (newData: SecretDataProps[]) => {
@@ -427,6 +467,11 @@ export default function Dashboard() {
           setSharedToHide={setSharedToHide}
           deleteRow={deleteCertainRow}
         />}
+        {PITSidebarOpen && <PITRecoverySidebar 
+          toggleSidebar={togglePITSidebar} 
+          chosenSnapshot={String(snapshotData?.id ? snapshotData.id : "")}
+          setSnapshotData={setSnapshotData}
+        />}
         <div className="w-full max-h-96 pb-2">
           <NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
           {checkDocsPopUpVisible && (
@@ -441,9 +486,22 @@ export default function Dashboard() {
             />
           )}
           <div className="flex flex-row justify-between items-center mx-6 mt-6 mb-3 text-xl max-w-5xl">
+            {snapshotData && 
+            <div className={`flex justify-start max-w-sm mt-1 mr-2`}>
+              <Button
+                text={String(t("Go back to current"))}
+                onButtonPressed={() => setSnapshotData(undefined)}
+                color="mineshaft"
+                size="md"
+                icon={faArrowLeft}
+              />
+            </div>}
             <div className="flex flex-row justify-start items-center text-3xl">
-              <p className="font-semibold mr-4 mt-1">{t("dashboard:title")}</p>
+              <div className="font-semibold mr-4 mt-1 flex flex-row items-center">
-              {data?.length == 0 && (
+                <p>{snapshotData ? "Secret Snapshot" : t("dashboard:title")}</p>
+                {snapshotData && <span className='bg-primary-800 text-sm ml-4 mt-1 px-1.5 rounded-md'>{new Date(snapshotData.createdAt).toLocaleString()}</span>}
+              </div>
+              {!snapshotData && data?.length == 0 && (
                 <ListBox
                   selected={env}
                   data={['Development', 'Staging', 'Production', 'Testing']}
@@ -452,8 +510,17 @@ export default function Dashboard() {
               )}
             </div>
             <div className="flex flex-row">
-              {(data?.length !== 0 || buttonReady) && (
+              <div className={`flex justify-start max-w-sm mt-1 mr-2`}>
-                <div className={`flex justify-start max-w-sm mt-2`}>
+                <Button
+                  text={String(numSnapshots + " " + t("Commits"))}
+                  onButtonPressed={() => togglePITSidebar(true)}
+                  color="mineshaft"
+                  size="md"
+                  icon={faClockRotateLeft}
+                />
+              </div>
+              {(data?.length !== 0 || buttonReady) && !snapshotData && (
+                <div className={`flex justify-start max-w-sm mt-1`}>
                   <Button
                     text={String(t("common:save-changes"))}
                     onButtonPressed={savePush}
@@ -465,18 +532,64 @@ export default function Dashboard() {
                   />
                 </div>
               )}
+              {snapshotData && <div className={`flex justify-start max-w-sm mt-1`}>
+                <Button
+                  text={String(t("Rollback to this snapshot"))}
+                  onButtonPressed={async () => {
+                    const envsToRollback = snapshotData.secretVersions.map(sv => sv.environment).filter((v, i, a) => a.indexOf(v) === i);
+
+                    // Update secrets in the state only for the current environment
+                    setData(
+                      snapshotData.secretVersions
+                      .filter(row => reverseEnvMapping[row.environment] == env)
+                      .map((sv, position) => { 
+                        return {
+                          id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''
+                        }
+                      })
+                    );
+
+                    // Rollback each of the environments in the snapshot
+                    // #TODO: clean up other environments
+                    envsToRollback.map(async (envToRollback) => {
+                      await savePush(
+                        snapshotData.secretVersions
+                        .filter(row => row.environment == envToRollback)
+                        .map((sv, position) => { 
+                          return {id: sv.id, pos: position, type: sv.type, key: sv.key, value: sv.value, comment: ''}
+                        }),
+                        reverseEnvMapping[envToRollback]
+                      );
+                    });
+                    setSnapshotData(undefined);
+                    createNotification({
+                      text: `Rollback has been performed successfully.`,
+                      type: 'success'
+                    });
+                  }}
+                  color="primary"
+                  size="md"
+                  active={buttonReady}
+                />
+              </div>}
             </div>
           </div>
           <div className="mx-6 w-full pr-12">
             <div className="flex flex-col max-w-5xl pb-1">
               <div className="w-full flex flex-row items-start">
-                {data?.length !== 0 && (
+                {(!snapshotData || data?.length !== 0) && (
                   <>
-                    <ListBox
+                    {!snapshotData 
+                    ? <ListBox
                       selected={env}
                       data={['Development', 'Staging', 'Production', 'Testing']}
                       onChange={setEnv}
                     />
+                    : <ListBox
+                      selected={snapshotEnv}
+                      data={['Development', 'Staging', 'Production', 'Testing']}
+                      onChange={setSnapshotEnv}
+                    />}
                     <div className="h-10 w-full bg-white/5 hover:bg-white/10 ml-2 flex items-center rounded-md flex flex-row items-center">
                       <FontAwesomeIcon
                         className="bg-white/5 rounded-l-md py-3 pl-4 pr-2 text-gray-400"
@@ -489,7 +602,7 @@ export default function Dashboard() {
                         placeholder={String(t("dashboard:search-keys"))}
                       />
                     </div>
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
+                    {!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                       <Button
                         onButtonPressed={() => reorderRows(1)}
                         color="mineshaft"
@@ -500,15 +613,15 @@ export default function Dashboard() {
                             : faArrowDownZA
                         }
                       />
-                    </div>
+                    </div>}
-                    <div className="ml-2 min-w-max flex flex-row items-start justify-start">
+                    {!snapshotData && <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                       <Button
                         onButtonPressed={download}
                         color="mineshaft"
                         size="icon-md"
                         icon={faDownload}
                       />
-                    </div>
+                    </div>}
                     <div className="ml-2 min-w-max flex flex-row items-start justify-start">
                       <Button
                         onButtonPressed={changeBlurred}
@@ -517,7 +630,7 @@ export default function Dashboard() {
                         icon={blurred ? faEye : faEyeSlash}
                       />
                     </div>
-                    <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
+                    {!snapshotData && <div className="relative ml-2 min-w-max flex flex-row items-start justify-end">
                       <Button
                         text={String(t("dashboard:add-key"))}
                         onButtonPressed={addRow}
@@ -531,18 +644,29 @@ export default function Dashboard() {
                           <span className="relative inline-flex rounded-full h-3 w-3 bg-primary"></span>
                         </span>
                       )}
-                    </div>
+                    </div>}
                   </>
                 )}
               </div>
             </div>
-            {data?.length !== 0 ? (
+            {isLoading ? (
+            <div className="flex items-center justify-center h-full my-48">
+              <Image
+                src="/images/loading/loading.gif"
+                height={60}
+                width={100}
+                alt="infisical loading indicator"
+              ></Image>
+            </div> 
+            ) : (
+            data?.length !== 0 ? (
               <div className="flex flex-col w-full mt-1 mb-2">
                 <div
                   className={`max-w-5xl mt-1 max-h-[calc(100vh-280px)] overflow-hidden overflow-y-scroll no-scrollbar no-scrollbar::-webkit-scrollbar`}
                 >
                   <div className="px-1 pt-2 bg-mineshaft-800 rounded-md p-2">
-                    {data?.filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
+                    {!snapshotData && data?.filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
+                    .filter(row => !(sharedToHide.includes(row.id) && row.type == 'shared')).map((keyPair) => (
                       <KeyPair 
                         key={keyPair.id}
                         keyPair={keyPair}
@@ -552,10 +676,33 @@ export default function Dashboard() {
                         isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
                         toggleSidebar={toggleSidebar}
                         sidebarSecretId={sidebarSecretId}
+                        isSnapshot={false}
+                      />
+                    ))}
+                    {snapshotData && snapshotData.secretVersions?.sort((a, b) => a.key.localeCompare(b.key))
+                    .filter(row => reverseEnvMapping[row.environment] == snapshotEnv)
+                    .filter(row => row.key.toUpperCase().includes(searchKeys.toUpperCase()))
+                    .filter(row => !(snapshotData.secretVersions?.filter(row => (snapshotData.secretVersions
+                      ?.map((item) => item.key)
+                      .filter(
+                        (item, index) =>
+                          index !==
+                          snapshotData.secretVersions?.map((item) => item.key).indexOf(item)
+                      ).includes(row.key) && row.type == 'shared'))?.map((item) => item.id).includes(row.id) && row.type == 'shared')).map((keyPair) => (
+                      <KeyPair 
+                        key={keyPair.id}
+                        keyPair={keyPair}
+                        modifyValue={listenChangeValue}
+                        modifyKey={listenChangeKey}
+                        isBlurred={blurred}
+                        isDuplicate={findDuplicates(data?.map((item) => item.key + item.type))?.includes(keyPair.key + keyPair.type)}
+                        toggleSidebar={toggleSidebar}
+                        sidebarSecretId={sidebarSecretId}
+                        isSnapshot={true}
                       />
                     ))}
                   </div>
-                  <div className="w-full max-w-5xl px-2 pt-3">
+                  {!snapshotData && <div className="w-full max-w-5xl px-2 pt-3">
                     <DropZone
                       setData={addData}
                       setErrorDragAndDrop={setErrorDragAndDrop}
@@ -565,12 +712,12 @@ export default function Dashboard() {
                       keysExist={true}
                       numCurrentRows={data.length}
                     />
-                  </div>
+                  </div>}
                 </div>
               </div>
             ) : (
               <div className="flex flex-col items-center justify-center h-full text-xl text-gray-400 max-w-5xl mt-28">
-                {isKeyAvailable && (
+                {isKeyAvailable && !snapshotData && (
                   <DropZone
                     setData={setData}
                     setErrorDragAndDrop={setErrorDragAndDrop}
@@ -599,7 +746,7 @@ export default function Dashboard() {
                     </>
                   ))}
               </div>
-            )}
+            ))}
           </div>
         </div>
       </div>

frontend/public/locales/en/activity.json

@@ -2,6 +2,7 @@
   "event": {
     "readSecrets": "Secrets Viewed",
     "updateSecrets": "Secrets Updated",
-    "addSecrets": "Secrets Added"
+    "addSecrets": "Secrets Added",
+    "deleteSecrets": "Secrets Deleted"
   }
 }