awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-13 08:29:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(secret-approval): implemented the new policy based approval system bare version

Browse Source
This commit is contained in:
Akhil Mohan
2023-10-05 20:34:50 +05:30
parent fc43511f5d
commit 63588b4e44
27 changed files with 1033 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/navigation/NavHeader.tsx
+5 -2
View File
@@ -1,6 +1,6 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
import { faAngleRight, faShield } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { useOrganization, useWorkspace } from "@app/context";
@@ -16,6 +16,7 @@ type Props = {
onEnvChange?: (slug: string) => void;
secretPath?: string;
isFolderMode?: boolean;
isProtectedBranch?: boolean;
};
// TODO: make links clickable and clean up
@@ -42,7 +43,8 @@ export default function NavHeader({
userAvailableEnvs = [],
onEnvChange,
isFolderMode,
secretPath = "/"
secretPath = "/",
isProtectedBranch = false
}: Props): JSX.Element {
const { currentWorkspace } = useWorkspace();
const { currentOrg } = useOrganization();
@@ -151,6 +153,7 @@ export default function NavHeader({
</div>
);
})}
{isProtectedBranch && <FontAwesomeIcon icon={faShield} className="text-primary" />}
</div>
);
}
frontend/src/hooks/api/secretApproval/index.tsx
+1 -1
View File
@@ -3,4 +3,4 @@ export {
useDeleteSecretApprovalPolicy,
useUpdateSecretApprovalPolicy
} from "./mutation";
export { useGetSecretApprovalPolicies } from "./queries";
export { useGetSecretApprovalPolicies, useGetSecretApprovalPolicyOfABoard } from "./queries";
frontend/src/hooks/api/secretApproval/queries.tsx
+43 -3
View File
@@ -2,11 +2,19 @@ import { useQuery, UseQueryOptions } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { TSecretApprovalPolicy } from "./types";
import {
TGetSecretApprovalPoliciesDTO,
TGetSecretApprovalPolicyOfBoardDTO,
TSecretApprovalPolicy
} from "./types";
export const secretApprovalKeys = {
getApprovalPolicies: (workspaceId: string) =>
[{ workspaceId }, "secret-approval-policies"] as const
[{ workspaceId }, "secret-approval-policies"] as const,
getApprovalPolicyOfABoard: (workspaceId: string, environment: string, secretPath: string) => [
{ workspaceId, environment, secretPath },
"Secret-approval-policy"
]
};
const fetchApprovalPolicies = async (workspaceId: string) => {
@@ -20,7 +28,7 @@ const fetchApprovalPolicies = async (workspaceId: string) => {
export const useGetSecretApprovalPolicies = ({
workspaceId,
options = {}
}: { workspaceId: string } & {
}: TGetSecretApprovalPoliciesDTO & {
options?: UseQueryOptions<
TSecretApprovalPolicy[],
unknown,
@@ -34,3 +42,35 @@ export const useGetSecretApprovalPolicies = ({
...options,
enabled: Boolean(workspaceId) && (options?.enabled ?? true)
});
const fetchApprovalPolicyOfABoard = async (
workspaceId: string,
environment: string,
secretPath: string
) => {
const { data } = await apiRequest.get<{ policy: TSecretApprovalPolicy }>(
"/api/v1/secret-approvals/board",
{ params: { workspaceId, environment, secretPath } }
);
return data.policy;
};
export const useGetSecretApprovalPolicyOfABoard = ({
workspaceId,
secretPath = "/",
environment,
options = {}
}: TGetSecretApprovalPolicyOfBoardDTO & {
options?: UseQueryOptions<
TSecretApprovalPolicy,
unknown,
TSecretApprovalPolicy,
ReturnType<typeof secretApprovalKeys.getApprovalPolicyOfABoard>
>;
}) =>
useQuery({
queryKey: secretApprovalKeys.getApprovalPolicyOfABoard(workspaceId, environment, secretPath),
queryFn: () => fetchApprovalPolicyOfABoard(workspaceId, environment, secretPath),
...options,
enabled: Boolean(workspaceId && secretPath && environment) && (options?.enabled ?? true)
});
frontend/src/hooks/api/secretApproval/types.ts
+10
View File
@@ -7,6 +7,16 @@ export type TSecretApprovalPolicy = {
approvals: number;
};
export type TGetSecretApprovalPoliciesDTO = {
workspaceId: string;
};
export type TGetSecretApprovalPolicyOfBoardDTO = {
workspaceId: string;
environment: string;
secretPath: string;
};
export type TCreateSecretPolicyDTO = {
workspaceId: string;
environment: string;
frontend/src/hooks/api/secretApprovalRequest/index.tsx
+4 -1
View File
@@ -1,2 +1,5 @@
export { useUpdateSecretApprovalRequestStatus } from "./mutation";
export {
usePerformSecretApprovalRequestMerge,
useUpdateSecretApprovalRequestStatus
} from "./mutation";
export { useGetSecretApprovalRequestDetails, useGetSecretApprovalRequests } from "./queries";
frontend/src/hooks/api/secretApprovalRequest/mutation.tsx
+15 -1
View File
@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { secretApprovalRequestKeys } from "./queries";
import { TUpdateSecretApprovalRequestStatusDTO } from "./types";
import { TPerformSecretApprovalRequestMerge, TUpdateSecretApprovalRequestStatusDTO } from "./types";
export const useUpdateSecretApprovalRequestStatus = () => {
const queryClient = useQueryClient();
@@ -18,3 +18,17 @@ export const useUpdateSecretApprovalRequestStatus = () => {
}
});
};
export const usePerformSecretApprovalRequestMerge = () => {
const queryClient = useQueryClient();
return useMutation<{}, {}, TPerformSecretApprovalRequestMerge>({
mutationFn: async ({ id }) => {
const { data } = await apiRequest.post("/api/v1/secret-approval-requests/merge", { id });
return data;
},
onSuccess: (_, { id }) => {
queryClient.invalidateQueries(secretApprovalRequestKeys.detail({ id }));
}
});
};
frontend/src/hooks/api/secretApprovalRequest/queries.tsx
+56 -13
View File
@@ -1,4 +1,9 @@
import { useQuery, UseQueryOptions } from "@tanstack/react-query";
import {
useInfiniteQuery,
UseInfiniteQueryOptions,
useQuery,
UseQueryOptions
} from "@tanstack/react-query";
import {
decryptAssymmetric,
@@ -18,8 +23,18 @@ import {
} from "./types";
export const secretApprovalRequestKeys = {
list: ({ workspaceId, environment }: TGetSecretApprovalRequestList) =>
[{ workspaceId, environment }, "secret-approval-requests"] as const,
list: ({
workspaceId,
environment,
status,
committer,
offset,
limit
}: TGetSecretApprovalRequestList) =>
[
{ workspaceId, environment, status, committer, offset, limit },
"secret-approval-requests"
] as const,
detail: ({ id }: Omit<TGetSecretApprovalRequestDetails, "decryptKey">) =>
[{ id }, "secret-approval-request-detail"] as const
};
@@ -68,14 +83,22 @@ export const decryptSecretApprovalSecret = (
const fetchSecretApprovalRequestList = async ({
workspaceId,
environment
environment,
committer,
status = "open",
limit = 20,
offset
}: TGetSecretApprovalRequestList) => {
const { data } = await apiRequest.get<{ approvals: TSecretApprovalRequest[] }>(
"/api/v1/secret-approval-requests",
{
params: {
workspaceId,
environment
environment,
committer,
status,
limit,
offset
}
}
);
@@ -86,10 +109,13 @@ const fetchSecretApprovalRequestList = async ({
export const useGetSecretApprovalRequests = ({
workspaceId,
environment,
options = {}
options = {},
status,
limit = 20,
committer
}: TGetSecretApprovalRequestList & {
options?: Omit<
UseQueryOptions<
UseInfiniteQueryOptions<
TSecretApprovalRequest[],
unknown,
TSecretApprovalRequest[],
@@ -98,10 +124,26 @@ export const useGetSecretApprovalRequests = ({
"queryKey" | "queryFn"
>;
}) =>
useQuery({
queryKey: secretApprovalRequestKeys.list({ workspaceId, environment }),
queryFn: () => fetchSecretApprovalRequestList({ workspaceId, environment }),
enabled: Boolean(workspaceId) && (options?.enabled ?? true)
useInfiniteQuery({
queryKey: secretApprovalRequestKeys.list({
workspaceId,
environment,
committer,
status
}),
queryFn: ({ pageParam }) =>
fetchSecretApprovalRequestList({
workspaceId,
environment,
status,
committer,
limit,
offset: pageParam
}),
enabled: Boolean(workspaceId) && (options?.enabled ?? true),
getNextPageParam: (lastPage, pages) => {
return lastPage?.length !== 0 ? pages.length * limit : undefined;
}
});
const fetchSecretApprovalRequestDetails = async ({
@@ -134,9 +176,10 @@ export const useGetSecretApprovalRequestDetails = ({
queryFn: () => fetchSecretApprovalRequestDetails({ id }),
select: (data) => ({
...data,
commits: data.commits.map(({ secret, op, newVersion }) => ({
commits: data.commits.map(({ secretVersion, op, newVersion, secret }) => ({
op,
secret: secret ? decryptSecrets([secret], decryptKey)[0] : undefined,
secret,
secretVersion: secretVersion ? decryptSecrets([secretVersion], decryptKey)[0] : undefined,
newVersion: newVersion ? decryptSecretApprovalSecret(newVersion, decryptKey) : undefined
}))
}),
frontend/src/hooks/api/secretApprovalRequest/types.ts
+10 -1
View File
@@ -60,7 +60,8 @@ export type TSecretApprovalRequest<
policy: TSecretApprovalPolicy;
commits: {
// if there is no secret means it was creation
secret?: J;
secret?: { version: number };
secretVersion: J;
// if there is no new version its for Delete
newVersion?: T;
op: CommitType;
@@ -70,6 +71,10 @@ export type TSecretApprovalRequest<
export type TGetSecretApprovalRequestList = {
workspaceId: string;
environment?: string;
status?: "open" | "close";
committer?: string;
limit?: number;
offset?: number;
};
export type TGetSecretApprovalRequestDetails = {
@@ -81,3 +86,7 @@ export type TUpdateSecretApprovalRequestStatusDTO = {
status: ApprovalStatus;
id: string;
};
export type TPerformSecretApprovalRequestMerge = {
id: string;
};
frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/SecretApprovalRequest.tsx
+145 -33
View File
@@ -1,8 +1,21 @@
import { useState } from "react";
import { faCheck, faCodeBranch } from "@fortawesome/free-solid-svg-icons";
import { Fragment, useState } from "react";
import {
faCheck,
faCheckCircle,
faChevronDown,
faCodeBranch
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { AnimatePresence, motion } from "framer-motion";
import {
Button,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger
} from "@app/components/v2";
import { useWorkspace } from "@app/context";
import { useGetSecretApprovalRequests, useGetWorkspaceUsers } from "@app/hooks/api";
import { TSecretApprovalRequest, TWorkspaceUser } from "@app/hooks/api/types";
@@ -17,7 +30,22 @@ export const SecretApprovalRequest = () => {
const workspaceId = currentWorkspace?._id || "";
const [selectedApproval, setSelectedApproval] = useState<TSecretApprovalRequest | null>(null);
const { data: secretApprovalRequests } = useGetSecretApprovalRequests({ workspaceId });
// filters
const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
const [envFilter, setEnvFilter] = useState<string>();
const [committerFilter, setCommitterFilter] = useState<string>();
const {
data: secretApprovalRequests,
isFetchingNextPage: isFetchingNextApprovalRequest,
fetchNextPage: fetchNextApprovalRequest,
hasNextPage: hasNextApprovalPage
} = useGetSecretApprovalRequests({
workspaceId,
status: statusFilter,
environment: envFilter,
committer: committerFilter
});
const { data: members } = useGetWorkspaceUsers(workspaceId);
const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
(prev, curr) => ({ ...prev, [curr._id]: curr }),
@@ -51,45 +79,129 @@ export const SecretApprovalRequest = () => {
initial={{ opacity: 0, translateX: -30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: -30 }}
className="rounded-md bg-mineshaft-800 text-gray-300"
className="rounded-md text-gray-300"
>
<div className="p-4 px-8 flex items-center space-x-8">
<div>
<div className="p-4 px-8 flex items-center space-x-8 bg-mineshaft-800">
<div
role="button"
tabIndex={0}
onClick={() => setStatusFilter("open")}
onKeyDown={(evt) => {
if (evt.key === "Enter") setStatusFilter("open");
}}
className={statusFilter === "close" ? "text-gray-500" : ""}
>
<FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
27 Open
</div>
<div className="text-gray-500">
<div
className={statusFilter === "open" ? "text-gray-500" : ""}
role="button"
tabIndex={0}
onClick={() => setStatusFilter("close")}
onKeyDown={(evt) => {
if (evt.key === "Enter") setStatusFilter("close");
}}
>
<FontAwesomeIcon icon={faCheck} className="mr-2" />
27 Closed
</div>
<div className="flex-grow flex justify-end space-x-8">
<DropdownMenu>
<DropdownMenuTrigger>
<Button
variant="plain"
colorSchema="secondary"
className={envFilter ? "text-white" : "text-bunker-300"}
rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
>
Environments
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Select an environment</DropdownMenuLabel>
{currentWorkspace?.environments.map(({ slug, name }) => (
<DropdownMenuItem
onClick={() => setEnvFilter((state) => (state === slug ? undefined : slug))}
key={`request-filter-${slug}`}
icon={envFilter === slug && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
{name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger>
<Button
variant="plain"
colorSchema="secondary"
className={committerFilter ? "text-white" : "text-bunker-300"}
rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
>
Author
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Select an author</DropdownMenuLabel>
{members?.map(({ user, _id }) => (
<DropdownMenuItem
onClick={() =>
setCommitterFilter((state) => (state === _id ? undefined : _id))
}
key={`request-filter-member-${_id}`}
icon={committerFilter === _id && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
{user.email}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
<div className="flex flex-col border-t border-mineshaft-600">
{secretApprovalRequests?.map((secretApproval) => {
const { _id: reqId, commits, committer } = secretApproval;
return (
<div
key={reqId}
className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onClick={() => setSelectedApproval(secretApproval)}
onKeyDown={(evt) => {
if (evt.key === "Enter") setSelectedApproval(secretApproval);
}}
>
<div className="mb-1">
<FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
{generateCommitText(commits)}
</div>
<span className="text-xs text-gray-500">
Opened 2 hours ago by {membersGroupById?.[committer]?.user?.firstName}{" "}
{membersGroupById?.[committer]?.user?.lastName} (
{membersGroupById?.[committer]?.user?.email}) - Review required
</span>
</div>
);
})}
<div className="flex flex-col border-t border-mineshaft-600 bg-mineshaft-800">
{secretApprovalRequests?.pages?.map((group, i) => (
<Fragment key={`secret-approval-request-${i + 1}`}>
{group?.map((secretApproval) => {
const { _id: reqId, commits, committer } = secretApproval;
return (
<div
key={reqId}
className="flex flex-col px-8 py-4 hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onClick={() => setSelectedApproval(secretApproval)}
onKeyDown={(evt) => {
if (evt.key === "Enter") setSelectedApproval(secretApproval);
}}
>
<div className="mb-1">
<FontAwesomeIcon icon={faCodeBranch} className="mr-2" />
{generateCommitText(commits)}
</div>
<span className="text-xs text-gray-500">
Opened 2 hours ago by {membersGroupById?.[committer]?.user?.firstName}{" "}
{membersGroupById?.[committer]?.user?.lastName} (
{membersGroupById?.[committer]?.user?.email}) - Review required
</span>
</div>
);
})}
</Fragment>
))}
</div>
<Button
className="mt-4 text-sm"
isFullWidth
variant="star"
isLoading={isFetchingNextApprovalRequest}
isDisabled={isFetchingNextApprovalRequest || !hasNextApprovalPage}
onClick={() => fetchNextApprovalRequest()}
>
{hasNextApprovalPage ? "Load More" : "End of history"}
</Button>
</motion.div>
)}
</AnimatePresence>
frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestAction.tsx
+47
View File
@@ -0,0 +1,47 @@
import { faCheck, faClose } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Button } from "@app/components/v2";
type Props = {
hasMerged?: boolean;
status: "close" | "open";
isMergable?: boolean;
isMerging?: boolean;
onMerge: () => void;
onClose?: () => void;
};
export const SecretApprovalRequestAction = ({
hasMerged,
status,
isMergable,
onMerge,
isMerging,
onClose
}: Props) => {
if (!hasMerged && status === "open") {
return (
<>
<Button
leftIcon={<FontAwesomeIcon icon={faCheck} />}
isDisabled={!isMergable}
isLoading={isMerging}
onClick={onMerge}
>
Merge
</Button>
<Button
onClick={onClose}
variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faClose} />}
>
Close request
</Button>
</>
);
}
if (hasMerged && status === "close") return <span>This approval request has been merged</span>;
return <span>This approval request has been closed</span>;
};
frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChangeItem.tsx
-1
View File
@@ -1 +0,0 @@
type Props = {};
frontend/src/views/SecretApprovalPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx
+75 -23
View File
@@ -4,7 +4,6 @@ import {
faCheck,
faCheckCircle,
faCircle,
faClose,
faCodeBranch,
faXmarkCircle
} from "@fortawesome/free-solid-svg-icons";
@@ -25,15 +24,19 @@ import {
Tooltip,
Tr
} from "@app/components/v2";
import { useUser } from "@app/context";
import {
useGetSecretApprovalRequestDetails,
useGetUserWsKey,
usePerformSecretApprovalRequestMerge,
useUpdateSecretApprovalRequestStatus
} from "@app/hooks/api";
import { ApprovalStatus, CommitType, TWorkspaceUser } from "@app/hooks/api/types";
import { useNotificationContext } from "~/components/context/Notifications/NotificationProvider";
import { SecretApprovalRequestAction } from "./SecretApprovalRequestAction";
export const generateCommitText = (commits: { op: CommitType }[] = []) => {
const score: Record<string, number> = {};
commits.forEach(({ op }) => {
@@ -94,6 +97,7 @@ export const SecretApprovalRequestChanges = ({
members = {}
}: Props) => {
const { createNotification } = useNotificationContext();
const { user } = useUser();
const { data: decryptFileKey } = useGetUserWsKey(workspaceId);
const {
data: secretApprovalRequestDetails,
@@ -109,9 +113,17 @@ export const SecretApprovalRequestChanges = ({
isLoading: isUpdatingRequestStatus,
variables
} = useUpdateSecretApprovalRequestStatus();
const { mutateAsync: performSecretApprovalMerge, isLoading: isMerging } =
usePerformSecretApprovalRequestMerge();
const isApproving = variables?.status === ApprovalStatus.APPROVED && isUpdatingRequestStatus;
const isRejecting = variables?.status === ApprovalStatus.REJECTED && isUpdatingRequestStatus;
// membership of present user
const myMembership = Object.values(members).find(
({ user: membershipUser }) => membershipUser.email === user.email
);
const myMembershipId = myMembership?._id || "";
const reviewedMembers = secretApprovalRequestDetails?.reviewers?.reduce<
Record<string, ApprovalStatus>
>(
@@ -121,6 +133,8 @@ export const SecretApprovalRequestChanges = ({
}),
{}
);
const hasApproved = reviewedMembers?.[myMembershipId] === ApprovalStatus.APPROVED;
const hasRejected = reviewedMembers?.[myMembershipId] === ApprovalStatus.REJECTED;
const handleSecretApprovalStatusUpdate = async (status: ApprovalStatus) => {
try {
@@ -128,6 +142,28 @@ export const SecretApprovalRequestChanges = ({
id: approvalRequestId,
status
});
createNotification({
type: "success",
text: `Successfully ${status} the request`
});
} catch (err) {
console.log(err);
createNotification({
type: "error",
text: "Failed to update the request status"
});
}
};
const handleSecretApprovalRequestMerge = async () => {
try {
await performSecretApprovalMerge({
id: approvalRequestId
});
createNotification({
type: "success",
text: "Successfully merged the request"
});
} catch (err) {
console.log(err);
createNotification({
@@ -145,6 +181,13 @@ export const SecretApprovalRequestChanges = ({
if (!isSecretApprovalRequestSuccess) return <div>Failed</div>;
const isMergable =
secretApprovalRequestDetails?.policy?.approvals <=
secretApprovalRequestDetails?.policy?.approvers?.filter(
(approverId) => reviewedMembers?.[approverId] === ApprovalStatus.APPROVED
).length;
const hasMerged = secretApprovalRequestDetails?.hasMerged;
return (
<div className="flex space-x-6">
<div className="flex-grow">
@@ -171,26 +214,26 @@ export const SecretApprovalRequestChanges = ({
</div>
<Button
size="xs"
leftIcon={<FontAwesomeIcon icon={faCheck} />}
leftIcon={hasApproved && <FontAwesomeIcon icon={faCheck} />}
onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.APPROVED)}
isLoading={isApproving}
isDisabled={isApproving}
isDisabled={isApproving || hasApproved}
>
Approve
{hasApproved ? "Approved" : "Approve"}
</Button>
<Button
size="xs"
variant="outline_bg"
leftIcon={<FontAwesomeIcon icon={faClose} />}
colorSchema="danger"
leftIcon={hasRejected && <FontAwesomeIcon icon={faCheck} />}
onClick={() => handleSecretApprovalStatusUpdate(ApprovalStatus.REJECTED)}
isLoading={isRejecting}
isDisabled={isRejecting}
isDisabled={isRejecting || hasRejected}
>
Reject
{hasRejected ? "Rejected" : "Reject"}
</Button>
</div>
<div className="flex flex-col space-y-4">
{secretApprovalRequestDetails.commits.map(({ op, secret, newVersion }, index) => (
{secretApprovalRequestDetails.commits.map(({ op, secretVersion, newVersion }, index) => (
<div key={`commit-change-secret-${index + 1}`}>
<TableContainer>
<Table>
@@ -207,16 +250,16 @@ export const SecretApprovalRequestChanges = ({
<TBody>
<Tr>
<Td className="text-red-600">OLD</Td>
<Td>{secret?.key}</Td>
<Td>{secretVersion?.key}</Td>
<Td>
<SecretInput isReadOnly value={secret?.value} />
<SecretInput isReadOnly value={secretVersion?.value} />
</Td>
<Td>{secret?.comment}</Td>
<Td>{secretVersion?.comment}</Td>
<Td>
{secret?.tags?.map(({ name, _id: tagId, tagColor }) => (
{secretVersion?.tags?.map(({ name, _id: tagId, tagColor }) => (
<Tag
className="flex items-center space-x-2 w-min"
key={`${secret._id}-${tagId}`}
key={`${secretVersion._id}-${tagId}`}
>
<div
className="w-3 h-3 rounded-full"
@@ -253,25 +296,31 @@ export const SecretApprovalRequestChanges = ({
) : (
<TBody>
<Tr>
<Td>{op === CommitType.CREATE ? newVersion?.secretKey : secret?.key}</Td>
<Td>
{op === CommitType.CREATE ? newVersion?.secretKey : secretVersion?.key}
</Td>
<Td>
<SecretInput
isReadOnly
value={
op === CommitType.CREATE ? newVersion?.secretValue : secret?.value
op === CommitType.CREATE
? newVersion?.secretValue
: secretVersion?.value
}
/>
</Td>
<Td>
{op === CommitType.CREATE ? newVersion?.secretComment : secret?.comment}
{op === CommitType.CREATE
? newVersion?.secretComment
: secretVersion?.comment}
</Td>
<Td>
{(op === CommitType.CREATE ? newVersion?.tags : secret?.tags)?.map(
{(op === CommitType.CREATE ? newVersion?.tags : secretVersion?.tags)?.map(
({ name, _id: tagId, tagColor }) => (
<Tag
className="flex items-center space-x-2 w-min"
key={`${
op === CommitType.CREATE ? newVersion?._id : secret?._id
op === CommitType.CREATE ? newVersion?._id : secretVersion?._id
}-${tagId}`}
>
<div
@@ -292,10 +341,13 @@ export const SecretApprovalRequestChanges = ({
))}
</div>
<div className="flex items-center px-4 py-6 rounded-lg space-x-6 bg-mineshaft-800 mt-8">
<Button leftIcon={<FontAwesomeIcon icon={faCheck} />}>Merge</Button>
<Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faClose} />}>
Close request
</Button>
<SecretApprovalRequestAction
hasMerged={hasMerged}
status={secretApprovalRequestDetails.status}
isMerging={isMerging}
isMergable={isMergable}
onMerge={handleSecretApprovalRequestMerge}
/>
</div>
</div>
<div className="w-1/5 pt-4 sticky top-0" style={{ minWidth: "240px" }}>
frontend/src/views/SecretMainPage/SecretMainPage.tsx
+12
View File
@@ -19,6 +19,7 @@ import {
useGetImportedSecrets,
useGetProjectFolders,
useGetProjectSecrets,
useGetSecretApprovalPolicyOfABoard,
useGetSecretImports,
useGetUserWsKey,
useGetWorkspaceSnapshotList,
@@ -118,6 +119,13 @@ export const SecretMainPage = () => {
// fetch tags
const { data: tags } = useGetWsTags(canReadSecret ? workspaceId : "");
const { data: boardPolicy } = useGetSecretApprovalPolicyOfABoard({
workspaceId,
environment,
secretPath
});
const isProtectedBranch = Boolean(boardPolicy);
const {
data: snapshotList,
isFetchingNextPage: isFetchingNextSnapshotList,
@@ -207,6 +215,7 @@ export const SecretMainPage = () => {
secretPath={secretPath}
isProjectRelated
onEnvChange={handleEnvChange}
isProtectedBranch={isProtectedBranch}
/>
</div>
{!isRollbackMode ? (
@@ -281,6 +290,7 @@ export const SecretMainPage = () => {
workspaceId={workspaceId}
secretPath={secretPath}
decryptFileKey={decryptFileKey!}
isProtectedBranch={isProtectedBranch}
/>
)}
{!canReadSecret && folders?.length === 0 && <PermissionDeniedBanner />}
@@ -292,6 +302,7 @@ export const SecretMainPage = () => {
decryptFileKey={decryptFileKey!}
secretPath={secretPath}
autoCapitalize={currentWorkspace?.autoCapitalization}
isProtectedBranch={isProtectedBranch}
/>
<SecretDropzone
secrets={secrets}
@@ -301,6 +312,7 @@ export const SecretMainPage = () => {
secretPath={secretPath}
isSmaller={isNotEmtpy}
environments={currentWorkspace?.environments}
isProtectedBranch={isProtectedBranch}
/>
<PitDrawer
secretSnaphots={snapshotList}
frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx
+6 -2
View File
@@ -23,6 +23,7 @@ type Props = {
secretPath?: string;
// modal props
autoCapitalize?: boolean;
isProtectedBranch?: boolean;
};
export const CreateSecretForm = ({
@@ -30,7 +31,8 @@ export const CreateSecretForm = ({
workspaceId,
decryptFileKey,
secretPath = "/",
autoCapitalize = true
autoCapitalize = true,
isProtectedBranch = false
}: Props) => {
const {
register,
@@ -62,7 +64,9 @@ export const CreateSecretForm = ({
reset();
createNotification({
type: "success",
text: "Successfully created secret"
text: isProtectedBranch
? "Requested changes have been send for review"
: "Successfully created secret"
});
} catch (error) {
console.log(error);
frontend/src/views/SecretMainPage/components/SecretDropzone/SecretDropzone.tsx
+6 -2
View File
@@ -43,6 +43,7 @@ type Props = {
environment: string;
secretPath: string;
secrets?: DecryptedSecret[];
isProtectedBranch?: boolean;
};
export const SecretDropzone = ({
@@ -52,7 +53,8 @@ export const SecretDropzone = ({
decryptFileKey,
environment,
secretPath,
secrets = []
secrets = [],
isProtectedBranch = false
}: Props): JSX.Element => {
const { t } = useTranslation();
const [isDragActive, setDragActive] = useToggle();
@@ -195,7 +197,9 @@ export const SecretDropzone = ({
handlePopUpClose("overlapKeyWarning");
createNotification({
type: "success",
text: "Successfully uploaded secrets"
text: isProtectedBranch
? "Uploaded changes have been send for review"
: "Successfully uploaded secrets"
});
} catch (err) {
console.log(err);
frontend/src/views/SecretMainPage/components/SecretListView/SecretDetaiSidebar.tsx
+3 -2
View File
@@ -49,7 +49,8 @@ type Props = {
onDeleteSecret: () => void;
onSaveSecret: (
orgSec: DecryptedSecret,
modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
cb?: () => void
) => Promise<void>;
tags: WsTag[];
onCreateTag: () => void;
@@ -143,7 +144,7 @@ export const SecretDetailSidebar = ({
};
const handleFormSubmit = async (data: TFormSchema) => {
await onSaveSecret(secret, { ...secret, ...data });
await onSaveSecret(secret, { ...secret, ...data }, () => reset());
};
return (
frontend/src/views/SecretMainPage/components/SecretListView/SecretItem.tsx
+4 -2
View File
@@ -54,7 +54,8 @@ type Props = {
secret: DecryptedSecret;
onSaveSecret: (
orgSec: DecryptedSecret,
modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
modSec: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
cb?: () => void
) => Promise<void>;
onDeleteSecret: (sec: DecryptedSecret) => void;
onDetailViewSecret: (sec: DecryptedSecret) => void;
@@ -148,13 +149,14 @@ export const SecretItem = memo(
);
setValue("valueOverride", secret?.valueOverride, { shouldDirty: !isUnsavedOverride });
} else {
reset();
setValue("overrideAction", SecretActionType.Modified, { shouldDirty: true });
setValue("valueOverride", "", { shouldDirty: true });
}
};
const handleFormSubmit = async (data: TFormSchema) => {
await onSaveSecret(secret, { ...secret, ...data });
await onSaveSecret(secret, { ...secret, ...data }, () => reset());
};
const handleTagSelect = (tag: WsTag) => {
frontend/src/views/SecretMainPage/components/SecretListView/SecretListView.tsx
+26 -17
View File
@@ -27,6 +27,7 @@ type Props = {
sortDir?: SortDir;
tags?: WsTag[];
isVisible?: boolean;
isProtectedBranch?: boolean;
};
const reorderSecretGroupByUnderscore = (secrets: DecryptedSecret[], sortDir: SortDir) => {
@@ -84,7 +85,8 @@ export const SecretListView = ({
filter,
sortDir = SortDir.ASC,
tags: wsTags = [],
isVisible
isVisible,
isProtectedBranch = false
}: Props) => {
const { createNotification } = useNotificationContext();
const queryClient = useQueryClient();
@@ -178,8 +180,10 @@ export const SecretListView = ({
const handleSaveSecret = useCallback(
async (
orgSecret: DecryptedSecret,
modSecret: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] }
modSecret: Omit<DecryptedSecret, "tags"> & { tags: { _id: string }[] },
cb?: () => void
) => {
console.log(orgSecret, modSecret);
const { key: oldKey } = orgSecret;
const { key, value, overrideAction, idOverride, valueOverride, tags, comment } = modSecret;
const hasKeyChanged = oldKey !== key;
@@ -193,6 +197,19 @@ export const SecretListView = ({
) && isSameTags;
try {
// personal secret change
if (overrideAction === "deleted") {
await handleSecretOperation("delete", "personal", oldKey);
} else if (overrideAction && idOverride) {
await handleSecretOperation("update", "personal", oldKey, {
value: valueOverride,
newKey: hasKeyChanged ? key : undefined,
skipMultilineEncoding: modSecret.skipMultilineEncoding
});
} else if (overrideAction) {
await handleSecretOperation("create", "personal", oldKey, { value: valueOverride });
}
// shared secret change
if (!isSharedSecUnchanged) {
await handleSecretOperation("update", "shared", oldKey, {
@@ -202,19 +219,7 @@ export const SecretListView = ({
newKey: hasKeyChanged ? key : undefined,
skipMultilineEncoding: modSecret.skipMultilineEncoding
});
}
// personal secret change
if (overrideAction === "deleted") {
await handleSecretOperation("delete", "personal", key);
} else if (overrideAction && idOverride) {
await handleSecretOperation("update", "personal", oldKey, {
value: valueOverride,
newKey: hasKeyChanged ? key : undefined,
skipMultilineEncoding: modSecret.skipMultilineEncoding
});
} else if (overrideAction) {
await handleSecretOperation("create", "personal", key, { value: valueOverride });
if (isProtectedBranch) cb?.();
}
queryClient.invalidateQueries(
@@ -229,7 +234,9 @@ export const SecretListView = ({
handlePopUpClose("secretDetail");
createNotification({
type: "success",
text: "Successfully saved secrets"
text: isProtectedBranch
? "Requested changes have been sent for review"
: "Successfully saved secrets"
});
} catch (error) {
console.log(error);
@@ -259,7 +266,9 @@ export const SecretListView = ({
handlePopUpClose("secretDetail");
createNotification({
type: "success",
text: "Successfully deleted secret"
text: isProtectedBranch
? "Requested changes have been sent for review"
: "Successfully deleted secret"
});
} catch (error) {
console.log(error);