mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-09 23:28:31 +00:00
430 lines
16 KiB
TypeScript
430 lines
16 KiB
TypeScript
/* eslint-disable react/jsx-no-useless-fragment */
|
|
import { memo, useEffect, useRef } from "react";
|
|
import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form";
|
|
import {
|
|
faCheck,
|
|
faCodeBranch,
|
|
faComment,
|
|
faCopy,
|
|
faEllipsis,
|
|
faInfoCircle,
|
|
faPlus,
|
|
faTags,
|
|
faXmark
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { cx } from "cva";
|
|
import { twMerge } from "tailwind-merge";
|
|
|
|
import {
|
|
Button,
|
|
Checkbox,
|
|
FormControl,
|
|
HoverCard,
|
|
HoverCardContent,
|
|
HoverCardTrigger,
|
|
IconButton,
|
|
Input,
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
Tag,
|
|
TextArea,
|
|
Tooltip
|
|
} from "@app/components/v2";
|
|
import { useToggle } from "@app/hooks";
|
|
import { WsTag } from "@app/hooks/api/types";
|
|
|
|
import { FormData, SecretActionType } from "../../DashboardPage.utils";
|
|
import { MaskedInput } from "./MaskedInput";
|
|
|
|
type Props = {
|
|
index: number;
|
|
// permission and external state's that decided to hide or show
|
|
isReadOnly?: boolean;
|
|
isAddOnly?: boolean;
|
|
isRollbackMode?: boolean;
|
|
isSecretValueHidden: boolean;
|
|
searchTerm: string;
|
|
// to record the ids of deleted ones
|
|
onSecretDelete: (index: number, id?: string, overrideId?: string) => void;
|
|
// sidebar control props
|
|
onRowExpand: () => void;
|
|
// tag props
|
|
wsTags?: WsTag[];
|
|
onCreateTagOpen: () => void;
|
|
};
|
|
|
|
const tagColors = [
|
|
{ bg: "bg-[#f1c40f]/40", text: "text-[#fcf0c3]/70" },
|
|
{ bg: "bg-[#cb1c8d]/40", text: "text-[#f2c6e3]/70" },
|
|
{ bg: "bg-[#badc58]/40", text: "text-[#eef6d5]/70" },
|
|
{ bg: "bg-[#ff5400]/40", text: "text-[#ffddcc]/70" },
|
|
{ bg: "bg-[#3AB0FF]/40", text: "text-[#f0fffd]/70" },
|
|
{ bg: "bg-[#6F1AB6]/40", text: "text-[#FFE5F1]/70" },
|
|
{ bg: "bg-[#C40B13]/40", text: "text-[#FFDEDE]/70" },
|
|
{ bg: "bg-[#332FD0]/40", text: "text-[#DFF6FF]/70" }
|
|
];
|
|
|
|
export const SecretInputRow = memo(
|
|
({
|
|
index,
|
|
isSecretValueHidden,
|
|
onRowExpand,
|
|
isReadOnly,
|
|
isRollbackMode,
|
|
isAddOnly,
|
|
wsTags,
|
|
onCreateTagOpen,
|
|
onSecretDelete,
|
|
searchTerm
|
|
}: Props): JSX.Element => {
|
|
const isKeySubDisabled = useRef<boolean>(false);
|
|
const { register, setValue, control } = useFormContext<FormData>();
|
|
// comment management in a row
|
|
const {
|
|
fields: secretTags,
|
|
remove,
|
|
append
|
|
} = useFieldArray({ control, name: `secrets.${index}.tags` });
|
|
|
|
// to get details on a secret
|
|
const overrideAction = useWatch({ control, name: `secrets.${index}.overrideAction` });
|
|
const idOverride = useWatch({ control, name: `secrets.${index}.idOverride` });
|
|
const secComment = useWatch({ control, name: `secrets.${index}.comment` });
|
|
const hasComment = Boolean(secComment);
|
|
const secKey = useWatch({
|
|
control,
|
|
name: `secrets.${index}.key`,
|
|
disabled: isKeySubDisabled.current
|
|
});
|
|
const secValue = useWatch({
|
|
control,
|
|
name: `secrets.${index}.value`,
|
|
disabled: isKeySubDisabled.current
|
|
});
|
|
const secValueOverride = useWatch({
|
|
control,
|
|
name: `secrets.${index}.valueOverride`,
|
|
disabled: isKeySubDisabled.current
|
|
})
|
|
const secId = useWatch({ control, name: `secrets.${index}._id` });
|
|
|
|
const tags = useWatch({ control, name: `secrets.${index}.tags`, defaultValue: [] }) || [];
|
|
const selectedTagIds = tags.reduce<Record<string, boolean>>(
|
|
(prev, curr) => ({ ...prev, [curr.slug]: true }),
|
|
{}
|
|
);
|
|
|
|
const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
|
|
|
|
useEffect(() => {
|
|
let timer: NodeJS.Timeout;
|
|
if (isInviteLinkCopied) {
|
|
timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
|
|
}
|
|
return () => clearTimeout(timer);
|
|
}, [isInviteLinkCopied]);
|
|
|
|
const copyTokenToClipboard = () => {
|
|
navigator.clipboard.writeText((secValueOverride || secValue) as string);
|
|
setInviteLinkCopied.on();
|
|
};
|
|
|
|
// when secret is override by personal values
|
|
const isOverridden =
|
|
overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
|
|
|
|
const onSecretOverride = () => {
|
|
if (isOverridden) {
|
|
// when user created a new override but then removes
|
|
if (overrideAction === SecretActionType.Created)
|
|
setValue(`secrets.${index}.valueOverride`, "");
|
|
setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, {
|
|
shouldDirty: true
|
|
});
|
|
} else {
|
|
setValue(`secrets.${index}.valueOverride`, "");
|
|
setValue(
|
|
`secrets.${index}.overrideAction`,
|
|
idOverride ? SecretActionType.Modified : SecretActionType.Created,
|
|
{ shouldDirty: true }
|
|
);
|
|
}
|
|
};
|
|
|
|
const onSelectTag = (selectedTag: WsTag) => {
|
|
const shouldAppend = !selectedTagIds[selectedTag.slug];
|
|
if (shouldAppend) {
|
|
append(selectedTag);
|
|
} else {
|
|
const pos = tags.findIndex(({ slug }) => selectedTag.slug === slug);
|
|
remove(pos);
|
|
}
|
|
};
|
|
|
|
const isCreatedSecret = !secId;
|
|
const shouldBeBlockedInAddOnly = !isCreatedSecret && isAddOnly;
|
|
|
|
// Why this instead of filter in parent
|
|
// Because rhf field.map has default values so basically
|
|
// keys are not updated there and index needs to kept so that we can monitor
|
|
// values individually here
|
|
if (
|
|
!(
|
|
secKey?.toUpperCase().includes(searchTerm?.toUpperCase()) ||
|
|
tags
|
|
?.map((tag) => tag.name)
|
|
.join(" ")
|
|
?.toUpperCase()
|
|
.includes(searchTerm?.toUpperCase()) ||
|
|
secComment?.toUpperCase().includes(searchTerm?.toUpperCase())
|
|
)
|
|
) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<tr className="group flex flex-row" key={index}>
|
|
<td className="flex h-10 w-10 items-center justify-center border-none px-4">
|
|
<div className="w-10 text-center text-xs text-bunker-400">{index + 1}</div>
|
|
</td>
|
|
<Controller
|
|
control={control}
|
|
defaultValue=""
|
|
name={`secrets.${index}.key`}
|
|
render={({ fieldState: { error }, field }) => (
|
|
<HoverCard openDelay={0} open={error?.message ? undefined : false}>
|
|
<HoverCardTrigger asChild>
|
|
<td className={cx(error?.message ? "rounded ring ring-red/50" : null)}>
|
|
<div className="relative flex w-full min-w-[220px] items-center justify-end lg:min-w-[240px] xl:min-w-[280px]">
|
|
<Input
|
|
autoComplete="off"
|
|
onFocus={() => {
|
|
isKeySubDisabled.current = true;
|
|
}}
|
|
variant="plain"
|
|
isDisabled={isReadOnly || shouldBeBlockedInAddOnly || isRollbackMode}
|
|
className="w-full focus:text-bunker-100 focus:ring-transparent"
|
|
{...field}
|
|
onBlur={() => {
|
|
isKeySubDisabled.current = false;
|
|
field.onBlur();
|
|
}}
|
|
/>
|
|
</div>
|
|
</td>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent className="w-auto py-2 pt-2">
|
|
<div className="flex items-center space-x-2">
|
|
<div>
|
|
<FontAwesomeIcon icon={faInfoCircle} className="text-red" />
|
|
</div>
|
|
<div className="text-sm">{error?.message}</div>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)}
|
|
/>
|
|
<td className="flex w-full flex-grow flex-row border-r border-none border-red">
|
|
<MaskedInput
|
|
isReadOnly={
|
|
isReadOnly || isRollbackMode || (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
|
|
}
|
|
isOverridden={isOverridden}
|
|
isSecretValueHidden={isSecretValueHidden}
|
|
index={index}
|
|
/>
|
|
</td>
|
|
<td className="min-w-sm flex">
|
|
<div className="flex h-8 items-center pl-2">
|
|
{secretTags.map(({ id, slug }, i) => (
|
|
<Tag
|
|
className={cx(
|
|
tagColors[i % tagColors.length].bg,
|
|
tagColors[i % tagColors.length].text
|
|
)}
|
|
isDisabled={isReadOnly || isAddOnly || isRollbackMode}
|
|
onClose={() => remove(i)}
|
|
key={id}
|
|
>
|
|
{slug}
|
|
</Tag>
|
|
))}
|
|
<div className="w-0 group-hover:w-6 overflow-hidden">
|
|
<Tooltip content="Copy value">
|
|
<IconButton
|
|
variant="plain"
|
|
size="md"
|
|
ariaLabel="add-tag"
|
|
className="py-[0.42rem]"
|
|
onClick={copyTokenToClipboard}
|
|
>
|
|
<FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
{!(isReadOnly || isAddOnly || isRollbackMode) && (
|
|
<div className="duration-0 ml-1 overflow-hidden">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<div className="w-0 group-hover:w-6 data-[state=open]:w-6">
|
|
<Tooltip content="Add tags">
|
|
<IconButton
|
|
variant="plain"
|
|
size="md"
|
|
ariaLabel="add-tag"
|
|
className="py-[0.42rem]"
|
|
>
|
|
<FontAwesomeIcon icon={faTags} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
side="left"
|
|
className="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="mb-2 px-2 text-center text-sm font-medium text-bunker-200">
|
|
Add tags to {secKey || "this secret"}
|
|
</div>
|
|
<div className="flex flex-col space-y-1">
|
|
{wsTags?.map((wsTag) => (
|
|
<Button
|
|
variant="plain"
|
|
size="sm"
|
|
className={twMerge(
|
|
"justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500",
|
|
selectedTagIds?.[wsTag.slug] && "text-primary"
|
|
)}
|
|
onClick={() => onSelectTag(wsTag)}
|
|
leftIcon={
|
|
<Checkbox
|
|
className="mr-0 data-[state=checked]:bg-primary"
|
|
id="autoCapitalization"
|
|
isChecked={selectedTagIds?.[wsTag.slug]}
|
|
onCheckedChange={() => {}}
|
|
>
|
|
{}
|
|
</Checkbox>
|
|
}
|
|
key={wsTag._id}
|
|
>
|
|
{wsTag.slug}
|
|
</Button>
|
|
))}
|
|
<Button
|
|
variant="star"
|
|
color="primary"
|
|
size="sm"
|
|
className="mt-4 h-7 justify-start bg-mineshaft-600 px-1"
|
|
onClick={onCreateTagOpen}
|
|
leftIcon={<FontAwesomeIcon icon={faPlus} />}
|
|
>
|
|
Add new tag
|
|
</Button>
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex h-8 flex-row items-center pr-2">
|
|
{!isAddOnly && (
|
|
<div>
|
|
<Tooltip content="Override with a personal value">
|
|
<IconButton
|
|
variant="plain"
|
|
className={twMerge(
|
|
"mt-0.5 w-0 overflow-hidden p-0 group-hover:ml-1 group-hover:w-7",
|
|
isOverridden && "ml-1 w-7 text-primary"
|
|
)}
|
|
onClick={onSecretOverride}
|
|
size="md"
|
|
isDisabled={isRollbackMode || isReadOnly}
|
|
ariaLabel="info"
|
|
>
|
|
<div className="flex items-center space-x-1">
|
|
<FontAwesomeIcon icon={faCodeBranch} className="text-base" />
|
|
</div>
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
<Tooltip content="Comment">
|
|
<div className="mt-0.5 overflow-hidden ">
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<IconButton
|
|
className={twMerge(
|
|
"w-7 overflow-hidden p-0",
|
|
"w-0 group-hover:w-7 data-[state=open]:w-7",
|
|
hasComment ? "w-7 text-primary" : "group-hover:w-7"
|
|
)}
|
|
variant="plain"
|
|
size="md"
|
|
ariaLabel="add-tag"
|
|
>
|
|
<FontAwesomeIcon icon={faComment} />
|
|
</IconButton>
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
className="w-auto border border-mineshaft-600 bg-mineshaft-800 p-2 drop-shadow-2xl"
|
|
sticky="always"
|
|
>
|
|
<FormControl label="Comment" className="mb-0">
|
|
<TextArea
|
|
isDisabled={isReadOnly || isRollbackMode || shouldBeBlockedInAddOnly}
|
|
className="border border-mineshaft-600 text-sm"
|
|
{...register(`secrets.${index}.comment`)}
|
|
rows={8}
|
|
cols={30}
|
|
/>
|
|
</FormControl>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
</Tooltip>
|
|
</div>
|
|
<div className="duration-0 flex w-16 justify-center overflow-hidden border-l border-mineshaft-600 pl-2 transition-all">
|
|
<div className="flex h-8 items-center space-x-2.5">
|
|
{!isAddOnly && (
|
|
<div className="opacity-0 group-hover:opacity-100">
|
|
<Tooltip content="Settings">
|
|
<IconButton
|
|
size="lg"
|
|
colorSchema="primary"
|
|
variant="plain"
|
|
onClick={onRowExpand}
|
|
ariaLabel="expand"
|
|
>
|
|
<FontAwesomeIcon icon={faEllipsis} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
)}
|
|
<div className="opacity-0 group-hover:opacity-100">
|
|
<Tooltip content="Delete">
|
|
<IconButton
|
|
size="lg"
|
|
variant="plain"
|
|
colorSchema="danger"
|
|
ariaLabel="delete"
|
|
isDisabled={isReadOnly || isRollbackMode}
|
|
onClick={() => onSecretDelete(index, secId, idOverride)}
|
|
>
|
|
<FontAwesomeIcon icon={faXmark} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
);
|
|
|
|
SecretInputRow.displayName = "SecretInputRow";
|