Fix: Approval Usability

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/FlowPolicyNode.tsx

@@ -37,8 +37,9 @@ import { api } from "~/trpc/react";
 const ApprovalDialog: React.FC<{
   releaseId: string;
   policyId: string;
+  userId: string;
   children: React.ReactNode;
-}> = ({ releaseId, policyId, children }) => {
+}> = ({ releaseId, policyId, userId, children }) => {
   const approve = api.environment.policy.approval.approve.useMutation();
   const rejected = api.environment.policy.approval.reject.useMutation();
   const router = useRouter();
@@ -56,15 +57,15 @@ const ApprovalDialog: React.FC<{
         <AlertDialogFooter>
           <AlertDialogCancel
             onClick={async () => {
-              await rejected.mutateAsync({ releaseId, policyId });
+              await rejected.mutateAsync({ releaseId, policyId, userId });
               router.refresh();
             }}
           >
             Reject
           </AlertDialogCancel>
           <AlertDialogAction
             onClick={async () => {
-              await approve.mutateAsync({ releaseId, policyId });
+              await approve.mutateAsync({ releaseId, policyId, userId });
               router.refresh();
             }}
           >
@@ -242,7 +243,11 @@ const ApprovalCheck: React.FC<PolicyNodeProps["data"]> = ({ id, release }) => {
   }
   const status = approval.data?.status;
   return (
-    <ApprovalDialog policyId={id} releaseId={release.id}>
+    <ApprovalDialog
+      policyId={id}
+      releaseId={release.id}
+      userId={approval.data?.userId ?? ""}
+    >
       <button
         disabled={status === "approved" || status === "rejected"}
         className="flex w-full items-center gap-2 rounded-md hover:bg-neutral-800/50"

apps/webservice/src/app/[workspaceSlug]/systems/[systemSlug]/deployments/[deploymentSlug]/releases/[versionId]/PolicyApprovalRow.tsx

@@ -3,6 +3,7 @@
 import type {
   Environment,
   EnvironmentPolicyApproval,
+  User,
 } from "@ctrlplane/db/schema";
 import { useRouter } from "next/navigation";
 
@@ -12,26 +13,33 @@ import { toast } from "@ctrlplane/ui/toast";
 import { api } from "~/trpc/react";
 
 type PolicyApprovalRowProps = {
-  approval: EnvironmentPolicyApproval;
-  environments: Environment[];
+  approval: EnvironmentPolicyApproval & { user?: User | null };
+  environment: Environment | undefined;
 };
 
 export const PolicyApprovalRow: React.FC<PolicyApprovalRowProps> = ({
   approval,
-  environments,
+  environment,
 }) => {
   const router = useRouter();
   const utils = api.useUtils();
 
-  const { releaseId, policyId } = approval;
+  if (!environment) {
+    console.error("Environment is undefined for approval:", approval);
+    return null;
+  }
+
+  const environmentName = environment.name;
+  const { releaseId, policyId, status } = approval;
+  const currentUserId = api.user.viewer.useQuery().data?.id;
 
   const rejectMutation = api.environment.policy.approval.reject.useMutation({
     onSuccess: ({ cancelledJobCount }) => {
       router.refresh();
       utils.environment.policy.invalidate();
       utils.job.config.invalidate();
       toast.success(
-        `Rejected release to ${environmentNames} and cancelled ${cancelledJobCount} job${cancelledJobCount !== 1 ? "s" : ""}`,
+        `Rejected release to ${environmentName} and cancelled ${cancelledJobCount} job${cancelledJobCount !== 1 ? "s" : ""}`,
       );
     },
     onError: () => toast.error("Error rejecting release"),
@@ -42,28 +50,51 @@ export const PolicyApprovalRow: React.FC<PolicyApprovalRowProps> = ({
       router.refresh();
       utils.environment.policy.invalidate();
       utils.job.config.invalidate();
-      toast.success(`Approved release to ${environmentNames}`);
+      toast.success(`Approved release to ${environmentName}`);
     },
     onError: () => toast.error("Error approving release"),
   });
 
-  const environmentNames = environments.map((e) => e.name).join(", ");
-  const handleReject = () => rejectMutation.mutate({ releaseId, policyId });
-  const handleApprove = () => approveMutation.mutate(approval);
+  const handleReject = () =>
+    rejectMutation.mutate({
+      releaseId,
+      policyId,
+      userId: currentUserId!,
+    });
+  const handleApprove = () =>
+    approveMutation.mutate({
+      releaseId,
+      policyId,
+      userId: currentUserId!,
+    });
 
   return (
-    <div className="flex items-center gap-2 rounded-md border border-blue-400/50 bg-blue-500/10 p-2 text-sm">
-      <div className="ml-2 flex-grow">
-        Approve deploying to {environmentNames}
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        <Button variant="secondary" size="sm" onClick={handleReject}>
-          Reject
-        </Button>
-        <Button size="sm" onClick={handleApprove}>
-          Approve
-        </Button>
-      </div>
+    <div className="flex items-center gap-2 rounded-md text-sm">
+      {status === "pending" ? (
+        <div className="flex items-center gap-2">
+          <Button
+            variant="destructive"
+            className="h-6 px-2"
+            onClick={handleReject}
+          >
+            Reject
+          </Button>
+          <Button className="h-6 px-2" onClick={handleApprove}>
+            Approve
+          </Button>
+        </div>
+      ) : (
+        <div className="ml-2 flex-grow">
+          <span className="font-medium">
+            {status === "approved" ? (
+              <span className="text-green-300">Approved</span>
+            ) : (
+              <span className="text-red-300">Rejected</span>
+            )}{" "}
+            by {approval.user?.name}
+          </span>
+        </div>
+      )}
     </div>
   );
 };