mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-16 15:31:19 +00:00
feat: renamed old frontend and fixed some minor bugs
This commit is contained in:
=
File diff suppressed because it is too large
Load Diff
+318
@@ -0,0 +1,318 @@
|
||||
import { ClipboardEvent, useRef } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { subject } from "@casl/ability";
|
||||
import { faTriangleExclamation } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Button, FilterableSelect, FormControl, Input } from "@app/components/v2";
|
||||
import { CreatableSelect } from "@app/components/v2/CreatableSelect";
|
||||
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub,
|
||||
useProjectPermission,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { getKeyValue } from "@app/helpers/parseEnvVar";
|
||||
import { useCreateFolder, useCreateSecretV3, useCreateWsTag, useGetWsTags } from "@app/hooks/api";
|
||||
import { SecretType } from "@app/hooks/api/types";
|
||||
|
||||
const typeSchema = z
|
||||
.object({
|
||||
key: z.string().trim().min(1, "Key is required"),
|
||||
value: z.string().optional(),
|
||||
environments: z.object({ name: z.string(), slug: z.string() }).array(),
|
||||
tags: z.array(z.object({ label: z.string().trim(), value: z.string().trim() })).optional()
|
||||
})
|
||||
.refine((data) => data.key !== undefined, {
|
||||
message: "Please enter secret name"
|
||||
});
|
||||
|
||||
type TFormSchema = z.infer<typeof typeSchema>;
|
||||
|
||||
type Props = {
|
||||
secretPath?: string;
|
||||
// modal props
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const CreateSecretForm = ({ secretPath = "/", onClose }: Props) => {
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { isSubmitting, errors }
|
||||
} = useForm<TFormSchema>({ resolver: zodResolver(typeSchema) });
|
||||
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { permission } = useProjectPermission();
|
||||
const canReadTags = permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags);
|
||||
const workspaceId = currentWorkspace?.id || "";
|
||||
const environments = currentWorkspace?.environments || [];
|
||||
|
||||
const { mutateAsync: createSecretV3 } = useCreateSecretV3();
|
||||
const { mutateAsync: createFolder } = useCreateFolder();
|
||||
const { data: projectTags, isLoading: isTagsLoading } = useGetWsTags(
|
||||
canReadTags ? workspaceId : ""
|
||||
);
|
||||
|
||||
const secretKeyInputRef = useRef<HTMLInputElement>(null);
|
||||
const { ref: setSecretKeyHookRef, ...secretKeyRegisterRest } = register("key");
|
||||
|
||||
const secretKey = watch("key");
|
||||
|
||||
const handleFormSubmit = async ({ key, value, environments: selectedEnv, tags }: TFormSchema) => {
|
||||
const promises = selectedEnv.map(async (env) => {
|
||||
const environment = env.slug;
|
||||
// create folder if not existing
|
||||
if (secretPath !== "/") {
|
||||
// /hello/world -> [hello","world"]
|
||||
const pathSegment = secretPath.split("/").filter(Boolean);
|
||||
const parentPath = `/${pathSegment.slice(0, -1).join("/")}`;
|
||||
const folderName = pathSegment.at(-1);
|
||||
const canCreateFolder = permission.can(
|
||||
ProjectPermissionActions.Create,
|
||||
subject(ProjectPermissionSub.SecretFolders, {
|
||||
environment: env.slug,
|
||||
secretPath: parentPath
|
||||
})
|
||||
);
|
||||
|
||||
if (folderName && parentPath && canCreateFolder) {
|
||||
await createFolder({
|
||||
projectId: workspaceId,
|
||||
path: parentPath,
|
||||
environment,
|
||||
name: folderName
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: add back ability to overwrite - need to fetch secrets by key to check for conflicts as previous method broke with pagination
|
||||
|
||||
return {
|
||||
...(await createSecretV3({
|
||||
environment,
|
||||
workspaceId,
|
||||
secretPath,
|
||||
secretKey: key,
|
||||
secretValue: value || "",
|
||||
secretComment: "",
|
||||
type: SecretType.Shared,
|
||||
tagIds: tags?.map((el) => el.value)
|
||||
})),
|
||||
environment
|
||||
};
|
||||
});
|
||||
|
||||
const results = await Promise.allSettled(promises);
|
||||
const forApprovalEnvs = results
|
||||
.map((result) =>
|
||||
result.status === "fulfilled" && "approval" in result.value
|
||||
? result.value.environment
|
||||
: undefined
|
||||
)
|
||||
.filter(Boolean) as string[];
|
||||
|
||||
const updatedEnvs = results
|
||||
.map((result) =>
|
||||
result.status === "fulfilled" && !("approval" in result.value)
|
||||
? result.value.environment
|
||||
: undefined
|
||||
)
|
||||
.filter(Boolean) as string[];
|
||||
|
||||
if (forApprovalEnvs.length) {
|
||||
createNotification({
|
||||
type: "info",
|
||||
text: `Change request submitted for ${
|
||||
forApprovalEnvs.length > 1 ? "environments" : "environment"
|
||||
}: ${forApprovalEnvs.join(", ")}`
|
||||
});
|
||||
}
|
||||
|
||||
if (updatedEnvs.length) {
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: `Secrets created in ${
|
||||
updatedEnvs.length > 1 ? "environments" : "environment"
|
||||
}: ${updatedEnvs.join(", ")}`
|
||||
});
|
||||
}
|
||||
|
||||
if (!updatedEnvs.length && !forApprovalEnvs.length) {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create secrets"
|
||||
});
|
||||
} else {
|
||||
onClose();
|
||||
reset();
|
||||
}
|
||||
};
|
||||
|
||||
const handlePaste = (e: ClipboardEvent<HTMLInputElement>) => {
|
||||
const delimitters = [":", "="];
|
||||
const pastedContent = e.clipboardData.getData("text");
|
||||
const { key, value } = getKeyValue(pastedContent, delimitters);
|
||||
|
||||
const isWholeKeyHighlighted =
|
||||
secretKeyInputRef.current &&
|
||||
secretKeyInputRef.current.selectionStart === 0 &&
|
||||
secretKeyInputRef.current.selectionEnd === secretKeyInputRef.current.value.length;
|
||||
|
||||
if (!secretKey || isWholeKeyHighlighted) {
|
||||
e.preventDefault();
|
||||
|
||||
setValue("key", key);
|
||||
if (value) {
|
||||
setValue("value", value);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const createWsTag = useCreateWsTag();
|
||||
const slugSchema = z.string().trim().toLowerCase().min(1);
|
||||
const createNewTag = async (slug: string) => {
|
||||
// TODO: Replace with slugSchema generic
|
||||
try {
|
||||
const parsedSlug = slugSchema.parse(slug);
|
||||
await createWsTag.mutateAsync({
|
||||
workspaceID: workspaceId,
|
||||
tagSlug: parsedSlug,
|
||||
tagColor: ""
|
||||
});
|
||||
} catch {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to create new tag"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit(handleFormSubmit)} noValidate>
|
||||
<FormControl
|
||||
label="Key"
|
||||
isRequired
|
||||
isError={Boolean(errors?.key)}
|
||||
errorText={errors?.key?.message}
|
||||
>
|
||||
<Input
|
||||
{...secretKeyRegisterRest}
|
||||
ref={(e) => {
|
||||
setSecretKeyHookRef(e);
|
||||
// @ts-expect-error this is for multiple ref single component
|
||||
secretKeyInputRef.current = e;
|
||||
}}
|
||||
placeholder="Type your secret name"
|
||||
onPaste={handlePaste}
|
||||
autoCapitalization={currentWorkspace?.autoCapitalization}
|
||||
/>
|
||||
</FormControl>
|
||||
<Controller
|
||||
control={control}
|
||||
name="value"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
label="Value"
|
||||
isError={Boolean(errors?.value)}
|
||||
errorText={errors?.value?.message}
|
||||
>
|
||||
<InfisicalSecretInput
|
||||
{...field}
|
||||
containerClassName="text-bunker-300 hover:border-primary-400/50 border border-mineshaft-600 bg-mineshaft-900 px-2 py-1.5"
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="tags"
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
label="Tags"
|
||||
isError={Boolean(errors?.value)}
|
||||
errorText={errors?.value?.message}
|
||||
helperText={
|
||||
!canReadTags ? (
|
||||
<div className="flex items-center space-x-2">
|
||||
<FontAwesomeIcon icon={faTriangleExclamation} className="text-yellow-400" />
|
||||
<span>You do not have permission to read tags.</span>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
>
|
||||
<CreatableSelect
|
||||
isMulti
|
||||
className="w-full"
|
||||
placeholder="Select tags to assign to secret..."
|
||||
isValidNewOption={(v) => slugSchema.safeParse(v).success}
|
||||
name="tagIds"
|
||||
isDisabled={!canReadTags}
|
||||
isLoading={isTagsLoading && canReadTags}
|
||||
options={projectTags?.map((el) => ({ label: el.slug, value: el.id }))}
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
onCreateOption={createNewTag}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
render={({ field: { value, onChange }, fieldState: { error } }) => (
|
||||
<FormControl label="Environments" isError={Boolean(error)} errorText={error?.message}>
|
||||
<FilterableSelect
|
||||
isMulti
|
||||
options={environments.filter((environment) =>
|
||||
permission.can(
|
||||
ProjectPermissionActions.Create,
|
||||
subject(ProjectPermissionSub.Secrets, {
|
||||
environment: environment.slug,
|
||||
secretPath,
|
||||
secretName: "*",
|
||||
secretTags: ["*"]
|
||||
})
|
||||
)
|
||||
)}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="Select environments to create secret in..."
|
||||
getOptionLabel={(option) => option.name}
|
||||
getOptionValue={(option) => option.slug}
|
||||
/>
|
||||
</FormControl>
|
||||
)}
|
||||
name="environments"
|
||||
/>
|
||||
<div className="mt-7 flex items-center">
|
||||
<Button
|
||||
isDisabled={isSubmitting}
|
||||
isLoading={isSubmitting}
|
||||
key="layout-create-project-submit"
|
||||
className="mr-4"
|
||||
type="submit"
|
||||
>
|
||||
Create Secret
|
||||
</Button>
|
||||
<Button
|
||||
key="layout-cancel-create-project"
|
||||
onClick={onClose}
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { CreateSecretForm } from "./CreateSecretForm";
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
|
||||
type Props = {
|
||||
secretPath: string;
|
||||
onResetSearch: (path: string) => void;
|
||||
};
|
||||
|
||||
export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) => {
|
||||
const navigate = useNavigate({
|
||||
from: "/secret-manager/$projectId/overview"
|
||||
});
|
||||
|
||||
const onFolderCrumbClick = (index: number) => {
|
||||
const newSecPath = `/${secretPath.split("/").filter(Boolean).slice(0, index).join("/")}`;
|
||||
if (secretPath === newSecPath) return;
|
||||
navigate({
|
||||
search: (prev) => ({ ...prev, secretPath: newSecPath })
|
||||
}).then(() => onResetSearch(newSecPath));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center space-x-2">
|
||||
<div
|
||||
className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pl-5 pr-2 text-sm hover:bg-mineshaft-600"
|
||||
onClick={() => onFolderCrumbClick(0)}
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFolderOpen} className="text-primary-700" />
|
||||
</div>
|
||||
{(secretPath || "")
|
||||
.split("/")
|
||||
.filter(Boolean)
|
||||
.map((path, index, arr) => (
|
||||
<div
|
||||
key={`secret-path-${index + 1}`}
|
||||
className={`breadcrumb relative z-20 ${
|
||||
index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
|
||||
} border-solid border-mineshaft-600 py-1 pl-5 pr-2 text-sm text-mineshaft-200`}
|
||||
onClick={() => onFolderCrumbClick(index + 1)}
|
||||
onKeyDown={() => null}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
>
|
||||
{path}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export { FolderBreadCrumbs } from "./FolderBreadCrumbs";
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
import { faCheck, faFingerprint, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Td, Tr } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
dynamicSecretName: string;
|
||||
environments: { name: string; slug: string }[];
|
||||
isDynamicSecretInEnv: (name: string, env: string) => boolean;
|
||||
};
|
||||
|
||||
export const SecretOverviewDynamicSecretRow = ({
|
||||
dynamicSecretName,
|
||||
environments = [],
|
||||
isDynamicSecretInEnv
|
||||
}: Props) => {
|
||||
return (
|
||||
<Tr isHoverable isSelectable className="group">
|
||||
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
|
||||
<div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
|
||||
<div className="text-yellow-700">
|
||||
<FontAwesomeIcon icon={faFingerprint} />
|
||||
</div>
|
||||
<div>{dynamicSecretName}</div>
|
||||
</div>
|
||||
</Td>
|
||||
{environments.map(({ slug }, i) => {
|
||||
const isPresent = isDynamicSecretInEnv(dynamicSecretName, slug);
|
||||
|
||||
return (
|
||||
<Td
|
||||
key={`sec-overview-${slug}-${i + 1}-folder`}
|
||||
className={twMerge(
|
||||
"border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
|
||||
isPresent ? "text-green-600" : "text-red-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isPresent ? faCheck : faXmark}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { SecretOverviewDynamicSecretRow } from "./SecretOverviewDynamicSecretRow";
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
import { faCheck, faFolder, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Checkbox, IconButton, Td, Tr } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
folderName: string;
|
||||
environments: { name: string; slug: string }[];
|
||||
isFolderPresentInEnv: (name: string, env: string) => boolean;
|
||||
onClick: (path: string) => void;
|
||||
isSelected: boolean;
|
||||
onToggleFolderSelect: (folderName: string) => void;
|
||||
onToggleFolderEdit: (name: string) => void;
|
||||
};
|
||||
|
||||
export const SecretOverviewFolderRow = ({
|
||||
folderName,
|
||||
environments = [],
|
||||
isFolderPresentInEnv,
|
||||
isSelected,
|
||||
onToggleFolderSelect,
|
||||
onToggleFolderEdit,
|
||||
onClick
|
||||
}: Props) => {
|
||||
return (
|
||||
<Tr isHoverable isSelectable className="group" onClick={() => onClick(folderName)}>
|
||||
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
|
||||
<div className="flex items-center space-x-5 border-r border-mineshaft-600 px-5 py-2.5">
|
||||
<div className="text-yellow-700">
|
||||
<Checkbox
|
||||
id={`checkbox-${folderName}`}
|
||||
isChecked={isSelected}
|
||||
onCheckedChange={() => {
|
||||
onToggleFolderSelect(folderName);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
|
||||
icon={faFolder}
|
||||
/>
|
||||
</div>
|
||||
<div>{folderName}</div>
|
||||
<IconButton
|
||||
ariaLabel="edit-folder"
|
||||
variant="plain"
|
||||
size="sm"
|
||||
className="p-0 opacity-0 group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
onToggleFolderEdit(folderName);
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencil} size="sm" />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Td>
|
||||
{environments.map(({ slug }, i) => {
|
||||
const isPresent = isFolderPresentInEnv(folderName, slug);
|
||||
|
||||
return (
|
||||
<Td
|
||||
key={`sec-overview-${slug}-${i + 1}-folder`}
|
||||
className={twMerge(
|
||||
"border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
|
||||
isPresent ? "text-green-600" : "text-red-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isPresent ? faCheck : faXmark}
|
||||
/>
|
||||
</div>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { SecretOverviewFolderRow } from "./SecretOverviewFolderRow";
|
||||
+295
@@ -0,0 +1,295 @@
|
||||
import { useCallback, useState } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { subject } from "@casl/ability";
|
||||
import {
|
||||
faCheck,
|
||||
faCopy,
|
||||
faProjectDiagram,
|
||||
faTrash,
|
||||
faXmark
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { ProjectPermissionCan } from "@app/components/permissions";
|
||||
import {
|
||||
hasSecretReference,
|
||||
SecretReferenceTree
|
||||
} from "@app/components/secrets/SecretReferenceDetails";
|
||||
import {
|
||||
DeleteActionModal,
|
||||
IconButton,
|
||||
Modal,
|
||||
ModalContent,
|
||||
ModalTrigger,
|
||||
Tooltip
|
||||
} from "@app/components/v2";
|
||||
import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
|
||||
import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import { SecretType } from "@app/hooks/api/types";
|
||||
|
||||
type Props = {
|
||||
defaultValue?: string | null;
|
||||
secretName: string;
|
||||
secretId?: string;
|
||||
isOverride?: boolean;
|
||||
isCreatable?: boolean;
|
||||
isVisible?: boolean;
|
||||
isImportedSecret: boolean;
|
||||
environment: string;
|
||||
secretPath: string;
|
||||
onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
|
||||
onSecretUpdate: (
|
||||
env: string,
|
||||
key: string,
|
||||
value: string,
|
||||
type?: SecretType,
|
||||
secretId?: string
|
||||
) => Promise<void>;
|
||||
onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
|
||||
};
|
||||
|
||||
export const SecretEditRow = ({
|
||||
defaultValue,
|
||||
isCreatable,
|
||||
isOverride,
|
||||
isImportedSecret,
|
||||
onSecretUpdate,
|
||||
secretName,
|
||||
onSecretCreate,
|
||||
onSecretDelete,
|
||||
environment,
|
||||
secretPath,
|
||||
isVisible,
|
||||
secretId
|
||||
}: Props) => {
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
getValues,
|
||||
formState: { isDirty, isSubmitting }
|
||||
} = useForm({
|
||||
values: {
|
||||
value: defaultValue || null
|
||||
}
|
||||
});
|
||||
const [isDeleting, setIsDeleting] = useToggle();
|
||||
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
|
||||
|
||||
const toggleModal = useCallback(() => {
|
||||
setIsModalOpen((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
const handleFormReset = () => {
|
||||
reset();
|
||||
};
|
||||
|
||||
const handleCopySecretToClipboard = async () => {
|
||||
const { value } = getValues();
|
||||
if (value) {
|
||||
try {
|
||||
await window.navigator.clipboard.writeText(value);
|
||||
createNotification({ type: "success", text: "Copied secret to clipboard" });
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
createNotification({ type: "error", text: "Failed to copy secret to clipboard" });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormSubmit = async ({ value }: { value?: string | null }) => {
|
||||
if ((value || value === "") && secretName) {
|
||||
if (isCreatable) {
|
||||
await onSecretCreate(environment, secretName, value);
|
||||
} else {
|
||||
await onSecretUpdate(
|
||||
environment,
|
||||
secretName,
|
||||
value,
|
||||
isOverride ? SecretType.Personal : SecretType.Shared,
|
||||
secretId
|
||||
);
|
||||
}
|
||||
}
|
||||
reset({ value });
|
||||
};
|
||||
|
||||
const handleDeleteSecret = useCallback(async () => {
|
||||
setIsDeleting.on();
|
||||
setIsModalOpen(false);
|
||||
|
||||
try {
|
||||
await onSecretDelete(environment, secretName, secretId);
|
||||
reset({ value: null });
|
||||
} finally {
|
||||
setIsDeleting.off();
|
||||
}
|
||||
}, [onSecretDelete, environment, secretName, secretId, reset, setIsDeleting]);
|
||||
|
||||
return (
|
||||
<div className="group flex w-full cursor-text items-center space-x-2">
|
||||
<DeleteActionModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={toggleModal}
|
||||
title="Do you want to delete the selected secret?"
|
||||
deleteKey="delete"
|
||||
onDeleteApproved={handleDeleteSecret}
|
||||
/>
|
||||
|
||||
<div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
|
||||
<Controller
|
||||
disabled={isImportedSecret && !defaultValue}
|
||||
control={control}
|
||||
name="value"
|
||||
render={({ field }) => (
|
||||
<InfisicalSecretInput
|
||||
{...field}
|
||||
isReadOnly={isImportedSecret}
|
||||
value={field.value as string}
|
||||
key="secret-input"
|
||||
isVisible={isVisible}
|
||||
secretPath={secretPath}
|
||||
environment={environment}
|
||||
isImport={isImportedSecret}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex w-24 justify-center space-x-3 pl-2 transition-all",
|
||||
isImportedSecret && "pointer-events-none opacity-0"
|
||||
)}
|
||||
>
|
||||
{isDirty ? (
|
||||
<>
|
||||
<ProjectPermissionCan
|
||||
I={isCreatable ? ProjectPermissionActions.Create : ProjectPermissionActions.Edit}
|
||||
a={subject(ProjectPermissionSub.Secrets, {
|
||||
environment,
|
||||
secretPath,
|
||||
secretName,
|
||||
secretTags: ["*"]
|
||||
})}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<div>
|
||||
<Tooltip content="save">
|
||||
<IconButton
|
||||
variant="plain"
|
||||
ariaLabel="submit-value"
|
||||
className="h-full"
|
||||
isDisabled={isSubmitting || !isAllowed}
|
||||
onClick={handleSubmit(handleFormSubmit)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCheck} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
<div>
|
||||
<Tooltip content="cancel">
|
||||
<IconButton
|
||||
variant="plain"
|
||||
colorSchema="danger"
|
||||
ariaLabel="reset-value"
|
||||
className="h-full"
|
||||
onClick={handleFormReset}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
<FontAwesomeIcon icon={faXmark} className="hover:text-red" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<Tooltip content="Copy Secret">
|
||||
<IconButton
|
||||
ariaLabel="copy-value"
|
||||
onClick={handleCopySecretToClipboard}
|
||||
variant="plain"
|
||||
className="h-full"
|
||||
>
|
||||
<FontAwesomeIcon icon={faCopy} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionActions.Read}
|
||||
a={ProjectPermissionSub.Secrets}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<Modal>
|
||||
<ModalTrigger asChild>
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<Tooltip
|
||||
content={
|
||||
hasSecretReference(defaultValue || "")
|
||||
? "Secret Reference Tree"
|
||||
: "Secret does not contain references"
|
||||
}
|
||||
>
|
||||
<IconButton
|
||||
variant="plain"
|
||||
ariaLabel="reference-tree"
|
||||
className="h-full"
|
||||
isDisabled={!hasSecretReference(defaultValue || "") || !isAllowed}
|
||||
>
|
||||
<FontAwesomeIcon icon={faProjectDiagram} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</ModalTrigger>
|
||||
<ModalContent
|
||||
title="Secret Reference Details"
|
||||
subTitle="Visual breakdown of secrets referenced by this secret."
|
||||
onOpenAutoFocus={(e) => e.preventDefault()} // prevents secret input from displaying value on open
|
||||
>
|
||||
<SecretReferenceTree
|
||||
secretPath={secretPath}
|
||||
environment={environment}
|
||||
secretKey={secretName}
|
||||
/>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
<ProjectPermissionCan
|
||||
I={ProjectPermissionActions.Delete}
|
||||
a={subject(ProjectPermissionSub.Secrets, {
|
||||
environment,
|
||||
secretPath,
|
||||
secretName,
|
||||
secretTags: ["*"]
|
||||
})}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<div className="opacity-0 group-hover:opacity-100">
|
||||
<Tooltip content="Delete">
|
||||
<IconButton
|
||||
variant="plain"
|
||||
ariaLabel="delete-value"
|
||||
className="h-full"
|
||||
onClick={toggleModal}
|
||||
isDisabled={isDeleting || !isAllowed}
|
||||
>
|
||||
<FontAwesomeIcon icon={faTrash} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
)}
|
||||
</ProjectPermissionCan>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+51
@@ -0,0 +1,51 @@
|
||||
import { faCircle } from "@fortawesome/free-regular-svg-icons";
|
||||
import { faLock } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Td, Tooltip, Tr } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
environments: { name: string; slug: string }[];
|
||||
count: number;
|
||||
};
|
||||
|
||||
export const SecretNoAccessOverviewTableRow = ({ environments = [], count }: Props) => {
|
||||
return (
|
||||
<>
|
||||
{Array.from(Array(count)).map((_, j) => (
|
||||
<Tr key={`no-access-secret-overview-${j + 1}`} isHoverable isSelectable className="group">
|
||||
<Td className="sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding px-0 py-0 group-hover:bg-mineshaft-700">
|
||||
<div className="h-full w-full border-r border-mineshaft-600 px-5 py-2.5">
|
||||
<Tooltip
|
||||
asChild
|
||||
content="You do not have permission to view this secret"
|
||||
className="max-w-sm"
|
||||
>
|
||||
<div className="flex items-center space-x-5">
|
||||
<div className="text-bunker-300">
|
||||
<FontAwesomeIcon className="block" icon={faLock} />
|
||||
</div>
|
||||
<div className="blur-sm">NO ACCESS</div>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Td>
|
||||
{environments.map(({ slug }, i) => {
|
||||
return (
|
||||
<Td
|
||||
key={`sec-overview-${slug}-${i + 1}-value`}
|
||||
className="px-0 py-0 group-hover:bg-mineshaft-700"
|
||||
>
|
||||
<div className="h-full w-full border-r border-mineshaft-600 px-5 py-[0.85rem]">
|
||||
<div className="flex justify-center">
|
||||
<FontAwesomeIcon icon={faCircle} />
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
||||
+251
@@ -0,0 +1,251 @@
|
||||
import { faCircle } from "@fortawesome/free-regular-svg-icons";
|
||||
import {
|
||||
faAngleDown,
|
||||
faCheck,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faFileImport,
|
||||
faKey,
|
||||
faXmark
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/types";
|
||||
|
||||
import { SecretEditRow } from "./SecretEditRow";
|
||||
import SecretRenameRow from "./SecretRenameRow";
|
||||
|
||||
type Props = {
|
||||
secretKey: string;
|
||||
secretPath: string;
|
||||
environments: { name: string; slug: string }[];
|
||||
isSelected: boolean;
|
||||
onToggleSecretSelect: (key: string) => void;
|
||||
getSecretByKey: (slug: string, key: string) => SecretV3RawSanitized | undefined;
|
||||
onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
|
||||
onSecretUpdate: (
|
||||
env: string,
|
||||
key: string,
|
||||
value: string,
|
||||
type?: SecretType,
|
||||
secretId?: string
|
||||
) => Promise<void>;
|
||||
onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
|
||||
isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
|
||||
getImportedSecretByKey: (
|
||||
env: string,
|
||||
secretName: string
|
||||
) => { secret?: SecretV3RawSanitized; environmentInfo?: WorkspaceEnv } | undefined;
|
||||
scrollOffset: number;
|
||||
};
|
||||
|
||||
export const SecretOverviewTableRow = ({
|
||||
secretKey,
|
||||
environments = [],
|
||||
secretPath,
|
||||
getSecretByKey,
|
||||
onSecretUpdate,
|
||||
onSecretCreate,
|
||||
onSecretDelete,
|
||||
isImportedSecretPresentInEnv,
|
||||
getImportedSecretByKey,
|
||||
scrollOffset,
|
||||
onToggleSecretSelect,
|
||||
isSelected
|
||||
}: Props) => {
|
||||
const [isFormExpanded, setIsFormExpanded] = useToggle();
|
||||
const totalCols = environments.length + 1; // secret key row
|
||||
const [isSecretVisible, setIsSecretVisible] = useToggle();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
|
||||
<Td
|
||||
className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding px-0 py-0 group-hover:bg-mineshaft-700 ${
|
||||
isFormExpanded && "border-t-2 border-mineshaft-500"
|
||||
}`}
|
||||
>
|
||||
<div className="h-full w-full border-r border-mineshaft-600 px-5 py-2.5">
|
||||
<div className="flex items-center space-x-5">
|
||||
<div className="text-bunker-300">
|
||||
<Checkbox
|
||||
id={`checkbox-${secretKey}`}
|
||||
isChecked={isSelected}
|
||||
onCheckedChange={() => {
|
||||
onToggleSecretSelect(secretKey);
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
|
||||
/>
|
||||
<FontAwesomeIcon
|
||||
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
|
||||
icon={isFormExpanded ? faAngleDown : faKey}
|
||||
/>
|
||||
</div>
|
||||
<div title={secretKey}>{secretKey}</div>
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
{environments.map(({ slug }, i) => {
|
||||
const secret = getSecretByKey(slug, secretKey);
|
||||
|
||||
const isSecretImported = isImportedSecretPresentInEnv(slug, secretKey);
|
||||
|
||||
const isSecretPresent = Boolean(secret);
|
||||
const isSecretEmpty = secret?.value === "";
|
||||
return (
|
||||
<Td
|
||||
key={`sec-overview-${slug}-${i + 1}-value`}
|
||||
className={twMerge(
|
||||
"px-0 py-0 group-hover:bg-mineshaft-700",
|
||||
isFormExpanded && "border-t-2 border-mineshaft-500",
|
||||
(isSecretPresent && !isSecretEmpty) || isSecretImported ? "text-green-600" : "",
|
||||
isSecretPresent && isSecretEmpty && !isSecretImported ? "text-yellow" : "",
|
||||
!isSecretPresent && !isSecretEmpty && !isSecretImported ? "text-red-600" : ""
|
||||
)}
|
||||
>
|
||||
<div className="h-full w-full border-r border-mineshaft-600 px-5 py-[0.85rem]">
|
||||
<div className="flex justify-center">
|
||||
{!isSecretEmpty && (
|
||||
<Tooltip
|
||||
center
|
||||
content={
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
isSecretPresent
|
||||
? "Present secret"
|
||||
: isSecretImported
|
||||
? "Imported secret"
|
||||
: "Missing secret"
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isSecretPresent ? faCheck : isSecretImported ? faFileImport : faXmark}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
{isSecretEmpty && (
|
||||
<Tooltip content="Empty value">
|
||||
<FontAwesomeIcon icon={faCircle} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Td>
|
||||
);
|
||||
})}
|
||||
</Tr>
|
||||
{isFormExpanded && (
|
||||
<Tr>
|
||||
<Td
|
||||
colSpan={totalCols}
|
||||
className={`bg-bunker-600 px-0 py-0 ${
|
||||
isFormExpanded && "border-b-2 border-mineshaft-500"
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className="ml-2 p-2"
|
||||
style={{
|
||||
marginLeft: scrollOffset,
|
||||
width: "calc(100vw - 300px)", // 300px accounts for sidebar and margin
|
||||
maxWidth: "calc(1536px - 50px)" // tw container max width minus padding for uw displays
|
||||
}}
|
||||
>
|
||||
<SecretRenameRow
|
||||
secretKey={secretKey}
|
||||
environments={environments}
|
||||
secretPath={secretPath}
|
||||
getSecretByKey={getSecretByKey}
|
||||
/>
|
||||
<TableContainer>
|
||||
<table className="secret-table">
|
||||
<thead>
|
||||
<tr className="h-10 border-b-2 border-mineshaft-600">
|
||||
<th
|
||||
style={{ padding: "0.5rem 1rem" }}
|
||||
className="min-table-row min-w-[11rem]"
|
||||
>
|
||||
Environment
|
||||
</th>
|
||||
<th style={{ padding: "0.5rem 1rem" }} className="border-none">
|
||||
Value
|
||||
</th>
|
||||
<div className="absolute right-0 top-0 ml-auto mr-1 mt-1 w-min">
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
className="p-1"
|
||||
leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
|
||||
onClick={() => setIsSecretVisible.toggle()}
|
||||
>
|
||||
{isSecretVisible ? "Hide Values" : "Reveal Values"}
|
||||
</Button>
|
||||
</div>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="border-t-2 border-mineshaft-600">
|
||||
{environments.map(({ name, slug }) => {
|
||||
const secret = getSecretByKey(slug, secretKey);
|
||||
const isCreatable = !secret;
|
||||
|
||||
const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
|
||||
const importedSecret = getImportedSecretByKey(slug, secretKey);
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={`secret-expanded-${slug}-${secretKey}`}
|
||||
className="hover:bg-mineshaft-700"
|
||||
>
|
||||
<td
|
||||
className="flex h-full items-center"
|
||||
style={{ padding: "0.25rem 1rem" }}
|
||||
>
|
||||
<div title={name} className="flex h-8 w-[8rem] items-center space-x-2">
|
||||
<span className="truncate">{name}</span>
|
||||
{isImportedSecret && (
|
||||
<Tooltip
|
||||
content={`Imported secret from the '${importedSecret?.environmentInfo?.name}' environment`}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFileImport} />
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
<td className="col-span-2 h-8 w-full">
|
||||
<SecretEditRow
|
||||
secretPath={secretPath}
|
||||
isVisible={isSecretVisible}
|
||||
secretName={secretKey}
|
||||
defaultValue={
|
||||
secret?.valueOverride ||
|
||||
secret?.value ||
|
||||
importedSecret?.secret?.value
|
||||
}
|
||||
secretId={secret?.id}
|
||||
isOverride={Boolean(secret?.valueOverride)}
|
||||
isImportedSecret={isImportedSecret}
|
||||
isCreatable={isCreatable}
|
||||
onSecretDelete={onSecretDelete}
|
||||
onSecretCreate={onSecretCreate}
|
||||
onSecretUpdate={onSecretUpdate}
|
||||
environment={slug}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
</Td>
|
||||
</Tr>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
+259
@@ -0,0 +1,259 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { subject } from "@casl/ability";
|
||||
import { faCheck, faClose, faCopy } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { AnimatePresence, motion } from "framer-motion";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { IconButton, Input, Spinner, Tooltip } from "@app/components/v2";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub,
|
||||
useProjectPermission,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { useToggle } from "@app/hooks";
|
||||
import { useUpdateSecretV3 } from "@app/hooks/api";
|
||||
import { SecretType, SecretV3RawSanitized } from "@app/hooks/api/types";
|
||||
|
||||
enum SecretActionType {
|
||||
Created = "created",
|
||||
Modified = "modified",
|
||||
Deleted = "deleted"
|
||||
}
|
||||
|
||||
type Props = {
|
||||
secretKey: string;
|
||||
secretPath: string;
|
||||
environments: { name: string; slug: string }[];
|
||||
getSecretByKey: (slug: string, key: string) => SecretV3RawSanitized | undefined;
|
||||
};
|
||||
|
||||
export const formSchema = z.object({
|
||||
key: z.string().trim().min(1, { message: "Secret key is required" })
|
||||
});
|
||||
|
||||
type TFormSchema = z.infer<typeof formSchema>;
|
||||
|
||||
function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }: Props) {
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const { permission } = useProjectPermission();
|
||||
|
||||
const secrets = environments.map((env) => getSecretByKey(env.slug, secretKey));
|
||||
|
||||
const isReadOnly = environments.some((env) => {
|
||||
const environment = env.slug;
|
||||
const secretDetails = getSecretByKey(environment, secretKey);
|
||||
const secretPermissionSubject = subject(ProjectPermissionSub.Secrets, {
|
||||
environment,
|
||||
secretPath,
|
||||
secretName: secretKey,
|
||||
secretTags: (secretDetails?.tags || []).map((i) => i.slug)
|
||||
});
|
||||
const isSecretInEnvReadOnly =
|
||||
permission.can(ProjectPermissionActions.Read, secretPermissionSubject) &&
|
||||
permission.cannot(ProjectPermissionActions.Edit, secretPermissionSubject);
|
||||
if (isSecretInEnvReadOnly) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
const isOverriden = secrets.some(
|
||||
(secret) =>
|
||||
secret?.overrideAction === SecretActionType.Created ||
|
||||
secret?.overrideAction === SecretActionType.Modified
|
||||
);
|
||||
const workspaceId = currentWorkspace?.id || "";
|
||||
|
||||
const [isSecNameCopied, setIsSecNameCopied] = useToggle(false);
|
||||
|
||||
const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
|
||||
|
||||
const {
|
||||
handleSubmit,
|
||||
control,
|
||||
reset,
|
||||
trigger,
|
||||
getValues,
|
||||
formState: { isDirty, isSubmitting, errors }
|
||||
} = useForm<TFormSchema>({
|
||||
defaultValues: { key: secretKey },
|
||||
values: { key: secretKey },
|
||||
resolver: zodResolver(formSchema)
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let timer: NodeJS.Timeout;
|
||||
if (isSecNameCopied) {
|
||||
timer = setTimeout(() => setIsSecNameCopied.off(), 2000);
|
||||
}
|
||||
return () => clearTimeout(timer);
|
||||
}, [isSecNameCopied]);
|
||||
|
||||
const handleFormSubmit = async (data: TFormSchema) => {
|
||||
if (!data.key) {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Secret name cannot be empty"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const promises = secrets
|
||||
.filter((secret) => !!secret)
|
||||
.map((secret) => {
|
||||
if (!secret) return null;
|
||||
|
||||
return updateSecretV3({
|
||||
environment: secret?.env,
|
||||
workspaceId,
|
||||
secretPath,
|
||||
secretKey: secret.key,
|
||||
secretValue: secret.value || "",
|
||||
type: SecretType.Shared,
|
||||
tagIds: secret.tags?.map((tag) => tag.id),
|
||||
secretComment: secret.comment,
|
||||
secretReminderRepeatDays: secret.reminderRepeatDays,
|
||||
secretReminderNote: secret.reminderNote,
|
||||
skipMultilineEncoding: secret.skipMultilineEncoding,
|
||||
newSecretName: data.key
|
||||
});
|
||||
});
|
||||
|
||||
await Promise.all(promises)
|
||||
.then(() => {
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully renamed the secret"
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Error renaming the secret"
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const copyTokenToClipboard = () => {
|
||||
const [key] = getValues(["key"]);
|
||||
navigator.clipboard.writeText(key as string);
|
||||
setIsSecNameCopied.on();
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(handleFormSubmit)}
|
||||
className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
|
||||
>
|
||||
<div className="flex h-11 flex-1 flex-shrink-0 items-center">
|
||||
<span className="flex h-full min-w-[11rem] items-center justify-start border-r-2 border-mineshaft-600 px-4">
|
||||
Key
|
||||
</span>
|
||||
|
||||
<Controller
|
||||
name="key"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<Input
|
||||
autoComplete="off"
|
||||
isReadOnly={isReadOnly}
|
||||
autoCapitalization={currentWorkspace?.autoCapitalization}
|
||||
variant="plain"
|
||||
isDisabled={isOverriden}
|
||||
placeholder={error?.message}
|
||||
onKeyUp={() => trigger("key")}
|
||||
isError={Boolean(error)}
|
||||
{...field}
|
||||
className="w-full px-2 placeholder:text-red-500 focus:text-bunker-100 focus:ring-transparent"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{isReadOnly || isOverriden ? (
|
||||
<span className="mr-5 rounded-md bg-mineshaft-500 px-2">Read Only</span>
|
||||
) : (
|
||||
<div className="group flex w-20 items-center justify-center border-l border-mineshaft-500 py-1">
|
||||
<AnimatePresence mode="wait">
|
||||
{!isDirty ? (
|
||||
<motion.div
|
||||
key="options"
|
||||
className="flex flex-shrink-0 items-center space-x-4 px-3"
|
||||
initial={{ x: 0, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: 10, opacity: 0 }}
|
||||
>
|
||||
<Tooltip content="Copy secret name">
|
||||
<IconButton
|
||||
ariaLabel="copy-value"
|
||||
variant="plain"
|
||||
size="sm"
|
||||
className="p-0 opacity-0 group-hover:opacity-100"
|
||||
onClick={copyTokenToClipboard}
|
||||
>
|
||||
<FontAwesomeIcon icon={isSecNameCopied ? faCheck : faCopy} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="options-save"
|
||||
className="flex flex-shrink-0 items-center space-x-4 px-3"
|
||||
initial={{ x: -10, opacity: 0 }}
|
||||
animate={{ x: 0, opacity: 1 }}
|
||||
exit={{ x: -10, opacity: 0 }}
|
||||
>
|
||||
<Tooltip content={errors.key ? errors.key.message : "Save"}>
|
||||
<IconButton
|
||||
ariaLabel="more"
|
||||
variant="plain"
|
||||
type="submit"
|
||||
size="md"
|
||||
className={twMerge(
|
||||
"p-0 text-primary opacity-0 group-hover:opacity-100",
|
||||
isDirty && "opacity-100"
|
||||
)}
|
||||
isDisabled={isSubmitting || Boolean(errors.key)}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<Spinner className="m-0 h-4 w-4 p-0" />
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon={faCheck}
|
||||
size="lg"
|
||||
className={twMerge("text-primary", errors.key && "text-mineshaft-400")}
|
||||
/>
|
||||
)}
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Tooltip content="Cancel">
|
||||
<IconButton
|
||||
ariaLabel="more"
|
||||
variant="plain"
|
||||
size="md"
|
||||
className={twMerge(
|
||||
"p-0 opacity-0 group-hover:opacity-100",
|
||||
isDirty && "opacity-100"
|
||||
)}
|
||||
onClick={() => reset()}
|
||||
isDisabled={isSubmitting}
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} size="lg" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)}
|
||||
</form>
|
||||
);
|
||||
}
|
||||
|
||||
export default SecretRenameRow;
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { SecretNoAccessOverviewTableRow } from "./SecretNoAccessOverviewTableRow";
|
||||
export { SecretOverviewTableRow } from "./SecretOverviewTableRow";
|
||||
+113
@@ -0,0 +1,113 @@
|
||||
import { useState } from "react";
|
||||
import { faCircleXmark, faFolderTree, faSearch } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { Combobox, Transition } from "@headlessui/react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { IconButton, Tooltip } from "@app/components/v2";
|
||||
|
||||
import { QuickSearchModal, QuickSearchModalProps } from "./components";
|
||||
|
||||
type ModalProps = Omit<
|
||||
QuickSearchModalProps,
|
||||
"isOpen" | "onClose" | "onOpenChange" | "initialValue"
|
||||
> & {
|
||||
value: string;
|
||||
onChange: (search: string) => void;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const SecretSearchInput = ({
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
isSingleEnv,
|
||||
...props
|
||||
}: ModalProps) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const hasSearch = Boolean(value.trim());
|
||||
|
||||
return (
|
||||
<div className={twMerge("relative w-80", className)}>
|
||||
<Combobox
|
||||
// keeps combobox from internally controlling state, hacky use of combobox
|
||||
value={undefined}
|
||||
>
|
||||
{({ activeIndex }) => (
|
||||
<>
|
||||
<div className="flex w-full items-center whitespace-nowrap">
|
||||
<Tooltip content="Search Options">
|
||||
<Combobox.Button className="button user-select-none relative inline-flex h-[2.42rem] cursor-pointer items-center justify-center rounded-md rounded-r-none border border-mineshaft-600 bg-mineshaft-600 p-3 font-inter text-sm font-medium text-bunker-200 transition-all duration-100 hover:border-primary-400/50 hover:bg-primary/[0.1] hover:text-bunker-100">
|
||||
<FontAwesomeIcon
|
||||
icon={faSearch}
|
||||
size="sm"
|
||||
className={hasSearch ? "text-primary" : ""}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Combobox.Button>
|
||||
</Tooltip>
|
||||
<div className="relative inline-flex w-full items-center rounded-md rounded-l-none border border-mineshaft-500 bg-bunker-800 font-inter text-gray-400">
|
||||
<Combobox.Input
|
||||
onKeyDown={(e) => {
|
||||
if (activeIndex === 0 && e.key === "Enter") setIsOpen(true);
|
||||
}}
|
||||
autoComplete="off"
|
||||
className="input text-md h-[2.3rem] w-full rounded-md rounded-l-none bg-mineshaft-800 py-[0.375rem] pl-2.5 pr-8 text-gray-400 placeholder-mineshaft-50 placeholder-opacity-50 outline-none duration-200 placeholder:text-sm hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-1 focus:ring-primary-400/50"
|
||||
placeholder="Search by secret/folder name..."
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
/>
|
||||
{hasSearch && (
|
||||
<IconButton
|
||||
isRounded
|
||||
variant="plain"
|
||||
onClick={() => onChange("")}
|
||||
className="absolute right-2 text-primary"
|
||||
ariaLabel="Clear search"
|
||||
>
|
||||
<FontAwesomeIcon icon={faCircleXmark} />
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<Transition
|
||||
leave="transition ease-in duration-100"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Combobox.Options className="absolute z-30 mt-2 w-full min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow focus:outline-none">
|
||||
<Combobox.Option
|
||||
onClick={() => setIsOpen(true)}
|
||||
value={value}
|
||||
className={({ active }) =>
|
||||
`flex w-full cursor-pointer items-start rounded-sm px-4 py-2 font-inter text-sm text-mineshaft-200 outline-none hover:bg-mineshaft-400 ${
|
||||
active ? "bg-mineshaft-500" : ""
|
||||
}`
|
||||
}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFolderTree} className="mr-2 mt-1 text-yellow-700" />
|
||||
{value.trim()
|
||||
? `Search for "${
|
||||
value.length > 10 ? `${value.substring(0, 10)}...` : value
|
||||
}" in all folders`
|
||||
: "Search in all folders"}
|
||||
</Combobox.Option>
|
||||
</Combobox.Options>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Combobox>
|
||||
<QuickSearchModal
|
||||
isSingleEnv={isSingleEnv}
|
||||
isOpen={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
initialValue={value}
|
||||
onClose={() => {
|
||||
setIsOpen(false);
|
||||
onChange("");
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
import { faChevronRight, faFingerprint, faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
|
||||
import { Td, Tooltip, Tr } from "@app/components/v2";
|
||||
import { reverseTruncate } from "@app/helpers/reverseTruncate";
|
||||
import { TDashboardProjectSecretsQuickSearch } from "@app/hooks/api/dashboard/types";
|
||||
|
||||
type Props = {
|
||||
dynamicSecretGroup: TDashboardProjectSecretsQuickSearch["dynamicSecrets"][string];
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const QuickSearchDynamicSecretItem = ({
|
||||
dynamicSecretGroup,
|
||||
|
||||
onClose
|
||||
}: Props) => {
|
||||
const navigate = useNavigate({
|
||||
from: "/secret-manager/$projectId/overview"
|
||||
});
|
||||
|
||||
const [groupDynamicSecret] = dynamicSecretGroup;
|
||||
|
||||
const handleNavigate = () => {
|
||||
navigate({
|
||||
search: (prev) => ({
|
||||
...prev,
|
||||
secretPath: groupDynamicSecret.path,
|
||||
search: groupDynamicSecret.name
|
||||
})
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
|
||||
onClick={handleNavigate}
|
||||
>
|
||||
<Td className="w-full">
|
||||
<div className="inline-flex max-w-[20rem] flex-col">
|
||||
<span className="truncate">
|
||||
<FontAwesomeIcon className="mr-2 self-center text-yellow-700" icon={faFingerprint} />
|
||||
{groupDynamicSecret.name}
|
||||
</span>
|
||||
<span className="text-xs text-mineshaft-400">
|
||||
<FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
|
||||
<Tooltip className="max-w-7xl" content={groupDynamicSecret.path}>
|
||||
<span>{reverseTruncate(groupDynamicSecret.path)}</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</Td>
|
||||
<Td />
|
||||
<Td>
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
import { faChevronRight, faFolder } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
|
||||
import { Td, Tooltip, Tr } from "@app/components/v2";
|
||||
import { reverseTruncate } from "@app/helpers/reverseTruncate";
|
||||
import { TDashboardProjectSecretsQuickSearch } from "@app/hooks/api/dashboard/types";
|
||||
|
||||
type Props = {
|
||||
folderGroup: TDashboardProjectSecretsQuickSearch["folders"][string];
|
||||
onClose: () => void;
|
||||
};
|
||||
|
||||
export const QuickSearchFolderItem = ({ folderGroup, onClose }: Props) => {
|
||||
const navigate = useNavigate({
|
||||
from: "/secret-manager/$projectId/overview"
|
||||
});
|
||||
|
||||
const [groupFolder] = folderGroup;
|
||||
|
||||
const handleNavigate = () => {
|
||||
navigate({
|
||||
search: (prev) => ({ ...prev, secretPath: groupFolder.path })
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
|
||||
onClick={handleNavigate}
|
||||
>
|
||||
<Td className="w-full whitespace-nowrap">
|
||||
<FontAwesomeIcon className="text-yellow-700" icon={faFolder} />
|
||||
<Tooltip content={groupFolder.path} className="max-w-7xl">
|
||||
<div className="ml-2 inline-block">{reverseTruncate(groupFolder.path)}</div>
|
||||
</Tooltip>
|
||||
</Td>
|
||||
<Td />
|
||||
<Td>
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+288
@@ -0,0 +1,288 @@
|
||||
import { useState } from "react";
|
||||
import {
|
||||
faCheckCircle,
|
||||
faChevronLeft,
|
||||
faFilter,
|
||||
faFingerprint,
|
||||
faFolder,
|
||||
faKey,
|
||||
faMagnifyingGlass
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
DropdownSubMenu,
|
||||
DropdownSubMenuContent,
|
||||
DropdownSubMenuTrigger,
|
||||
EmptyState,
|
||||
IconButton,
|
||||
Input,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Spinner,
|
||||
Table,
|
||||
TableContainer,
|
||||
Tooltip
|
||||
} from "@app/components/v2";
|
||||
import { useDebounce } from "@app/hooks";
|
||||
import { useGetProjectSecretsQuickSearch } from "@app/hooks/api/dashboard";
|
||||
import { WsTag } from "@app/hooks/api/tags/types";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
|
||||
import { RowType } from "@app/pages/secret-manager/SecretDashboardPage/SecretMainPage.types";
|
||||
|
||||
import { QuickSearchDynamicSecretItem } from "./QuickSearchDynamicSecretItem";
|
||||
import { QuickSearchFolderItem } from "./QuickSearchFolderItem";
|
||||
import { QuickSearchSecretItem } from "./QuickSearchSecretItem";
|
||||
|
||||
export type QuickSearchModalProps = {
|
||||
environments: WorkspaceEnv[];
|
||||
projectId: string;
|
||||
tags?: WsTag[];
|
||||
isSingleEnv?: boolean;
|
||||
initialValue: string;
|
||||
onClose: () => void;
|
||||
isOpen: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
};
|
||||
|
||||
type ResourceType = RowType.Secret | RowType.DynamicSecret | RowType.Folder;
|
||||
|
||||
const Content = ({
|
||||
environments,
|
||||
projectId,
|
||||
onClose,
|
||||
tags,
|
||||
initialValue = "",
|
||||
isSingleEnv
|
||||
}: Omit<QuickSearchModalProps, "isOpen" | "onOpenChange">) => {
|
||||
const [search, setSearch] = useState(initialValue);
|
||||
const [debouncedSearch] = useDebounce(search);
|
||||
const [filterTags, setFilterTags] = useState<Record<string, boolean>>({});
|
||||
const [showFilter, setShowFilter] = useState<Record<ResourceType, boolean>>({
|
||||
[RowType.Secret]: true,
|
||||
[RowType.Folder]: true,
|
||||
[RowType.DynamicSecret]: true
|
||||
});
|
||||
const isEnabled = Boolean(search.trim()) || Boolean(Object.values(filterTags).length);
|
||||
const { data, isPending } = useGetProjectSecretsQuickSearch(
|
||||
{
|
||||
secretPath: "/",
|
||||
environments: environments.map((env) => env.slug),
|
||||
projectId,
|
||||
search: debouncedSearch,
|
||||
tags: filterTags
|
||||
},
|
||||
{ enabled: isEnabled }
|
||||
);
|
||||
|
||||
const { folders = {}, secrets = {}, dynamicSecrets = {} } = data ?? {};
|
||||
|
||||
const isEmpty =
|
||||
(!showFilter[RowType.Folder] || Object.values(folders).length === 0) &&
|
||||
(!showFilter[RowType.Secret] || Object.values(secrets).length === 0) &&
|
||||
(!showFilter[RowType.DynamicSecret] || Object.values(dynamicSecrets).length === 0);
|
||||
|
||||
const handleToggleTag = (tag: string) => {
|
||||
setFilterTags((prev) => {
|
||||
const updated = { ...prev };
|
||||
if (prev[tag]) delete updated[tag];
|
||||
else updated[tag] = true;
|
||||
return updated;
|
||||
});
|
||||
};
|
||||
|
||||
const handleToggleShowType = (type: ResourceType) => {
|
||||
setShowFilter((prev) => ({
|
||||
...prev,
|
||||
[type]: !prev[type]
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-[14.6rem]">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
className="h-[2.3rem] bg-mineshaft-800 placeholder-mineshaft-50 duration-200 focus:bg-mineshaft-700/80"
|
||||
placeholder="Search by secret, folder or tag name..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
leftIcon={
|
||||
<FontAwesomeIcon icon={faMagnifyingGlass} className={search ? "text-primary" : ""} />
|
||||
}
|
||||
/>
|
||||
<DropdownMenu>
|
||||
<Tooltip content="Search Filters">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton
|
||||
variant="outline_bg"
|
||||
ariaLabel="Filter secrets by tag(s)"
|
||||
className={twMerge(
|
||||
"transition-all",
|
||||
(Object.keys(filterTags).length ||
|
||||
Object.values(showFilter).some((show) => !show)) &&
|
||||
"border-primary/50 text-primary"
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFilter} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
</Tooltip>
|
||||
<DropdownMenuContent align="end" className="p-0">
|
||||
<DropdownMenuLabel>Filter By</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleToggleShowType(RowType.Folder);
|
||||
}}
|
||||
icon={showFilter[RowType.Folder] && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
iconPos="right"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleToggleShowType(RowType.DynamicSecret);
|
||||
}}
|
||||
icon={showFilter[RowType.DynamicSecret] && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
iconPos="right"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
|
||||
<span>Dynamic Secrets</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
handleToggleShowType(RowType.Secret);
|
||||
}}
|
||||
icon={showFilter[RowType.Secret] && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
iconPos="right"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faKey} className="text-bunker-300" />
|
||||
<span>Secrets</span>
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
{tags && tags.length > 0 && (
|
||||
<DropdownSubMenu>
|
||||
<DropdownSubMenuTrigger
|
||||
iconPos="left"
|
||||
icon={<FontAwesomeIcon icon={faChevronLeft} size="sm" />}
|
||||
>
|
||||
Tags
|
||||
</DropdownSubMenuTrigger>
|
||||
<DropdownSubMenuContent
|
||||
collisionPadding={{ right: Infinity }} // forces dropdown to left
|
||||
className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-r-none"
|
||||
>
|
||||
<DropdownMenuLabel>Filter Secrets by Tag(s)</DropdownMenuLabel>
|
||||
{tags.map(({ id, slug, color }) => (
|
||||
<DropdownMenuItem
|
||||
onClick={(evt) => {
|
||||
evt.preventDefault();
|
||||
handleToggleTag(slug);
|
||||
}}
|
||||
key={id}
|
||||
icon={filterTags[slug] && <FontAwesomeIcon icon={faCheckCircle} />}
|
||||
iconPos="right"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<div
|
||||
className="mr-2 h-2 w-2 rounded-full"
|
||||
style={{ background: color || "#bec2c8" }}
|
||||
/>
|
||||
{slug}
|
||||
</div>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownSubMenuContent>
|
||||
</DropdownSubMenu>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 max-h-[19rem] min-h-[19rem] overflow-auto">
|
||||
{/* eslint-disable-next-line no-nested-ternary */}
|
||||
{isEnabled ? (
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
isPending ? (
|
||||
<Spinner size="lg" className="mx-auto mt-24 text-mineshaft-900" />
|
||||
) : isEmpty ? (
|
||||
<EmptyState
|
||||
className="mt-24"
|
||||
title="No results match search."
|
||||
icon={faMagnifyingGlass}
|
||||
/>
|
||||
) : (
|
||||
<TableContainer className="thin-scrollbar h-full overflow-y-auto">
|
||||
<Table>
|
||||
{showFilter[RowType.Folder] &&
|
||||
Object.entries(folders).map(([key, folderGroup]) => (
|
||||
<QuickSearchFolderItem onClose={onClose} folderGroup={folderGroup} key={key} />
|
||||
))}
|
||||
{showFilter[RowType.DynamicSecret] &&
|
||||
Object.entries(dynamicSecrets).map(([key, dynamicSecretGroup]) => (
|
||||
<QuickSearchDynamicSecretItem
|
||||
onClose={onClose}
|
||||
dynamicSecretGroup={dynamicSecretGroup}
|
||||
key={key}
|
||||
/>
|
||||
))}
|
||||
{showFilter[RowType.Secret] &&
|
||||
Object.entries(secrets).map(([key, secretGroup]) => (
|
||||
<QuickSearchSecretItem
|
||||
search={debouncedSearch}
|
||||
tags={Object.keys(filterTags)}
|
||||
isSingleEnv={isSingleEnv}
|
||||
environments={environments}
|
||||
onClose={onClose}
|
||||
secretGroup={secretGroup}
|
||||
key={key}
|
||||
/>
|
||||
))}
|
||||
</Table>
|
||||
</TableContainer>
|
||||
)
|
||||
) : (
|
||||
<EmptyState
|
||||
className="mt-24"
|
||||
title="Start typing to begin search..."
|
||||
icon={faMagnifyingGlass}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const QuickSearchModal = ({
|
||||
isOpen,
|
||||
isSingleEnv,
|
||||
onOpenChange,
|
||||
...props
|
||||
}: QuickSearchModalProps) => {
|
||||
return (
|
||||
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
|
||||
<ModalContent
|
||||
title={`Search All Folders${isSingleEnv ? " In Environment" : ""}`}
|
||||
subTitle={`Search the ${
|
||||
isSingleEnv ? "current environment" : "entire project"
|
||||
} to quickly reference secrets and navigate deeply.`}
|
||||
>
|
||||
<Content isSingleEnv={isSingleEnv} {...props} />
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
import {
|
||||
faCheck,
|
||||
faChevronRight,
|
||||
faCopy,
|
||||
faEye,
|
||||
faFolder,
|
||||
faKey,
|
||||
faTags
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { useNavigate } from "@tanstack/react-router";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import {
|
||||
Badge,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuTrigger,
|
||||
IconButton,
|
||||
Td,
|
||||
Tooltip,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import { reverseTruncate } from "@app/helpers/reverseTruncate";
|
||||
import { useTimedReset } from "@app/hooks";
|
||||
import { TDashboardProjectSecretsQuickSearch } from "@app/hooks/api/dashboard/types";
|
||||
import { WorkspaceEnv } from "@app/hooks/api/workspace/types";
|
||||
|
||||
type Props = {
|
||||
environments: WorkspaceEnv[];
|
||||
secretGroup: TDashboardProjectSecretsQuickSearch["secrets"][string];
|
||||
onClose: () => void;
|
||||
isSingleEnv?: boolean;
|
||||
tags: string[];
|
||||
search: string;
|
||||
};
|
||||
|
||||
export const QuickSearchSecretItem = ({
|
||||
secretGroup,
|
||||
environments,
|
||||
onClose,
|
||||
tags,
|
||||
isSingleEnv,
|
||||
search
|
||||
}: Props) => {
|
||||
const navigate = useNavigate({ from: "/secret-manager/$projectId/overview" });
|
||||
const envSlugMap = new Map(environments.map((env) => [env.slug, env]));
|
||||
const [isUrlCopied, , setIsUrlCopied] = useTimedReset<boolean>({
|
||||
initialState: false
|
||||
});
|
||||
|
||||
const [groupSecret] = secretGroup;
|
||||
|
||||
const handleNavigate = () => {
|
||||
navigate({
|
||||
search: (prev) => ({
|
||||
...prev,
|
||||
secretPath: groupSecret.path,
|
||||
search: groupSecret.key,
|
||||
tags: tags.length ? tags.join(",") : undefined
|
||||
})
|
||||
});
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleCopy = (value: string, env: string) => {
|
||||
navigator.clipboard.writeText(value);
|
||||
createNotification({
|
||||
type: "info",
|
||||
title: isSingleEnv ? "Secret value copied." : `Secret value copied from ${env}.`,
|
||||
text: ""
|
||||
});
|
||||
setIsUrlCopied(true);
|
||||
};
|
||||
|
||||
const secretGroupTags = secretGroup.flatMap((secret) => secret.tags);
|
||||
|
||||
const tagMatch =
|
||||
search.trim() &&
|
||||
secretGroupTags?.find((tag) => tag && tag.slug.toLowerCase().includes(search.toLowerCase()));
|
||||
|
||||
return (
|
||||
<Tr
|
||||
className="hover cursor-pointer bg-mineshaft-700 hover:bg-mineshaft-600"
|
||||
onClick={handleNavigate}
|
||||
>
|
||||
<Td className="w-full">
|
||||
<div className="inline-flex max-w-[20rem] flex-col">
|
||||
<span className="truncate">
|
||||
<FontAwesomeIcon className="mr-2 self-center text-bunker-300" icon={faKey} />
|
||||
{groupSecret.key}
|
||||
</span>
|
||||
<span className="text-xs text-mineshaft-400">
|
||||
<FontAwesomeIcon size="xs" className="mr-0.5 text-yellow-700" icon={faFolder} />{" "}
|
||||
<Tooltip className="max-w-7xl" content={groupSecret.path}>
|
||||
<span>{reverseTruncate(groupSecret.path ?? "")}</span>
|
||||
</Tooltip>
|
||||
</span>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex w-full items-center justify-end gap-4">
|
||||
{tagMatch && (
|
||||
<Badge variant="primary" className="flex items-center gap-1 whitespace-nowrap">
|
||||
<FontAwesomeIcon size="xs" icon={faTags} />
|
||||
{tagMatch.slug}
|
||||
</Badge>
|
||||
)}
|
||||
{isSingleEnv ? (
|
||||
<IconButton
|
||||
size="md"
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
ariaLabel="Copy secret value"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const el = envSlugMap.get(groupSecret.env)?.name;
|
||||
if (el) {
|
||||
handleCopy(groupSecret.value!, el);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
|
||||
</IconButton>
|
||||
) : (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton
|
||||
size="md"
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
ariaLabel="Copy secret value"
|
||||
>
|
||||
<FontAwesomeIcon icon={isUrlCopied ? faCheck : faCopy} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Copy Value From...</DropdownMenuLabel>
|
||||
{secretGroup.map((secret) => (
|
||||
<DropdownMenuItem
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const el = envSlugMap.get(secret.env)?.name;
|
||||
if (el) {
|
||||
handleCopy(secret.value!, el);
|
||||
}
|
||||
}}
|
||||
key={secret.id}
|
||||
>
|
||||
<p className="text-sm">{envSlugMap.get(secret.env)?.name}</p>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<IconButton
|
||||
size="md"
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
ariaLabel="View secret value"
|
||||
>
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
</IconButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Hover to Reveal...</DropdownMenuLabel>
|
||||
{secretGroup.map((secret) => (
|
||||
<DropdownMenuItem
|
||||
className="group"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
const el = envSlugMap.get(secret.env)?.name;
|
||||
if (el) {
|
||||
handleCopy(secret.value!, el);
|
||||
}
|
||||
}}
|
||||
key={secret.id}
|
||||
>
|
||||
<Tooltip side="left" sideOffset={18} content="Click to copy to clipboard">
|
||||
<div>
|
||||
{!isSingleEnv && (
|
||||
<span className="text-xs text-mineshaft-400">
|
||||
{envSlugMap.get(secret.env)?.name}
|
||||
</span>
|
||||
)}
|
||||
<p
|
||||
className={twMerge(
|
||||
"hidden w-[12rem] max-w-[12rem] truncate text-sm group-hover:block",
|
||||
!secret.value && "text-mineshaft-400"
|
||||
)}
|
||||
>
|
||||
{secret.value || "EMPTY"}
|
||||
</p>
|
||||
<p className="w-[12rem] text-sm group-hover:hidden">
|
||||
***************************
|
||||
</p>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<FontAwesomeIcon icon={faChevronRight} />
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
};
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export * from "./QuickSearchDynamicSecretItem";
|
||||
export * from "./QuickSearchFolderItem";
|
||||
export * from "./QuickSearchModal";
|
||||
export * from "./QuickSearchSecretItem";
|
||||
@@ -0,0 +1 @@
|
||||
export { SecretSearchInput } from "./SecretSearchInput";
|
||||
+87
@@ -0,0 +1,87 @@
|
||||
import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
import { Tooltip } from "@app/components/v2";
|
||||
|
||||
type Props = {
|
||||
folderCount?: number;
|
||||
importCount?: number;
|
||||
secretCount?: number;
|
||||
dynamicSecretCount?: number;
|
||||
};
|
||||
|
||||
export const SecretTableResourceCount = ({
|
||||
folderCount = 0,
|
||||
dynamicSecretCount = 0,
|
||||
secretCount = 0,
|
||||
importCount = 0
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
|
||||
{importCount > 0 && (
|
||||
<Tooltip
|
||||
className="max-w-sm"
|
||||
content={
|
||||
<p className="whitespace-nowrap text-center">
|
||||
Total import count{" "}
|
||||
<span className="text-center text-mineshaft-400">(matching filters)</span>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<FontAwesomeIcon icon={faFileImport} className="text-green-700" />
|
||||
<span>{importCount}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{folderCount > 0 && (
|
||||
<Tooltip
|
||||
className="max-w-sm"
|
||||
content={
|
||||
<p className="whitespace-nowrap text-center">
|
||||
Total folder count{" "}
|
||||
<span className="text-center text-mineshaft-400">(matching filters)</span>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2 pl-2">
|
||||
<FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
|
||||
<span>{folderCount}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{dynamicSecretCount > 0 && (
|
||||
<Tooltip
|
||||
className="max-w-sm"
|
||||
content={
|
||||
<p className="whitespace-nowrap text-center">
|
||||
Total dynamic secret count{" "}
|
||||
<span className="text-center text-mineshaft-400">(matching filters)</span>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2 pl-2">
|
||||
<FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
|
||||
<span>{dynamicSecretCount}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
{secretCount > 0 && (
|
||||
<Tooltip
|
||||
className="max-w-sm"
|
||||
content={
|
||||
<p className="whitespace-nowrap text-center">
|
||||
Total secret count{" "}
|
||||
<span className="text-center text-mineshaft-400">(matching filters)</span>
|
||||
</p>
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-2 pl-2">
|
||||
<FontAwesomeIcon icon={faKey} className="text-bunker-300" />
|
||||
<span>{secretCount}</span>
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { SecretTableResourceCount } from "./SecretTableResourceCount";
|
||||
+198
@@ -0,0 +1,198 @@
|
||||
import { useEffect } from "react";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import { faTriangleExclamation, faWarning } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useQueryClient } from "@tanstack/react-query";
|
||||
import { z } from "zod";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Button, Checkbox, Modal, ModalContent, Spinner } from "@app/components/v2";
|
||||
import { useProjectPermission, useWorkspace } from "@app/context";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import { useGetWorkspaceById, useMigrateProjectToV3, workspaceKeys } from "@app/hooks/api";
|
||||
import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
|
||||
import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
|
||||
|
||||
enum ProjectUpgradeStatus {
|
||||
InProgress = "IN_PROGRESS",
|
||||
// Completed -> Will be null if completed. So a completed status is not needed
|
||||
Failed = "FAILED"
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
isCLIChecked: z.literal(true),
|
||||
isOperatorChecked: z.literal(true),
|
||||
shouldCloseOpenApprovals: z.literal(true)
|
||||
});
|
||||
|
||||
export const SecretV2MigrationSection = () => {
|
||||
const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["migrationInfo"] as const);
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const queryClient = useQueryClient();
|
||||
const { data: workspaceDetails, refetch } = useGetWorkspaceById(
|
||||
// if v3 no need to fetch
|
||||
currentWorkspace?.version === ProjectVersion.V3 ? "" : currentWorkspace?.id || "",
|
||||
{
|
||||
refetchInterval:
|
||||
currentWorkspace?.upgradeStatus === ProjectUpgradeStatus.InProgress ? 2000 : false
|
||||
}
|
||||
);
|
||||
const { membership } = useProjectPermission();
|
||||
const migrateProjectToV3 = useMigrateProjectToV3();
|
||||
const { handleSubmit, control, reset } = useForm({ resolver: zodResolver(formSchema) });
|
||||
useEffect(() => {
|
||||
if (!popUp.migrationInfo.isOpen) {
|
||||
reset();
|
||||
}
|
||||
}, [popUp.migrationInfo.isOpen]);
|
||||
|
||||
const isProjectUpgraded = workspaceDetails?.version === ProjectVersion.V3;
|
||||
|
||||
useEffect(() => {
|
||||
if (isProjectUpgraded && migrateProjectToV3.data) {
|
||||
createNotification({ type: "success", text: "Project upgrade completed successfully" });
|
||||
migrateProjectToV3.reset();
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: workspaceKeys.getAllUserWorkspace(ProjectType.SecretManager)
|
||||
});
|
||||
}
|
||||
}, [isProjectUpgraded, Boolean(migrateProjectToV3.data)]);
|
||||
|
||||
if (isProjectUpgraded || currentWorkspace?.version === ProjectVersion.V3) return null;
|
||||
|
||||
const isUpgrading = workspaceDetails?.upgradeStatus === ProjectUpgradeStatus.InProgress;
|
||||
const didProjectUpgradeFailed = workspaceDetails?.upgradeStatus === ProjectUpgradeStatus.Failed;
|
||||
|
||||
const handleMigrationSecretV2 = async () => {
|
||||
try {
|
||||
handlePopUpToggle("migrationInfo");
|
||||
await migrateProjectToV3.mutateAsync({ workspaceId: currentWorkspace?.id || "" });
|
||||
refetch();
|
||||
createNotification({
|
||||
text: "Project upgrade started",
|
||||
type: "success"
|
||||
});
|
||||
} catch {
|
||||
createNotification({
|
||||
text: "Failed to upgrade project",
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const isAdmin = membership?.roles.includes(ProjectMembershipRole.Admin);
|
||||
return (
|
||||
<div className="mt-4 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
|
||||
{isUpgrading && (
|
||||
<div className="absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
|
||||
<Spinner size="lg" className="text-primary" />
|
||||
<div className="ml-4 flex flex-col space-y-1">
|
||||
<div className="text-3xl font-medium">Please wait</div>
|
||||
<span className="inline-block">Upgrading secrets engine...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="mb-4 flex items-start gap-2">
|
||||
<FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
|
||||
<p className="text-xl font-semibold">Upgrade secrets engine version</p>
|
||||
</div>
|
||||
<p className="mx-1 mb-4 leading-7 text-mineshaft-100">
|
||||
Your existing workflows to fetch secrets will continue to work. However, viewing secrets on
|
||||
the UI requires you to upgrade your project's secrets engine version.
|
||||
</p>
|
||||
<p className="mx-1 mb-4 leading-7 text-mineshaft-100">
|
||||
Upgrading is free and enables the use of Infisical's new secrets engine, which is 10x
|
||||
faster and allows you to encrypt secrets with your own KMS provider.
|
||||
</p>
|
||||
<p className="mx-1 mb-6 leading-7 text-mineshaft-100">
|
||||
The upgrade takes only 1-2 minutes and will not cause any downtime.
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => handlePopUpOpen("migrationInfo")}
|
||||
isDisabled={!isAdmin || isUpgrading}
|
||||
isLoading={migrateProjectToV3.isPending}
|
||||
className="w-full"
|
||||
>
|
||||
{isAdmin ? "Upgrade Secrets Engine" : "Upgrade requires admin privilege"}
|
||||
</Button>
|
||||
{didProjectUpgradeFailed && (
|
||||
<p className="mt-2 text-sm leading-7 text-red-400">
|
||||
<FontAwesomeIcon icon={faTriangleExclamation} className="mr-2" />
|
||||
Secrets engine upgrade unsuccessful. For assistance, please contact the Infisical support
|
||||
team.
|
||||
</p>
|
||||
)}
|
||||
<Modal
|
||||
isOpen={popUp.migrationInfo.isOpen}
|
||||
onOpenChange={(isOpen) => handlePopUpToggle("migrationInfo", isOpen)}
|
||||
>
|
||||
<ModalContent
|
||||
title="Upgrade Checklist"
|
||||
subTitle="To ensure smooth transition, please ensure the following requirements are met before upgrading this project."
|
||||
>
|
||||
<div>
|
||||
<form onSubmit={handleSubmit(handleMigrationSecretV2)}>
|
||||
<div className="flex flex-col space-y-4">
|
||||
<Controller
|
||||
control={control}
|
||||
name="isCLIChecked"
|
||||
defaultValue={false}
|
||||
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
|
||||
<Checkbox
|
||||
id="is-cli-checked"
|
||||
isChecked={value}
|
||||
onCheckedChange={onChange}
|
||||
onBlur={onBlur}
|
||||
isError={Boolean(error?.message)}
|
||||
>
|
||||
Infisical CLI version is v0.25.0 or above.
|
||||
</Checkbox>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="isOperatorChecked"
|
||||
defaultValue={false}
|
||||
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
|
||||
<Checkbox
|
||||
id="is-operator-checked"
|
||||
isChecked={value}
|
||||
onCheckedChange={onChange}
|
||||
onBlur={onBlur}
|
||||
isError={Boolean(error?.message)}
|
||||
>
|
||||
Infisical Kubernetes Operator version is v0.7.0 or above.
|
||||
</Checkbox>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="shouldCloseOpenApprovals"
|
||||
defaultValue={false}
|
||||
render={({ field: { onBlur, value, onChange }, fieldState: { error } }) => (
|
||||
<Checkbox
|
||||
id="is-approvals-checked"
|
||||
isChecked={value}
|
||||
onCheckedChange={onChange}
|
||||
onBlur={onBlur}
|
||||
isError={Boolean(error?.message)}
|
||||
>
|
||||
Close/merge all open approval/access requests.
|
||||
</Checkbox>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-8 flex space-x-4">
|
||||
<Button type="submit">Confirm Upgrade</Button>
|
||||
<Button variant="outline_bg" onClick={() => handlePopUpToggle("migrationInfo")}>
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { SecretV2MigrationSection } from "./SecretV2MigrationSection";
|
||||
+206
@@ -0,0 +1,206 @@
|
||||
import { subject } from "@casl/ability";
|
||||
import { faMinusSquare, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
import { createNotification } from "@app/components/notifications";
|
||||
import { Button, DeleteActionModal, IconButton, Tooltip } from "@app/components/v2";
|
||||
import {
|
||||
ProjectPermissionActions,
|
||||
ProjectPermissionSub,
|
||||
useProjectPermission,
|
||||
useWorkspace
|
||||
} from "@app/context";
|
||||
import { usePopUp } from "@app/hooks";
|
||||
import { useDeleteFolder, useDeleteSecretBatch } from "@app/hooks/api";
|
||||
import {
|
||||
SecretType,
|
||||
SecretV3RawSanitized,
|
||||
TDeleteSecretBatchDTO,
|
||||
TSecretFolder
|
||||
} from "@app/hooks/api/types";
|
||||
|
||||
export enum EntryType {
|
||||
FOLDER = "folder",
|
||||
SECRET = "secret"
|
||||
}
|
||||
|
||||
type Props = {
|
||||
secretPath: string;
|
||||
resetSelectedEntries: () => void;
|
||||
selectedEntries: {
|
||||
[EntryType.FOLDER]: Record<string, Record<string, TSecretFolder>>;
|
||||
[EntryType.SECRET]: Record<string, Record<string, SecretV3RawSanitized>>;
|
||||
};
|
||||
};
|
||||
|
||||
export const SelectionPanel = ({ secretPath, resetSelectedEntries, selectedEntries }: Props) => {
|
||||
const { permission } = useProjectPermission();
|
||||
|
||||
const { handlePopUpOpen, handlePopUpToggle, handlePopUpClose, popUp } = usePopUp([
|
||||
"bulkDeleteEntries"
|
||||
] as const);
|
||||
|
||||
const selectedFolderCount = Object.keys(selectedEntries.folder).length;
|
||||
const selectedKeysCount = Object.keys(selectedEntries.secret).length;
|
||||
const selectedCount = selectedFolderCount + selectedKeysCount;
|
||||
|
||||
const { currentWorkspace } = useWorkspace();
|
||||
const workspaceId = currentWorkspace?.id || "";
|
||||
const userAvailableEnvs = currentWorkspace?.environments || [];
|
||||
const { mutateAsync: deleteBatchSecretV3 } = useDeleteSecretBatch();
|
||||
const { mutateAsync: deleteFolder } = useDeleteFolder();
|
||||
|
||||
const isMultiSelectActive = selectedCount > 0;
|
||||
|
||||
// user should have the ability to delete secrets/folders in at least one of the envs
|
||||
const shouldShowDelete = userAvailableEnvs.some((env) =>
|
||||
permission.can(
|
||||
ProjectPermissionActions.Delete,
|
||||
subject(ProjectPermissionSub.Secrets, {
|
||||
environment: env.slug,
|
||||
secretPath,
|
||||
secretName: "*",
|
||||
secretTags: ["*"]
|
||||
})
|
||||
)
|
||||
);
|
||||
|
||||
const getDeleteModalTitle = () => {
|
||||
if (selectedFolderCount > 0 && selectedKeysCount > 0) {
|
||||
return "Do you want to delete the selected secrets and folders across environments?";
|
||||
}
|
||||
if (selectedKeysCount > 0) {
|
||||
return "Do you want to delete the selected secrets across environments?";
|
||||
}
|
||||
return "Do you want to delete the selected folders across environments?";
|
||||
};
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
let processedEntries = 0;
|
||||
|
||||
const promises = userAvailableEnvs.map(async (env) => {
|
||||
// additional check: ensure that bulk delete is only executed on envs that user has access to
|
||||
|
||||
if (
|
||||
permission.can(
|
||||
ProjectPermissionActions.Delete,
|
||||
subject(ProjectPermissionSub.SecretFolders, { environment: env.slug, secretPath })
|
||||
)
|
||||
) {
|
||||
await Promise.all(
|
||||
Object.values(selectedEntries.folder).map(async (folderRecord) => {
|
||||
const folder = folderRecord[env.slug];
|
||||
if (folder) {
|
||||
processedEntries += 1;
|
||||
await deleteFolder({
|
||||
folderId: folder?.id,
|
||||
path: secretPath,
|
||||
environment: env.slug,
|
||||
projectId: workspaceId
|
||||
});
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
const secretsToDelete = Object.values(selectedEntries.secret).reduce(
|
||||
(accum: TDeleteSecretBatchDTO["secrets"], secretRecord) => {
|
||||
const entry = secretRecord[env.slug];
|
||||
const canDeleteSecret = permission.can(
|
||||
ProjectPermissionActions.Delete,
|
||||
subject(ProjectPermissionSub.Secrets, {
|
||||
environment: env.slug,
|
||||
secretPath,
|
||||
secretName: entry.key,
|
||||
secretTags: (entry?.tags || []).map((i) => i.slug)
|
||||
})
|
||||
);
|
||||
|
||||
if (entry && canDeleteSecret) {
|
||||
return [
|
||||
...accum,
|
||||
{
|
||||
secretKey: entry.key,
|
||||
type: SecretType.Shared
|
||||
}
|
||||
];
|
||||
}
|
||||
return accum;
|
||||
},
|
||||
[]
|
||||
);
|
||||
|
||||
if (secretsToDelete.length > 0) {
|
||||
processedEntries += secretsToDelete.length;
|
||||
await deleteBatchSecretV3({
|
||||
secretPath,
|
||||
workspaceId,
|
||||
environment: env.slug,
|
||||
secrets: secretsToDelete
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const results = await Promise.allSettled(promises);
|
||||
const areEntriesDeleted = results.some((result) => result.status === "fulfilled");
|
||||
if (processedEntries === 0) {
|
||||
handlePopUpClose("bulkDeleteEntries");
|
||||
createNotification({
|
||||
type: "info",
|
||||
text: "You don't have access to delete selected items"
|
||||
});
|
||||
} else if (areEntriesDeleted) {
|
||||
handlePopUpClose("bulkDeleteEntries");
|
||||
resetSelectedEntries();
|
||||
createNotification({
|
||||
type: "success",
|
||||
text: "Successfully deleted selected secrets and folders"
|
||||
});
|
||||
} else {
|
||||
createNotification({
|
||||
type: "error",
|
||||
text: "Failed to delete selected secrets and folders"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={twMerge(
|
||||
"h-0 flex-shrink-0 overflow-hidden transition-all",
|
||||
isMultiSelectActive && "h-16"
|
||||
)}
|
||||
>
|
||||
<div className="mt-3.5 flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
|
||||
<Tooltip content="Clear">
|
||||
<IconButton variant="plain" ariaLabel="clear-selection" onClick={resetSelectedEntries}>
|
||||
<FontAwesomeIcon icon={faMinusSquare} size="lg" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<div className="ml-1 flex-grow px-2 text-sm">{selectedCount} Selected</div>
|
||||
{shouldShowDelete && (
|
||||
<Button
|
||||
variant="outline_bg"
|
||||
colorSchema="danger"
|
||||
leftIcon={<FontAwesomeIcon icon={faTrash} />}
|
||||
className="ml-4"
|
||||
onClick={() => handlePopUpOpen("bulkDeleteEntries")}
|
||||
size="xs"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.bulkDeleteEntries.isOpen}
|
||||
deleteKey="delete"
|
||||
title={getDeleteModalTitle()}
|
||||
onChange={(isOpen) => handlePopUpToggle("bulkDeleteEntries", isOpen)}
|
||||
onDeleteApproved={handleBulkDelete}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,20 @@
|
||||
import { createFileRoute, stripSearchParams } from "@tanstack/react-router";
|
||||
import { zodValidator } from "@tanstack/zod-adapter";
|
||||
import { z } from "zod";
|
||||
|
||||
import { OverviewPage } from "./OverviewPage";
|
||||
|
||||
const SecretOverviewPageQuerySchema = z.object({
|
||||
search: z.string().catch(""),
|
||||
secretPath: z.string().catch("/")
|
||||
});
|
||||
|
||||
export const Route = createFileRoute(
|
||||
"/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/overview"
|
||||
)({
|
||||
component: OverviewPage,
|
||||
validateSearch: zodValidator(SecretOverviewPageQuerySchema),
|
||||
search: {
|
||||
middlewares: [stripSearchParams({ secretPath: "/", search: "" })]
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user