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

2026-10-16 08:14:06 +00:00 · 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>;
+};
@@ -1 +0,0 @@
-type Props = {};
@@ -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" }}>