mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 15:31:19 +00:00
feat(infisical-pg): changed frontend api types _id to normal id
This commit is contained in:
Akhil Mohan
@@ -13,17 +13,27 @@ import { Tag } from "public/data/frequentInterfaces";
|
||||
* @param {function} obj.modifyTags - modify tags for a certain secret
|
||||
* @param {Tag[]} obj.position - currently selected tags for a certain secret
|
||||
*/
|
||||
const AddTagsMenu = ({ allTags, currentTags, modifyTags, id }: { allTags: Tag[]; currentTags: Tag[]; modifyTags: (value: Tag[], id: string) => void; id: string; }) => {
|
||||
const AddTagsMenu = ({
|
||||
allTags,
|
||||
currentTags,
|
||||
modifyTags,
|
||||
id
|
||||
}: {
|
||||
allTags: Tag[];
|
||||
currentTags: Tag[];
|
||||
modifyTags: (value: Tag[], id: string) => void;
|
||||
id: string;
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
return (
|
||||
<Menu as="div" className="ml-2 relative inline-block text-left">
|
||||
<Menu as="div" className="relative ml-2 inline-block text-left">
|
||||
<Menu.Button
|
||||
as="div"
|
||||
className="flex justify-center items-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
|
||||
className="flex items-center justify-center font-medium focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
|
||||
>
|
||||
<div className='bg-mineshaft/30 cursor-pointer rounded-sm text-sm text-mineshaft-200/50 hover:bg-mineshaft/70 duration-200 flex items-center'>
|
||||
<FontAwesomeIcon icon={faPlus} className="p-[0.28rem]"/>
|
||||
{currentTags?.length > 2 && <span className='pr-2'>{currentTags.length - 2}</span>}
|
||||
<div className="flex cursor-pointer items-center rounded-sm bg-mineshaft/30 text-sm text-mineshaft-200/50 duration-200 hover:bg-mineshaft/70">
|
||||
<FontAwesomeIcon icon={faPlus} className="p-[0.28rem]" />
|
||||
{currentTags?.length > 2 && <span className="pr-2">{currentTags.length - 2}</span>}
|
||||
</div>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
@@ -35,24 +45,40 @@ const AddTagsMenu = ({ allTags, currentTags, modifyTags, id }: { allTags: Tag[];
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute z-[90] text-sm drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-mineshaft-600 border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-1 space-y-1">
|
||||
{allTags?.map((tag) => { return (
|
||||
<Menu.Item key={tag.id}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? "opacity-30 cursor-default" : "hover:bg-mineshaft-700"} w-full text-left bg-mineshaft-800 px-2 py-0.5 text-bunker-200 rounded-sm flex items-center`}
|
||||
onClick={() => {if (!currentTags?.map(currentTag => currentTag.name).includes(tag.name)) {modifyTags(currentTags.concat([tag]), id)}}}
|
||||
>
|
||||
{currentTags?.map(currentTag => currentTag.name).includes(tag.name) ? <FontAwesomeIcon icon={faCheckSquare} className="text-xs mr-2 text-primary"/> : <FontAwesomeIcon icon={faSquare} className="text-xs mr-2"/>} {tag.name}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
)})}
|
||||
<Menu.Items className="absolute right-0 z-[90] mt-0.5 w-[12rem] origin-top-right space-y-1 rounded-md border border-mineshaft-500 bg-mineshaft-600 p-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 drop-shadow-xl focus:outline-none">
|
||||
{allTags?.map((tag) => {
|
||||
return (
|
||||
<Menu.Item key={tag.id}>
|
||||
<button
|
||||
type="button"
|
||||
className={`${
|
||||
currentTags?.map((currentTag) => currentTag.name).includes(tag.name)
|
||||
? "cursor-default opacity-30"
|
||||
: "hover:bg-mineshaft-700"
|
||||
} flex w-full items-center rounded-sm bg-mineshaft-800 px-2 py-0.5 text-left text-bunker-200`}
|
||||
onClick={() => {
|
||||
if (!currentTags?.map((currentTag) => currentTag.name).includes(tag.name)) {
|
||||
modifyTags(currentTags.concat([tag]), id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{currentTags?.map((currentTag) => currentTag.name).includes(tag.name) ? (
|
||||
<FontAwesomeIcon icon={faCheckSquare} className="mr-2 text-xs text-primary" />
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faSquare} className="mr-2 text-xs" />
|
||||
)}{" "}
|
||||
{tag.name}
|
||||
</button>
|
||||
</Menu.Item>
|
||||
);
|
||||
})}
|
||||
<button
|
||||
type="button"
|
||||
className='w-full text-left bg-mineshaft-800 hover:bg-primary hover:text-black duration-200 px-2 py-0.5 text-bunker-200 rounded-sm'
|
||||
className="w-full rounded-sm bg-mineshaft-800 px-2 py-0.5 text-left text-bunker-200 duration-200 hover:bg-primary hover:text-black"
|
||||
onClick={() => router.push(`/project/${String(router.query.id)}/settings`)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />Add more tags
|
||||
<FontAwesomeIcon icon={faPlus} className="mr-2 text-xs" />
|
||||
Add more tags
|
||||
</button>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
|
||||
@@ -38,8 +38,7 @@ const colors = [
|
||||
"bg-[#6F1AB6]/40",
|
||||
"bg-[#C40B13]/40",
|
||||
"bg-[#332FD0]/40"
|
||||
]
|
||||
|
||||
];
|
||||
|
||||
const colorsText = [
|
||||
"text-[#fcf0c3]/70",
|
||||
@@ -50,7 +49,7 @@ const colorsText = [
|
||||
"text-[#FFE5F1]/70",
|
||||
"text-[#FFDEDE]/70",
|
||||
"text-[#DFF6FF]/70"
|
||||
]
|
||||
];
|
||||
|
||||
/**
|
||||
* This component represent a single row for an environemnt variable on the dashboard
|
||||
@@ -83,117 +82,160 @@ const KeyPair = ({
|
||||
toggleSidebar,
|
||||
sidebarSecretId,
|
||||
isCapitalized,
|
||||
isSnapshot,
|
||||
isSnapshot,
|
||||
deleteRow,
|
||||
togglePITSidebar,
|
||||
tags
|
||||
}: KeyPairProps) => {
|
||||
const tagData = (tags.map((tag, index) => {return {
|
||||
...tag,
|
||||
color: colors[index%colors.length],
|
||||
colorText: colorsText[index%colorsText.length]
|
||||
}}));
|
||||
const tagData = tags.map((tag, index) => {
|
||||
return {
|
||||
...tag,
|
||||
color: colors[index % colors.length],
|
||||
colorText: colorsText[index % colorsText.length]
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && "pointer-events-none"} ${
|
||||
keyPair.id === sidebarSecretId && "bg-mineshaft-700 duration-200"
|
||||
}`}
|
||||
>
|
||||
<div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
|
||||
<div className="w-[23%] border-r border-mineshaft-600 flex flex-row items-center">
|
||||
<div className='text-bunker-400 text-xs flex items-center justify-center w-14 h-10 cursor-default'>{keyPair.pos + 1}</div>
|
||||
<div className="flex items-center max-h-16 w-full">
|
||||
<DashboardInputField
|
||||
isCapitalized = {isCapitalized}
|
||||
onChangeHandler={modifyKey}
|
||||
type="varName"
|
||||
id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
|
||||
value={keyPair.key}
|
||||
isDuplicate={isDuplicate}
|
||||
overrideEnabled={keyPair.valueOverride !== undefined}
|
||||
modifyValueOverride={modifyValueOverride}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
<div
|
||||
className={`group flex flex-col items-center border-b border-mineshaft-500 duration-100 hover:bg-white/[0.03] ${
|
||||
isSnapshot && "pointer-events-none"
|
||||
} ${keyPair.id === sidebarSecretId && "bg-mineshaft-700 duration-200"}`}
|
||||
>
|
||||
<div className="relative mr-auto flex max-h-14 w-full flex-row items-center justify-between">
|
||||
<div className="flex w-[23%] flex-row items-center border-r border-mineshaft-600">
|
||||
<div className="flex h-10 w-14 cursor-default items-center justify-center text-xs text-bunker-400">
|
||||
{keyPair.pos + 1}
|
||||
</div>
|
||||
<div className="flex max-h-16 w-full items-center">
|
||||
<DashboardInputField
|
||||
isCapitalized={isCapitalized}
|
||||
onChangeHandler={modifyKey}
|
||||
type="varName"
|
||||
id={keyPair.id ? keyPair.id : keyPair.idOverride || ""}
|
||||
value={keyPair.key}
|
||||
isDuplicate={isDuplicate}
|
||||
overrideEnabled={keyPair.valueOverride !== undefined}
|
||||
modifyValueOverride={modifyValueOverride}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-5/12 border-r border-mineshaft-600">
|
||||
<div className="mt-4 flex max-h-10 items-center rounded-lg md:mt-0">
|
||||
<DashboardInputField
|
||||
onChangeHandler={
|
||||
keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue
|
||||
}
|
||||
type="value"
|
||||
id={keyPair.id ? keyPair.id : keyPair.idOverride || ""}
|
||||
value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
|
||||
blurred={isBlurred}
|
||||
overrideEnabled={keyPair.valueOverride !== undefined}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(10%)] border-r border-mineshaft-600">
|
||||
<div className="flex max-h-16 items-center">
|
||||
<DashboardInputField
|
||||
onChangeHandler={modifyComment}
|
||||
type="comment"
|
||||
id={keyPair.id ? keyPair.id : keyPair.idOverride || ""}
|
||||
value={keyPair.comment}
|
||||
isDuplicate={isDuplicate}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-r-scroll no-scrollbar::-webkit-scrollbar flex h-10 w-2/12 items-center overflow-visible no-scrollbar">
|
||||
<div className="flex max-h-16 items-center">
|
||||
{keyPair.tags?.map(
|
||||
(tag, index) =>
|
||||
index < 2 && (
|
||||
<div
|
||||
key={keyPair.pos}
|
||||
className={`ml-2 px-1.5 ${
|
||||
tagData.filter((tagDp) => tagDp.id === tag.id)[0]?.color
|
||||
} rounded-sm text-sm ${
|
||||
tagData.filter((tagDp) => tagDp.id === tag.id)[0]?.colorText
|
||||
} flex items-center`}
|
||||
>
|
||||
<span className="mb-0.5 cursor-default">{tag.name}</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faXmark}
|
||||
className="ml-1 cursor-pointer p-1"
|
||||
onClick={() =>
|
||||
modifyTags(
|
||||
keyPair.tags.filter((ttag) => ttag.id !== tag.id),
|
||||
keyPair.id
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
|
||||
<AddTagsMenu
|
||||
allTags={tags}
|
||||
currentTags={keyPair.tags}
|
||||
modifyTags={modifyTags}
|
||||
id={keyPair.id ? keyPair.id : keyPair.idOverride || ""}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-5/12 border-r border-mineshaft-600">
|
||||
<div
|
||||
className='flex items-center rounded-lg mt-4 md:mt-0 max-h-10'
|
||||
>
|
||||
<DashboardInputField
|
||||
onChangeHandler={keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue}
|
||||
type="value"
|
||||
id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
|
||||
value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
|
||||
blurred={isBlurred}
|
||||
overrideEnabled={keyPair.valueOverride !== undefined}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-[calc(10%)] border-r border-mineshaft-600">
|
||||
<div className="flex items-center max-h-16">
|
||||
<DashboardInputField
|
||||
onChangeHandler={modifyComment}
|
||||
type="comment"
|
||||
id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
|
||||
value={keyPair.comment}
|
||||
isDuplicate={isDuplicate}
|
||||
isSideBarOpen={keyPair.id === sidebarSecretId}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-2/12 h-10 flex items-center overflow-visible overflow-r-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
|
||||
<div className="flex items-center max-h-16">
|
||||
{keyPair.tags?.map((tag, index) => (
|
||||
index < 2 && <div key={keyPair.pos} className={`ml-2 px-1.5 ${tagData.filter(tagDp => tagDp.id === tag.id)[0]?.color} rounded-sm text-sm ${tagData.filter(tagDp => tagDp.id === tag.id)[0]?.colorText} flex items-center`}>
|
||||
<span className='mb-0.5 cursor-default'>{tag.name}</span>
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 cursor-pointer p-1" onClick={() => modifyTags(keyPair.tags.filter(ttag => ttag.id !== tag.id), keyPair.id)}/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")} />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
if (togglePITSidebar) {
|
||||
togglePITSidebar(false);
|
||||
}
|
||||
toggleSidebar(keyPair.id)
|
||||
}}
|
||||
className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? "invisible"}`}
|
||||
>
|
||||
<FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
|
||||
</div>
|
||||
<div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? "invisible"}`}>
|
||||
{keyPair.key || keyPair.value
|
||||
? <DeleteActionButton
|
||||
onSubmit={() => { if (deleteRow) {
|
||||
deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
|
||||
}}}
|
||||
isPlain
|
||||
/>
|
||||
: <div className='cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'>
|
||||
<div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => { if (deleteRow) {
|
||||
deleteRow({ ids: [keyPair.id], secretName: keyPair?.key })
|
||||
}}}
|
||||
className="invisible group-hover:visible"
|
||||
onClick={() => {
|
||||
if (togglePITSidebar) {
|
||||
togglePITSidebar(false);
|
||||
}
|
||||
toggleSidebar(keyPair.id);
|
||||
}}
|
||||
className={`invisible z-50 ml-auto flex h-[2.35rem] w-[1.5rem] cursor-pointer flex-row items-center justify-center rounded-md group-hover:visible group-hover:bg-mineshaft-700 ${
|
||||
isSnapshot ?? "invisible"
|
||||
}`}
|
||||
>
|
||||
<FontAwesomeIcon className="text-bunker-300 hover:text-red pl-2 pr-6 text-lg mt-0.5" icon={faXmark} />
|
||||
<FontAwesomeIcon
|
||||
className="text-lg text-bunker-300 hover:text-primary"
|
||||
icon={faEllipsis}
|
||||
/>
|
||||
</div>
|
||||
<div className={`z-50 group-hover:bg-mineshaft-700 ${isSnapshot ?? "invisible"}`}>
|
||||
{keyPair.key || keyPair.value ? (
|
||||
<DeleteActionButton
|
||||
onSubmit={() => {
|
||||
if (deleteRow) {
|
||||
deleteRow({ ids: [keyPair.id], secretName: keyPair?.key });
|
||||
}
|
||||
}}
|
||||
isPlain
|
||||
/>
|
||||
) : (
|
||||
<div className="justfy-center mr-2 flex h-[2.35rem] w-[1.5rem] cursor-pointer items-center">
|
||||
<div
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
onClick={() => {
|
||||
if (deleteRow) {
|
||||
deleteRow({ ids: [keyPair.id], secretName: keyPair?.key });
|
||||
}
|
||||
}}
|
||||
className="invisible group-hover:visible"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
className="mt-0.5 pl-2 pr-6 text-lg text-bunker-300 hover:text-red"
|
||||
icon={faXmark}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)};
|
||||
);
|
||||
};
|
||||
|
||||
export default KeyPair;
|
||||
|
||||
Reference in New Issue
Block a user