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

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
@@ -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>
@@ -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>;
};
@@ -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" }}>
@@ -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}
@@ -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);
@@ -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);
@@ -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 (
@@ -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) => {
@@ -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);