awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 21:27:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #117 from LemmyMwaura/secrets-dash-jumping-bug-#51

Browse Source 
🐛 Dashboard bugfix - Jumping Secrets #51
This commit is contained in:
mv-turtle
2022-12-11 21:20:04 -05:00
committed by GitHub
parent 01982b585f 099ddd6805
commit 11e0790f13
3 changed files with 86 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/dashboard/DashboardInputField.tsx
+6 -6
View File
@@ -7,8 +7,8 @@ import guidGenerator from '../utilities/randomId';
const REGEX = /([$]{.*?})/g; const REGEX = /([$]{.*?})/g;
interface DashboardInputFieldProps { interface DashboardInputFieldProps {
index: number; position: number;
onChangeHandler: (value: string, index: number) => void; onChangeHandler: (value: string, position: number) => void;
value: string; value: string;
type: 'varName' | 'value'; type: 'varName' | 'value';
blurred: boolean; blurred: boolean;
@@ -18,7 +18,7 @@ interface DashboardInputFieldProps {
/** /**
* This component renders the input fields on the dashboard * This component renders the input fields on the dashboard
* @param {object} obj - the order number of a keyPair * @param {object} obj - the order number of a keyPair
* @param {number} obj.index - the order number of a keyPair * @param {number} obj.pos - the order number of a keyPair
* @param {function} obj.onChangeHandler - what happens when the input is modified * @param {function} obj.onChangeHandler - what happens when the input is modified
* @param {string} obj.type - whether the input field is for a Key Name or for a Key Value * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
* @param {string} obj.value - value of the InputField * @param {string} obj.value - value of the InputField
@@ -28,7 +28,7 @@ interface DashboardInputFieldProps {
*/ */
const DashboardInputField = ({ const DashboardInputField = ({
index, position,
onChangeHandler, onChangeHandler,
type, type,
value, value,
@@ -57,7 +57,7 @@ const DashboardInputField = ({
> >
<input <input
onChange={(e) => onChange={(e) =>
onChangeHandler(e.target.value.toUpperCase(), index) onChangeHandler(e.target.value.toUpperCase(), position)
} }
type={type} type={type}
value={value} value={value}
@@ -87,7 +87,7 @@ const DashboardInputField = ({
> >
<input <input
value={value} value={value}
onChange={(e) => onChangeHandler(e.target.value, index)} onChange={(e) => onChangeHandler(e.target.value, position)}
onScroll={syncScroll} onScroll={syncScroll}
className={`${ className={`${
blurred blurred
frontend/components/utilities/secrets/getSecretsForProject.ts
+10 -12
View File
@@ -74,19 +74,17 @@ const getSecretsForProject = async ({
setFileState(tempFileState); setFileState(tempFileState);
setData( setData(
tempFileState.map((line, index) => [ tempFileState.map((line, index) => {
guidGenerator(), return {
index, id: guidGenerator(),
line['key'], pos: index,
line['value'], key: line['key'],
line['type'] value: line['value'],
]) type: line['type']
// .sort((a, b) => }
// sortMethod == "alphabetical" })
// ? a[2].localeCompare(b[2])
// : b[2].localeCompare(a[2])
// )
); );
return tempFileState.map((line, index) => [ return tempFileState.map((line, index) => [
guidGenerator(), guidGenerator(),
index, index,
frontend/pages/dashboard/[id].js
+70 -58
View File
@@ -45,7 +45,7 @@ import getWorkspaces from '../api/workspace/getWorkspaces';
/** /**
* This component represent a single row for an environemnt variable on the dashboard * This component represent a single row for an environemnt variable on the dashboard
* @param {object} obj * @param {object} obj
* @param {String[]} obj.keyPair - data related to the environment variable (index, key, value, public/private) * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
* @param {function} obj.deleteRow - a function to delete a certain keyPair * @param {function} obj.deleteRow - a function to delete a certain keyPair
* @param {function} obj.modifyKey - modify the key of a certain environment variable * @param {function} obj.modifyKey - modify the key of a certain environment variable
* @param {function} obj.modifyValue - modify the value of a certain environment variable * @param {function} obj.modifyValue - modify the value of a certain environment variable
@@ -73,8 +73,8 @@ const KeyPair = ({
<DashboardInputField <DashboardInputField
onChangeHandler={modifyKey} onChangeHandler={modifyKey}
type="varName" type="varName"
index={keyPair[1]} position={keyPair.pos}
value={keyPair[2]} value={keyPair.key}
duplicates={duplicates} duplicates={duplicates}
/> />
</div> </div>
@@ -84,8 +84,8 @@ const KeyPair = ({
<DashboardInputField <DashboardInputField
onChangeHandler={modifyValue} onChangeHandler={modifyValue}
type="value" type="value"
index={keyPair[1]} position={keyPair.pos}
value={keyPair[3]} value={keyPair.value}
blurred={isBlurred} blurred={isBlurred}
/> />
</div> </div>
@@ -114,18 +114,18 @@ const KeyPair = ({
<div <div
onClick={() => onClick={() =>
modifyVisibility( modifyVisibility(
keyPair[4] == 'personal' ? 'shared' : 'personal', keyPair.type == 'personal' ? 'shared' : 'personal',
keyPair[1] keyPair.pos
) )
} }
className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full" className="relative flex justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
> >
<FontAwesomeIcon <FontAwesomeIcon
className="text-lg pl-1.5 pr-3" className="text-lg pl-1.5 pr-3"
icon={keyPair[4] == 'personal' ? faPeopleGroup : faPerson} icon={keyPair.type == 'personal' ? faPeopleGroup : faPerson}
/> />
<div className="text-sm"> <div className="text-sm">
{keyPair[4] == 'personal' ? 'Make Shared' : 'Make Personal'} {keyPair.type == 'personal' ? 'Make Shared' : 'Make Personal'}
</div> </div>
</div> </div>
<div <div
@@ -139,7 +139,7 @@ const KeyPair = ({
[...Array(randomStringLength)] [...Array(randomStringLength)]
.map(() => Math.floor(Math.random() * 16).toString(16)) .map(() => Math.floor(Math.random() * 16).toString(16))
.join(''), .join(''),
keyPair[1] keyPair.pos
); );
} }
}} }}
@@ -147,7 +147,7 @@ const KeyPair = ({
> >
<FontAwesomeIcon <FontAwesomeIcon
className="text-lg pl-1.5 pr-3" className="text-lg pl-1.5 pr-3"
icon={keyPair[3] == '' ? faPlus : faShuffle} icon={keyPair.value == '' ? faPlus : faShuffle}
/> />
<div className="text-sm justify-between flex flex-row w-full"> <div className="text-sm justify-between flex flex-row w-full">
<p>Generate Random Hex</p> <p>Generate Random Hex</p>
@@ -190,7 +190,7 @@ const KeyPair = ({
<div className="w-2"></div> <div className="w-2"></div>
<div className="opacity-50 hover:opacity-100 duration-200"> <div className="opacity-50 hover:opacity-100 duration-200">
<Button <Button
onButtonPressed={() => deleteRow(keyPair[0])} onButtonPressed={() => deleteRow(keyPair.id)}
color="red" color="red"
size="icon-sm" size="icon-sm"
icon={faX} icon={faX}
@@ -266,9 +266,13 @@ export default function Dashboard() {
* Reorder rows alphabetically or in the opprosite order * Reorder rows alphabetically or in the opprosite order
*/ */
const reorderRows = () => { const reorderRows = () => {
setSortMethod( setSortMethod(prevSort =>
sortMethod == 'alphabetical' ? '-alphabetical' : 'alphabetical' prevSort == 'alphabetical'
? '-alphabetical'
: 'alphabetical'
); );
sortValuesHandler()
}; };
useEffect(() => { useEffect(() => {
@@ -317,49 +321,55 @@ export default function Dashboard() {
const addRow = () => { const addRow = () => {
setIsNew(false); setIsNew(false);
setData([...data, [guidGenerator(), data.length, '', '', 'shared']]); setData([...data, {
id:guidGenerator(),
pos:data.length,
key:'',
value:'',
type:'shared'
}]);
}; };
const deleteRow = (id) => { const deleteRow = (id) => {
setButtonReady(true); setButtonReady(true);
setData(data.filter((row) => row[0] !== id)); setData(data.filter((row) => row.id !== id));
}; };
const modifyValue = (value, id) => { const modifyValue = (value, pos) => {
setData((oldData) => { setData((oldData) => {
oldData[id][3] = value; oldData[pos].value = value;
return [...oldData]; return [...oldData];
}); });
setButtonReady(true); setButtonReady(true);
}; };
const modifyKey = (value, id) => { const modifyKey = (value, pos) => {
setData((oldData) => { setData((oldData) => {
oldData[id][2] = value; oldData[pos].key = value;
return [...oldData]; return [...oldData];
}); });
setButtonReady(true); setButtonReady(true);
}; };
const modifyVisibility = (value, id) => { const modifyVisibility = (value, pos) => {
setData((oldData) => { setData((oldData) => {
oldData[id][4] = value; oldData[pos].type = value;
return [...oldData]; return [...oldData];
}); });
setButtonReady(true); setButtonReady(true);
}; };
// For speed purposes and better perforamance, we are using useCallback // For speed purposes and better perforamance, we are using useCallback
const listenChangeValue = useCallback((value, id) => { const listenChangeValue = useCallback((value, pos) => {
modifyValue(value, id); modifyValue(value, pos);
}, []); }, []);
const listenChangeKey = useCallback((value, id) => { const listenChangeKey = useCallback((value, pos) => {
modifyKey(value, id); modifyKey(value, pos);
}, []); }, []);
const listenChangeVisibility = useCallback((value, id) => { const listenChangeVisibility = useCallback((value, pos) => {
modifyVisibility(value, id); modifyVisibility(value, pos);
}, []); }, []);
/** /**
@@ -369,7 +379,7 @@ export default function Dashboard() {
// Format the new object with environment variables // Format the new object with environment variables
let obj = Object.assign( let obj = Object.assign(
{}, {},
...data.map((row) => ({ [row[2]]: [row[3], row[4]] })) ...data.map((row) => ({ [row.key]: [row.value, row.type] }))
); );
// Checking if any of the secret keys start with a number - if so, don't do anything // Checking if any of the secret keys start with a number - if so, don't do anything
@@ -378,9 +388,9 @@ export default function Dashboard() {
.every((v) => v === false); .every((v) => v === false);
const duplicatesExist = const duplicatesExist =
data data
?.map((item) => item[2]) ?.map((item) => item.key)
.filter( .filter(
(item, index) => index !== data?.map((item) => item[2]).indexOf(item) (item, index) => index !== data?.map((item) => item.key).indexOf(item)
).length > 0; ).length > 0;
if (nameErrors) { if (nameErrors) {
@@ -415,7 +425,7 @@ export default function Dashboard() {
) { ) {
let objIntegration = Object.assign( let objIntegration = Object.assign(
{}, {},
...data.map((row) => ({ [row[2]]: row[3] })) ...data.map((row) => ({ [row.key]: row.value }))
); );
await pushKeysIntegration({ await pushKeysIntegration({
obj: objIntegration, obj: objIntegration,
@@ -440,9 +450,23 @@ export default function Dashboard() {
setBlurred(!blurred); setBlurred(!blurred);
}; };
const sortValuesHandler = () => {
const sortedData = data.sort((a, b) =>
sortMethod == 'alphabetical'
? a.key.localeCompare(b.key)
: b.key.localeCompare(a.key)
).map((item, index) => {
return {
...item, pos:index
}
})
setData(sortedData)
}
// This function downloads the secrets as a .env file // This function downloads the secrets as a .env file
const download = () => { const download = () => {
const file = data.map((item) => [item[2], item[3]].join('=')).join('\n'); const file = data.map((item) => [item.key, item.value].join('=')).join('\n');
const blob = new Blob([file]); const blob = new Blob([file]);
const fileDownloadUrl = URL.createObjectURL(blob); const fileDownloadUrl = URL.createObjectURL(blob);
let alink = document.createElement('a'); let alink = document.createElement('a');
@@ -576,7 +600,7 @@ export default function Dashboard() {
</div> </div>
<div className="ml-2 min-w-max flex flex-row items-start justify-start"> <div className="ml-2 min-w-max flex flex-row items-start justify-start">
<Button <Button
onButtonPressed={reorderRows} onButtonPressed={() => reorderRows()}
color="mineshaft" color="mineshaft"
size="icon-md" size="icon-md"
icon={ icon={
@@ -648,19 +672,13 @@ export default function Dashboard() {
{data {data
.filter( .filter(
(keyPair) => (keyPair) =>
keyPair[2] keyPair.key
.toLowerCase() .toLowerCase()
.includes(searchKeys.toLowerCase()) && .includes(searchKeys.toLowerCase()) &&
keyPair[4] == 'personal' keyPair.type == 'personal'
) )?.map((keyPair) => (
.sort((a, b) =>
sortMethod == 'alphabetical'
? a[2].localeCompare(b[2])
: b[2].localeCompare(a[2])
)
?.map((keyPair, index) => (
<KeyPair <KeyPair
key={keyPair[0]} key={keyPair.id}
keyPair={keyPair} keyPair={keyPair}
deleteRow={deleteCertainRow} deleteRow={deleteCertainRow}
modifyValue={listenChangeValue} modifyValue={listenChangeValue}
@@ -668,11 +686,11 @@ export default function Dashboard() {
modifyVisibility={listenChangeVisibility} modifyVisibility={listenChangeVisibility}
isBlurred={blurred} isBlurred={blurred}
duplicates={data duplicates={data
?.map((item) => item[2]) ?.map((item) => item.key)
.filter( .filter(
(item, index) => (item, index) =>
index !== index !==
data?.map((item) => item[2]).indexOf(item) data?.map((item) => item.key).indexOf(item)
)} )}
/> />
))} ))}
@@ -702,19 +720,13 @@ export default function Dashboard() {
{data {data
.filter( .filter(
(keyPair) => (keyPair) =>
keyPair[2] keyPair.key
.toLowerCase() .toLowerCase()
.includes(searchKeys.toLowerCase()) && .includes(searchKeys.toLowerCase()) &&
keyPair[4] == 'shared' keyPair.type == 'shared'
) )?.map((keyPair) => (
.sort((a, b) =>
sortMethod == 'alphabetical'
? a[2].localeCompare(b[2])
: b[2].localeCompare(a[2])
)
?.map((keyPair, index) => (
<KeyPair <KeyPair
key={keyPair[0]} key={keyPair.id}
keyPair={keyPair} keyPair={keyPair}
deleteRow={deleteCertainRow} deleteRow={deleteCertainRow}
modifyValue={listenChangeValue} modifyValue={listenChangeValue}
@@ -722,11 +734,11 @@ export default function Dashboard() {
modifyVisibility={listenChangeVisibility} modifyVisibility={listenChangeVisibility}
isBlurred={blurred} isBlurred={blurred}
duplicates={data duplicates={data
?.map((item) => item[2]) ?.map((item) => item.key)
.filter( .filter(
(item, index) => (item, index) =>
index !== index !==
data?.map((item) => item[2]).indexOf(item) data?.map((item) => item.key).indexOf(item)
)} )}
/> />
))} ))}