awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the sorting buf with version history

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-01-02 18:53:56 -08:00
parent 6845e9129a
commit d0949b2e19
2 changed files with 42 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
backend/src/ee/controllers/v1/secretController.ts
View File

@@ -18,6 +18,7 @@ import { SecretVersion } from '../../models';
secretVersions = await SecretVersion.find({ secretVersions = await SecretVersion.find({
secret: secretId secret: secretId
}) })
.sort({ createdAt: -1 })
.skip(offset) .skip(offset)
.limit(limit); .limit(limit);

67
frontend/ee/components/SecretVersionList.tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import Image from 'next/image';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons'; 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 * @returns a list of versions for a specific secret
*/ */
const SecretVersionList = ({ secretId }: { secretId: string; }) => { const SecretVersionList = ({ secretId }: { secretId: string; }) => {
const router = useRouter(); const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([{createdAt: "123", value: "124"}]); const [secretVersions, setSecretVersions] = useState<DecryptedSecretVersionListProps[]>([]);
useEffect(() => { useEffect(() => {
const getSecretVersionHistory = async () => { const getSecretVersionHistory = async () => {
setIsLoading(true);
try { try {
const encryptedSecretVersions = await getSecretVersions({ secretId, offset: 0, limit: 10}); const encryptedSecretVersions = await getSecretVersions({ secretId, offset: 0, limit: 10});
const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) }) const latestKey = await getLatestFileKey({ workspaceId: String(router.query.id) })
@@ -61,43 +65,54 @@ const SecretVersionList = ({ secretId }: { secretId: string; }) => {
}) })
setSecretVersions(decryptedSecretVersions); setSecretVersions(decryptedSecretVersions);
setIsLoading(false);
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
}; };
getSecretVersionHistory(); getSecretVersionHistory();
}, []); }, [secretId]);
return <div className='w-full h-52 px-4 mt-4 text-sm text-bunker-300 overflow-x-none'> 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> <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='p-1 rounded-md bg-bunker-800 border border-mineshaft-500 overflow-x-none h-full'>
<div className='h-48 overflow-y-auto overflow-x-none'> {isLoading ? (
{secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt)) <div className="flex items-center justify-center h-full">
.map((version: DecryptedSecretVersionListProps, index: number) => <Image
<div key={index} className='flex flex-row'> src="/images/loading/loading.gif"
<div className='pr-1 flex flex-col items-center'> height={60}
<div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div> width={100}
<div className='w-0 h-full border-l mt-1'></div> alt="infisical loading indicator"
</div> ></Image>
<div className='flex flex-col w-full max-w-[calc(100%-2.3rem)]'> </div>
<div className='pr-2 pt-1'> ) : (
{(new Date(version.createdAt)).toLocaleDateString('en-US', { <div className='h-48 overflow-y-auto overflow-x-none'>
year: 'numeric', {secretVersions?.sort((a, b) => b.createdAt.localeCompare(a.createdAt))
month: '2-digit', .map((version: DecryptedSecretVersionListProps, index: number) =>
day: '2-digit', <div key={index} className='flex flex-row'>
hour: '2-digit', <div className='pr-1 flex flex-col items-center'>
minute: '2-digit', <div className='p-1'><FontAwesomeIcon icon={index == 0 ? faDotCircle : faCircle} /></div>
second: '2-digit' <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>
<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>
</div> </div>
</div>
}; };
export default SecretVersionList; export default SecretVersionList;