From d0949b2e196c8d0764d3f331b559d0b05284574c Mon Sep 17 00:00:00 2001
From: Vladyslav Matsiiako <matsiiako@gmail.com>
Date: Mon, 2 Jan 2023 18:53:56 -0800
Subject: [PATCH] Fixed the sorting buf with version history

---
 .../src/ee/controllers/v1/secretController.ts |  1 +
 frontend/ee/components/SecretVersionList.tsx  | 67 ++++++++++++-------
 2 files changed, 42 insertions(+), 26 deletions(-)

diff --git a/backend/src/ee/controllers/v1/secretController.ts b/backend/src/ee/controllers/v1/secretController.ts
index b2d66ab33..a2d68ca96 100644
--- a/backend/src/ee/controllers/v1/secretController.ts
+++ b/backend/src/ee/controllers/v1/secretController.ts
@@ -18,6 +18,7 @@ import { SecretVersion } from '../../models';
 		secretVersions = await SecretVersion.find({
 			secret: secretId
 		})
+		.sort({ createdAt: -1 })
 		.skip(offset)
 		.limit(limit);
 
diff --git a/frontend/ee/components/SecretVersionList.tsx b/frontend/ee/components/SecretVersionList.tsx
index 6cf7bd9b2..3eb40005f 100644
--- a/frontend/ee/components/SecretVersionList.tsx
+++ b/frontend/ee/components/SecretVersionList.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from "next-i18next";
 import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
@@ -22,15 +23,18 @@ interface EncrypetedSecretVersionListProps {
 
 
 /**
+ * @param {string} secretId - the id of a secret for which are querying version history
  * @returns a list of versions for a specific secret
  */
 const SecretVersionList = ({ secretId }: { secretId: string; }) => {
   const router = useRouter();
+  const [isLoading, setIsLoading] = useState(false);
   const { t } = useTranslation();
-  const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([{createdAt: "123", value: "124"}]);
+  const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([]);
   
   useEffect(() => {
     const getSecretVersionHistory = async () => {
+      setIsLoading(true);
       try {
         const encryptedSecretVersions = await getSecretVersions({ secretId, offset: 0, limit: 10});
         const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) })
@@ -61,43 +65,54 @@ const SecretVersionList = ({ secretId }: { secretId: string; }) => {
         })
 
         setSecretVersions(decryptedSecretVersions);
+        setIsLoading(false);
       } catch (error) {
         console.log(error)
       }
     };
     getSecretVersionHistory();
-  }, []);
+  }, [secretId]);
 
   return <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'>
-  <p className=''>{t("dashboard:sidebar.version-history")}</p>
-  <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none'>
-    <div className='h-48 overflow-y-auto overflow-x-none'>
-      {secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
-      .map((version: DecryptedSecretVersionListProps, index: number) =>
-        <div key={index} className='flex flex-row'>
-          <div className='pr-1 flex flex-col items-center'>
-            <div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div>
-            <div className='w-0 h-full border-l mt-1'></div>
-          </div>
-          <div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'>
-            <div className='pr-2 pt-1'>
-              {(new Date(version.createdAt)).toLocaleDateString('en-US', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                second: '2-digit'
-              })}
+    <p className=''>{t("dashboard:sidebar.version-history")}</p>
+    <div className='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none h-full'>
+      {isLoading ? (
+        <div className="flex items-center justify-center h-full">
+          <Image
+            src="/images/loading/loading.gif"
+            height={60}
+            width={100}
+            alt="infisical loading indicator"
+          ></Image>
+        </div> 
+      ) : (
+        <div className='h-48 overflow-y-auto overflow-x-none'>
+          {secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
+          .map((version: DecryptedSecretVersionListProps, index: number) =>
+            <div key={index} className='flex flex-row'>
+              <div className='pr-1 flex flex-col items-center'>
+                <div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div>
+                <div className='w-0 h-full border-l mt-1'></div>
+              </div>
+              <div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'>
+                <div className='pr-2 pt-1'>
+                  {(new Date(version.createdAt)).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                  })}
+                </div>
+                <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Value:</span>{version.value}</p></div>
+              </div>
             </div>
-            <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Value:</span>{version.value}</p></div>
-            {/* <div className=''><p className='break-words'><span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1.5'>Updated by:</span>{version.user}</p></div> */}
-          </div>
+          )}
         </div>
       )}
     </div>
   </div>
-</div>
 };
 
 export default SecretVersionList;