Disable approve/merge/close buttons for merged Proposed Changes (#4633)

Author: bilalabbad

changelog/3495.fixed.md

@@ -0,0 +1 @@
+Disable approve/merge/close buttons for merged Proposed Changes

frontend/app/src/screens/proposed-changes/action-button/pc-approve-button.tsx

@@ -12,16 +12,18 @@ import { useAtomValue } from "jotai/index";
 import React, { useState } from "react";
 import { toast } from "react-toastify";
 
-interface PcMergeButtonProps extends ButtonProps {
+interface PcApproveButtonProps extends ButtonProps {
   proposedChangeId: string;
   approvers: Array<any>;
+  state: "closed" | "open" | "merged";
 }
 
 export const PcApproveButton = ({
   approvers = [],
   proposedChangeId,
+  state,
   ...props
-}: PcMergeButtonProps) => {
+}: PcApproveButtonProps) => {
   const branch = useAtomValue(currentBranchAtom);
   const date = useAtomValue(datetimeAtom);
   const auth = useAuth();
@@ -81,7 +83,13 @@ export const PcApproveButton = ({
       variant="outline"
       onClick={handleApprove}
       isLoading={isLoadingApprove}
-      disabled={!auth?.permissions?.write || !approverId || !canApprove}
+      disabled={
+        !auth?.permissions?.write ||
+        !approverId ||
+        !canApprove ||
+        state === "closed" ||
+        state === "merged"
+      }
       {...props}
     >
       Approve

frontend/app/src/screens/proposed-changes/proposed-change-details.tsx

@@ -94,7 +94,11 @@ export const ProposedChangeDetails = ({ className, ...props }: HTMLAttributes<HT
       name: "Actions",
       value: (
         <div className="flex flex-wrap gap-2">
-          <PcApproveButton approvers={approvers} proposedChangeId={proposedChangeId!} />
+          <PcApproveButton
+            approvers={approvers}
+            proposedChangeId={proposedChangeId!}
+            state={state}
+          />
           <PcMergeButton
             proposedChangeId={proposedChangeId!}
             state={state}

frontend/app/tests/e2e/proposed-changes/proposed-changes.spec.ts

@@ -135,7 +135,9 @@ test.describe("/proposed-changes", () => {
         });
 
         await test.step("not able to edit proposed change", async () => {
+          await expect(page.getByRole("button", { name: "Approve" })).toBeDisabled();
           await expect(page.getByRole("button", { name: "Merge" })).toBeDisabled();
+          await expect(page.getByRole("button", { name: "Close" })).toBeDisabled();
           await expect(page.getByTestId("edit-button")).toBeDisabled();
         });
       });