+
+ );
+ },
+ {
+ action: ProjectPermissionActions.Read,
+ subject: ProjectPermissionSub.Member
+ }
+);
+
+export const AccessControlPage = () => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+
+
+ Users
+ Groups
+
+
+ {currentWorkspace?.type === ProjectType.SecretManager && (
+ Service Tokens
+ )}
+ Project Roles
+
+
+
+
+
+
+
+ {currentWorkspace?.type === ProjectType.SecretManager && (
+
+
+ )}
+
+
+
+
+ + {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access + Control +
+
+
+ Machine Identities
+
+
+ );
+};
+
+export const GroupModal = ({ popUp, handlePopUpToggle }: Props) => {
+ return (
+
+ All groups in your organization have already been added to this project.
+
+
+
+
+
+ Expired }
+ (
+
+ 1m, 2h, 3d.{" "}
+
+ More
+
+
+ }
+ >
+
+
+ )}
+ />
+
+
+ Set Role Temporarily
+
+ {isExpired &&
+ {isTemporaryFieldValue && (
+
+ )}
+ {!isTemporaryFieldValue ? (
+
+ ) : (
+
+ )}
+
+
+ {roles
+ .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+ .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+ const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+ return (
+
+
+ );
+ })}
+ {roles.length > MAX_ROLES_TO_BE_SHOWN_IN_TABLE && (
+
+
+ +{roles.length - MAX_ROLES_TO_BE_SHOWN_IN_TABLE}
+
+
+ {roles
+ .slice(MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+ .map(({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+ const isExpired = new Date() > new Date(temporaryAccessEndTime || ("" as string));
+ return (
+
+
+ );
+ })}{" "}
+
+
+ )}
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
new file mode 100644
index 000000000..8ae272725
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsSection.tsx
@@ -0,0 +1,106 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useSubscription,
+ useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteGroupFromWorkspace } from "@app/hooks/api";
+
+import { GroupModal } from "./GroupModal";
+import { GroupTable } from "./GroupsTable";
+
+export const GroupsSection = () => {
+ const { subscription } = useSubscription();
+ const { currentWorkspace } = useWorkspace();
+
+ const { mutateAsync: deleteMutateAsync } = useDeleteGroupFromWorkspace();
+
+ const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+ "group",
+ "deleteGroup",
+ "upgradePlan"
+ ] as const);
+
+ const handleAddGroupModal = () => {
+ if (!subscription?.groups) {
+ handlePopUpOpen("upgradePlan", {
+ description:
+ "You can manage users more efficiently with groups if you upgrade your Infisical plan."
+ });
+ } else {
+ handlePopUpOpen("group");
+ }
+ };
+
+ const onRemoveGroupSubmit = async (groupId: string) => {
+ try {
+ await deleteMutateAsync({
+ groupId,
+ projectId: currentWorkspace?.id || ""
+ });
+
+ createNotification({
+ text: "Successfully removed identity from project",
+ type: "success"
+ });
+
+ handlePopUpClose("deleteGroup");
+ } catch (err) {
+ console.error(err);
+ const error = err as any;
+ const text = error?.response?.data?.message ?? "Failed to remove group from project";
+
+ createNotification({
+ text,
+ type: "error"
+ });
+ }
+ };
+
+ return (
+
+
+ {formatRoleName(role, customRoleName)}
+ {isTemporary && (
+
+
+
+
+ )}
+
+
+ {formatRoleName(role, customRoleName)}
+ {isTemporary && (
+
+
+ new Date(temporaryAccessEndTime as string) &&
+ "text-red-600"
+ )}
+ />
+
+
+ )}
+
+ {
+ handlePopUpToggle("editRole", isOpen);
+ reset();
+ }}
+ >
+ {!disableEdit && (
+
+
+
+
+ )}
+
+ {isRolesLoading ? (
+
+
+
+
+
+ ) : (
+
+ )}
+
+ handlePopUpToggle("deleteGroup", isOpen)}
+ deleteKey="confirm"
+ onDeleteApproved={() =>
+ onRemoveGroupSubmit((popUp?.deleteGroup?.data as { id: string })?.id)
+ }
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text={(popUp.upgradePlan?.data as { description: string })?.description}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
new file mode 100644
index 000000000..24f459a93
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/GroupsTable.tsx
@@ -0,0 +1,202 @@
+import { useMemo } from "react";
+import {
+ faArrowDown,
+ faArrowUp,
+ faMagnifyingGlass,
+ faSearch,
+ faTrash,
+ faUsers
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ IconButton,
+ Input,
+ Pagination,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useListWorkspaceGroups } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+import { GroupRoles } from "./GroupRoles";
+
+type Props = {
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["deleteGroup", "group"]>,
+ data?: {
+ id?: string;
+ name?: string;
+ }
+ ) => void;
+};
+
+enum GroupsOrderBy {
+ Name = "name"
+}
+
+export const GroupTable = ({ handlePopUpOpen }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+
+ const {
+ search,
+ setSearch,
+ setPage,
+ page,
+ perPage,
+ setPerPage,
+ offset,
+ orderDirection,
+ orderBy,
+ toggleOrderDirection
+ } = usePagination(GroupsOrderBy.Name, { initPerPage: 20 });
+
+ const { data: groupMemberships = [], isPending } = useListWorkspaceGroups(
+ currentWorkspace?.id || ""
+ );
+
+ const filteredGroupMemberships = useMemo(() => {
+ const filtered = search
+ ? groupMemberships?.filter(
+ ({ group: { name, slug } }) =>
+ name.toLowerCase().includes(search.toLowerCase()) ||
+ slug.toLowerCase().includes(search.toLowerCase())
+ )
+ : groupMemberships;
+
+ const ordered = filtered?.sort((a, b) =>
+ a.group.name.toLowerCase().localeCompare(b.group.name.toLowerCase())
+ );
+
+ return orderDirection === OrderByDirection.ASC ? ordered : ordered?.reverse();
+ }, [search, groupMemberships, orderBy, orderDirection]);
+
+ useResetPageHelper({
+ totalCount: filteredGroupMemberships.length,
+ offset,
+ setPage
+ });
+
+ return (
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => handleAddGroupModal()}
+ isDisabled={!isAllowed}
+ >
+ Add Group
+
+ )}
+
+
+ User Groups
+
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+ {Boolean(filteredGroupMemberships.length) && (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/index.tsx
new file mode 100644
index 000000000..7726fd170
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/GroupsSection/index.tsx
@@ -0,0 +1 @@
+export { GroupsSection } from "./GroupsSection";
\ No newline at end of file
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/index.tsx
new file mode 100644
index 000000000..7726fd170
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/components/index.tsx
@@ -0,0 +1 @@
+export { GroupsSection } from "./GroupsSection";
\ No newline at end of file
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/index.tsx
new file mode 100644
index 000000000..419579efc
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/GroupsTab/index.tsx
@@ -0,0 +1 @@
+export { GroupsTab } from "./GroupsTab";
\ No newline at end of file
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/IdentityTab/IdentityTab.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/IdentityTab/IdentityTab.tsx
new file mode 100644
index 000000000..d3ad8d0e5
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/IdentityTab/IdentityTab.tsx
@@ -0,0 +1,443 @@
+import { subject } from "@casl/ability";
+import {
+ faArrowDown,
+ faArrowUp,
+ faArrowUpRightFromSquare,
+ faClock,
+ faEllipsisV,
+ faMagnifyingGlass,
+ faPlus,
+ faServer,
+ faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { format } from "date-fns";
+import { motion } from "framer-motion";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ DeleteActionModal,
+ EmptyState,
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+ IconButton,
+ Input,
+ Pagination,
+ Spinner,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ Tag,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useDeleteIdentityFromWorkspace, useGetWorkspaceIdentityMemberships } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { ProjectIdentityOrderBy } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+import { IdentityModal } from "./components/IdentityModal";
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+
+const formatRoleName = (role: string, customRoleName?: string) => {
+ if (role === ProjectMembershipRole.Custom) return customRoleName;
+ if (role === ProjectMembershipRole.Member) return "Developer";
+ if (role === ProjectMembershipRole.NoAccess) return "No access";
+ return role;
+};
+export const IdentityTab = withProjectPermission(
+ () => {
+ const { currentWorkspace } = useWorkspace();
+ const navigate = useNavigate();
+
+ const {
+ offset,
+ limit,
+ orderBy,
+ setOrderBy,
+ orderDirection,
+ setOrderDirection,
+ search,
+ debouncedSearch,
+ setPage,
+ setSearch,
+ perPage,
+ page,
+ setPerPage
+ } = usePagination(ProjectIdentityOrderBy.Name);
+
+ const workspaceId = currentWorkspace?.id ?? "";
+
+ const { data, isPending, isFetching } = useGetWorkspaceIdentityMemberships(
+ {
+ workspaceId: currentWorkspace?.id || "",
+ offset,
+ limit,
+ orderDirection,
+ orderBy,
+ search: debouncedSearch
+ },
+ { placeholderData: (prevData) => prevData }
+ );
+
+ const { totalCount = 0 } = data ?? {};
+
+ useResetPageHelper({
+ totalCount,
+ offset,
+ setPage
+ });
+
+ const { mutateAsync: deleteMutateAsync } = useDeleteIdentityFromWorkspace();
+
+ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+ "identity",
+ "deleteIdentity",
+ "upgradePlan"
+ ] as const);
+
+ const onRemoveIdentitySubmit = async (identityId: string) => {
+ try {
+ await deleteMutateAsync({
+ identityId,
+ workspaceId
+ });
+
+ createNotification({
+ text: "Successfully removed identity from project",
+ type: "success"
+ });
+
+ handlePopUpClose("deleteIdentity");
+ } catch (err) {
+ console.error(err);
+ const error = err as any;
+ const text = error?.response?.data?.message ?? "Failed to remove identity from project";
+
+ createNotification({
+ text,
+ type: "error"
+ });
+ }
+ };
+
+ const handleSort = (column: ProjectIdentityOrderBy) => {
+ if (column === orderBy) {
+ setOrderDirection((prev) =>
+ prev === OrderByDirection.ASC ? OrderByDirection.DESC : OrderByDirection.ASC
+ );
+ return;
+ }
+
+ setOrderBy(column);
+ setOrderDirection(OrderByDirection.ASC);
+ };
+
+ return (
+ |
+
+ Name
+
+ |
+ Role | +Added on | ++ |
|---|---|---|---|
| {name} | +
+ |
+ {format(new Date(createdAt), "yyyy-MM-dd")} | +
+
+
+ )}
+ |
+
+
+
+
+
+ {!isPending && data && totalCount > 0 && (
+ setPage(newPage)}
+ onChangePerPage={(newPerPage) => setPerPage(newPerPage)}
+ />
+ )}
+ {!isPending && data && data?.identityMemberships.length === 0 && (
+ 0
+ ? "No identities match search filter"
+ : "No identities have been added to this project"
+ }
+ icon={faServer}
+ />
+ )}
+
+ handlePopUpToggle("deleteIdentity", isOpen)}
+ deleteKey="confirm"
+ onDeleteApproved={() =>
+ onRemoveIdentitySubmit(
+ (popUp?.deleteIdentity?.data as { identityId: string })?.identityId
+ )
+ }
+ />
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => handlePopUpOpen("identity")}
+ isDisabled={!isAllowed}
+ >
+ Add Identity
+
+ )}
+
+
+ setSearch(e.target.value)}
+ leftIcon={Identities
+ +|
+
+ Name
+
+ |
+ Role | +Added on | +{isFetching ? |
+
|---|---|---|---|
| {name} | + +
+
+ {roles
+ .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+ .map(
+ ({
+ role,
+ customRoleName,
+ id: roleId,
+ isTemporary,
+ temporaryAccessEndTime
+ }) => {
+ const isExpired =
+ new Date() > new Date(temporaryAccessEndTime || ("" as string));
+ return (
+
+
+
+
+ {formatRoleName(role, customRoleName)}
+
+ {isTemporary && (
+
+
+ )}
+
+
+ {formatRoleName(role, customRoleName)}
+ {isTemporary && (
+
+
+ )}
+ |
+ {format(new Date(createdAt), "yyyy-MM-dd")} | +
+ |
+
+
+ );
+
+ return filteredIdentityMembershipOrgs.length ? (
+
+ ) : (
+
+
+ );
+};
+
+export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
+ return (
+
+ All identities in your organization have already been added to this project.
+
+
+
+
+
+
+ )}
+ All the users in your organization are already invited.
+
+
+
+
+
+ );
+
+ return (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx
new file mode 100644
index 000000000..93839337b
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/MemberRoleForm.tsx
@@ -0,0 +1,38 @@
+import { Link } from "@tanstack/react-router";
+
+import { Alert, AlertDescription } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+
+import { MemberRbacSection } from "./MemberRbacSection";
+
+type Props = {
+ projectMember: TWorkspaceUser;
+ onOpenUpgradeModal: (title: string) => void;
+};
+export const MemberRoleForm = ({ projectMember, onOpenUpgradeModal }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ return (
+ Roles
+ Select one of the pre-defined or custom roles.
+
+
+
+
+
+
+
+
+ Click here to access them now
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
new file mode 100644
index 000000000..06641be7a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection.tsx
@@ -0,0 +1,572 @@
+import { useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import {
+ faArrowRotateLeft,
+ faCaretDown,
+ faCheck,
+ faClock,
+ faLockOpen,
+ faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format, formatDistance } from "date-fns";
+import ms from "ms";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Button,
+ Checkbox,
+ DeleteActionModal,
+ FormControl,
+ FormLabel,
+ IconButton,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Select,
+ SelectItem,
+ Spinner,
+ Tag,
+ Tooltip
+} from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import { removeTrailingSlash } from "@app/helpers/string";
+import { usePopUp } from "@app/hooks";
+import {
+ TProjectUserPrivilege,
+ useCreateAccessRequest,
+ useDeleteProjectUserAdditionalPrivilege
+} from "@app/hooks/api";
+import { TAccessApprovalPolicy } from "@app/hooks/api/types";
+
+const secretPermissionSchema = z.object({
+ secretPath: z.string().optional(),
+ environmentSlug: z.string(),
+ [ProjectPermissionActions.Edit]: z.boolean().optional(),
+ [ProjectPermissionActions.Read]: z.boolean().optional(),
+ [ProjectPermissionActions.Create]: z.boolean().optional(),
+ [ProjectPermissionActions.Delete]: z.boolean().optional(),
+ temporaryAccess: z.discriminatedUnion("isTemporary", [
+ z.object({
+ isTemporary: z.literal(true),
+ temporaryRange: z.string().min(1),
+ temporaryAccessStartTime: z.string().datetime(),
+ temporaryAccessEndTime: z.string().datetime().nullable().optional()
+ }),
+ z.object({
+ isTemporary: z.literal(false)
+ })
+ ])
+});
+type TSecretPermissionForm = z.infer
+
+ handlePopUpToggle("deletePrivilege", isOpen)}
+ deleteKey="delete"
+ onClose={() => handlePopUpClose("deletePrivilege")}
+ onDeleteApproved={handleDeletePrivilege}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/index.tsx
new file mode 100644
index 000000000..765b4061c
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MemberRoleForm/index.tsx
@@ -0,0 +1 @@
+export { MemberRoleForm } from "./MemberRoleForm";
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersSection.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersSection.tsx
new file mode 100644
index 000000000..ee1f791d3
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersSection.tsx
@@ -0,0 +1,91 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useOrganization,
+ useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteUserFromWorkspace } from "@app/hooks/api";
+
+import { AddMemberModal } from "./AddMemberModal";
+import { MembersTable } from "./MembersTable";
+
+export const MembersSection = () => {
+ const { currentOrg } = useOrganization();
+ const { currentWorkspace } = useWorkspace();
+
+ const { mutateAsync: removeUserFromWorkspace } = useDeleteUserFromWorkspace();
+
+ const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+ "addMember",
+ "removeMember",
+ "upgradePlan"
+ ] as const);
+
+ const handleRemoveUser = async () => {
+ const username = (popUp?.removeMember?.data as { username: string })?.username;
+ if (!currentOrg?.id) return;
+ if (!currentWorkspace?.id) return;
+
+ try {
+ await removeUserFromWorkspace({
+ workspaceId: currentWorkspace.id,
+ usernames: [username],
+ orgId: currentOrg.id
+ });
+ createNotification({
+ text: "Successfully removed user from project",
+ type: "success"
+ });
+ } catch (error) {
+ console.error(error);
+ createNotification({
+ text: "Failed to remove user from the project",
+ type: "error"
+ });
+ }
+ handlePopUpClose("removeMember");
+ };
+
+ return (
+
+ handlePopUpToggle("removeMember", isOpen)}
+ onDeleteApproved={handleRemoveUser}
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text={(popUp.upgradePlan?.data as { description: string })?.description}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersTable.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersTable.tsx
new file mode 100644
index 000000000..c7937bc9d
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/MembersTable.tsx
@@ -0,0 +1,375 @@
+import { useMemo } from "react";
+import {
+ faArrowDown,
+ faArrowUp,
+ faClock,
+ faEllipsisV,
+ faMagnifyingGlass,
+ faSearch,
+ faTrash,
+ faUsers
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+ IconButton,
+ Input,
+ Pagination,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ Tag,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useUser,
+ useWorkspace
+} from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useGetWorkspaceUsers } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const MAX_ROLES_TO_BE_SHOWN_IN_TABLE = 2;
+const formatRoleName = (role: string, customRoleName?: string) => {
+ if (role === ProjectMembershipRole.Custom) return customRoleName;
+ if (role === ProjectMembershipRole.Member) return "Developer";
+ if (role === ProjectMembershipRole.NoAccess) return "No access";
+ return role;
+};
+
+type Props = {
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["removeMember", "upgradePlan"]>,
+ data?: object
+ ) => void;
+};
+
+enum MembersOrderBy {
+ Name = "firstName",
+ Email = "email"
+}
+
+export const MembersTable = ({ handlePopUpOpen }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const { user } = useUser();
+ const navigate = useNavigate();
+
+ const userId = user?.id || "";
+ const workspaceId = currentWorkspace?.id || "";
+
+ const {
+ search,
+ setSearch,
+ setPage,
+ page,
+ perPage,
+ setPerPage,
+ offset,
+ orderDirection,
+ orderBy,
+ setOrderBy,
+ setOrderDirection,
+ toggleOrderDirection
+ } = usePagination
+
+ {(isAllowed) => (
+ }
+ onClick={() => handlePopUpOpen("addMember")}
+ isDisabled={!isAllowed}
+ >
+ Add Member
+
+ )}
+
+
+ Users
+
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+ {Boolean(filteredUsers.length) && (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/index.tsx
new file mode 100644
index 000000000..ccb1cc6cf
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/components/index.tsx
@@ -0,0 +1 @@
+export { MembersSection } from "./MembersSection";
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/index.tsx
new file mode 100644
index 000000000..f557950c8
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/MembersTab/index.tsx
@@ -0,0 +1 @@
+export { MembersTab } from "./MembersTab";
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx
new file mode 100644
index 000000000..4a5fc37ac
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/ProjectRoleListTab.tsx
@@ -0,0 +1,23 @@
+import { motion } from "framer-motion";
+
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { withProjectPermission } from "@app/hoc";
+
+import { ProjectRoleList } from "./components/ProjectRoleList";
+
+export const ProjectRoleListTab = withProjectPermission(
+ () => {
+ return (
+ |
+
+ Name
+
+ |
+
+
+ Email
+
+ |
+ Role | ++ |
|---|---|---|---|
| {name} | +{email} | +
+
+ {roles
+ .slice(0, MAX_ROLES_TO_BE_SHOWN_IN_TABLE)
+ .map(
+ ({ role, customRoleName, id, isTemporary, temporaryAccessEndTime }) => {
+ const isExpired =
+ new Date() > new Date(temporaryAccessEndTime || ("" as string));
+ return (
+
+
+
+
+ {formatRoleName(role, customRoleName)}
+
+ {isTemporary && (
+
+
+ )}
+
+
+ {formatRoleName(role, customRoleName)}
+ {isTemporary && (
+
+
+ )}
+ |
+
+ {userId !== u?.id && (
+
+
+ )}
+ |
+
+
+
+
+
+
+ handlePopUpClose("deleteRole")}
+ onDeleteApproved={handleRoleDelete}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/index.tsx
new file mode 100644
index 000000000..9f8e88a82
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/components/ProjectRoleList/index.tsx
@@ -0,0 +1 @@
+export { ProjectRoleList } from "./ProjectRoleList";
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/index.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/index.tsx
new file mode 100644
index 000000000..5dc87a2d7
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ProjectRoleListTab/index.tsx
@@ -0,0 +1 @@
+export { ProjectRoleListTab } from "./ProjectRoleListTab";
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/ServiceTokenTab.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/ServiceTokenTab.tsx
new file mode 100644
index 000000000..f30c853e6
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/ServiceTokenTab.tsx
@@ -0,0 +1,49 @@
+// import { faWarning } from "@fortawesome/free-solid-svg-icons";
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { motion } from "framer-motion";
+
+import { ServiceTokenSection } from "./components";
+
+export const ServiceTokenTab = () => {
+ return (
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => handlePopUpOpen("role")}
+ isDisabled={!isAllowed}
+ >
+ Add Role
+
+ )}
+
+
+ Project Roles
+| Name | +Slug | ++ |
|---|---|---|
| {name} | +{slug} | +
+
+
+ |
+
+ {/*
+
+
*/}
+
+ Deprecation Notice
+
+
+ Service Tokens are being deprecated in favor of Machine Identities.
+
+ They will be removed in the future in accordance with the deprecation notice and
+ timeline stated{" "}
+
+ here
+
+ .
+
+
+ Learn more about Machine Identities
+
+
+
+
+
+ )}
+ {newToken}
+
+ handlePopUpToggle("deleteAPITokenConfirmation", isOpen)}
+ deleteKey={(popUp?.deleteAPITokenConfirmation?.data as DeleteModalData)?.name}
+ onClose={() => handlePopUpClose("deleteAPITokenConfirmation")}
+ onDeleteApproved={onDeleteApproved}
+ />
+
+ );
+ },
+ { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.ServiceTokens }
+);
diff --git a/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx
new file mode 100644
index 000000000..51459e766
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/AccessControlPage/components/ServiceTokenTab/components/ServiceTokenSection/ServiceTokenTable.tsx
@@ -0,0 +1,108 @@
+import { faFolder, faKey, faTrashCan } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ IconButton,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useGetUserWsServiceTokens } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["deleteAPITokenConfirmation"]>,
+ {
+ name,
+ id
+ }: {
+ name: string;
+ id: string;
+ }
+ ) => void;
+};
+
+export const ServiceTokenTable = ({ handlePopUpOpen }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const { data, isLoading } = useGetUserWsServiceTokens({
+ workspaceID: currentWorkspace?.id || ""
+ });
+
+ return (
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("createAPIToken");
+ }}
+ isDisabled={!isAllowed}
+ >
+ Create token
+
+ )}
+
+
+ Service Tokens
+{t("section.token.service-tokens-description")}
+| Token Name | +Environment - Secret Path | +Valid Until | ++ |
|---|---|---|---|
| {row.name} | +
+
+ {row?.scopes.map(({ secretPath, environment }) => (
+
+
+
+ ))}
+ {environment}
+ |
+ {row.expiresAt && new Date(row.expiresAt).toUTCString()} | +
+ |
+
|
+ |
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistModal.tsx b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistModal.tsx
new file mode 100644
index 000000000..70f75271f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistModal.tsx
@@ -0,0 +1,168 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useAddTrustedIp, useGetMyIp, useUpdateTrustedIp } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const schema = z
+ .object({
+ ipAddress: z.string(),
+ comment: z.string()
+ })
+ .required();
+
+export type FormData = z.infer
+
+
+
+
+
+ IP Allowlist
+ +
+ handlePopUpToggle("deleteTrustedIp", isOpen)}
+ deleteKey="confirm"
+ onDeleteApproved={() =>
+ onDeleteTrustedIpSubmit(
+ (popUp?.deleteTrustedIp?.data as { trustedIpId: string })?.trustedIpId
+ )
+ }
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistTable.tsx b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistTable.tsx
new file mode 100644
index 000000000..39dab6fee
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/IPAllowlistTable.tsx
@@ -0,0 +1,166 @@
+import { faGlobe, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ IconButton,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tr
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useSubscription,
+ useWorkspace
+} from "@app/context";
+import { useGetTrustedIps } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+ popUp: UsePopUpState<["upgradePlan"]>;
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["trustedIp", "deleteTrustedIp", "upgradePlan"]>,
+ data?: {
+ trustedIpId: string;
+ ipAddress?: string;
+ comment?: string;
+ isActive?: boolean;
+ prefix?: number;
+ }
+ ) => void;
+ handlePopUpToggle: (popUpName: keyof UsePopUpState<["upgradePlan"]>, state?: boolean) => void;
+};
+
+export const IPAllowlistTable = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Props) => {
+ const { subscription } = useSubscription();
+ const { currentWorkspace } = useWorkspace();
+ const { data, isLoading } = useGetTrustedIps(currentWorkspace?.id ?? "");
+
+ const formatType = (type: string, prefix?: number) => {
+ return `${type.slice(0, 2).toUpperCase() + type.slice(2)} ${
+ prefix !== undefined ? "CIDR" : ""
+ }`;
+ };
+
+ return (
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+ IP Allowlist
+
+
+
+
+
+
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text="You can use IP allowlisting if you switch to Infisical's Pro plan."
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/index.tsx b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/index.tsx
new file mode 100644
index 000000000..488a07e71
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/components/index.tsx
@@ -0,0 +1 @@
+export { IPAllowlistSection } from "./IPAllowlistSection";
diff --git a/frontend-v2/src/pages/secret-manager/IPAllowlistPage/route.tsx b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/route.tsx
new file mode 100644
index 000000000..ac298f8b3
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IPAllowlistPage/route.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { IPAllowListPage } from "./IPAllowListPage";
+
+export const Route = createFileRoute(
+ "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/allowlist/"
+)({
+ component: () => IPAllowListPage
+});
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
new file mode 100644
index 000000000..61faa8d4c
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/IdentityDetailsByIDPage.tsx
@@ -0,0 +1,198 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { subject } from "@casl/ability";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { format } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
+import { usePopUp } from "@app/hooks";
+import {
+ useDeleteIdentityFromWorkspace,
+ useGetWorkspaceIdentityMembershipDetails
+} from "@app/hooks/api";
+
+import { IdentityProjectAdditionalPrivilegeSection } from "./components/IdentityProjectAdditionalPrivilegeSection";
+import { IdentityRoleDetailsSection } from "./components/IdentityRoleDetailsSection";
+
+const Page = () => {
+ const navigate = useNavigate();
+ const identityId = useParams({
+ strict: false,
+ select: (el) => el.identityId as string
+ });
+ const { currentWorkspace } = useWorkspace();
+
+ const workspaceId = currentWorkspace?.id || "";
+
+ const { data: identityMembershipDetails, isPending: isMembershipDetailsLoading } =
+ useGetWorkspaceIdentityMembershipDetails(workspaceId, identityId);
+
+ const { mutateAsync: deleteMutateAsync, isPending: isDeletingIdentity } =
+ useDeleteIdentityFromWorkspace();
+
+ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+ "deleteIdentity",
+ "upgradePlan"
+ ] as const);
+
+ const onRemoveIdentitySubmit = async () => {
+ try {
+ await deleteMutateAsync({
+ identityId,
+ workspaceId
+ });
+ createNotification({
+ text: "Successfully removed identity from project",
+ type: "success"
+ });
+ handlePopUpClose("deleteIdentity");
+ navigate({
+ to: `/${currentWorkspace.type}/$projectId/access` as const,
+ params: {
+ projectId: workspaceId
+ },
+ search: {
+ selectedTab: "identities"
+ }
+ });
+ } catch (err) {
+ console.error(err);
+ const error = err as any;
+ const text = error?.response?.data?.message ?? "Failed to remove identity from project";
+
+ createNotification({
+ text,
+ type: "error"
+ });
+ }
+ };
+
+ if (isMembershipDetailsLoading) {
+ return (
+ | IP Address / Range | +Format | +Comment | + {/*Status | */} ++ |
|---|---|---|---|---|
| {`${ipAddress}${prefix !== undefined ? `/${prefix}` : ""}`} | +{formatType(type, prefix)} | +{comment} | + {/*
+
+
+ Active + | */}
+
+ |
+
|
+ |
+
+
+ );
+ }
+
+ return (
+
+ handlePopUpToggle("deleteIdentity", isOpen)}
+ deleteKey="remove"
+ onDeleteApproved={() => onRemoveIdentitySubmit()}
+ />
+
+ ) : (
+
+ );
+};
+
+export const IdentityDetailsByIDPage = () => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+ }
+ onClick={() => {
+ navigate({
+ to: `/${currentWorkspace.type}/$projectId/access` as const,
+ params: {
+ projectId: workspaceId
+ },
+ search: {
+ selectedTab: "identities"
+ }
+ });
+ }}
+ className="mb-4"
+ >
+ {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
+ Control
+
+
+ {identityMembershipDetails ? (
+ <>
+
+
+
+
+
+
+ + Project Identity Access +
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+
+
+ Name
+ {identityMembershipDetails && (
+
+ + {identityMembershipDetails?.identity?.name} +
+ )} +
+ Joined on{" "}
+ {identityMembershipDetails?.createdAt &&
+ format(new Date(identityMembershipDetails?.createdAt || ""), "yyyy-MM-dd")}
+
+
+
+ {popUp?.modifyPrivilege.isOpen ? (
+
+ handlePopUpClose("modifyPrivilege")}
+ identityId={identityId}
+ privilegeId={(popUp?.modifyPrivilege?.data as { id: string })?.id}
+ isDisabled={permission.cannot(
+ ProjectPermissionActions.Edit,
+ subject(ProjectPermissionSub.Identity, {
+ identityId
+ })
+ )}
+ />
+
+ ) : (
+
+ handlePopUpToggle("deletePrivilege", isOpen)}
+ onDeleteApproved={() => handlePrivilegeDelete()}
+ />
+
+ )}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/index.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/index.tsx
new file mode 100644
index 000000000..94f239c3d
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityProjectAdditionalPrivilegeSection/index.tsx
@@ -0,0 +1 @@
+export { IdentityProjectAdditionalPrivilegeSection } from "./IdentityProjectAdditionalPrivilegeSection";
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
new file mode 100644
index 000000000..1fa98628e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleDetailsSection.tsx
@@ -0,0 +1,238 @@
+import { subject } from "@casl/ability";
+import { faFolder, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistance } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ DeleteActionModal,
+ EmptyState,
+ IconButton,
+ Modal,
+ ModalContent,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ Tag,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { formatProjectRoleName } from "@app/helpers/roles";
+import { usePopUp } from "@app/hooks";
+import { useUpdateIdentityWorkspaceRole } from "@app/hooks/api";
+import { IdentityMembership } from "@app/hooks/api/identities/types";
+import { TProjectRole } from "@app/hooks/api/roles/types";
+
+import { IdentityRoleModify } from "./IdentityRoleModify";
+
+type Props = {
+ identityMembershipDetails: IdentityMembership;
+ isMembershipDetailsLoading?: boolean;
+};
+
+export const IdentityRoleDetailsSection = ({
+ identityMembershipDetails,
+ isMembershipDetailsLoading
+}: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+ "deleteRole",
+ "modifyRole"
+ ] as const);
+ const { mutateAsync: updateIdentityWorkspaceRole } = useUpdateIdentityWorkspaceRole();
+
+ const handleRoleDelete = async () => {
+ const { id } = popUp?.deleteRole?.data as TProjectRole;
+ try {
+ const updatedRoles = identityMembershipDetails?.roles?.filter((el) => el.id !== id);
+ await updateIdentityWorkspaceRole({
+ workspaceId: currentWorkspace?.id || "",
+ identityId: identityMembershipDetails.identity.id,
+ roles: updatedRoles.map(
+ ({
+ role,
+ customRoleSlug,
+ isTemporary,
+ temporaryMode,
+ temporaryRange,
+ temporaryAccessStartTime,
+ temporaryAccessEndTime
+ }) => ({
+ role: role === "custom" ? customRoleSlug : role,
+ ...(isTemporary
+ ? {
+ isTemporary,
+ temporaryMode,
+ temporaryRange,
+ temporaryAccessStartTime,
+ temporaryAccessEndTime
+ }
+ : {
+ isTemporary
+ })
+ })
+ )
+ });
+ createNotification({ type: "success", text: "Successfully removed role" });
+ handlePopUpClose("deleteRole");
+ } catch (err) {
+ console.log(err);
+ createNotification({ type: "error", text: "Failed to delete role" });
+ }
+ };
+
+ return (
+
+
+ {(isAllowed) => (
+ {
+ handlePopUpOpen("modifyPrivilege");
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+ + Project Additional Privileges +
+ +
+
+
+
+
+ {!isPending && !identityProjectPrivileges?.length && (
+
+
+ | Name | +Duration | ++ |
|---|---|---|
| {privilegeDetails.slug} | +
+ |
+
+
+
+ |
+
+ handlePopUpToggle("deleteRole", isOpen)}
+ onDeleteApproved={() => handleRoleDelete()}
+ />
+ handlePopUpToggle("modifyRole", isOpen)}
+ >
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx
new file mode 100644
index 000000000..5aa4ffc32
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/IdentityRoleModify.tsx
@@ -0,0 +1,332 @@
+/* eslint-disable no-nested-ternary */
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faCaretDown, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format, formatDistance } from "date-fns";
+import ms from "ms";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ FormControl,
+ IconButton,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Select,
+ SelectItem,
+ Spinner,
+ Tag,
+ Tooltip
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import { useGetProjectRoles, useUpdateIdentityWorkspaceRole } from "@app/hooks/api";
+import { IdentityMembership } from "@app/hooks/api/identities/types";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+
+const roleFormSchema = z.object({
+ roles: z
+ .object({
+ slug: z.string(),
+ temporaryAccess: z.discriminatedUnion("isTemporary", [
+ z.object({
+ isTemporary: z.literal(true),
+ temporaryRange: z.string().min(1),
+ temporaryAccessStartTime: z.string().datetime(),
+ temporaryAccessEndTime: z.string().datetime().nullable().optional()
+ }),
+ z.object({
+ isTemporary: z.literal(false)
+ })
+ ])
+ })
+ .array()
+});
+type TRoleForm = z.infer
+
+ {(isAllowed) => (
+ {
+ handlePopUpOpen("modifyRole");
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+ Project Roles
+
+
+
+
+
+ {!isMembershipDetailsLoading && !identityMembershipDetails?.roles?.length && (
+
+
+ | Role | +Duration | ++ |
|---|---|---|
| + {roleDetails.role === "custom" + ? roleDetails.customRoleName + : formatProjectRoleName(roleDetails.role)} + | +
+ |
+
+
+
+ |
+
+
+ );
+
+ return (
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/index.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/index.tsx
new file mode 100644
index 000000000..45a444e73
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/components/IdentityRoleDetailsSection/index.tsx
@@ -0,0 +1 @@
+export { IdentityRoleDetailsSection } from "./IdentityRoleDetailsSection";
diff --git a/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/route.tsx b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/route.tsx
new file mode 100644
index 000000000..eeb591164
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/IdentityDetailsByIDPage/route.tsx
@@ -0,0 +1,8 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { IdentityDetailsByIDPage } from "./IdentityDetailsByIDPage";
+
+export const Route = createFileRoute(
+ "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/identities/$identityId/"
+)({
+ component: IdentityDetailsByIDPage
+});
diff --git a/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
new file mode 100644
index 000000000..2f104e707
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/MemberDetailsByIDPage.tsx
@@ -0,0 +1,206 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams } from "@tanstack/react-router";
+import { format } from "date-fns";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal, EmptyState, Spinner } from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useOrganization,
+ useWorkspace
+} from "@app/context";
+import { getProjectTitle } from "@app/helpers/project";
+import { usePopUp } from "@app/hooks";
+import { useDeleteUserFromWorkspace, useGetWorkspaceUserDetails } from "@app/hooks/api";
+
+import { MemberProjectAdditionalPrivilegeSection } from "./components/MemberProjectAdditionalPrivilegeSection";
+import { MemberRoleDetailsSection } from "./components/MemberRoleDetailsSection";
+
+export const Page = () => {
+ const navigate = useNavigate();
+ const membershipId = useParams({
+ strict: false,
+ select: (el) => el.membershipId as string
+ });
+ const { currentOrg } = useOrganization();
+ const { currentWorkspace } = useWorkspace();
+
+ const workspaceId = currentWorkspace?.id || "";
+
+ const { data: membershipDetails, isPending: isMembershipDetailsLoading } =
+ useGetWorkspaceUserDetails(workspaceId, membershipId);
+
+ const { mutateAsync: removeUserFromWorkspace, isPending: isRemovingUserFromWorkspace } =
+ useDeleteUserFromWorkspace();
+
+ const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+ "removeMember",
+ "upgradePlan"
+ ] as const);
+
+ const handleRemoveUser = async () => {
+ if (!currentOrg?.id || !currentWorkspace?.id || !membershipDetails?.user?.username) return;
+
+ try {
+ await removeUserFromWorkspace({
+ workspaceId: currentWorkspace.id,
+ usernames: [membershipDetails?.user?.username],
+ orgId: currentOrg.id
+ });
+ createNotification({
+ text: "Successfully removed user from project",
+ type: "success"
+ });
+ navigate({
+ to: `/${currentWorkspace.type}/$projectId/access` as const,
+ params: {
+ projectId: currentWorkspace.id
+ }
+ });
+ } catch (error) {
+ console.error(error);
+ createNotification({
+ text: "Failed to remove user from the project",
+ type: "error"
+ });
+ }
+ handlePopUpClose("removeMember");
+ };
+
+ if (isMembershipDetailsLoading) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ handlePopUpOpen("upgradePlan", {
+ description:
+ "You can assign custom roles to members if you upgrade your Infisical plan."
+ })
+ }
+ />
+ handlePopUpToggle("removeMember", isOpen)}
+ onDeleteApproved={handleRemoveUser}
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text={(popUp.upgradePlan?.data as { description: string })?.description}
+ />
+
+ ) : (
+
+ );
+};
+
+export const MemberDetailsByIDPage = () => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+ }
+ onClick={() => {
+ navigate({
+ to: `/${currentWorkspace.type}/$projectId/access` as const,
+ params: {
+ projectId: currentWorkspace.id
+ }
+ });
+ }}
+ className="mb-4"
+ >
+ {currentWorkspace?.type ? getProjectTitle(currentWorkspace?.type) : "Project"} Access
+ Control
+
+
+ {membershipDetails ? (
+ <>
+
+
+
+
+
+
+ Project User Access
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+
+
+ Name
+ {membershipDetails && (
+
+ + {membershipDetails.user.firstName || membershipDetails.user.lastName + ? `${membershipDetails.user.firstName} ${membershipDetails.user.lastName}` + : "-"} +
+ )} +
+ Email
+ {membershipDetails &&
+ {membershipDetails?.user?.email}
} +
+ Joined on{" "}
+ {membershipDetails?.createdAt &&
+ format(new Date(membershipDetails?.createdAt || ""), "yyyy-MM-dd")}
+
+
+
+ {popUp?.modifyPrivilege.isOpen ? (
+
+ handlePopUpClose("modifyPrivilege")}
+ projectMembershipId={membershipDetails?.id}
+ privilegeId={(popUp?.modifyPrivilege?.data as { id: string })?.id}
+ isDisabled={
+ isOwnProjectMembershipDetails ||
+ permission.cannot(ProjectPermissionActions.Edit, ProjectPermissionSub.Member)
+ }
+ />
+
+ ) : (
+
+ handlePopUpToggle("deletePrivilege", isOpen)}
+ onDeleteApproved={() => handlePrivilegeDelete()}
+ />
+
+ )}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx
new file mode 100644
index 000000000..e6ccda691
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberProjectAdditionalPrivilegeSection/MembershipProjectAdditionalPrivilegeModifySection.tsx
@@ -0,0 +1,429 @@
+import { Controller, FormProvider, useForm } from "react-hook-form";
+import {
+ faCaretDown,
+ faChevronLeft,
+ faClock,
+ faPlus,
+ faSave
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format, formatDistance } from "date-fns";
+import ms from "ms";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { GeneralPermissionPolicies } from "@app/components/permissions/ProjectRolePermissionsSection/components/GeneralPermissionPolicies";
+import { PermissionEmptyState } from "@app/components/permissions/ProjectRolePermissionsSection/PermissionEmptyState";
+import {
+ formRolePermission2API,
+ isConditionalSubjects,
+ PROJECT_PERMISSION_OBJECT,
+ projectRoleFormSchema,
+ rolePermission2Form
+} from "@app/components/permissions/ProjectRolePermissionsSection/ProjectRoleModifySection.utils";
+import { renderConditionalComponents } from "@app/components/permissions/ProjectRolePermissionsSection/RolePermissionsSection";
+import {
+ Button,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ FormControl,
+ FormLabel,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Tag,
+ Tooltip
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import {
+ useCreateProjectUserAdditionalPrivilege,
+ useGetProjectUserPrivilegeDetails,
+ useUpdateProjectUserAdditionalPrivilege
+} from "@app/hooks/api";
+import { ProjectUserAdditionalPrivilegeTemporaryMode } from "@app/hooks/api/projectUserAdditionalPrivilege/types";
+
+type Props = {
+ privilegeId?: string;
+ projectMembershipId: string;
+ onGoBack: () => void;
+ isDisabled?: boolean;
+};
+
+export const formSchema = z.object({
+ slug: z.string().optional(),
+ temporaryAccess: z
+ .discriminatedUnion("isTemporary", [
+ z.object({
+ isTemporary: z.literal(true),
+ temporaryRange: z.string().min(1),
+ temporaryAccessStartTime: z.string().datetime(),
+ temporaryAccessEndTime: z.string().datetime().nullable().optional()
+ }),
+ z.object({
+ isTemporary: z.literal(false)
+ })
+ ])
+ .default({ isTemporary: false }),
+ permissions: projectRoleFormSchema.shape.permissions
+});
+
+type TFormSchema = z.infer
+
+ {(isAllowed) => (
+ {
+ handlePopUpOpen("modifyPrivilege");
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+ )}
+
+ + Project Additional Privileges +
+ {userId !== membershipDetails?.user?.id && + membershipDetails?.status !== "invited" && ( +
+
+
+
+
+ {!isPending && !userProjectPrivileges?.length && (
+
+
+ | Name | +Duration | ++ |
|---|---|---|
| {privilegeDetails.slug} | +
+ |
+
+
+
+ |
+
+ handlePopUpToggle("deleteRole", isOpen)}
+ onDeleteApproved={() => handleRoleDelete()}
+ />
+ handlePopUpToggle("modifyRole", isOpen)}
+ >
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx
new file mode 100644
index 000000000..3a140ba56
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/MemberRoleModify.tsx
@@ -0,0 +1,346 @@
+/* eslint-disable no-nested-ternary */
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faCaretDown, faClock, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format, formatDistance } from "date-fns";
+import ms from "ms";
+import { twMerge } from "tailwind-merge";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ FormControl,
+ IconButton,
+ Input,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+ Select,
+ SelectItem,
+ Spinner,
+ Tag,
+ Tooltip
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useSubscription,
+ useWorkspace
+} from "@app/context";
+import { useGetProjectRoles, useUpdateUserWorkspaceRole } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { TWorkspaceUser } from "@app/hooks/api/types";
+import { ProjectUserMembershipTemporaryMode } from "@app/hooks/api/workspace/types";
+
+const roleFormSchema = z.object({
+ roles: z
+ .object({
+ slug: z.string(),
+ temporaryAccess: z.discriminatedUnion("isTemporary", [
+ z.object({
+ isTemporary: z.literal(true),
+ temporaryRange: z.string().min(1),
+ temporaryAccessStartTime: z.string().datetime(),
+ temporaryAccessEndTime: z.string().datetime().nullable().optional()
+ }),
+ z.object({
+ isTemporary: z.literal(false)
+ })
+ ])
+ })
+ .array()
+});
+type TRoleForm = z.infer
+
+ {(isAllowed) => (
+ {
+ handlePopUpOpen("modifyRole");
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+ )}
+
+ Project Roles
+ {!isOwnProjectMembershipDetails && membershipDetails?.status !== "invited" && ( +
+
+
+
+
+ {!isMembershipDetailsLoading && !membershipDetails?.roles?.length && (
+
+
+ | Role | +Duration | ++ |
|---|---|---|
| + {roleDetails.role === "custom" + ? roleDetails.customRoleName + : formatProjectRoleName(roleDetails.role)} + | +
+ |
+
+
+
+ |
+
+
+ );
+
+ return (
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/index.tsx b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/index.tsx
new file mode 100644
index 000000000..cdeb3a958
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/components/MemberRoleDetailsSection/index.tsx
@@ -0,0 +1 @@
+export { MemberRoleDetailsSection } from "./MemberRoleDetailsSection";
diff --git a/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/route.tsx b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/route.tsx
new file mode 100644
index 000000000..e45a6954a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/MemberDetailsByIDPage/route.tsx
@@ -0,0 +1,9 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { MemberDetailsByIDPage } from "./MemberDetailsByIdPage";
+
+export const Route = createFileRoute(
+ "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/members/$membershipId/"
+)({
+ component: MemberDetailsByIDPage
+});
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/OverviewPage.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
new file mode 100644
index 000000000..cd96b7dd9
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/OverviewPage.tsx
@@ -0,0 +1,1167 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { subject } from "@casl/ability";
+import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
+import {
+ faAngleDown,
+ faArrowDown,
+ faArrowUp,
+ faFingerprint,
+ faFolder,
+ faFolderBlank,
+ faFolderPlus,
+ faKey,
+ faList,
+ faPlus
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useNavigate, useRouter, useSearch } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import NavHeader from "@app/components/navigation/NavHeader";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ Checkbox,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+ EmptyState,
+ IconButton,
+ Modal,
+ ModalContent,
+ Pagination,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ TFoot,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import {
+ useCreateFolder,
+ useCreateSecretV3,
+ useDeleteSecretV3,
+ useGetImportedSecretsAllEnvs,
+ useGetWsTags,
+ useUpdateSecretV3
+} from "@app/hooks/api";
+import { useGetProjectSecretsOverview } from "@app/hooks/api/dashboard/queries";
+import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { useUpdateFolderBatch } from "@app/hooks/api/secretFolders/queries";
+import { TUpdateFolderBatchDTO } from "@app/hooks/api/secretFolders/types";
+import { SecretType, SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
+import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
+import { useDynamicSecretOverview, useFolderOverview, useSecretOverview } from "@app/hooks/utils";
+
+import { FolderForm } from "../secrets.$envSlug/-components/ActionBar/FolderForm";
+import { CreateSecretForm } from "./components/CreateSecretForm";
+import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
+import { SecretOverviewDynamicSecretRow } from "./components/SecretOverviewDynamicSecretRow";
+import { SecretOverviewFolderRow } from "./components/SecretOverviewFolderRow";
+import {
+ SecretNoAccessOverviewTableRow,
+ SecretOverviewTableRow
+} from "./components/SecretOverviewTableRow";
+import { SecretSearchInput } from "./components/SecretSearchInput";
+import { SecretTableResourceCount } from "./components/SecretTableResourceCount";
+import { SecretV2MigrationSection } from "./components/SecretV2MigrationSection";
+import { SelectionPanel } from "./components/SelectionPanel/SelectionPanel";
+
+export enum EntryType {
+ FOLDER = "folder",
+ SECRET = "secret"
+}
+
+enum RowType {
+ Folder = "folder",
+ DynamicSecret = "dynamic",
+ Secret = "secret"
+}
+
+type Filter = {
+ [key in RowType]: boolean;
+};
+
+const DEFAULT_FILTER_STATE = {
+ [RowType.Folder]: true,
+ [RowType.DynamicSecret]: true,
+ [RowType.Secret]: true
+};
+
+export const OverviewPage = () => {
+ const { t } = useTranslation();
+
+ const router = useRouter();
+ const navigate = useNavigate({
+ from: "/secret-manager/$projectId/overview"
+ });
+ const routerSearch = useSearch({
+ from: "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/overview/",
+ select: (el) => ({
+ secretPath: el.secretPath,
+ search: el.search
+ })
+ });
+ const [scrollOffset, setScrollOffset] = useState(0);
+ const [debouncedScrollOffset] = useDebounce(scrollOffset);
+ const { permission } = useProjectPermission();
+
+ const { currentWorkspace } = useWorkspace();
+ const isProjectV3 = currentWorkspace?.version === ProjectVersion.V3;
+ const workspaceId = currentWorkspace?.id as string;
+ const projectSlug = currentWorkspace?.slug as string;
+ const [searchFilter, setSearchFilter] = useState("");
+ const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(searchFilter);
+ const secretPath = (routerSearch?.secretPath as string) || "/";
+
+ const [filter, setFilter] = useState
+ 
+
+ );
+ }
+
+ const canViewOverviewPage = Boolean(userAvailableEnvs.length);
+ // This is needed to also show imports from other paths – right now those are missing.
+ // const combinedKeys = [...secKeys, ...secretImports.map((impSecrets) => impSecrets?.data?.map((impSec) => impSec.secrets?.map((impSecKey) => impSecKey.key))).flat().flat()];
+
+ const isTableEmpty = totalCount === 0;
+
+ const isTableFiltered =
+ Boolean(Object.values(filter).filter((enabled) => !enabled).length) ||
+ userAvailableEnvs.length !== visibleEnvs.length;
+
+ if (!isProjectV3)
+ return (
+
+
+
+ );
+
+ return (
+
+
+ {t("common.head-title", { title: t("dashboard.title") })}
+
+
+
+
+
+ handlePopUpToggle("addSecretsInAllEnvs", isOpen)}
+ >
+ e.preventDefault()}
+ >
+ handlePopUpClose("addSecretsInAllEnvs")}
+ />
+
+
+ handlePopUpToggle("addFolder", isOpen)}
+ >
+
+
+
+ handlePopUpToggle("updateFolder", isOpen)}
+ >
+
+ )?.name}
+ onUpdateFolder={handleFolderUpdate}
+ />
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
new file mode 100644
index 000000000..aabd7899e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/CreateSecretForm/CreateSecretForm.tsx
@@ -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
+
+
+
+
+
+
+
+
+
+ Secrets Overview
++ Inject your secrets using + + Infisical CLI + + , + + Infisical API + + , + + Infisical SDKs + + , and + + more + + . +
+
+
+
+ {userAvailableEnvs.length > 0 && (
+
+
+
+
+
+
+
+
+ {/*
+ }
+ // onClick={onCreateTag}
+ >
+ Create an environment
+
+ */}
+ Filter project resources
+ {
+ e.preventDefault();
+ handleToggleRowType(RowType.Folder);
+ }}
+ icon={filter[RowType.Folder] &&
+ {
+ e.preventDefault();
+ handleToggleRowType(RowType.DynamicSecret);
+ }}
+ icon={
+ filter[RowType.DynamicSecret] &&
+ {
+ e.preventDefault();
+ handleToggleRowType(RowType.Secret);
+ }}
+ icon={filter[RowType.Secret] &&
+ Choose visible environments
+ {userAvailableEnvs.map((availableEnv) => {
+ const { id: envId, name } = availableEnv;
+
+ const isEnvSelected = visibleEnvs.map((env) => env.id).includes(envId);
+ return (
+ {
+ e.preventDefault();
+ handleEnvSelect(envId);
+ }}
+ key={envId}
+ disabled={visibleEnvs?.length === 1}
+ icon={isEnvSelected &&
+ );
+ })}
+
+
+ )}
+
+
+
+
+
+
+
+ {name}
+
+ }
+ onClick={() => handlePopUpOpen("addSecretsInAllEnvs")}
+ className="h-10 rounded-r-none"
+ >
+ Add Secret
+
+ handlePopUpToggle("misc", isOpen)}
+ >
+
+
+
+
+
+
+
+
+ )}
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("addFolder");
+ handlePopUpClose("misc");
+ }}
+ isDisabled={!isAllowed}
+ variant="outline_bg"
+ className="h-10"
+ isFullWidth
+ >
+ Add Folder
+
+ )}
+
+
+
+ setScrollOffset(e.currentTarget.scrollLeft)}
+ className="thin-scrollbar rounded-b-none"
+ >
+
+
+
+
+ {!isOverviewLoading && totalCount > 0 && (
+
+ |
+
+
+
+
+ |
+ {visibleEnvs?.map(({ name, slug }, index) => {
+ const envSecKeyCount = getEnvSecretKeyCount(slug);
+ const importedSecKeyCount = getEnvImportedSecretKeyCount(slug);
+ const missingKeyCount = secKeys.length - envSecKeyCount - importedSecKeyCount;
+
+ return (
+
+
+
+ {missingKeyCount > 0 && (
+
+
+ {missingKeyCount}
+
+ |
+ );
+ })}
+
|---|---|
|
+ |
+ |
|
+ |
+ |
|
+ |
+ |
| + + | + {visibleEnvs?.map(({ name, slug }) => ( +
+
+
+
+ |
+ ))}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/index.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/index.tsx
new file mode 100644
index 000000000..8224cdb25
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/FolderBreadCrumbs/index.tsx
@@ -0,0 +1 @@
+export { FolderBreadCrumbs } from "./FolderBreadCrumbs";
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx
new file mode 100644
index 000000000..f814b336b
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewDynamicSecretRow/SecretOverviewDynamicSecretRow.tsx
@@ -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 (
+ onFolderCrumbClick(0)}
+ onKeyDown={() => null}
+ role="button"
+ tabIndex={0}
+ >
+
+ {(secretPath || "")
+ .split("/")
+ .filter(Boolean)
+ .map((path, index, arr) => (
+ onFolderCrumbClick(index + 1)}
+ onKeyDown={() => null}
+ role="button"
+ tabIndex={0}
+ >
+ {path}
+
+ ))}
+
+
+
+
+ {dynamicSecretName}
+
+
+
+ {
+ onToggleFolderEdit(folderName);
+ e.stopPropagation();
+ }}
+ >
+
+
+
+ {
+ onToggleFolderSelect(folderName);
+ }}
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
+ className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+ />
+
+ {folderName}
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx
new file mode 100644
index 000000000..c6c32ea2e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretOverviewTableRow/SecretNoAccessOverviewTableRow.tsx
@@ -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) => (
+
+ (
+
+
+ {isDirty ? (
+ <>
+
+ {(isAllowed) => (
+
+
+ {(isAllowed) => (
+
+
+ {(isAllowed) => (
+
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+
+
+
+
+ e.preventDefault()} // prevents secret input from displaying value on open
+ >
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ NO ACCESS
+
+
+
+
+
+
+
+
+
+ {
+ onToggleSecretSelect(secretKey);
+ }}
+ onClick={(e) => {
+ e.stopPropagation();
+ }}
+ className={twMerge("hidden group-hover:flex", isSelected && "flex")}
+ />
+
+ {secretKey}
+
+
+
+ {!isSecretEmpty && (
+
+
+ )}
+ {isSecretEmpty && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ | + Environment + | ++ Value + | +
|---|---|
|
+
+ {name}
+ {isImportedSecret && (
+
+ |
+
+ |
+
+
+ {({ activeIndex }) => (
+ <>
+
+
+ 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" : ""
+ }`
+ }
+ >
+
+
+
+
+ )}
+
+ {
+ setIsOpen(false);
+ onChange("");
+ }}
+ {...props}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx
new file mode 100644
index 000000000..dcc0b40fa
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretSearchInput/components/QuickSearchDynamicSecretItem.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+ {
+ 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 && (
+ onChange("")}
+ className="absolute right-2 text-primary"
+ ariaLabel="Clear search"
+ >
+
+ )}
+
+
+
+
+ {reverseTruncate(groupDynamicSecret.path)}
+
+
+
+ {reverseTruncate(groupFolder.path)}
+
+
+ );
+};
+
+export const QuickSearchModal = ({
+ isOpen,
+ isSingleEnv,
+ onOpenChange,
+ ...props
+}: QuickSearchModalProps) => {
+ return (
+
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+ !show)) &&
+ "border-primary/50 text-primary"
+ )}
+ >
+
+
+
+
+ Filter By
+ {
+ e.preventDefault();
+ handleToggleShowType(RowType.Folder);
+ }}
+ icon={showFilter[RowType.Folder] &&
+ {
+ e.preventDefault();
+ handleToggleShowType(RowType.DynamicSecret);
+ }}
+ icon={showFilter[RowType.DynamicSecret] &&
+ {
+ e.preventDefault();
+ handleToggleShowType(RowType.Secret);
+ }}
+ icon={showFilter[RowType.Secret] &&
+ {tags && tags.length > 0 && (
+
+
+ Filter Secrets by Tag(s)
+ {tags.map(({ id, slug, color }) => (
+ {
+ evt.preventDefault();
+ handleToggleTag(slug);
+ }}
+ key={id}
+ icon={filterTags[slug] &&
+ ))}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ {slug}
+
+
+ {/* eslint-disable-next-line no-nested-ternary */}
+ {isEnabled ? (
+ // eslint-disable-next-line no-nested-ternary
+ isLoading ? (
+
+
+ {showFilter[RowType.Folder] &&
+ Object.entries(folders).map(([key, folderGroup]) => (
+
+
+ )
+ ) : (
+
+
+
+
+ {reverseTruncate(groupSecret.path ?? "")}
+
+
+
+
+ {tagMatch && (
+
+
+ )}
+ {isSingleEnv ? (
+ {
+ e.stopPropagation();
+ const el = envSlugMap.get(groupSecret.env)?.name;
+ if (el) {
+ handleCopy(groupSecret.value!, el);
+ }
+ }}
+ >
+
+ ) : (
+
+
+
+
+
+
+ Copy Value From...
+ {secretGroup.map((secret) => (
+ {
+ e.stopPropagation();
+ const el = envSlugMap.get(secret.env)?.name;
+ if (el) {
+ handleCopy(secret.value!, el);
+ }
+ }}
+ key={secret.id}
+ >
+
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ Hover to Reveal...
+ {secretGroup.map((secret) => (
+ {
+ e.stopPropagation();
+ const el = envSlugMap.get(secret.env)?.name;
+ if (el) {
+ handleCopy(secret.value!, el);
+ }
+ }}
+ key={secret.id}
+ >
+
+
+
+ ))}
+
+
+
+ {envSlugMap.get(secret.env)?.name}
+
+ {!isSingleEnv && (
+
+ {envSlugMap.get(secret.env)?.name}
+
+ )}
+
+ + {secret.value || "EMPTY"} +
++ *************************** +
+
+ {importCount > 0 && (
+
+ Total import count{" "}
+ (matching filters)
+
+ }
+ >
+
+ )}
+ {folderCount > 0 && (
+
+ Total folder count{" "}
+ (matching filters)
+
+ }
+ >
+
+ )}
+ {dynamicSecretCount > 0 && (
+
+ Total dynamic secret count{" "}
+ (matching filters)
+
+ }
+ >
+
+ )}
+ {secretCount > 0 && (
+
+ Total secret count{" "}
+ (matching filters)
+
+ }
+ >
+
+ )}
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/index.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/index.tsx
new file mode 100644
index 000000000..d2b5705fa
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretTableResourceCount/index.tsx
@@ -0,0 +1 @@
+export { SecretTableResourceCount } from "./SecretTableResourceCount";
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx
new file mode 100644
index 000000000..8c0a0fadf
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/SecretV2MigrationSection.tsx
@@ -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 (
+
+
+
+
+
+
+
+
+
+ {isUpgrading && (
+ handlePopUpToggle("migrationInfo", isOpen)}
+ >
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/index.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/index.tsx
new file mode 100644
index 000000000..71c7bdc9c
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SecretV2MigrationSection/index.tsx
@@ -0,0 +1 @@
+export { SecretV2MigrationSection } from "./SecretV2MigrationSection";
diff --git a/frontend-v2/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx
new file mode 100644
index 000000000..b2ea0e917
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/OverviewPage/components/SelectionPanel/SelectionPanel.tsx
@@ -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
+
+ )}
+
+
+ Please wait
+ Upgrading secrets engine...
+
+
+ Upgrade secrets engine version
++ 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. +
++ 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. +
++ The upgrade takes only 1-2 minutes and will not cause any downtime. +
+ + {didProjectUpgradeFailed && ( +
+
+
+
+
+
+
+
+
+
+
+
+ {selectedCount} Selected
+ {shouldShowDelete && (
+ }
+ className="ml-4"
+ onClick={() => handlePopUpOpen("bulkDeleteEntries")}
+ size="xs"
+ >
+ Delete
+
+ )}
+
+ {data && (
+ handlePopUpToggle("deleteRole", isOpen)}
+ deleteKey="confirm"
+ onDeleteApproved={() => onDeleteRoleSubmit()}
+ />
+
+ );
+};
+
+export const RoleDetailsBySlugPage = () => {
+ const { t } = useTranslation();
+ return (
+ <>
+
+ }
+ onClick={() =>
+ navigate({
+ to: `/${currentWorkspace?.type}/$projectId/access` as const,
+ params: {
+ projectId
+ },
+ search: {
+ selectedTab: ProjectAccessControlTabs.Roles
+ }
+ })
+ }
+ className="mb-4"
+ >
+ Roles
+
+
+ )}
+
+
+
+
+
+
+ {(isAllowed) => (
+
+ handlePopUpOpen("role", {
+ roleSlug
+ })
+ }
+ disabled={!isAllowed}
+ >
+ Edit Role
+
+ )}
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("deleteRole")}
+ disabled={!isAllowed}
+ >
+ Delete Role
+
+ )}
+
+
+
+ )}
+
+ {data.name}
+ {isCustomRole && ( +
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/RoleDetailsBySlugPage/components/RoleModal.tsx b/frontend-v2/src/pages/secret-manager/RoleDetailsBySlugPage/components/RoleModal.tsx
new file mode 100644
index 000000000..25e33aed4
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/RoleDetailsBySlugPage/components/RoleModal.tsx
@@ -0,0 +1,204 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useNavigate } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import {
+ useCreateProjectRole,
+ useGetProjectRoleBySlug,
+ useUpdateProjectRole
+} from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+import { slugSchema } from "@app/lib/schemas";
+
+const schema = z
+ .object({
+ name: z.string(),
+ description: z.string(),
+ slug: slugSchema({ min: 1 })
+ })
+ .required();
+
+export type FormData = z.infer
+
+ {(isAllowed) => {
+ return (
+
+ {
+ handlePopUpOpen("role", {
+ roleSlug
+ });
+ }}
+ >
+
+
+ );
+ }}
+
+ )}
+
+ Project Role Details
+ {isCustomRole && ( +
+
+
+
+ Role ID
+
+
+ {data.id}
+
+
+ {
+ navigator.clipboard.writeText(data.id);
+ setCopyTextId("Copied");
+ }}
+ >
+
+
+
+
+
+ Name
+{data.name}
+
+
+ Slug
+{data.slug}
+
+
+ Description
++ {data.description?.length ? data.description : "-"} +
+
+
+ {t("common.head-title", { title: t("approval.title") })}
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
new file mode 100644
index 000000000..a84487c21
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
@@ -0,0 +1,464 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/jsx-no-useless-fragment */
+import { useMemo, useState } from "react";
+import {
+ faCheck,
+ faCheckCircle,
+ faChevronDown,
+ faLock,
+ faPlus
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import {
+ Button,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+ EmptyState,
+ Tooltip
+} from "@app/components/v2";
+import { Badge } from "@app/components/v2/Badge";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useSubscription,
+ useUser,
+ useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetWorkspaceUsers } from "@app/hooks/api";
+import {
+ accessApprovalKeys,
+ useGetAccessApprovalPolicies,
+ useGetAccessApprovalRequests,
+ useGetAccessRequestsCount
+} from "@app/hooks/api/accessApproval/queries";
+import { TAccessApprovalRequest } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel } from "@app/hooks/api/policies/enums";
+import { queryClient } from "@app/hooks/api/reactQuery";
+import { ApprovalStatus, TWorkspaceUser } from "@app/hooks/api/types";
+
+import { RequestAccessModal } from "./components/RequestAccessModal";
+import { ReviewAccessRequestModal } from "./components/ReviewAccessModal";
+
+const generateRequestText = (request: TAccessApprovalRequest, userId: string) => {
+ const { isTemporary } = request;
+
+ return (
+
+
+
+
+ Secret Requests
+ {Boolean(secretApprovalReqCount?.open) && (
+ {secretApprovalReqCount?.open}
+ )}
+
+
+ Access Requests
+ {Boolean(accessApprovalRequestCount?.pendingCount) && (
+ {accessApprovalRequestCount?.pendingCount}
+ )}
+
+ Policies
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Approval Workflows
++ Create approval policies for any modifications to secrets in sensitive environments + and folders. +
+
+
+ );
+};
+
+export const AccessApprovalRequest = ({
+ projectSlug,
+ projectId
+}: {
+ projectSlug: string;
+ projectId: string;
+}) => {
+ const [selectedRequest, setSelectedRequest] = useState<
+ | (TAccessApprovalRequest & {
+ user: TWorkspaceUser["user"] | null;
+ isRequestedByCurrentUser: boolean;
+ isApprover: boolean;
+ })
+ | null
+ >(null);
+
+ const { handlePopUpOpen, popUp, handlePopUpClose } = usePopUp([
+ "requestAccess",
+ "reviewRequest",
+ "upgradePlan"
+ ] as const);
+ const { permission } = useProjectPermission();
+ const { user } = useUser();
+ const { subscription } = useSubscription();
+ const { currentWorkspace } = useWorkspace();
+
+ const { data: members } = useGetWorkspaceUsers(projectId, true);
+ const membersGroupById = members?.reduce
+ Requested {isTemporary ? "temporary" : "permanent"} access to{" "}
+
+
+ {request.policy.secretPath}
+
+ in
+
+ {request.environmentName}
+
+
+ {request.requestedByUserId === userId && (
+
+ Requested By You
+
+ )}
+
+
+
+
+
+
+
+ {!!policies && (
+ {
+ queryClient.invalidateQueries({
+ queryKey: accessApprovalKeys.getAccessApprovalRequests(
+ projectSlug,
+ envFilter,
+ requestedByFilter
+ )
+ });
+ handlePopUpClose("requestAccess");
+ }}
+ />
+ )}
+
+ {!!selectedRequest && (
+ {
+ handlePopUpClose("reviewRequest");
+ setSelectedRequest(null);
+ }}
+ />
+ )}
+
+ handlePopUpClose("upgradePlan")}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx
new file mode 100644
index 000000000..486ab5be6
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/RequestAccessModal.tsx
@@ -0,0 +1,26 @@
+import { Modal, ModalContent } from "@app/components/v2";
+import { TAccessApprovalPolicy } from "@app/hooks/api/types";
+
+import { SpecificPrivilegeSecretForm } from "../../../../access/-components/MembersTab/components/MemberRoleForm/SpecificPrivilegeSection";
+
+export const RequestAccessModal = ({
+ isOpen,
+ onOpenChange,
+ policies
+}: {
+ isOpen: boolean;
+ onOpenChange: (isOpen: boolean) => void;
+ policies: TAccessApprovalPolicy[];
+}) => {
+ return (
+
+
+
+
+ Access Requests
+
+
+ Request access to secrets in sensitive environments and folders.
+
+
+
+
+
+
+
+
+ setStatusFilter("open")}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") setStatusFilter("open");
+ }}
+ className={
+ statusFilter === "close" ? "text-gray-500 duration-100 hover:text-gray-400" : ""
+ }
+ >
+
+ setStatusFilter("close")}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") setStatusFilter("close");
+ }}
+ >
+
+
+
+
+ }
+ >
+ Environments
+
+
+
+ Select an environment
+ {currentWorkspace?.environments.map(({ slug, name }) => (
+ setEnvFilter((state) => (state === slug ? undefined : slug))}
+ key={`request-filter-${slug}`}
+ icon={envFilter === slug &&
+ ))}
+
+
+ {!!permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Member) && (
+
+
+
+ }
+ >
+ Requested By
+
+
+
+ Select an author
+ {members?.map(({ user: membershipUser, id }) => (
+
+ setRequestedByFilter((state) => (state === id ? undefined : id))
+ }
+ key={`request-filter-member-${id}`}
+ icon={requestedByFilter === id &&
+ ))}
+
+
+ )}
+
+
+ {filteredRequests?.length === 0 && (
+
+
+
+ )}
+ {!!filteredRequests?.length &&
+ filteredRequests?.map((request) => {
+ const details = generateRequestDetails(request);
+
+ return (
+ {
+ if (
+ (!details.isApprover ||
+ details.isReviewedByUser ||
+ details.isRejectedByAnyone ||
+ details.isAccepted) &&
+ !(
+ details.isSoftEnforcement &&
+ details.isRequestedByCurrentUser &&
+ !details.isAccepted
+ )
+ )
+ return;
+ if (membersGroupById?.[request.requestedByUserId].user) {
+ setSelectedRequest({
+ ...request,
+ user: membersGroupById?.[request.requestedByUserId].user,
+ isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+ isApprover: details.isApprover
+ });
+ }
+
+ handlePopUpOpen("reviewRequest");
+ }}
+ onKeyDown={(evt) => {
+ if (
+ !details.isApprover ||
+ details.isAccepted ||
+ details.isReviewedByUser ||
+ details.isRejectedByAnyone
+ )
+ return;
+ if (evt.key === "Enter") {
+ if (membersGroupById?.[request.requestedByUserId].user) {
+ setSelectedRequest({
+ ...request,
+ user: membersGroupById?.[request.requestedByUserId].user,
+ isRequestedByCurrentUser: details.isRequestedByCurrentUser,
+ isApprover: details.isApprover
+ });
+ }
+
+ handlePopUpOpen("reviewRequest");
+ }
+ }}
+ >
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {membersGroupById?.[request.requestedByUserId]?.user && (
+ <>
+ Requested {formatDistance(new Date(request.createdAt), new Date())}{" "}
+ ago by{" "}
+ {membersGroupById?.[request.requestedByUserId]?.user?.firstName}{" "}
+ {membersGroupById?.[request.requestedByUserId]?.user?.lastName} (
+ {membersGroupById?.[request.requestedByUserId]?.user?.email}){" "}
+
+ )}
+
+
+ {details.isApprover && (
+
+ {details.displayData.label}
+
+ )}
+
+
+
+
+ {request.user?.firstName} {request.user?.lastName} ({request.user?.email})
+ {" "}
+ is requesting access to the following resource:
+
+
+
+
+
+
+
+ Requested path:
+ {accessDetails.env + accessDetails.secretPath || ""}
+
+
+
+ Permissions:
+ {requestedAccess}
+
+
+
+ Access Type:
+ {getAccessLabel()}
+
+
+
+
+
+ {isSoftEnforcement && request.isRequestedByCurrentUser && !request.isApprover && (
+
+ setByPassApproval(checked === true)}
+ isChecked={byPassApproval}
+ id="byPassApproval"
+ checkIndicatorBg="text-white"
+ className={byPassApproval ? "border-red bg-red hover:bg-red-600" : ""}
+ >
+
+ Approve without waiting for requirements to be met (bypass policy protection)
+
+
+
+ )}
+
+
+
+
+
+
+ handlePopUpToggle("policyForm", isOpen)}
+ members={members}
+ editValues={popUp.policyForm.data as TAccessApprovalPolicy}
+ />
+ handlePopUpToggle("deletePolicy", isOpen)}
+ onDeleteApproved={handleDeletePolicy}
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text="You can add secret approval policy if you switch to Infisical's Enterprise plan."
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
new file mode 100644
index 000000000..9f5aeec5a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
@@ -0,0 +1,457 @@
+import { useEffect, useMemo } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+ Button,
+ FilterableSelect,
+ FormControl,
+ Input,
+ Modal,
+ ModalContent,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { getMemberLabel } from "@app/helpers/members";
+import { policyDetails } from "@app/helpers/policies";
+import {
+ useCreateSecretApprovalPolicy,
+ useListWorkspaceGroups,
+ useUpdateSecretApprovalPolicy
+} from "@app/hooks/api";
+import {
+ useCreateAccessApprovalPolicy,
+ useUpdateAccessApprovalPolicy
+} from "@app/hooks/api/accessApproval";
+import { ApproverType, TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
+import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
+import { TWorkspaceUser } from "@app/hooks/api/users/types";
+
+type Props = {
+ isOpen?: boolean;
+ onToggle: (isOpen: boolean) => void;
+ members?: TWorkspaceUser[];
+ projectId: string;
+ projectSlug: string;
+ editValues?: TAccessApprovalPolicy;
+};
+
+const formSchema = z
+ .object({
+ environment: z.object({ slug: z.string(), name: z.string() }),
+ name: z.string().optional(),
+ secretPath: z.string().optional(),
+ approvals: z.number().min(1),
+ userApprovers: z
+ .object({ type: z.literal(ApproverType.User), id: z.string() })
+ .array()
+ .default([]),
+ groupApprovers: z
+ .object({ type: z.literal(ApproverType.Group), id: z.string() })
+ .array()
+ .default([]),
+ policyType: z.nativeEnum(PolicyType),
+ enforcementLevel: z.nativeEnum(EnforcementLevel)
+ })
+ .superRefine((data, ctx) => {
+ if (!(data.groupApprovers.length || data.userApprovers.length)) {
+ ctx.addIssue({
+ path: ["userApprovers"],
+ code: z.ZodIssueCode.custom,
+ message: "At least one approver should be provided"
+ });
+ ctx.addIssue({
+ path: ["groupApprovers"],
+ code: z.ZodIssueCode.custom,
+ message: "At least one approver should be provided"
+ });
+ }
+ });
+
+type TFormSchema = z.infer
+
+
+ Policies
+
+
+ Implement granular policies for access requests and secrets management.
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+ | Name | +Environment | +Secret Path | +Eligible Approvers | +Eligible Group Approvers | +Approval Required | +
+ |
+ + |
|---|---|---|---|---|---|---|---|
|
+ |
+
+
+
+ {labels.members ?? "-"}
+{labels.groups ?? "-"}
+
+
+
+
+ setStatusFilter("open")}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") setStatusFilter("open");
+ }}
+ className={
+ statusFilter === "close" ? "text-gray-500 duration-100 hover:text-gray-400" : ""
+ }
+ >
+
+ setStatusFilter("close")}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") setStatusFilter("close");
+ }}
+ >
+
+
+
+
+ }
+ >
+ Environments
+
+
+
+ Select an environment
+ {currentWorkspace?.environments.map(({ slug, name }) => (
+ setEnvFilter((state) => (state === slug ? undefined : slug))}
+ key={`request-filter-${slug}`}
+ icon={envFilter === slug &&
+ ))}
+
+
+ {!!permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Member) && (
+
+
+
+ }
+ >
+ Author
+
+
+
+ Select an author
+ {members?.map(({ user, id }) => (
+
+ setCommitterFilter((state) => (state === user.id ? undefined : user.id))
+ }
+ key={`request-filter-member-${id}`}
+ icon={
+ committerFilter === user.id &&
+ ))}
+
+
+ )}
+
+
+ {isRequestListEmpty && (
+
+ {group?.map((secretApproval) => {
+ const {
+ id: reqId,
+ commits,
+ createdAt,
+ reviewers,
+ status,
+ committerUser,
+ isReplicated: isReplication
+ } = secretApproval;
+ const isReviewed = reviewers.some(
+ ({ status: reviewStatus, userId }) =>
+ userId === userSession.id && reviewStatus === ApprovalStatus.APPROVED
+ );
+ return (
+
+ ))}
+ {(isFetchingNextApprovalRequest || isApprovalRequestLoading) && (
+
+ {hasNextApprovalPage && (
+
+ )}
+
+
+ )}
+ {secretApprovalRequests?.pages?.map((group, i) => (
+ setSelectedApprovalId(secretApproval.id)}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") setSelectedApprovalId(secretApproval.id);
+ }}
+ >
+
+ );
+ })}
+
+
+
+ Opened {formatDistance(new Date(createdAt), new Date())} ago by{" "}
+ {committerUser?.firstName || ""} {committerUser?.lastName || ""} (
+ {committerUser?.email}){isReplication && " via replication"}
+ {!isReviewed && status === "open" && " - Review required"}
+
+
+ {Array.apply(0, Array(3)).map((_x, index) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+ );
+ }
+
+ if (hasMerged && status === "close")
+ return (
+
+
+
+ setByPassApproval(checked === true)}
+ isChecked={byPassApproval}
+ id="byPassApproval"
+ checkIndicatorBg="text-white"
+ className={twMerge(
+ "mr-2",
+ byPassApproval ? "border-red bg-red hover:bg-red-600" : ""
+ )}
+ >
+
+ Merge without waiting for approval (bypass secret change policy)
+
+
+ {byPassApproval && (
+
+ setBypassReason(e.target.value)}
+ placeholder="Enter reason for bypass (min 10 chars)"
+ leftIcon={
+ )}
+
+ )}
+
+
+ {canApprove || isSoftEnforcement ? (
+ <>
+
+ }
+ isDisabled={
+ !(
+ (isMergable && canApprove) ||
+ (isSoftEnforcement && byPassApproval && isValidBypassReason(bypassReason))
+ )
+ }
+ isLoading={isMerging}
+ onClick={handleSecretApprovalRequestMerge}
+ colorSchema={isSoftEnforcement && !canApprove ? "danger" : "primary"}
+ variant="solid"
+ >
+ Merge
+
+
+ ) : (
+
+ Only approvers can merge
+ )}
+
+
+ );
+
+ return (
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
new file mode 100644
index 000000000..b663109a8
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
@@ -0,0 +1,183 @@
+import { faExclamationTriangle, faInfo } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import {
+ SecretInput,
+ Table,
+ TableContainer,
+ Tag,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { CommitType, SecretV3Raw, TSecretApprovalSecChange, WsTag } from "@app/hooks/api/types";
+
+export type Props = {
+ op: CommitType;
+ secretVersion?: SecretV3Raw;
+ newVersion?: Omit
+
+
+
+
+ Secret already exist
;
+ if (op === CommitType.UPDATE) return Secret not found
;
+ return null;
+};
+
+export const SecretApprovalRequestChangeItem = ({
+ op,
+ secretVersion,
+ newVersion,
+ presentSecretVersionNumber,
+ hasMerged,
+ conflicts
+}: Props) => {
+ // meaning request has changed
+ const isStale = (secretVersion?.version || 1) < presentSecretVersionNumber;
+ const itemConflict =
+ hasMerged && conflicts.find((el) => el.op === op && el.secretId === newVersion?.id);
+ const hasConflict = Boolean(itemConflict);
+
+ return (
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
new file mode 100644
index 000000000..04bee3042
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
@@ -0,0 +1,317 @@
+import { ReactNode } from "react";
+import {
+ faArrowLeft,
+ faCheck,
+ faCheckCircle,
+ faCircle,
+ faCodeBranch,
+ faFolder,
+ faXmarkCircle
+} 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, ContentLoader, EmptyState, IconButton, Tooltip } from "@app/components/v2";
+import { useUser } from "@app/context";
+import {
+ useGetSecretApprovalRequestDetails,
+ useUpdateSecretApprovalReviewStatus
+} from "@app/hooks/api";
+import { ApprovalStatus, CommitType } from "@app/hooks/api/types";
+import { formatReservedPaths } from "@app/lib/fn/string";
+
+import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
+import { SecretApprovalRequestChangeItem } from "./SecretApprovalRequestChangeItem";
+
+export const generateCommitText = (commits: { op: CommitType }[] = []) => {
+ const score: Record
+
+ {generateItemTitle(op)}
+ {!hasMerged && isStale && (
+
+
+ )}
+ {hasMerged && hasConflict && (
+
+
+
+
+ )}
+ {generateConflictText(op)}
+ | } + | Secret | +Value | +Comment | +Tags | +
|---|---|---|---|---|
| OLD | +{secretVersion?.secretKey} | +
+ |
+ {secretVersion?.secretComment} | +
+ {secretVersion?.tags?.map(({ slug, id: tagId, color }) => (
+ {slug}
+ |
+
| NEW | +{newVersion?.secretKey} | +
+ |
+ {newVersion?.secretComment} | +
+ {newVersion?.tags?.map(({ slug, id: tagId, color }) => (
+ {slug}
+ |
+
| + {op === CommitType.CREATE ? newVersion?.secretKey : secretVersion?.secretKey} + | +
+ |
+ + {op === CommitType.CREATE + ? newVersion?.secretComment + : secretVersion?.secretComment} + | +
+ {(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
+ ({ slug, id: tagId, color }) => (
+ {slug}
+ |
+
+
+ );
+ }
+
+ if (!isSecretApprovalRequestSuccess)
+ return (
+
+
+ );
+
+ const isMergable =
+ secretApprovalRequestDetails?.policy?.approvals <=
+ secretApprovalRequestDetails?.policy?.approvers?.filter(
+ ({ userId }) => reviewedUsers?.[userId] === ApprovalStatus.APPROVED
+ ).length;
+ const hasMerged = secretApprovalRequestDetails?.hasMerged;
+
+ return (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/index.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/index.tsx
new file mode 100644
index 000000000..5752309ca
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/index.tsx
@@ -0,0 +1 @@
+export { SecretApprovalRequest } from "./SecretApprovalRequest";
diff --git a/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/route.tsx b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/route.tsx
new file mode 100644
index 000000000..1aff87f37
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretApprovalsPage/route.tsx
@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretApprovalsPage } from "./SecretApprovalsPage";
+
+const SecretApprovalPageQueryParams = z.object({
+ requestId: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+ "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/approval/"
+)({
+ component: SecretApprovalsPage,
+ validateSearch: zodValidator(SecretApprovalPageQueryParams)
+});
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
new file mode 100644
index 000000000..6fa659c5f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretDashboardPage.tsx
@@ -0,0 +1,618 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import { subject } from "@casl/ability";
+import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
+import { twMerge } from "tailwind-merge";
+
+import NavHeader from "@app/components/navigation/NavHeader";
+import { PermissionDeniedBanner } from "@app/components/permissions";
+import {
+ Checkbox,
+ ContentLoader,
+ Modal,
+ ModalContent,
+ Pagination,
+ Tooltip
+} from "@app/components/v2";
+import { ROUTE_PATHS } from "@app/const/routes";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionDynamicSecretActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
+import {
+ useGetImportedSecretsSingleEnv,
+ useGetSecretApprovalPolicyOfABoard,
+ useGetWorkspaceSnapshotList,
+ useGetWsSnapshotCount,
+ useGetWsTags
+} from "@app/hooks/api";
+import { useGetProjectSecretsDetails } from "@app/hooks/api/dashboard";
+import { DashboardSecretsOrderBy } from "@app/hooks/api/dashboard/types";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+
+import { SecretTableResourceCount } from "../OverviewPage/components/SecretTableResourceCount";
+import { SecretV2MigrationSection } from "../OverviewPage/components/SecretV2MigrationSection";
+import { ActionBar } from "./components/ActionBar";
+import { CreateSecretForm } from "./components/CreateSecretForm";
+import { DynamicSecretListView } from "./components/DynamicSecretListView";
+import { FolderListView } from "./components/FolderListView";
+import { PitDrawer } from "./components/PitDrawer";
+import { SecretDropzone } from "./components/SecretDropzone";
+import { SecretImportListView } from "./components/SecretImportListView";
+import { SecretListView, SecretNoAccessListView } from "./components/SecretListView";
+import { SnapshotView } from "./components/SnapshotView";
+import {
+ PopUpNames,
+ StoreProvider,
+ usePopUpAction,
+ usePopUpState,
+ useSelectedSecretActions,
+ useSelectedSecrets
+} from "./SecretMainPage.store";
+import { Filter, RowType } from "./SecretMainPage.types";
+
+const LOADER_TEXT = [
+ "Retrieving your encrypted secrets...",
+ "Fetching folders...",
+ "Getting secret import links..."
+];
+
+const Page = () => {
+ const { t } = useTranslation();
+ const { currentWorkspace } = useWorkspace();
+ const navigate = useNavigate({
+ from: ROUTE_PATHS.SecretDashboardPage.full
+ });
+ const routerQueryParams = useSearch({
+ from: ROUTE_PATHS.SecretDashboardPage.id
+ });
+ const environment = useParams({
+ from: ROUTE_PATHS.SecretDashboardPage.id,
+ select: (el) => el.envSlug
+ });
+
+ const { permission } = useProjectPermission();
+
+ const [isVisible, setIsVisible] = useState(false);
+
+ const {
+ offset,
+ limit,
+ orderDirection,
+ setOrderDirection,
+ setPage,
+ perPage,
+ page,
+ setPerPage,
+ orderBy
+ } = usePagination
+
+
+
+
+
+
+
+
+
+ {!hasMerged && secretApprovalRequestDetails.status === "open" && (
+ <>
+ }
+ onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.APPROVED)}
+ isLoading={isApproving}
+ isDisabled={isApproving || hasApproved || !canApprove}
+ >
+ {hasApproved ? "Approved" : "Approve"}
+
+ }
+ onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.REJECTED)}
+ isLoading={isRejecting}
+ isDisabled={isRejecting || hasRejected || !canApprove}
+ >
+ {hasRejected ? "Rejected" : "Reject"}
+
+
+ )}
+
+ {generateCommitText(secretApprovalRequestDetails.commits)}
+ {secretApprovalRequestDetails.isReplicated && (
+ (replication)
+ )}
+
+
+ {secretApprovalRequestDetails?.committerUser?.firstName || ""}
+ {secretApprovalRequestDetails?.committerUser?.lastName || ""} (
+ {secretApprovalRequestDetails?.committerUser?.email}) wants to change{" "}
+ {secretApprovalRequestDetails.commits.length} secret values in
+
+ {secretApprovalRequestDetails.environment}
+
+
+
+
+
+
+
+
+
+ {formatReservedPaths(secretApprovalRequestDetails.secretPath)}
+
+
+ {secretApprovalRequestDetails.commits.map(
+ ({ op, secretVersion, secret, ...newVersion }, index) => (
+
+
+
+
+
+ Reviewers
+
+ {secretApprovalRequestDetails?.policy?.approvers.map((requiredApprover) => {
+ const status = reviewedUsers?.[requiredApprover.userId];
+ return (
+
+
+
+ );
+ })}
+ {secretApprovalRequestDetails?.reviewers
+ .filter(
+ (reviewer) =>
+ !secretApprovalRequestDetails?.policy?.approvers?.some(
+ ({ userId }) => userId === reviewer.userId
+ )
+ )
+ .map((reviewer) => {
+ const status = reviewedUsers?.[reviewer.userId];
+ return (
+
+
+ {requiredApprover?.email}
+
+ *
+
+
+
+ {getReviewedStatusSymbol(status)}
+
+
+
+
+ );
+ })}
+
+
+ {reviewer?.email}
+
+ *
+
+
+
+ {getReviewedStatusSymbol(status)}
+
+
+
+ handlePopUpToggle("snapshots", true)}
+ />
+ togglePopUp(PopUpNames.CreateSecretForm, state)}
+ >
+
+
+
+ handlePopUpToggle("snapshots", isOpen)}
+ hasNextPage={hasNextSnapshotListPage}
+ fetchNextPage={fetchNextSnapshotList}
+ onSelectSnapshot={handleSelectSnapshot}
+ isFetchingNextPage={isFetchingNextSnapshotList}
+ />
+
+ ) : (
+ handlePopUpToggle("snapshots", true)}
+ />
+ )}
+
+ );
+};
+
+export const SecretDashboardPage = () => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+
+ {!isRollbackMode ? (
+ <>
+
+
+ {!isDetailsLoading && totalCount > 0 && (
+
+ {isNotEmpty && (
+
+
+ 0
+ ? `${
+ !allRowsSelectedOnPage.isChecked ? "Select" : "Unselect"
+ } all secrets on page`
+ : ""
+ }
+ >
+
+
+ )}
+ {canReadSecretImports && Boolean(imports?.length) && (
+
+ e.stopPropagation()}
+ isChecked={allRowsSelectedOnPage.isChecked}
+ isIndeterminate={allRowsSelectedOnPage.isIndeterminate}
+ onCheckedChange={toggleSelectAllRows}
+ />
+
+ {
+ if (evt.key === "Enter") handleSortToggle();
+ }}
+ >
+ Key
+
+ Value
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
new file mode 100644
index 000000000..6a8746d18
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/SecretMainPage.store.tsx
@@ -0,0 +1,100 @@
+import { createContext, ReactNode, useContext, useEffect, useRef } from "react";
+import { useRouter } from "@tanstack/react-router";
+import { createStore, StateCreator, StoreApi, useStore } from "zustand";
+
+import { SecretV3RawSanitized } from "@app/hooks/api/secrets/types";
+
+// akhilmhdh: Don't remove this file if ur thinking why use zustand just for selected selects state
+// This is first step and the whole secret crud will be moved to this global page scope state
+// this will allow more stuff like undo grouping stuffs etc
+type SelectedSecretState = {
+ selectedSecret: Record
+ env.slug === environment)!]}
+ projectId={workspaceId}
+ tags={tags}
+ />
+
+
+
+
+ !include).length) &&
+ "border-primary/50 text-primary"
+ )}
+ >
+
+
+
+ Filter By
+ {
+ e.preventDefault();
+ onToggleRowType(RowType.Import);
+ }}
+ icon={filter?.include[RowType.Import] &&
+ {
+ e.preventDefault();
+ onToggleRowType(RowType.Folder);
+ }}
+ icon={filter?.include[RowType.Folder] &&
+ {
+ e.preventDefault();
+ onToggleRowType(RowType.DynamicSecret);
+ }}
+ icon={
+ filter?.include[RowType.DynamicSecret] &&
+ {
+ e.preventDefault();
+ onToggleRowType(RowType.Secret);
+ }}
+ icon={filter?.include[RowType.Secret] &&
+
+
+
+ Apply Tags to Filter Secrets
+
+ {tags.map(({ id, slug, color }) => (
+ {
+ evt.preventDefault();
+ onToggleTagFilter(slug);
+ }}
+ key={id}
+ icon={filter?.tags[slug] &&
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {slug}
+
+
+
+
+
+
+
+
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
+ className="h-10 rounded-r-none"
+ isDisabled={!isAllowed}
+ >
+ Add Secret
+
+ )}
+
+ handlePopUpToggle("misc", isOpen)}
+ >
+
+
+
+
+
+
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("addFolder");
+ handlePopUpClose("misc");
+ }}
+ isDisabled={!isAllowed}
+ variant="outline_bg"
+ className="h-10 text-left"
+ isFullWidth
+ >
+ Add Folder
+
+ )}
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ if (subscription && subscription.dynamicSecret) {
+ handlePopUpOpen("addDynamicSecret");
+ handlePopUpClose("misc");
+ return;
+ }
+ handlePopUpOpen("upgradePlan");
+ }}
+ isDisabled={!isAllowed}
+ variant="outline_bg"
+ className="h-10 text-left"
+ isFullWidth
+ >
+ Add Dynamic Secret
+
+ )}
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("addSecretImport");
+ handlePopUpClose("misc");
+ }}
+ variant="outline_bg"
+ className="h-10 text-left"
+ isFullWidth
+ isDisabled={!isAllowed}
+ >
+ Add Import
+
+ )}
+
+
+
+
+ {/* all the side triggers from actions like modals etc */}
+
+
+
+
+
+
+ {(isAllowed) => (
+ }
+ className="ml-4"
+ onClick={() => handlePopUpOpen("moveSecrets")}
+ isDisabled={!isAllowed}
+ size="xs"
+ >
+ Move
+
+ )}
+
+
+ {(isAllowed) => (
+ }
+ className="ml-2"
+ onClick={() => handlePopUpOpen("bulkDeleteSecrets")}
+ isDisabled={!isAllowed}
+ size="xs"
+ >
+ Delete
+
+ )}
+
+
+
+ {Object.keys(selectedSecrets).length} Selected
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx
new file mode 100644
index 000000000..1acb24e8f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AwsIamInputForm.tsx
@@ -0,0 +1,303 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ accessKey: z.string().trim().min(1),
+ secretAccessKey: z.string().trim().min(1),
+ region: z.string().trim().min(1),
+ awsPath: z.string().trim().optional(),
+ permissionBoundaryPolicyArn: z.string().trim().optional(),
+ policyDocument: z.string().trim().optional(),
+ userGroups: z.string().trim().optional(),
+ policyArns: z.string().trim().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx
new file mode 100644
index 000000000..55cebe173
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/AzureEntraIdInputForm.tsx
@@ -0,0 +1,388 @@
+import { Controller, useForm } from "react-hook-form";
+import {
+ faArrowUpRightFromSquare,
+ faBookOpen,
+ faCheckCircle,
+ faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger
+} from "@app/components/v2/Dropdown/Dropdown";
+import { Tooltip } from "@app/components/v2/Tooltip";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { useGetDynamicSecretProviderData } from "@app/hooks/api/dynamicSecret/queries";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ selectedUsers: z.array(
+ z.object({
+ id: z.string().min(1),
+ name: z.string().min(1),
+ email: z.string().min(1)
+ })
+ ),
+ provider: z.object({
+ tenantId: z.string().min(1),
+ applicationId: z.string().min(1),
+ clientSecret: z.string().min(1)
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z
+ .string()
+ .min(1)
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx
new file mode 100644
index 000000000..70916a4a7
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CassandraInputForm.tsx
@@ -0,0 +1,363 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ keyspace: z.string().optional(),
+ localDataCenter: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
new file mode 100644
index 000000000..82009353c
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/CreateDynamicSecretForm.tsx
@@ -0,0 +1,461 @@
+import { useState } from "react";
+import { DiRedis } from "react-icons/di";
+import {
+ SiApachecassandra,
+ SiElasticsearch,
+ SiFiles,
+ SiMongodb,
+ SiRabbitmq,
+ SiSap,
+ SiSnowflake
+} from "react-icons/si";
+import { VscAzure } from "react-icons/vsc";
+import { faAws } from "@fortawesome/free-brands-svg-icons";
+import { faClock, faDatabase } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Modal, ModalContent } from "@app/components/v2";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+import { AwsElastiCacheInputForm } from "./AwsElastiCacheInputForm";
+import { AwsIamInputForm } from "./AwsIamInputForm";
+import { AzureEntraIdInputForm } from "./AzureEntraIdInputForm";
+import { CassandraInputForm } from "./CassandraInputForm";
+import { ElasticSearchInputForm } from "./ElasticSearchInputForm";
+import { LdapInputForm } from "./LdapInputForm";
+import { MongoAtlasInputForm } from "./MongoAtlasInputForm";
+import { MongoDBDatabaseInputForm } from "./MongoDBInputForm";
+import { RabbitMqInputForm } from "./RabbitMqInputForm";
+import { RedisInputForm } from "./RedisInputForm";
+import { SapAseInputForm } from "./SapAseInputForm";
+import { SapHanaInputForm } from "./SapHanaInputForm";
+import { SnowflakeInputForm } from "./SnowflakeInputForm";
+import { SqlDatabaseInputForm } from "./SqlDatabaseInputForm";
+import { TotpInputForm } from "./TotpInputForm";
+
+type Props = {
+ isOpen?: boolean;
+ onToggle: (isOpen: boolean) => void;
+ projectSlug: string;
+ environment: string;
+ secretPath: string;
+};
+
+enum WizardSteps {
+ SelectProvider = "select-provider",
+ ProviderInputs = "provider-inputs"
+}
+
+const DYNAMIC_SECRET_LIST = [
+ {
+ icon: Select a service to connect to:
+
+ {DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
+
+ {
+ setSelectedProvider(provider);
+ setWizardStep(WizardSteps.ProviderInputs);
+ }}
+ onKeyDown={(evt) => {
+ if (evt.key === "Enter") {
+ setSelectedProvider(provider);
+ setWizardStep(WizardSteps.ProviderInputs);
+ }
+ }}
+ >
+ {icon}
+
+ ))}
+ {title}
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx
new file mode 100644
index 000000000..ef74db5b8
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/LdapInputForm.tsx
@@ -0,0 +1,387 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Select, SelectItem, TextArea } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+enum CredentialType {
+ Dynamic = "dynamic",
+ Static = "static"
+}
+
+const credentialTypes = [
+ {
+ label: "Dynamic",
+ value: CredentialType.Dynamic
+ },
+ {
+ label: "Static",
+ value: CredentialType.Static
+ }
+] as const;
+
+const formSchema = z.object({
+ provider: z.discriminatedUnion("credentialType", [
+ z.object({
+ url: z.string().trim().min(1),
+ binddn: z.string().trim().min(1),
+ bindpass: z.string().trim().min(1),
+ ca: z.string().optional(),
+ credentialType: z.literal(CredentialType.Dynamic),
+ creationLdif: z.string().min(1),
+ revocationLdif: z.string().min(1),
+ rollbackLdif: z.string().optional()
+ }),
+ z.object({
+ url: z.string().trim().min(1),
+ binddn: z.string().trim().min(1),
+ bindpass: z.string().trim().min(1),
+ ca: z.string().optional(),
+ credentialType: z.literal(CredentialType.Static),
+ rotationLdif: z.string().min(1)
+ })
+ ]),
+
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx
new file mode 100644
index 000000000..b2418f629
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/MongoDBInputForm.tsx
@@ -0,0 +1,338 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number().optional(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ ca: z.string().optional(),
+ roles: z
+ .object({
+ roleName: z.string().min(1)
+ })
+ .array()
+ .min(1)
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx
new file mode 100644
index 000000000..21f8b40de
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RabbitMqInputForm.tsx
@@ -0,0 +1,422 @@
+import { Controller, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().trim().min(1),
+ port: z.coerce.number(), // important: this is the management plugin port
+
+ username: z.string(),
+ password: z.string(),
+
+ tags: z.array(z.string().trim()),
+ virtualHost: z.object({
+ name: z.string().trim().min(1),
+ permissions: z.object({
+ read: z.string().trim().min(1),
+ write: z.string().trim().min(1),
+ configure: z.string().trim().min(1)
+ })
+ }),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx
new file mode 100644
index 000000000..9d9933b44
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/RedisInputForm.tsx
@@ -0,0 +1,331 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ username: z.string().min(1),
+ password: z.string().min(1).optional(),
+ creationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ revocationStatement: z.string().min(1),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx
new file mode 100644
index 000000000..efe6e0269
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapAseInputForm.tsx
@@ -0,0 +1,309 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1)
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx
new file mode 100644
index 000000000..1b0bd64b8
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SapHanaInputForm.tsx
@@ -0,0 +1,329 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx
new file mode 100644
index 000000000..a5f8b25d9
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SnowflakeInputForm.tsx
@@ -0,0 +1,331 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ accountId: z.string().trim().min(1),
+ orgId: z.string().trim().min(1),
+ username: z.string().trim().min(1),
+ password: z.string().trim().min(1),
+ creationStatement: z.string().trim().min(1),
+ revocationStatement: z.string().trim().min(1),
+ renewStatement: z.string().trim().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z
+ .string()
+ .trim()
+ .min(1)
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
new file mode 100644
index 000000000..19aed1472
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/SqlDatabaseInputForm.tsx
@@ -0,0 +1,424 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ Select,
+ SelectItem,
+ TextArea
+} from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders, SqlProviders } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ provider: z.object({
+ client: z.nativeEnum(SqlProviders),
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ name: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx
new file mode 100644
index 000000000..01d5398f0
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/TotpInputForm.tsx
@@ -0,0 +1,312 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } 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, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { useCreateDynamicSecret } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+enum ConfigType {
+ URL = "url",
+ MANUAL = "manual"
+}
+
+enum TotpAlgorithm {
+ SHA1 = "sha1",
+ SHA256 = "sha256",
+ SHA512 = "sha512"
+}
+
+const formSchema = z.object({
+ provider: z.discriminatedUnion("configType", [
+ z.object({
+ configType: z.literal(ConfigType.URL),
+ url: z
+ .string()
+ .url()
+ .trim()
+ .min(1)
+ .refine((val) => {
+ const urlObj = new URL(val);
+ const secret = urlObj.searchParams.get("secret");
+
+ return Boolean(secret);
+ }, "OTP URL must contain secret field")
+ }),
+ z.object({
+ configType: z.literal(ConfigType.MANUAL),
+ secret: z
+ .string()
+ .trim()
+ .min(1)
+ .transform((val) => val.replace(/\s+/g, "")),
+ period: z.number().optional(),
+ algorithm: z.nativeEnum(TotpAlgorithm).optional(),
+ digits: z.number().optional()
+ })
+ ]),
+ name: z
+ .string()
+ .trim()
+ .min(1)
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/index.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/index.tsx
new file mode 100644
index 000000000..e2e36a4fd
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateDynamicSecretForm/index.tsx
@@ -0,0 +1 @@
+export { CreateDynamicSecretForm } from "./CreateDynamicSecretForm";
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx
new file mode 100644
index 000000000..69d3b6d40
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/ActionBar/CreateSecretImportForm.tsx
@@ -0,0 +1,195 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AxiosError } from "axios";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import {
+ Button,
+ FilterableSelect,
+ FormControl,
+ Modal,
+ ModalContent,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { useSubscription, useWorkspace } from "@app/context";
+import { useCreateSecretImport } from "@app/hooks/api";
+
+const typeSchema = z.object({
+ environment: z.object({ name: z.string(), slug: z.string() }),
+ secretPath: z
+ .string()
+ .trim()
+ .transform((val) =>
+ typeof val === "string" && val.at(-1) === "/" && val.length > 1 ? val.slice(0, -1) : val
+ ),
+ isReplication: z.boolean().default(false)
+});
+
+type TFormSchema = z.infer
+
+
+
+ {
+ navigator.clipboard.writeText(value as string);
+ setCopyText("Copied");
+ }}
+ >
+
+
+
+ );
+};
+
+const TotpOutputDisplay = ({
+ totp,
+ remainingSeconds,
+ triggerLeaseRegeneration
+}: {
+ totp: string;
+ remainingSeconds: number;
+ triggerLeaseRegeneration: (details: { ttl?: string }) => Promise
+
+ );
+};
+
+const renderOutputForm = (
+ provider: DynamicSecretProviders,
+ data: unknown,
+ triggerLeaseRegeneration: (details: { ttl?: string }) => Promise
+
+ ) : (
+
+
+ )}
+ {shouldShowRegenerate && (
+
+ )}
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.AwsIam) {
+ const { USERNAME, ACCESS_KEY, SECRET_ACCESS_KEY } = data as {
+ ACCESS_KEY: string;
+ SECRET_ACCESS_KEY: string;
+ USERNAME: string;
+ };
+ return (
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.Redis) {
+ const { DB_USERNAME, DB_PASSWORD } = data as {
+ DB_USERNAME: string;
+ DB_PASSWORD: string;
+ };
+
+ return (
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.AwsElastiCache) {
+ const { DB_USERNAME, DB_PASSWORD } = data as {
+ DB_USERNAME: string;
+ DB_PASSWORD: string;
+ };
+
+ return (
+
+
+
+ }
+ />
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.RabbitMq) {
+ const { DB_USERNAME, DB_PASSWORD } = data as {
+ DB_USERNAME: string;
+ DB_PASSWORD: string;
+ };
+
+ return (
+ + Important: Copy these credentials now. You will not be able to see them again after + you close the modal. +
++ Please note that it may take a few minutes before the credentials are available for + use. +
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.ElasticSearch) {
+ const { DB_USERNAME, DB_PASSWORD } = data as {
+ DB_USERNAME: string;
+ DB_PASSWORD: string;
+ };
+
+ return (
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.AzureEntraId) {
+ const { email, password } = data as {
+ email: string;
+ password: string;
+ };
+
+ return (
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.Ldap) {
+ const { USERNAME, PASSWORD, DN_ARRAY } = data as {
+ USERNAME: string;
+ PASSWORD: string;
+ DN_ARRAY: string[];
+ };
+
+ return (
+
+
+
+
+ );
+ }
+
+ if (
+ provider === DynamicSecretProviders.SapHana ||
+ provider === DynamicSecretProviders.Snowflake
+ ) {
+ const { DB_USERNAME, DB_PASSWORD } = data as {
+ DB_USERNAME: string;
+ DB_PASSWORD: string;
+ };
+
+ return (
+
+
+ );
+ }
+
+ if (provider === DynamicSecretProviders.Totp) {
+ const { TOTP, TIME_REMAINING } = data as {
+ TOTP: string;
+ TIME_REMAINING: number;
+ };
+
+ return (
+
+
+ {!isOutputMode && (
+
+
+
+ )}
+ {isOutputMode && (
+
+ {renderOutputForm(
+ provider,
+ createDynamicSecretLease.data?.data,
+ handleLeaseRegeneration
+ )}
+
+ )}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretLease.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretLease.tsx
new file mode 100644
index 000000000..b570ba14b
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretLease.tsx
@@ -0,0 +1,256 @@
+import { subject } from "@casl/ability";
+import {
+ faClose,
+ faFileContract,
+ faRepeat,
+ faTrash,
+ faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format, formatDistance } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ DeleteActionModal,
+ EmptyState,
+ IconButton,
+ Modal,
+ ModalContent,
+ Table,
+ TableContainer,
+ TBody,
+ Td,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionDynamicSecretActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useGetDynamicSecretLeases, useRevokeDynamicSecretLease } from "@app/hooks/api";
+import { DynamicSecretLeaseStatus } from "@app/hooks/api/dynamicSecretLease/types";
+
+import { RenewDynamicSecretLease } from "./RenewDynamicSecretLease";
+
+type Props = {
+ dynamicSecretName: string;
+ projectSlug: string;
+ environment: string;
+ secretPath: string;
+ onClickNewLease: () => void;
+ onClose: () => void;
+};
+
+export const DynamicSecretLease = ({
+ projectSlug,
+ dynamicSecretName,
+ environment,
+ secretPath,
+ onClickNewLease,
+ onClose
+}: Props) => {
+ const { handlePopUpOpen, popUp, handlePopUpClose, handlePopUpToggle } = usePopUp([
+ "deleteSecret",
+ "renewSecret"
+ ] as const);
+ const { data: leases, isPending: isLeaseLoading } = useGetDynamicSecretLeases({
+ projectSlug,
+ environmentSlug: environment,
+ path: secretPath,
+ dynamicSecretName
+ });
+
+ const deleteDynamicSecretLease = useRevokeDynamicSecretLease();
+
+ const handleDynamicSecretDeleteLease = async () => {
+ try {
+ const { leaseId, isForced } = popUp.deleteSecret.data as {
+ leaseId: string;
+ isForced?: boolean;
+ };
+ await deleteDynamicSecretLease.mutateAsync({
+ environmentSlug: environment,
+ projectSlug,
+ path: secretPath,
+ dynamicSecretName,
+ leaseId,
+ isForced
+ });
+ handlePopUpClose("deleteSecret");
+ createNotification({
+ type: "success",
+ text: "Successfully deleted lease"
+ });
+ } catch (error) {
+ console.log(error);
+ createNotification({
+ type: "error",
+ text: "Failed to delete lease"
+ });
+ }
+ };
+
+ return (
+
+
+
+
+
+
+ {!isLeaseLoading && Boolean(leases?.length) && (
+ handlePopUpToggle("renewSecret", state)}
+ >
+
+ handlePopUpClose("renewSecret")}
+ projectSlug={projectSlug}
+ leaseId={(popUp.renewSecret?.data as { leaseId: string })?.leaseId}
+ dynamicSecretName={dynamicSecretName}
+ secretPath={secretPath}
+ environment={environment}
+ />
+
+
+ handlePopUpToggle("deleteSecret", isOpen)}
+ onDeleteApproved={handleDynamicSecretDeleteLease}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx
new file mode 100644
index 000000000..bfb341a40
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/DynamicSecretListView.tsx
@@ -0,0 +1,295 @@
+import { subject } from "@casl/ability";
+import {
+ faClose,
+ faFingerprint,
+ faPencilSquare,
+ faWarning
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ DeleteActionModal,
+ IconButton,
+ Modal,
+ ModalContent,
+ Tag,
+ Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionDynamicSecretActions, ProjectPermissionSub } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteDynamicSecret } from "@app/hooks/api";
+import {
+ DynamicSecretProviders,
+ DynamicSecretStatus,
+ TDynamicSecret
+} from "@app/hooks/api/dynamicSecret/types";
+
+import { CreateDynamicSecretLease } from "./CreateDynamicSecretLease";
+import { DynamicSecretLease } from "./DynamicSecretLease";
+import { EditDynamicSecretForm } from "./EditDynamicSecretForm";
+
+const formatProviderName = (type: DynamicSecretProviders) => {
+ if (type === DynamicSecretProviders.SqlDatabase) return "SQL Database";
+ return "";
+};
+
+type Props = {
+ dynamicSecrets?: TDynamicSecret[];
+ environment: string;
+ projectSlug: string;
+ secretPath?: string;
+};
+
+export const DynamicSecretListView = ({
+ dynamicSecrets = [],
+ environment,
+ projectSlug,
+ secretPath = "/"
+}: Props) => {
+ const { popUp, handlePopUpToggle, handlePopUpOpen, handlePopUpClose } = usePopUp([
+ "dynamicSecretLeases",
+ "createDynamicSecretLease",
+ "updateDynamicSecret",
+ "deleteDynamicSecret"
+ ] as const);
+
+ const deleteDynamicSecret = useDeleteDynamicSecret();
+
+ const handleDynamicSecretDelete = async () => {
+ try {
+ const { name, isForced } = popUp.deleteDynamicSecret.data as TDynamicSecret & {
+ isForced?: boolean;
+ };
+ await deleteDynamicSecret.mutateAsync({
+ environmentSlug: environment,
+ projectSlug,
+ path: secretPath,
+ name,
+ isForced
+ });
+ handlePopUpClose("deleteDynamicSecret");
+ createNotification({
+ type: "success",
+ text: "Successfully deleted dynamic secret"
+ });
+ } catch (error) {
+ console.log(error);
+ createNotification({
+ type: "error",
+ text: "Failed to delete dynamic secret"
+ });
+ }
+ };
+
+ return (
+ <>
+ {dynamicSecrets.map((secret) => {
+ const isRevoking = secret.status === DynamicSecretStatus.Deleting;
+ return (
+ | Lease ID | +Expire At | ++ |
|
+ |
+ ||
|
+ {id}
+ {Boolean(status) && (
+ |
+
+ |
+
+
+
+ |
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+
+ )}
+ {
+ // no lease view for TOTP because it's irrelevant
+ if (secret.type === DynamicSecretProviders.Totp) {
+ return;
+ }
+
+ if (evt.key === "Enter" && !isRevoking)
+ handlePopUpOpen("dynamicSecretLeases", secret.id);
+ }}
+ onClick={() => {
+ // no lease view for TOTP because it's irrelevant
+ if (secret.type === DynamicSecretProviders.Totp) {
+ return;
+ }
+
+ if (!isRevoking) {
+ handlePopUpOpen("dynamicSecretLeases", secret.id);
+ }
+ }}
+ >
+
+
+
+
+ {secret.name}
+
+ {formatProviderName(secret.type)}
+
+ {Boolean(secret.status) && (
+
+
+ )}
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+ {secret.status === DynamicSecretStatus.FailedDeletion && (
+
+
+
+ )}
+
+
+
+ {(isAllowed) => (
+ {
+ evt.stopPropagation();
+ handlePopUpOpen("updateDynamicSecret", secret);
+ }}
+ isDisabled={!isAllowed || isRevoking}
+ >
+
+ )}
+
+
+ {(isAllowed) => (
+ {
+ evt.stopPropagation();
+ handlePopUpOpen("deleteDynamicSecret", secret);
+ }}
+ isDisabled={!isAllowed || isRevoking}
+ >
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx
new file mode 100644
index 000000000..45a556367
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAwsIamForm.tsx
@@ -0,0 +1,313 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ accessKey: z.string().trim().min(1),
+ secretAccessKey: z.string().trim().min(1),
+ region: z.string().trim().min(1),
+ awsPath: z.string().trim().optional(),
+ permissionBoundaryPolicyArn: z.string().trim().optional(),
+ policyDocument: z.string().trim().optional(),
+ userGroups: z.string().trim().optional(),
+ policyArns: z.string().trim().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureEntraIdForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureEntraIdForm.tsx
new file mode 100644
index 000000000..6c0b20627
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretAzureEntraIdForm.tsx
@@ -0,0 +1,266 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, SecretInput } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z.object({
+ email: z.string(),
+ userId: z.string(),
+ tenantId: z.string(),
+ applicationId: z.string(),
+ clientSecret: z.string()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx
new file mode 100644
index 000000000..2047d924a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretCassandraForm.tsx
@@ -0,0 +1,374 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ keyspace: z.string().optional(),
+ localDataCenter: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
new file mode 100644
index 000000000..88db84b2c
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretElasticSearchForm.tsx
@@ -0,0 +1,427 @@
+import { Controller, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Button,
+ FormControl,
+ FormLabel,
+ IconButton,
+ Input,
+ SecretInput,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const authMethods = [
+ {
+ label: "Username/Password",
+ value: "user"
+ },
+ {
+ label: "API Key",
+ value: "api-key"
+ }
+] as const;
+
+const formSchema = z.object({
+ inputs: z.object({
+ host: z.string().trim().min(1),
+ port: z.coerce.number(),
+
+ // two auth types "user, apikey"
+ auth: z.discriminatedUnion("type", [
+ z.object({
+ type: z.literal("user"),
+ username: z.string().trim(),
+ password: z.string().trim()
+ }),
+ z.object({
+ type: z.literal("api-key"),
+ apiKey: z.string().trim(),
+ apiKeyId: z.string().trim()
+ })
+ ]),
+
+ roles: z.array(z.string().trim().min(1)).min(1, "At least one role is required"),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx
new file mode 100644
index 000000000..fa9005b8e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretForm.tsx
@@ -0,0 +1,317 @@
+import { AnimatePresence, motion } from "framer-motion";
+
+import { Spinner } from "@app/components/v2";
+import { useGetDynamicSecretDetails } from "@app/hooks/api";
+import { DynamicSecretProviders } from "@app/hooks/api/dynamicSecret/types";
+
+import { EditDynamicSecretAwsElastiCacheProviderForm } from "./EditDynamicSecretAwsElastiCacheProviderForm";
+import { EditDynamicSecretAwsIamForm } from "./EditDynamicSecretAwsIamForm";
+import { EditDynamicSecretAzureEntraIdForm } from "./EditDynamicSecretAzureEntraIdForm";
+import { EditDynamicSecretCassandraForm } from "./EditDynamicSecretCassandraForm";
+import { EditDynamicSecretElasticSearchForm } from "./EditDynamicSecretElasticSearchForm";
+import { EditDynamicSecretLdapForm } from "./EditDynamicSecretLdapForm";
+import { EditDynamicSecretMongoAtlasForm } from "./EditDynamicSecretMongoAtlasForm";
+import { EditDynamicSecretMongoDBForm } from "./EditDynamicSecretMongoDBForm";
+import { EditDynamicSecretRabbitMqForm } from "./EditDynamicSecretRabbitMqForm";
+import { EditDynamicSecretRedisProviderForm } from "./EditDynamicSecretRedisProviderForm";
+import { EditDynamicSecretSapAseForm } from "./EditDynamicSecretSapAseForm";
+import { EditDynamicSecretSapHanaForm } from "./EditDynamicSecretSapHanaForm";
+import { EditDynamicSecretSnowflakeForm } from "./EditDynamicSecretSnowflakeForm";
+import { EditDynamicSecretSqlProviderForm } from "./EditDynamicSecretSqlProviderForm";
+import { EditDynamicSecretTotpForm } from "./EditDynamicSecretTotpForm";
+
+type Props = {
+ onClose: () => void;
+ dynamicSecretName: string;
+ projectSlug: string;
+ environment: string;
+ secretPath: string;
+};
+
+export const EditDynamicSecretForm = ({
+ dynamicSecretName,
+ environment,
+ projectSlug,
+ onClose,
+ secretPath
+}: Props) => {
+ const { data: dynamicSecretDetails, isLoading: isDynamicSecretLoading } =
+ useGetDynamicSecretDetails({
+ projectSlug,
+ environmentSlug: environment,
+ name: dynamicSecretName,
+ path: secretPath
+ });
+
+ if (isDynamicSecretLoading) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx
new file mode 100644
index 000000000..c03bec899
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoAtlasForm.tsx
@@ -0,0 +1,466 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ FormLabel,
+ IconButton,
+ Input,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ adminPublicKey: z.string().trim().min(1),
+ adminPrivateKey: z.string().trim().min(1),
+ groupId: z.string().trim().min(1),
+ roles: z
+ .object({
+ collectionName: z.string().optional(),
+ databaseName: z.string().min(1),
+ roleName: z.string().min(1)
+ })
+ .array()
+ .min(1),
+ scopes: z
+ .object({
+ name: z.string().min(1),
+ type: z.string().min(1)
+ })
+ .array()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx
new file mode 100644
index 000000000..38e7f3363
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretMongoDBForm.tsx
@@ -0,0 +1,349 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number().optional(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ ca: z.string().optional(),
+ roles: z
+ .object({
+ roleName: z.string().min(1)
+ })
+ .array()
+ .min(1)
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx
new file mode 100644
index 000000000..3fb90d2f8
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRabbitMqForm.tsx
@@ -0,0 +1,422 @@
+import { Controller, useForm } from "react-hook-form";
+import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, FormLabel, IconButton, Input, SecretInput } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z.object({
+ host: z.string().trim().min(1),
+ port: z.coerce.number(), // important: this is the management plugin port
+
+ username: z.string(),
+ password: z.string(),
+
+ tags: z.array(z.string().trim()),
+ virtualHost: z.object({
+ name: z.string().trim().min(1),
+ permissions: z.object({
+ read: z.string().trim().min(1),
+ write: z.string().trim().min(1),
+ configure: z.string().trim().min(1)
+ })
+ }),
+ ca: z.string().optional()
+ }),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx
new file mode 100644
index 000000000..f315f9f7b
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretRedisProviderForm.tsx
@@ -0,0 +1,338 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ username: z.string().min(1),
+ password: z.string().min(1).optional(),
+
+ creationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ revocationStatement: z.string().min(1),
+ ca: z.string().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx
new file mode 100644
index 000000000..65473c7af
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapAseForm.tsx
@@ -0,0 +1,331 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ ca: z.string().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx
new file mode 100644
index 000000000..0f59a1b04
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSapHanaForm.tsx
@@ -0,0 +1,337 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ host: z.string().toLowerCase().min(1),
+ port: z.coerce.number(),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z.string().refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx
new file mode 100644
index 000000000..6cdc7f6e5
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSnowflakeForm.tsx
@@ -0,0 +1,339 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ accountId: z.string().min(1),
+ orgId: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().trim().min(1),
+ revocationStatement: z.string().trim().min(1),
+ renewStatement: z.string().trim().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ newName: z
+ .string()
+ .trim()
+ .min(1)
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx
new file mode 100644
index 000000000..18543502f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretSqlProviderForm.tsx
@@ -0,0 +1,383 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+ Button,
+ FormControl,
+ Input,
+ SecretInput,
+ Select,
+ SelectItem,
+ TextArea
+} from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { SqlProviders, TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+const formSchema = z.object({
+ inputs: z
+ .object({
+ client: z.nativeEnum(SqlProviders),
+ host: z.string().toLowerCase().min(1),
+ port: z.number(),
+ database: z.string().min(1),
+ username: z.string().min(1),
+ password: z.string().min(1),
+ creationStatement: z.string().min(1),
+ revocationStatement: z.string().min(1),
+ renewStatement: z.string().optional(),
+ ca: z.string().optional()
+ })
+ .partial(),
+ defaultTTL: z.string().superRefine((val, ctx) => {
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ }),
+ maxTTL: z
+ .string()
+ .optional()
+ .superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+ .nullable(),
+ newName: z
+ .string()
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+ .optional()
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
new file mode 100644
index 000000000..ade044c1e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/EditDynamicSecretTotpForm.tsx
@@ -0,0 +1,316 @@
+import { Controller, useForm } from "react-hook-form";
+import { faArrowUpRightFromSquare, faBookOpen } 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, FormControl, Input, Select, SelectItem } from "@app/components/v2";
+import { useUpdateDynamicSecret } from "@app/hooks/api";
+import { TDynamicSecret } from "@app/hooks/api/dynamicSecret/types";
+
+enum ConfigType {
+ URL = "url",
+ MANUAL = "manual"
+}
+
+enum TotpAlgorithm {
+ SHA1 = "sha1",
+ SHA256 = "sha256",
+ SHA512 = "sha512"
+}
+
+const formSchema = z.object({
+ inputs: z
+ .discriminatedUnion("configType", [
+ z.object({
+ configType: z.literal(ConfigType.URL),
+ url: z
+ .string()
+ .url()
+ .trim()
+ .min(1)
+ .refine((val) => {
+ const urlObj = new URL(val);
+ const secret = urlObj.searchParams.get("secret");
+
+ return Boolean(secret);
+ }, "OTP URL must contain secret field")
+ }),
+ z.object({
+ configType: z.literal(ConfigType.MANUAL),
+ secret: z
+ .string()
+ .trim()
+ .min(1)
+ .transform((val) => val.replace(/\s+/g, "")),
+ period: z.number().optional(),
+ algorithm: z.nativeEnum(TotpAlgorithm).optional(),
+ digits: z.number().optional()
+ })
+ ])
+ .optional(),
+ newName: z
+ .string()
+ .trim()
+ .min(1)
+ .refine((val) => val.toLowerCase() === val, "Must be lowercase")
+});
+type TForm = z.infer
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/index.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/index.tsx
new file mode 100644
index 000000000..2434ed35a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/EditDynamicSecretForm/index.tsx
@@ -0,0 +1 @@
+export { EditDynamicSecretForm } from "./EditDynamicSecretForm";
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/RenewDynamicSecretLease.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/RenewDynamicSecretLease.tsx
new file mode 100644
index 000000000..d17b76cb4
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/DynamicSecretListView/RenewDynamicSecretLease.tsx
@@ -0,0 +1,106 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import ms from "ms";
+import { z } from "zod";
+
+import { TtlFormLabel } from "@app/components/features";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useRenewDynamicSecretLease } from "@app/hooks/api";
+
+const formSchema = z.object({
+ ttl: z.string().superRefine((val, ctx) => {
+ if (!val) return;
+ const valMs = ms(val);
+ if (valMs < 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be a greater than 1min" });
+ // a day
+ if (valMs > 24 * 60 * 60 * 1000)
+ ctx.addIssue({ code: z.ZodIssueCode.custom, message: "TTL must be less than a day" });
+ })
+});
+type TForm = z.infer
+
+ ))}
+
+
+ {
+ if (evt.key === "Enter") handleFolderClick(name);
+ }}
+ onClick={() => handleFolderClick(name)}
+ >
+ {name}
+
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("updateFolder", { id, name })}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+ {(isAllowed) => (
+ handlePopUpOpen("deleteFolder", { id, name })}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+
+ {secretSnaphots?.pages?.map((group, i) => (
+
+ {group.map(({ id, createdAt }, index) => (
+
+ ))}
+
+ ))}
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => onToggle(true)}
+ isDisabled={!isAllowed}
+ variant="star"
+ size={isSmaller ? "xs" : "sm"}
+ >
+ Copy Secrets From An Environment
+
+ )}
+
+
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => onToggle(true)}
+ isDisabled={!isAllowed}
+ variant="star"
+ size={isSmaller ? "xs" : "sm"}
+ >
+ Paste Secrets
+
+ )}
+
+
+
+ handlePopUpToggle("confirmUpload", open)}
+ >
+
+ {isNonConflictingUpload ? "Upload" : "Overwrite"}
+ ,
+
+ ]}
+ >
+ {isNonConflictingUpload ? (
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/index.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/index.tsx
new file mode 100644
index 000000000..e0fb737b6
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretDropzone/index.tsx
@@ -0,0 +1 @@
+export { SecretDropzone } from "./SecretDropzone";
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx
new file mode 100644
index 000000000..9b8a3c0ce
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretImportListView/SecretImportItem.tsx
@@ -0,0 +1,331 @@
+import { useEffect } from "react";
+import { subject } from "@casl/ability";
+import { useSortable } from "@dnd-kit/sortable";
+import {
+ faCalendarCheck,
+ faClose,
+ faFileImport,
+ faFolder,
+ faInfoCircle,
+ faKey,
+ faRotate,
+ faUpDown,
+ faWarning,
+ faXmark
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { EmptyState, IconButton, SecretInput, TableContainer, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useResyncSecretReplication } from "@app/hooks/api";
+import { TSecretImport } from "@app/hooks/api/types";
+
+type Props = {
+ onDelete: () => void;
+ environment: string;
+ secretPath?: string;
+ secretImport?: TSecretImport;
+ isReplicationExpand?: boolean;
+ importedSecrets: {
+ key: string;
+ value?: string;
+ overriden: { env: string; secretPath: string };
+ }[];
+ searchTerm: string;
+ onExpandReplicateSecrets: (id: string) => void;
+};
+
+// to show the environment and folder icon
+export const EnvFolderIcon = ({
+ env,
+ secretPath
+}: // isReplication
+{
+ env: string;
+ secretPath: string;
+ // isReplication?: boolean;
+}) => (
+
+ {isLoading ? (
+
+
+
+
+ ) : (
+
+
+
+ {(isAllowed) => (
+
+ )}
+
+
+ )}
+
+
+
+
+ {t(isSmaller ? "common.drop-zone-keys" : "common.drop-zone")}
+
+
+
+ OR
+ +
+ handlePopUpToggle("pasteSecEnv", isOpen)}
+ onParsedEnv={handleParsedEnv}
+ environment={environment}
+ secretPath={secretPath}
+ isSmaller={isSmaller}
+ />
+ handlePopUpToggle("importSecEnv", isOpen)}
+ onParsedEnv={handleParsedEnv}
+ environment={environment}
+ environments={environments}
+ workspaceId={workspaceId}
+ secretPath={secretPath}
+ isSmaller={isSmaller}
+ />
+ {!isSmaller && (
+
+ {(isAllowed) => (
+ }
+ onClick={() => openPopUp(PopUpNames.CreateSecretForm)}
+ variant="star"
+ isDisabled={!isAllowed}
+ >
+ Add a New Secret
+
+ )}
+
+ )}
+
+
+ Are you sure you want to import {createSecretCount} secret
+ {createSecretCount > 1 ? "s" : ""} to this environment?
+
+ ) : (
+
+
+ )}
+ Your project already contains the following {updateSecretCount} secrets:
+
+ {Object.keys((popUp?.confirmUpload?.data as TSecOverwriteOpt)?.update || {})
+ ?.map((key) => key)
+ .join(", ")}
+
+
+ Are you sure you want to overwrite these secrets
+ {createSecretCount > 0
+ ? ` and import ${createSecretCount} new
+ one${createSecretCount > 1 ? "s" : ""}`
+ : ""}
+ ?
+
+
+
+);
+
+export const SecretImportItem = ({
+ onDelete,
+ isReplicationExpand,
+ importedSecrets = [],
+ searchTerm = "",
+ secretPath = "/",
+ environment,
+ secretImport,
+ onExpandReplicateSecrets: onExpandReplicate
+}: Props) => {
+ const {
+ isReserved,
+ id,
+ isReplication,
+ isReplicationSuccess,
+ replicationStatus,
+ lastReplicated,
+ importEnv
+ } = secretImport as TSecretImport;
+ const { currentWorkspace } = useWorkspace();
+ const [isExpanded, setIsExpanded] = useToggle();
+ const { attributes, listeners, transform, transition, setNodeRef, isDragging } = useSortable({
+ id
+ });
+ const resyncSecretReplication = useResyncSecretReplication();
+ useEffect(() => {
+ const filteredSecrets = importedSecrets.filter((secret) =>
+ secret.key.toUpperCase().includes(searchTerm.toUpperCase())
+ );
+
+ if (filteredSecrets.length > 0 && searchTerm) {
+ setIsExpanded.on();
+ } else {
+ setIsExpanded.off();
+ }
+ }, [searchTerm]);
+
+ useEffect(() => {
+ if (isDragging) {
+ setIsExpanded.off();
+ }
+ }, [isDragging]);
+
+ const style = {
+ transform: transform ? `translateY(${transform.y ? Math.round(transform.y) : 0}px)` : "",
+ transition
+ };
+
+ const handleResyncSecretReplication = async () => {
+ if (resyncSecretReplication.isPending) return;
+ try {
+ await resyncSecretReplication.mutateAsync({
+ id,
+ environment,
+ path: secretPath,
+ projectId: currentWorkspace?.id || ""
+ });
+ createNotification({
+ text: "Please refresh the dashboard to view changes",
+ type: "success"
+ });
+ } catch (error) {
+ console.error(error);
+ createNotification({
+ text: "Failed to resync replication",
+ type: "error"
+ });
+ }
+ };
+
+ const handleRowClick = () => {
+ if (isReplication) {
+ onExpandReplicate(id);
+ } else {
+ setIsExpanded.toggle();
+ }
+ };
+
+ return (
+ <>
+ {env || "-"}
+ {secretPath && (
+
+ {/* {isReplication && Replication Mode } */}
+
+ )}
+ {
+ if (e.key === "Enter") {
+ handleRowClick();
+ }
+ }}
+ >
+
+ {(isAllowed) => (
+
+
+ )}
+
+ )}
+
+
+
+
+
+
+ {lastReplicated && (
+
+
+ }
+ >
+
+
+ Last Replication
+
+ {lastReplicated
+ ? format(new Date(lastReplicated), "yyyy-MM-dd, hh:mm aaa")
+ : "-"}
+
+ {!isReplicationSuccess && (
+ <>
+
+
+ Fail reason
+ {replicationStatus}
+
+ )}
+
+
+
+ )}
+ {isReplication && (
+
+
+ {(isAllowed) => (
+
+
+ )}
+
+
+ {(isAllowed) => (
+ {
+ evt.stopPropagation();
+ onDelete();
+ }}
+ isDisabled={!isAllowed}
+ >
+
+ )}
+
+
+
+ {!isReplication && (isReplicationExpand || isExpanded) && !isDragging && (
+
+
+
+
+
+
+
+ | Key | +Value | + {/*Override | */} +
|
+ |
+ ||
| + {key} + | +
+ |
+ {/*
+ | */}
+
+ }
+ onClick={onGenerateRandomHex}
+ >
+ {t("dashboard.sidebar.generate-random-hex")}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
new file mode 100644
index 000000000..92f01f1d0
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SecretListView/SecretDetailSidebar.tsx
@@ -0,0 +1,530 @@
+import { Controller, useFieldArray, useForm } from "react-hook-form";
+import { subject } from "@casl/ability";
+import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
+import {
+ faCheckCircle,
+ faCircle,
+ faCircleDot,
+ faClock,
+ faPlus,
+ faShare,
+ faTag
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ Drawer,
+ DrawerContent,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuTrigger,
+ FormControl,
+ IconButton,
+ Input,
+ Switch,
+ Tag,
+ TextArea,
+ Tooltip
+} from "@app/components/v2";
+import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
+import { ProjectPermissionActions, ProjectPermissionSub, useProjectPermission } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetSecretVersion } from "@app/hooks/api";
+import { SecretV3RawSanitized, WsTag } from "@app/hooks/api/types";
+
+import { CreateReminderForm } from "./CreateReminderForm";
+import { formSchema, SecretActionType, TFormSchema } from "./SecretListView.utils";
+
+type Props = {
+ isOpen?: boolean;
+ environment: string;
+ secretPath: string;
+ onToggle: (isOpen: boolean) => void;
+ onClose: () => void;
+ secret: SecretV3RawSanitized;
+ onDeleteSecret: () => void;
+ onSaveSecret: (
+ orgSec: SecretV3RawSanitized,
+ modSec: Omit
+
+
+
+ setValue(parseInt(e.target.value, 10))}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ********
+
+ {
+ if (evt.key === "Enter") setIsExpanded.toggle();
+ }}
+ >
+
+ {isExpanded && (
+
+ {renderIcon(mode)}
+
+
+
+
+ {mode === "modified" ? (
+ <>
+
+ {preSecret?.key}
+
+ v{preSecret?.version}
+
+
+
+
+ v{postSecret?.version}
+
+
+ ) : (
+ postSecret.key
+ )}
+
+
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
new file mode 100644
index 000000000..a573418d0
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/SnapshotView.tsx
@@ -0,0 +1,264 @@
+import { useMemo, useState } from "react";
+import {
+ faArrowLeft,
+ faChevronRight,
+ faCodeCommit,
+ faFolder,
+ faMagnifyingGlass,
+ faUndo
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, ContentLoader, Input, Tag, Tooltip } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context";
+import { useGetSnapshotSecrets, usePerformSecretRollback } from "@app/hooks/api";
+import { SecretV3RawSanitized, TSecretFolder } from "@app/hooks/api/types";
+
+import { renderIcon, SecretItem, TDiffModes, TDiffView } from "./SecretItem";
+
+type Props = {
+ snapshotId: string;
+ environment: string;
+ workspaceId: string;
+ secretPath?: string;
+ secrets?: SecretV3RawSanitized[];
+ folders?: TSecretFolder[];
+ snapshotCount?: number;
+ onGoBack: () => void;
+ onClickListSnapshot: () => void;
+};
+
+const LOADER_TEXT = ["Fetching your snapshot", "Creating the difference view"];
+
+const deepCompareSecrets = (lhs: SecretV3RawSanitized, rhs: SecretV3RawSanitized) =>
+ lhs.key === rhs.key &&
+ lhs.value === rhs.value &&
+ lhs.comment === rhs.comment &&
+ lhs?.valueOverride === rhs?.valueOverride &&
+ JSON.stringify(lhs.tags) === JSON.stringify(rhs.tags);
+
+export const SnapshotView = ({
+ snapshotId,
+ environment,
+ workspaceId,
+ secretPath,
+ secrets = [],
+ folders = [],
+ onGoBack,
+ snapshotCount,
+ onClickListSnapshot
+}: Props) => {
+ const [search, setSearch] = useState("");
+ const { mutateAsync: performRollback, isPending: isRollingBack } = usePerformSecretRollback();
+
+ const { data: snapshotData, isPending: isSnapshotLoading } = useGetSnapshotSecrets({
+ snapshotId,
+ env: environment
+ });
+
+ const rollingFolder = snapshotData?.folders || [];
+ const rollingSecrets = snapshotData?.secrets || [];
+
+ const folderDiffView = useMemo(() => {
+ const folderGroupById = folders.reduce| Type | + {isModified ? ( + <> +Before rollback | +After rollback | + + ) : ( +Value | + )} + + +
|---|---|---|
| Key | + {isModified && ( +{preSecret?.key} | + )} +{postSecret.key} | +
| Value | + {isModified && ( +
+ |
+ )}
+
+ |
+
| Override | + {isModified && ( +
+ |
+ )}
+
+ |
+
| Comment | + {isModified && ( +{preSecret?.comment} | + )} +{postSecret?.comment} | +
| Tags | + {isModified && ( +
+ {preSecret?.tags?.map(({ slug, id: tagId, color }) => (
+ {slug}
+ |
+ )}
+
+ {postSecret?.tags?.map(({ slug, id: tagId, color }) => (
+ {slug}
+ |
+
+ {new Date(snapshotData?.createdAt || "").toLocaleString()}
+
+ Snapshot
+
+
+
+ }
+ value={search}
+ onChange={(evt) => setSearch(evt.target.value)}
+ />
+
+
+
+ }
+ className="h-10"
+ isDisabled={isRollingBack}
+ >
+ {snapshotCount} Commits
+
+
+
+ }
+ className="h-10"
+ isDisabled={isRollingBack}
+ >
+ Go Back
+
+
+
+
+ {(isAllowed) => (
+ }
+ className="h-10"
+ >
+ Rollback
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/index.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/index.tsx
new file mode 100644
index 000000000..0f5774398
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/components/SnapshotView/index.tsx
@@ -0,0 +1 @@
+export { SnapshotView } from "./SnapshotView";
diff --git a/frontend-v2/src/pages/secret-manager/SecretDashboardPage/route.tsx b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/route.tsx
new file mode 100644
index 000000000..199f1d9db
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretDashboardPage/route.tsx
@@ -0,0 +1,18 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { zodValidator } from "@tanstack/zod-adapter";
+import { z } from "zod";
+
+import { SecretDashboardPage } from "./SecretDashboardPage";
+
+const SecretDashboardPageQueryParamsSchema = z.object({
+ secretPath: z.string().catch("/"),
+ search: z.string().catch(""),
+ tags: z.string().catch("")
+});
+
+export const Route = createFileRoute(
+ "/_authenticate/_ctx-org-details/secret-manager/$projectId/_layout-secret-manager/secrets/$envSlug/"
+)({
+ component: SecretDashboardPage,
+ validateSearch: zodValidator(SecretDashboardPageQueryParamsSchema)
+});
diff --git a/frontend-v2/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx b/frontend-v2/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
new file mode 100644
index 000000000..3fd642ab2
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretRotationPage/SecretRotationPage.tsx
@@ -0,0 +1,393 @@
+import { Helmet } from "react-helmet";
+import { useTranslation } from "react-i18next";
+import {
+ faArrowsSpin,
+ faArrowUpRightFromSquare,
+ faExclamationTriangle,
+ faFolder,
+ faInfoCircle,
+ faPlus,
+ faRotate,
+ faTrash
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ DeleteActionModal,
+ EmptyState,
+ IconButton,
+ Skeleton,
+ Spinner,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tooltip,
+ Tr
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useProjectPermission,
+ useSubscription,
+ useWorkspace
+} from "@app/context";
+import { usePopUp } from "@app/hooks";
+import {
+ useDeleteSecretRotation,
+ useGetSecretRotationProviders,
+ useGetSecretRotations,
+ useRestartSecretRotation
+} from "@app/hooks/api";
+import { TSecretRotationProviderTemplate } from "@app/hooks/api/types";
+
+import { CreateRotationForm } from "./components/CreateRotationForm";
+
+const Page = () => {
+ const { currentWorkspace } = useWorkspace();
+ const { permission } = useProjectPermission();
+
+ const { popUp, handlePopUpOpen, handlePopUpToggle, handlePopUpClose } = usePopUp([
+ "createRotation",
+ "activeBot",
+ "deleteRotation",
+ "upgradePlan"
+ ] as const);
+ const workspaceId = currentWorkspace?.id || "";
+ const canCreateRotation = permission.can(
+ ProjectPermissionActions.Create,
+ ProjectPermissionSub.SecretRotation
+ );
+ const { subscription } = useSubscription();
+
+ const { data: secretRotationProviders, isPending: isRotationProviderLoading } =
+ useGetSecretRotationProviders({ workspaceId });
+ const { data: secretRotations, isPending: isRotationLoading } = useGetSecretRotations({
+ workspaceId
+ });
+
+ const {
+ mutateAsync: deleteSecretRotation,
+ variables: deleteSecretRotationVars,
+ isPending: isDeletingRotation
+ } = useDeleteSecretRotation();
+ const {
+ mutateAsync: restartSecretRotation,
+ variables: restartSecretRotationVar,
+ isPending: isRestartingRotation
+ } = useRestartSecretRotation();
+
+ const handleDeleteRotation = async () => {
+ const { id } = popUp.deleteRotation.data as { id: string };
+ try {
+ await deleteSecretRotation({
+ id,
+ workspaceId
+ });
+ handlePopUpClose("deleteRotation");
+ createNotification({
+ type: "success",
+ text: "Successfully removed rotation"
+ });
+ } catch (error) {
+ console.log(error);
+ createNotification({
+ type: "error",
+ text: "Failed to remove rotation"
+ });
+ }
+ };
+
+ const handleRestartRotation = async (id: string) => {
+ try {
+ await restartSecretRotation({
+ id,
+ workspaceId
+ });
+ createNotification({
+ type: "success",
+ text: "Secret rotation initiated"
+ });
+ } catch (error) {
+ console.log(error);
+ createNotification({
+ type: "error",
+ text: "Failed to restart rotation"
+ });
+ }
+ };
+
+ const handleCreateRotation = async (provider: TSecretRotationProviderTemplate) => {
+ if (subscription && !subscription?.secretRotation) {
+ handlePopUpOpen("upgradePlan");
+ return;
+ }
+ if (!canCreateRotation) {
+ createNotification({ type: "error", text: "Access permission denied!!" });
+ return;
+ }
+ handlePopUpOpen("createRotation", provider);
+ };
+
+ return (
+
+
+
+
+
+
+ {folderDiffView
+ .sort((a, b) => a.post.name.toLowerCase().localeCompare(b.post.name.toLowerCase()))
+ .filter((a) => a.post.name.toLowerCase().includes(search.toLowerCase()))
+ .map(({ mode, pre, post }, index) => (
+ Changes
+
+
+ ))}
+ {secretDiffView
+ .sort((a, b) => a.post.key.toLowerCase().localeCompare(b.post.key.toLowerCase()))
+ .filter((a) => a.post.key.toLowerCase().includes(search.toLowerCase()))
+ .map(({ mode, pre, post }, index) => (
+
+ {renderIcon(mode)}
+
+
+
+
+ {mode === "modified" ? (
+ <>
+
+ {pre?.name}
+
+
+ {post?.name}
+
+ ) : (
+ post.name
+ )}
+
+ handlePopUpToggle("createRotation", isOpen)}
+ provider={(popUp.createRotation.data as TSecretRotationProviderTemplate) || {}}
+ />
+ handlePopUpToggle("deleteRotation", isOpen)}
+ deleteKey="delete"
+ onDeleteApproved={handleDeleteRotation}
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text="You can add secret rotation if you switch to Infisical's Team plan."
+ />
+
+ );
+};
+export const SecretRotationPage = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
+ Secret Rotation
++ Stop manually rotating secrets and automate credential rotation. +
+
+
+ Rotated Secrets
+
+
+
+
+
+
+
+ | Secret Name | +Environment | +Provider | +Status | +Last Rotation | +Action | +
|---|---|---|---|---|---|
|
+ |
+ |||||
| + {outputs + .map(({ key }) => key) + .join(",") + .toUpperCase()} + | +
+
+
+ {environment.slug}
+
+
+ |
+ {provider} | +
+
+ {status}
+ {status === "failed" && (
+
+ |
+ + {lastRotatedAt + ? formatDistance(new Date(lastRotatedAt), new Date()) + : "-"} + | +
+
+
+ |
+
+ Infisical Rotation Providers
+
+
+ {isRotationProviderLoading &&
+ Array.from({ length: 12 }).map((_, index) => (
+
+ {
+ if (evt.key === "Enter") handlePopUpOpen("createRotation", provider);
+ }}
+ onClick={() => handleCreateRotation(provider)}
+ >
+ 
+
+ ))}
+
+
+
+ {provider.title}
+
+
+
+
+
+
+
+
+
+ Request or create your own template
+
+
+
+ {t("common.head-title", { title: t("settings.project.title") })}
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx b/frontend-v2/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
new file mode 100644
index 000000000..952c869db
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SecretRotationPage/components/CreateRotationForm/CreateRotationForm.tsx
@@ -0,0 +1,144 @@
+import { useRef, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+import { createNotification } from "@app/components/notifications";
+import { Modal, ModalContent, Step, Stepper } from "@app/components/v2";
+import { useCreateSecretRotation } from "@app/hooks/api";
+import { TSecretRotationProviderTemplate } from "@app/hooks/api/types";
+
+import { RotationInputForm } from "./steps/RotationInputForm";
+import {
+ RotationOutputForm,
+ TFormSchema as TRotationOutputSchema
+} from "./steps/RotationOutputForm";
+
+const WIZARD_STEPS = [
+ {
+ title: "Inputs",
+ description: "Provider secrets"
+ },
+ {
+ title: "Outputs",
+ description: "Map rotated secrets to keys"
+ }
+];
+
+type Props = {
+ isOpen?: boolean;
+ onToggle: (isOpen: boolean) => void;
+ customProvider?: string;
+ workspaceId: string;
+ provider: TSecretRotationProviderTemplate;
+};
+
+export const CreateRotationForm = ({
+ isOpen,
+ onToggle,
+ provider,
+ workspaceId,
+ customProvider
+}: Props) => {
+ const [wizardStep, setWizardStep] = useState(0);
+ const wizardData = useRef<{
+ input?: Record
+
+ {t("common.head-title", { title: t("settings.project.title") })}
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx
new file mode 100644
index 000000000..7c65b1857
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/AuditLogsRetentionSection/AuditLogsRetentionSection.tsx
@@ -0,0 +1,129 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { useProjectPermission, useSubscription, useWorkspace } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { useUpdateWorkspaceAuditLogsRetention } from "@app/hooks/api/workspace/queries";
+
+const formSchema = z.object({
+ auditLogsRetentionDays: z.coerce.number().min(0)
+});
+
+type TForm = z.infer
+
+
+ {tabs
+ .filter((el) => !el.isHidden)
+ .map((tab) => (
+
+ {tab.name}
+
+ ))}
+
+ {tabs
+ .filter((el) => !el.isHidden)
+ .map(({ key, Component }) => (
+
+
+ ))}
+
+
+
+
+ {t("settings.project.title")}
+
+
+
+
+ Audit Logs Retention
++ Set the number of days to keep your project audit logs. +
+ +
+
+ {(isAllowed) => (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/index.tsx
new file mode 100644
index 000000000..38a591701
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/AutoCapitalizationSection/index.tsx
@@ -0,0 +1 @@
+export { AutoCapitalizationSection } from "./AutoCapitalizationSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx
new file mode 100644
index 000000000..5e489ba69
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/BackfillSecretReferenceSection.tsx
@@ -0,0 +1,44 @@
+import { createNotification } from "@app/components/notifications";
+import { Button } from "@app/components/v2";
+import { useProjectPermission, useWorkspace } from "@app/context";
+import { useBackfillSecretReference } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+
+export const BackfillSecretReferenceSecretion = () => {
+ const { currentWorkspace } = useWorkspace();
+ const { membership } = useProjectPermission();
+ const backfillSecretReferences = useBackfillSecretReference();
+
+ if (!currentWorkspace) return null;
+
+ const handleBackfill = async () => {
+ if (backfillSecretReferences.isPending) return;
+ try {
+ await backfillSecretReferences.mutateAsync({ projectId: currentWorkspace.id || "" });
+ createNotification({ text: "Successfully re-indexed secret references", type: "success" });
+ } catch {
+ createNotification({ text: "Failed to re-index secret references", type: "error" });
+ }
+ };
+
+ const isAdmin = membership.roles.includes(ProjectMembershipRole.Admin);
+ return (
+ {t("settings.project.auto-capitalization")}
+
+ {
+ handleToggleCapitalizationToggle(state as boolean);
+ }}
+ >
+ {t("settings.project.auto-capitalization-description")}
+
+
+ )}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/index.tsx
new file mode 100644
index 000000000..3e1651461
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/BackfillSecretReferenceSection/index.tsx
@@ -0,0 +1 @@
+export { BackfillSecretReferenceSecretion } from "./BackfillSecretReferenceSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
new file mode 100644
index 000000000..042adff1f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/DeleteProjectSection.tsx
@@ -0,0 +1,192 @@
+import { useMemo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, DeleteActionModal } from "@app/components/v2";
+import { LeaveProjectModal } from "@app/components/v2/LeaveProjectModal";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useOrganization,
+ useProjectPermission,
+ useWorkspace
+} from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useDeleteWorkspace, useGetWorkspaceUsers, useLeaveProject } from "@app/hooks/api";
+import { ProjectType } from "@app/hooks/api/workspace/types";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+export const DeleteProjectSection = () => {
+ const navigate = useNavigate();
+
+ const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+ "deleteWorkspace",
+ "leaveWorkspace"
+ ] as const);
+
+ const { currentOrg } = useOrganization();
+ const { hasProjectRole, membership } = useProjectPermission();
+ const { currentWorkspace } = useWorkspace();
+ const [isDeleting, setIsDeleting] = useToggle();
+ const [isLeaving, setIsLeaving] = useToggle();
+ const deleteWorkspace = useDeleteWorkspace();
+ const leaveProject = useLeaveProject();
+ const { data: members, isPending: isMembersLoading } = useGetWorkspaceUsers(
+ currentWorkspace?.id || ""
+ );
+
+ // If isNoAccessMember is true, then the user can't read the workspace members. So we need to handle this case separately.
+ const isNoAccessMember = hasProjectRole("no-access");
+
+ const isOnlyAdminMember = useMemo(() => {
+ if (!members || !membership || !hasProjectRole("admin")) return false;
+
+ const adminMembers = members.filter(
+ (member) => member.roles.map((r) => r.role).includes("admin") && member.id !== membership.id // exclude the current user
+ );
+
+ return !adminMembers.length;
+ }, [members, membership]);
+
+ const handleDeleteWorkspaceSubmit = async () => {
+ setIsDeleting.on();
+ try {
+ if (!currentWorkspace?.id) return;
+
+ await deleteWorkspace.mutateAsync({
+ workspaceID: currentWorkspace?.id
+ });
+
+ createNotification({
+ text: "Successfully deleted project",
+ type: "success"
+ });
+
+ navigate({
+ to: `/organization/${ProjectType.SecretManager}/overview` as const
+ });
+ handlePopUpClose("deleteWorkspace");
+ } catch (err) {
+ console.error(err);
+ createNotification({
+ text: "Failed to delete project",
+ type: "error"
+ });
+ } finally {
+ setIsDeleting.off();
+ }
+ };
+
+ const handleLeaveWorkspaceSubmit = async () => {
+ console.log({
+ currentWorkspace,
+ currentOrg,
+ members,
+ isNoAccessMember,
+ membership
+ });
+
+ try {
+ setIsLeaving.on();
+
+ if (!currentWorkspace?.id || !currentOrg?.id) return;
+
+ // If there's no members, and the user has access to read members, something went wrong.
+ if (!members && !isNoAccessMember) return;
+
+ // If the user has elevated permissions and can read members:
+ if (!isNoAccessMember) {
+ if (!members) return;
+
+ if (members.length < 2) {
+ createNotification({
+ text: "You can't leave the project as you are the only member",
+ type: "error"
+ });
+ return;
+ }
+ // If the user has access to read members, and there's less than 1 admin member excluding the current user, they can't leave the project.
+ if (isOnlyAdminMember) {
+ createNotification({
+ text: "You can't leave a project with no admin members left. Promote another member to admin first.",
+ type: "error"
+ });
+ return;
+ }
+ }
+
+ // If it's actually a no-access member, then we don't really care about the members.
+
+ await leaveProject.mutateAsync({
+ workspaceId: currentWorkspace.id
+ });
+
+ navigate({
+ to: `/organization/${ProjectType.SecretManager}/overview` as const
+ });
+ } catch (err) {
+ console.error(err);
+ createNotification({
+ text: "Failed to leave project",
+ type: "error"
+ });
+ } finally {
+ setIsLeaving.off();
+ }
+ };
+
+ return (
+
+
+ Index Secret References
++ This will index all secret references, enabling integrations to be triggered when their + values change going forward. This happens automatically when secrets are created or updated. +
+ +
+ handlePopUpToggle("deleteWorkspace", isOpen)}
+ deleteKey="confirm"
+ buttonText="Delete Project"
+ onDeleteApproved={handleDeleteWorkspaceSubmit}
+ />
+
+ handlePopUpToggle("leaveWorkspace", isOpen)}
+ deleteKey="confirm"
+ buttonText="Leave Project"
+ onLeaveApproved={handleLeaveWorkspaceSubmit}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/index.tsx
new file mode 100644
index 000000000..04a624ec2
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/DeleteProjectSection/index.tsx
@@ -0,0 +1 @@
+export { DeleteProjectSection } from "./DeleteProjectSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx
new file mode 100644
index 000000000..68592323e
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/EncryptionTab.tsx
@@ -0,0 +1,349 @@
+import { ChangeEvent, useRef, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import FileSaver from "file-saver";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ FormControl,
+ IconButton,
+ Modal,
+ ModalContent,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import {
+ ProjectPermissionActions,
+ ProjectPermissionSub,
+ useOrganization,
+ useWorkspace
+} from "@app/context";
+import { usePopUp, useToggle } from "@app/hooks";
+import {
+ useGetActiveProjectKms,
+ useGetExternalKmsList,
+ useLoadProjectKmsBackup,
+ useUpdateProjectKms
+} from "@app/hooks/api";
+import { fetchProjectKmsBackup } from "@app/hooks/api/kms/queries";
+import { INTERNAL_KMS_KEY_ID, KmsType } from "@app/hooks/api/kms/types";
+import { Organization, Workspace } from "@app/hooks/api/types";
+
+const formSchema = z.object({
+ kmsKeyId: z.string()
+});
+
+type TForm = z.inferDanger Zone
+
+
+ {(isAllowed) => (
+
+ )}
+
+ {!isOnlyAdminMember && (
+
+ )}
+
+
+ + In case of interruptions with your configured external KMS, you can load a backup to set + the project's KMS back to the default Infisical KMS. +
+ + ++ By loading a backup, the project's KMS will be switched to the default Infisical KMS. +
+
+
+ {
+ fileUploadRef?.current?.click();
+ }}
+ >
+
+
+ {backupFileName && (
+ {backupFileName}
+ )}
+ {backupContent && (
+
+ )}
+
+ handlePopUpToggle("createBackupConfirmation", state)}
+ org={currentOrg}
+ workspace={currentWorkspace}
+ />
+ handlePopUpToggle("loadBackup", state)}
+ org={currentOrg}
+ workspace={currentWorkspace}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/index.tsx
new file mode 100644
index 000000000..ba6180a8a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EncryptionTab/index.tsx
@@ -0,0 +1 @@
+export { EncryptionTab } from "./EncryptionTab";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
new file mode 100644
index 000000000..dfe138a05
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/AddEnvironmentModal.tsx
@@ -0,0 +1,121 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateWsEnvironment } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+import { slugSchema } from "@app/lib/schemas";
+
+type Props = {
+ popUp: UsePopUpState<["createEnv"]>;
+ handlePopUpClose: (popUpName: keyof UsePopUpState<["createEnv"]>) => void;
+ handlePopUpToggle: (popUpName: keyof UsePopUpState<["createEnv"]>, state?: boolean) => void;
+};
+
+const schema = z.object({
+ environmentName: z
+ .string()
+ .min(1, { message: "Environment Name field must be at least 1 character" }),
+ environmentSlug: slugSchema()
+});
+
+export type FormData = z.infer
+
+
+ Key Management
+ {kmsKeyId !== INTERNAL_KMS_KEY_ID && ( +
+
+
+
+ )}
+ + Select which Key Management System to use for encrypting your project data +
+
+
+
+
+ handlePopUpToggle("deleteEnv", isOpen)}
+ deleteKey={(popUp?.deleteEnv?.data as { slug: string })?.slug || ""}
+ onDeleteApproved={() => onEnvDeleteSubmit((popUp?.deleteEnv?.data as { id: string })?.id)}
+ />
+ handlePopUpToggle("upgradePlan", isOpen)}
+ text="You can add custom environments if you switch to Infisical's Team plan."
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentTable.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentTable.tsx
new file mode 100644
index 000000000..3da07b923
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/EnvironmentSection/EnvironmentTable.tsx
@@ -0,0 +1,172 @@
+import { faArrowDown, faArrowUp, faPencil, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ IconButton,
+ Table,
+ TableContainer,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useUpdateWsEnvironment } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["updateEnv", "deleteEnv", "upgradePlan"]>,
+ {
+ name,
+ slug,
+ id
+ }: {
+ name: string;
+ slug: string;
+ id: string;
+ }
+ ) => void;
+};
+
+export const EnvironmentTable = ({ handlePopUpOpen }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+
+ const updateEnvironment = useUpdateWsEnvironment();
+
+ const handleReorderEnv = async (id: string, position: number) => {
+ try {
+ if (!currentWorkspace?.id) return;
+
+ await updateEnvironment.mutateAsync({
+ workspaceId: currentWorkspace.id,
+ id,
+ position
+ });
+
+ createNotification({
+ text: "Successfully re-ordered environments",
+ type: "success"
+ });
+ } catch (err) {
+ console.error(err);
+ createNotification({
+ text: "Failed to re-order environments",
+ type: "error"
+ });
+ }
+ };
+
+ return (
+
+
+ Environments
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ if (isMoreEnvironmentsAllowed) {
+ handlePopUpOpen("createEnv");
+ } else {
+ handlePopUpOpen("upgradePlan");
+ }
+ }}
+ isDisabled={!isAllowed}
+ >
+ Create environment
+
+ )}
+
+
+ + Choose which environments will show up in your dashboard like development, staging, + production +
+ {permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Environments) ? ( +| Name | +Slug | ++ |
|---|---|---|
| {name} | +{slug} | +
+ |
+
|
+ |
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/index.tsx
new file mode 100644
index 000000000..242b8c79a
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/PointInTimeVersionLimitSection/index.tsx
@@ -0,0 +1 @@
+export { PointInTimeVersionLimitSection } from "./PointInTimeVersionLimitSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx
new file mode 100644
index 000000000..698665e47
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/ProjectGeneralTab.tsx
@@ -0,0 +1,33 @@
+import { useWorkspace } from "@app/context";
+import { ProjectType, ProjectVersion } from "@app/hooks/api/workspace/types";
+
+import { AuditLogsRetentionSection } from "../AuditLogsRetentionSection";
+import { AutoCapitalizationSection } from "../AutoCapitalizationSection";
+import { BackfillSecretReferenceSecretion } from "../BackfillSecretReferenceSection";
+import { DeleteProjectSection } from "../DeleteProjectSection";
+import { EnvironmentSection } from "../EnvironmentSection";
+import { PointInTimeVersionLimitSection } from "../PointInTimeVersionLimitSection";
+import { ProjectOverviewChangeSection } from "../ProjectOverviewChangeSection";
+import { RebuildSecretIndicesSection } from "../RebuildSecretIndicesSection/RebuildSecretIndicesSection";
+import { SecretTagsSection } from "../SecretTagsSection";
+
+export const ProjectGeneralTab = () => {
+ const { currentWorkspace } = useWorkspace();
+ const isSecretManager = currentWorkspace?.type === ProjectType.SecretManager;
+
+ return (
+
+
+ Version Retention
++ This defines the maximum number of recent secret versions to keep per folder. Excess + versions will be removed at midnight (UTC) each day. +
+ +
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/index.tsx
new file mode 100644
index 000000000..c6e611e0f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectGeneralTab/index.tsx
@@ -0,0 +1 @@
+export { ProjectGeneralTab } from "./ProjectGeneralTab";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx
new file mode 100644
index 000000000..34fe365ec
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/CopyButton.tsx
@@ -0,0 +1,51 @@
+import { useCallback } from "react";
+import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks";
+
+type Props = {
+ value: string;
+ hoverText: string;
+ notificationText: string;
+ children: React.ReactNode;
+};
+
+export const CopyButton = ({ value, children, hoverText, notificationText }: Props) => {
+ const [isProjectIdCopied, setIsProjectIdCopied] = useToggle(false);
+
+ const copyToClipboard = useCallback(() => {
+ if (isProjectIdCopied) {
+ return;
+ }
+
+ setIsProjectIdCopied.on();
+ navigator.clipboard.writeText(value);
+
+ createNotification({
+ text: notificationText,
+ type: "success"
+ });
+
+ const timer = setTimeout(() => setIsProjectIdCopied.off(), 2000);
+
+ // eslint-disable-next-line consistent-return
+ return () => clearTimeout(timer);
+ }, [isProjectIdCopied]);
+
+ return (
+ }
+ onClick={copyToClipboard}
+ >
+ {children}
+
+ {hoverText}
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx
new file mode 100644
index 000000000..d82415c0d
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/ProjectOverviewChangeSection.tsx
@@ -0,0 +1,168 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input, TextArea } from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { useUpdateProject } from "@app/hooks/api";
+
+import { CopyButton } from "./CopyButton";
+
+const formSchema = z.object({
+ name: z.string().min(1, "Required").max(64, "Too long, maximum length is 64 characters"),
+ description: z
+ .string()
+ .trim()
+ .max(256, "Description too long, max length is 256 characters")
+ .optional()
+});
+
+type FormData = z.infer
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/index.tsx
new file mode 100644
index 000000000..66120d7fa
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/ProjectOverviewChangeSection/index.tsx
@@ -0,0 +1 @@
+export { ProjectOverviewChangeSection } from "./ProjectOverviewChangeSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/RebuildSecretIndicesSection/RebuildSecretIndicesSection.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/RebuildSecretIndicesSection/RebuildSecretIndicesSection.tsx
new file mode 100644
index 000000000..c32695abb
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/RebuildSecretIndicesSection/RebuildSecretIndicesSection.tsx
@@ -0,0 +1,93 @@
+import { createNotification } from "@app/components/notifications";
+import {
+ decryptAssymmetric,
+ decryptSymmetric
+} from "@app/components/utilities/cryptography/crypto";
+import { Button } from "@app/components/v2";
+import { useProjectPermission, useWorkspace } from "@app/context";
+import { useToggle } from "@app/hooks";
+import { useGetUserWsKey, useNameWorkspaceSecrets } from "@app/hooks/api";
+import { ProjectMembershipRole } from "@app/hooks/api/roles/types";
+import { fetchWorkspaceSecrets } from "@app/hooks/api/workspace/queries";
+
+export const RebuildSecretIndicesSection = () => {
+ const { currentWorkspace } = useWorkspace();
+ const { membership } = useProjectPermission();
+ const nameWorkspaceSecrets = useNameWorkspaceSecrets();
+
+ const [isIndexing, setIsIndexing] = useToggle();
+ const { data: decryptFileKey } = useGetUserWsKey(currentWorkspace.id);
+
+ if (!currentWorkspace) return null;
+
+ const onRebuildIndices = async () => {
+ if (!currentWorkspace?.id) return;
+ setIsIndexing.on();
+ try {
+ const encryptedSecrets = await fetchWorkspaceSecrets(currentWorkspace.id);
+
+ if (!currentWorkspace || !decryptFileKey) {
+ return;
+ }
+
+ const key = decryptAssymmetric({
+ ciphertext: decryptFileKey.encryptedKey,
+ nonce: decryptFileKey.nonce,
+ publicKey: decryptFileKey.sender.publicKey,
+ privateKey: localStorage.getItem("PRIVATE_KEY") as string
+ });
+
+ const secretsToUpdate = encryptedSecrets.map((encryptedSecret) => {
+ const secretName = decryptSymmetric({
+ ciphertext: encryptedSecret.secretKeyCiphertext,
+ iv: encryptedSecret.secretKeyIV,
+ tag: encryptedSecret.secretKeyTag,
+ key
+ });
+
+ return {
+ secretName,
+ secretId: encryptedSecret.id
+ };
+ });
+ await nameWorkspaceSecrets.mutateAsync({
+ workspaceId: currentWorkspace.id,
+ secretsToUpdate
+ });
+
+ createNotification({
+ text: "Successfully rebuilt secret indices",
+ type: "success"
+ });
+ } catch (err) {
+ console.log(err);
+ } finally {
+ setIsIndexing.off();
+ }
+ };
+
+ const isAdmin = membership.roles.includes(ProjectMembershipRole.Admin);
+
+ if (!isAdmin) {
+ return null;
+ }
+
+ return (
+
+
+ Project Overview
+
+
+ Copy Project Slug
+
+
+ Copy Project ID
+
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx
new file mode 100644
index 000000000..96c667050
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/AddSecretTagModal.tsx
@@ -0,0 +1,109 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalClose, ModalContent } from "@app/components/v2";
+import { useWorkspace } from "@app/context";
+import { useCreateWsTag } from "@app/hooks/api";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+import { slugSchema } from "@app/lib/schemas";
+
+const schema = z.object({
+ slug: slugSchema({ min: 1, field: "Tag Slug" })
+});
+
+export type FormData = z.infer
+
+ Rebuild Secret Indices
++ This will rebuild indices of all secrets in the project. +
+ +
+ handlePopUpToggle("deleteTagConfirmation", isOpen)}
+ deleteKey={(popUp?.deleteTagConfirmation?.data as DeleteModalData)?.name}
+ onClose={() => handlePopUpClose("deleteTagConfirmation")}
+ onDeleteApproved={onDeleteApproved}
+ />
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsTable.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsTable.tsx
new file mode 100644
index 000000000..150e11064
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/SecretTagsTable.tsx
@@ -0,0 +1,166 @@
+import { useMemo } from "react";
+import {
+ faArrowDown,
+ faArrowUp,
+ faMagnifyingGlass,
+ faSearch,
+ faTag,
+ faTrashCan
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ EmptyState,
+ IconButton,
+ Input,
+ Pagination,
+ Table,
+ TableContainer,
+ TableSkeleton,
+ TBody,
+ Td,
+ Th,
+ THead,
+ Tr
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import { usePagination, useResetPageHelper } from "@app/hooks";
+import { useGetWsTags } from "@app/hooks/api";
+import { OrderByDirection } from "@app/hooks/api/generic/types";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+type Props = {
+ handlePopUpOpen: (
+ popUpName: keyof UsePopUpState<["deleteTagConfirmation"]>,
+ {
+ name,
+ id
+ }: {
+ name: string;
+ id: string;
+ }
+ ) => void;
+};
+
+enum TagsOrderBy {
+ Slug = "slug"
+}
+
+export const SecretTagsTable = ({ handlePopUpOpen }: Props) => {
+ const { currentWorkspace } = useWorkspace();
+ const { data: tags = [], isPending } = useGetWsTags(currentWorkspace?.id ?? "");
+
+ const {
+ search,
+ setSearch,
+ setPage,
+ page,
+ perPage,
+ setPerPage,
+ offset,
+ orderDirection,
+ toggleOrderDirection
+ } = usePagination(TagsOrderBy.Slug, { initPerPage: 10 });
+
+ const filteredTags = useMemo(
+ () =>
+ tags
+ .filter((tag) => tag.slug.toLowerCase().includes(search.trim().toLowerCase()))
+ .sort((a, b) => {
+ const [tagOne, tagTwo] = orderDirection === OrderByDirection.ASC ? [a, b] : [b, a];
+
+ return tagOne.slug.toLowerCase().localeCompare(tagTwo.slug.toLowerCase());
+ }),
+ [tags, orderDirection, search]
+ );
+
+ useResetPageHelper({
+ totalCount: filteredTags.length,
+ offset,
+ setPage
+ });
+
+ return (
+
+
+ {(isAllowed) => (
+ }
+ onClick={() => {
+ handlePopUpOpen("CreateSecretTag");
+ }}
+ isDisabled={!isAllowed}
+ >
+ Create Tag
+
+ )}
+
+
+ Secret Tags
++ Every secret can be assigned to one or more tags. Here you can add and remove tags for the + current project. +
+ {permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.Tags) ? ( +
+ setSearch(e.target.value)}
+ leftIcon={
+
+
+
+ {Boolean(filteredTags.length) && (
+
+
+ );
+};
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/index.tsx
new file mode 100644
index 000000000..0147e5e77
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/SecretTagsSection/index.tsx
@@ -0,0 +1 @@
+export { SecretTagsSection } from "./SecretTagsSection";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/AddWebhookForm.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/AddWebhookForm.tsx
new file mode 100644
index 000000000..6e4af2244
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/AddWebhookForm.tsx
@@ -0,0 +1,200 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import z from "zod";
+
+import {
+ Button,
+ FormControl,
+ Input,
+ Modal,
+ ModalClose,
+ ModalContent,
+ Select,
+ SelectItem
+} from "@app/components/v2";
+import { SecretPathInput } from "@app/components/v2/SecretPathInput";
+import { WebhookType } from "@app/hooks/api/webhooks/types";
+
+const formSchema = z
+ .object({
+ environment: z.string().trim().describe("Environment"),
+ webhookUrl: z.string().url().trim().describe("Webhook URL"),
+ webhookSecretKey: z.string().trim().optional().describe("Secret Key"),
+ secretPath: z.string().trim().describe("Secret Path"),
+ type: z.nativeEnum(WebhookType).describe("Type").default(WebhookType.GENERAL)
+ })
+ .superRefine((data, ctx) => {
+ if (data.type === WebhookType.SLACK && !data.webhookUrl.includes("hooks.slack.com")) {
+ ctx.addIssue({
+ code: z.ZodIssueCode.custom,
+ message: "Incoming Webhook URL is invalid.",
+ path: ["webhookUrl"]
+ });
+ }
+ });
+
+export type TFormSchema = z.infer|
+
+ Slug
+
+ |
+ + |
|---|---|
| {slug} | +
+ |
+
+ handlePopUpToggle("addWebhook", isOpen)}
+ onCreateWebhook={handleWebhookCreate}
+ />
+ handlePopUpToggle("deleteWebhook", isOpen)}
+ onClose={() => handlePopUpClose("deleteWebhook")}
+ onDeleteApproved={handleWebhookDelete}
+ />
+
+ );
+ },
+ { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Webhooks }
+);
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/index.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/index.tsx
new file mode 100644
index 000000000..2795bd02f
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WebhooksTab/index.tsx
@@ -0,0 +1 @@
+export { WebhooksTab } from "./WebhooksTab";
diff --git a/frontend-v2/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
new file mode 100644
index 000000000..d5510c619
--- /dev/null
+++ b/frontend-v2/src/pages/secret-manager/SettingsPage/components/WorkflowIntegrationSection/WorkflowIntegrationTab.tsx
@@ -0,0 +1,351 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Link } from "@tanstack/react-router";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+ Button,
+ ContentLoader,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+ EmptyState,
+ FormControl,
+ Input,
+ Select,
+ SelectItem,
+ Switch
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+import {
+ useGetSlackIntegrationChannels,
+ useGetSlackIntegrations,
+ useGetWorkspaceSlackConfig,
+ useUpdateProjectSlackConfig
+} from "@app/hooks/api";
+
+const formSchema = z.object({
+ slackIntegrationId: z.string(),
+ isSecretRequestNotificationEnabled: z.boolean(),
+ secretRequestChannels: z.string().array(),
+ isAccessRequestNotificationEnabled: z.boolean(),
+ accessRequestChannels: z.string().array()
+});
+
+type TSlackConfigForm = z.infer
+
+ {(isAllowed) => (
+
+ )}
+
+
+ {t("settings.webhooks.title")}
+{t("settings.webhooks.description")}
+
+
+
+
+
+
+
+ | URL | +Environment | +Secret Path | +Status | +Action | +
|
+ |
+ ||||
| + {url} + | +{environment.slug} | +{secretPath} | +
+ {!lastStatus ? (
+ "-"
+ ) : (
+
+ {lastStatus}{" "}
+
+ }
+ >
+
+ Updated At:{" "}
+ {format(new Date(updatedAt), "yyyy-MM-dd, hh:mm aaa")}
+
+ {lastRunErrorMessage && (
+
+ Error: {lastRunErrorMessage}
+
+ )}
+ |
+
+
+
+ |
+
+ Create one now
+
+
+
+
+
+ Slack Integration
++ This integration allows you to send notifications to your Slack workspace in response to + events in your project. +
+