mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 21:51:56 +00:00
feat(infisical-pg): changed frontend api types _id to normal id
This commit is contained in:
Akhil Mohan
@@ -31,18 +31,18 @@ const AddTagPopoverContent = ({
|
||||
return (
|
||||
<PopoverContent
|
||||
side="left"
|
||||
className="relative max-h-96 w-auto min-w-[200px] p-2 overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 text-bunker-200"
|
||||
className="relative max-h-96 w-auto min-w-[200px] overflow-y-auto overflow-x-hidden border border-mineshaft-600 bg-mineshaft-800 p-2 text-bunker-200"
|
||||
hideCloseBtn
|
||||
>
|
||||
<div className=" text-center text-sm font-medium text-bunker-200">
|
||||
Add tags to {secKey || "this secret"}
|
||||
</div>
|
||||
<div className="absolute left-0 w-full border-mineshaft-600 border-t mt-2" />
|
||||
<div className="absolute left-0 mt-2 w-full border-t border-mineshaft-600" />
|
||||
<div className="flex flex-col space-y-1.5">
|
||||
{wsTags?.map((wsTag: WsTag) => (
|
||||
<div
|
||||
key={`tag-${wsTag.id}`}
|
||||
className="mt-4 h-[32px] relative flex items-center justify-start hover:border-mineshaft-600 hover:border hover:bg-mineshaft-700 p-2 rounded-md hover:text-bunker-200 bg-none"
|
||||
className="relative mt-4 flex h-[32px] items-center justify-start rounded-md bg-none p-2 hover:border hover:border-mineshaft-600 hover:bg-mineshaft-700 hover:text-bunker-200"
|
||||
onClick={() => handleSelectTag(wsTag)}
|
||||
onMouseEnter={() => handleTagOnMouseEnter(wsTag)}
|
||||
onMouseLeave={() => handleTagOnMouseLeave()}
|
||||
@@ -54,7 +54,7 @@ const AddTagPopoverContent = ({
|
||||
<Checkbox
|
||||
id="autoCapitalization"
|
||||
isChecked={selectedTagIds?.[wsTag.slug]}
|
||||
className="absolute top-[50%] translate-y-[-50%] left-[10px] "
|
||||
className="absolute top-[50%] left-[10px] translate-y-[-50%] "
|
||||
checkIndicatorBg={`${
|
||||
!selectedTagIds?.[wsTag.slug] ? "text-transparent" : "text-mineshaft-800"
|
||||
}`}
|
||||
@@ -62,7 +62,7 @@ const AddTagPopoverContent = ({
|
||||
)}
|
||||
<div className="ml-7 flex items-center gap-3">
|
||||
<div
|
||||
className="w-[10px] h-[10px] rounded-full"
|
||||
className="h-[10px] w-[10px] rounded-full"
|
||||
style={{ background: wsTag?.tagColor ? wsTag.tagColor : "#bec2c8" }}
|
||||
>
|
||||
{" "}
|
||||
|
||||
@@ -4,73 +4,64 @@ import { Dialog, Transition } from "@headlessui/react";
|
||||
|
||||
import { useOrganization } from "@app/context";
|
||||
|
||||
// REFACTOR: Move all these modals into one reusable one
|
||||
// REFACTOR: Move all these modals into one reusable one
|
||||
type Props = {
|
||||
isOpen?: boolean;
|
||||
onClose: ()=>void;
|
||||
onClose: () => void;
|
||||
text: string;
|
||||
}
|
||||
};
|
||||
|
||||
const UpgradePlanModal = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
text,
|
||||
}:Props) => {
|
||||
const UpgradePlanModal = ({ isOpen, onClose, text }: Props) => {
|
||||
const router = useRouter();
|
||||
const { currentOrg } = useOrganization();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as='div' className='relative z-10' onClose={onClose}>
|
||||
<Dialog as="div" className="relative z-10" onClose={onClose}>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0'
|
||||
enterTo='opacity-100'
|
||||
leave='ease-in duration-150'
|
||||
leaveFrom='opacity-100'
|
||||
leaveTo='opacity-0'
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className='fixed inset-0 bg-black bg-opacity-50 drop-shadow-xl' />
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 drop-shadow-xl" />
|
||||
</Transition.Child>
|
||||
<div className='fixed inset-0 overflow-y-auto'>
|
||||
<div className='flex min-h-full items-center justify-center p-4 text-center'>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter='ease-out duration-300'
|
||||
enterFrom='opacity-0 scale-95'
|
||||
enterTo='opacity-100 scale-100'
|
||||
leave='ease-in duration-200'
|
||||
leaveFrom='opacity-100 scale-100'
|
||||
leaveTo='opacity-0 scale-95'
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className='w-full max-w-md transform overflow-hidden rounded-md bg-bunker border border-mineshaft-500 p-6 pt-5 text-left align-middle shadow-xl transition-all'>
|
||||
<Dialog.Title
|
||||
as='h3'
|
||||
className='text-xl font-medium leading-6 text-primary'
|
||||
>
|
||||
<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md border border-mineshaft-500 bg-bunker p-6 pt-5 text-left align-middle shadow-xl transition-all">
|
||||
<Dialog.Title as="h3" className="text-xl font-medium leading-6 text-primary">
|
||||
Unleash Infisical's Full Power
|
||||
</Dialog.Title>
|
||||
<div className='mt-2'>
|
||||
<p className='text-sm text-bunker-300 mb-1'>
|
||||
{text}
|
||||
</p>
|
||||
<p className='text-sm text-bunker-300'>
|
||||
<div className="mt-2">
|
||||
<p className="mb-1 text-sm text-bunker-300">{text}</p>
|
||||
<p className="text-sm text-bunker-300">
|
||||
Upgrade and get access to this, as well as to other powerful enhancements.
|
||||
</p>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<div className="mt-4">
|
||||
<button
|
||||
type='button'
|
||||
className='inline-flex justify-center rounded-md border border-transparent bg-primary opacity-80 hover:opacity-100 px-4 py-2 text-sm font-medium text-black hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
|
||||
type="button"
|
||||
className="hover:text-semibold inline-flex justify-center rounded-md border border-transparent bg-primary px-4 py-2 text-sm font-medium text-black opacity-80 duration-200 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
||||
onClick={() => router.push(`/org/${currentOrg?.id}/billing`)}
|
||||
>
|
||||
Upgrade Now
|
||||
</button>
|
||||
<button
|
||||
type='button'
|
||||
className='ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 hover:border-red hover:text-red hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2'
|
||||
type="button"
|
||||
className="hover:text-semibold ml-2 inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2 text-sm font-medium text-gray-400 duration-200 hover:border-red hover:text-red focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
|
||||
onClick={onClose}
|
||||
>
|
||||
Maybe Later
|
||||
|
||||
@@ -10,7 +10,8 @@ import {
|
||||
useDeleteUserFromWorkspace,
|
||||
useGetUserWsKey,
|
||||
useUpdateUserWorkspaceRole,
|
||||
useUploadWsKey} from "@app/hooks/api";
|
||||
useUploadWsKey
|
||||
} from "@app/hooks/api";
|
||||
|
||||
import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/cryptography/crypto";
|
||||
import guidGenerator from "../../utilities/randomId";
|
||||
@@ -64,7 +65,7 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
|
||||
|
||||
const handleRoleUpdate = async (index: number, e: string) => {
|
||||
await updateUserWorkspaceRoleMutateAsync({
|
||||
membershipId: userData[index].membershipId,
|
||||
membershipId: userData[index].membershipId,
|
||||
role: e.toLowerCase()
|
||||
});
|
||||
createNotification({
|
||||
@@ -191,11 +192,15 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
|
||||
<UpgradePlanModal
|
||||
isOpen={isUpgradeModalOpen}
|
||||
onClose={closeUpgradeModal}
|
||||
text={subscription.slug === null ? "You can use RBAC under an Enterprise license" : "You can use RBAC if you switch to Infisical's Team Plan."}
|
||||
text={
|
||||
subscription.slug === null
|
||||
? "You can use RBAC under an Enterprise license"
|
||||
: "You can use RBAC if you switch to Infisical's Team Plan."
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<table className="my-0.5 w-full">
|
||||
<thead className="text-xs font-light text-gray-400 bg-mineshaft-800">
|
||||
<thead className="bg-mineshaft-800 text-xs font-light text-gray-400">
|
||||
<tr>
|
||||
<th className="py-3.5 pl-4 text-left">NAME</th>
|
||||
<th className="py-3.5 pl-4 text-left">EMAIL</th>
|
||||
@@ -213,12 +218,13 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!isUserListLoading && userData?.filter(
|
||||
(user) =>
|
||||
user.firstName?.toLowerCase().includes(filter) ||
|
||||
user.lastName?.toLowerCase().includes(filter) ||
|
||||
user.email?.toLowerCase().includes(filter)
|
||||
).length > 0 &&
|
||||
{!isUserListLoading &&
|
||||
userData?.filter(
|
||||
(user) =>
|
||||
user.firstName?.toLowerCase().includes(filter) ||
|
||||
user.lastName?.toLowerCase().includes(filter) ||
|
||||
user.email?.toLowerCase().includes(filter)
|
||||
).length > 0 &&
|
||||
userData
|
||||
?.filter(
|
||||
(user) =>
|
||||
@@ -373,10 +379,18 @@ const ProjectUsersTable = ({ userData, changeData, myUser, filter, isUserListLoa
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
{isUserListLoading && <>
|
||||
<tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
|
||||
<tr key={guidGenerator()} className="bg-mineshaft-800 text-sm animate-pulse h-14 w-full"/>
|
||||
</>}
|
||||
{isUserListLoading && (
|
||||
<>
|
||||
<tr
|
||||
key={guidGenerator()}
|
||||
className="h-14 w-full animate-pulse bg-mineshaft-800 text-sm"
|
||||
/>
|
||||
<tr
|
||||
key={guidGenerator()}
|
||||
className="h-14 w-full animate-pulse bg-mineshaft-800 text-sm"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -157,7 +157,7 @@ export default function NavHeader({
|
||||
})}
|
||||
{isProtectedBranch && (
|
||||
<Tooltip content={`Protected by policy ${protectionPolicyName}`}>
|
||||
<FontAwesomeIcon icon={faLock} className="text-primary ml-2" />
|
||||
<FontAwesomeIcon icon={faLock} className="ml-2 text-primary" />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -119,9 +119,9 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
|
||||
const [showHexInput, setShowHexInput] = useState<boolean>(false);
|
||||
const selectedTagColor = watch("color", secretTagsColors[0].hex);
|
||||
|
||||
useEffect(()=>{
|
||||
if(!isOpen) reset();
|
||||
},[isOpen])
|
||||
useEffect(() => {
|
||||
if (!isOpen) reset();
|
||||
}, [isOpen]);
|
||||
|
||||
const onFormSubmit = async ({ name, color }: FormData) => {
|
||||
try {
|
||||
@@ -168,21 +168,21 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
|
||||
Tag Color
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<div className="p-2 rounded flex items-center justify-center border border-mineshaft-500 bg-mineshaft-900 ">
|
||||
<div className="flex items-center justify-center rounded border border-mineshaft-500 bg-mineshaft-900 p-2 ">
|
||||
<div
|
||||
className="w-6 h-6 rounded-full"
|
||||
className="h-6 w-6 rounded-full"
|
||||
style={{ background: `${selectedTagColor}` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-grow flex items-center rounded border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
|
||||
<div className="flex flex-grow items-center rounded border-mineshaft-500 bg-mineshaft-900 px-1 pr-2">
|
||||
{!showHexInput ? (
|
||||
<div className="inline-flex gap-3 items-center pl-3">
|
||||
<div className="inline-flex items-center gap-3 pl-3">
|
||||
{secretTagsColors.map(($tagColor: TagColor) => {
|
||||
return (
|
||||
<div key={`tag-color-${$tagColor.id}`}>
|
||||
<Tooltip content={`${$tagColor.name}`}>
|
||||
<div
|
||||
className=" flex items-center justify-center w-[26px] h-[26px] hover:ring-offset-2 hover:ring-2 bg-[#bec2c8] border-2 p-2 hover:shadow-lg border-transparent hover:border-black rounded-full"
|
||||
className=" flex h-[26px] w-[26px] items-center justify-center rounded-full border-2 border-transparent bg-[#bec2c8] p-2 hover:border-black hover:shadow-lg hover:ring-2 hover:ring-offset-2"
|
||||
key={`tag-${$tagColor.id}`}
|
||||
style={{ backgroundColor: `${$tagColor.hex}` }}
|
||||
onClick={() => setValue("color", $tagColor.hex)}
|
||||
@@ -200,18 +200,18 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-grow items-center px-2 tags-hex-wrapper">
|
||||
<div className="flex items-center relative rounded-md ">
|
||||
<div className="tags-hex-wrapper flex flex-grow items-center px-2">
|
||||
<div className="relative flex items-center rounded-md ">
|
||||
{isValidHexColor(selectedTagColor) && (
|
||||
<div
|
||||
className="w-7 h-7 rounded-full flex items-center justify-center"
|
||||
className="flex h-7 w-7 items-center justify-center rounded-full"
|
||||
style={{ background: `${selectedTagColor}` }}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCheck} style={{ color: "#00000070" }} />
|
||||
</div>
|
||||
)}
|
||||
{!isValidHexColor(selectedTagColor) && (
|
||||
<div className="border-dashed border bg-blue rounded-full w-7 h-7 border-mineshaft-500" />
|
||||
<div className="bg-blue h-7 w-7 rounded-full border border-dashed border-mineshaft-500" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
@@ -225,10 +225,10 @@ export const CreateTagModal = ({ isOpen, onToggle }: Props): JSX.Element => {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="border-mineshaft-500 border h-8 mx-4" />
|
||||
<div className="w-7 h-7 flex items-center justify-center">
|
||||
<div className="mx-4 h-8 border border-mineshaft-500" />
|
||||
<div className="flex h-7 w-7 items-center justify-center">
|
||||
<div
|
||||
className={`flex items-center justify-center w-7 h-7 bg-transparent cursor-pointer hover:ring-offset-1 hover:ring-2 border-mineshaft-500 border bg-mineshaft-900 rounded-sm p-2 ${
|
||||
className={`flex h-7 w-7 cursor-pointer items-center justify-center rounded-sm border border-mineshaft-500 bg-transparent bg-mineshaft-900 p-2 hover:ring-2 hover:ring-offset-1 ${
|
||||
showHexInput ? "tags-conic-bg rounded-full" : ""
|
||||
}`}
|
||||
onClick={() => setShowHexInput((prev) => !prev)}
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
const ENV = process.env.NEXT_PUBLIC_ENV! || "development"; // investigate
|
||||
const POSTHOG_API_KEY = process.env.NEXT_PUBLIC_POSTHOG_API_KEY!;
|
||||
const POSTHOG_HOST =
|
||||
process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
|
||||
const POSTHOG_HOST = process.env.NEXT_PUBLIC_POSTHOG_HOST! || "https://app.posthog.com";
|
||||
const INTERCOMid = process.env.NEXT_PUBLIC_INTERCOMid!;
|
||||
|
||||
export {
|
||||
ENV,
|
||||
INTERCOMid,
|
||||
POSTHOG_API_KEY,
|
||||
POSTHOG_HOST
|
||||
};
|
||||
export { ENV, INTERCOMid, POSTHOG_API_KEY, POSTHOG_HOST };
|
||||
|
||||
@@ -54,11 +54,9 @@ export const load = () => {
|
||||
|
||||
// Initializes Intercom
|
||||
export const boot = (options = {}) => {
|
||||
window &&
|
||||
window.Intercom &&
|
||||
window.Intercom("boot", { appid: APPid, ...options });
|
||||
window && window.Intercom && window.Intercom("boot", { appid: APPid, ...options });
|
||||
};
|
||||
|
||||
export const update = () => {
|
||||
window && window.Intercom && window.Intercom("update");
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user