@kuadrant/kuadrant-backstage-plugin-frontend 0.0.2-dev-844db4d → 0.0.2-dev-d4f65ae

package/dist/components/ApprovalQueueCard/ApprovalQueueCard.esm.js

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import { useApi, configApiRef, fetchApiRef, identityApiRef } from '@backstage/core-plugin-api';
+import { useApi, configApiRef, fetchApiRef, identityApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import { useAsync } from 'react-use';
 import { Progress, ResponseErrorPanel, InfoCard, Table } from '@backstage/core-components';
 import { kuadrantApiKeyRequestUpdateAllPermission, kuadrantApiKeyRequestUpdateOwnPermission } from '../../permissions.esm.js';
 import { useKuadrantPermission } from '../../utils/permissions.esm.js';
-import { Box, Typography, Tabs, Tab, Button, Accordion, AccordionSummary, Chip, AccordionDetails, Dialog, DialogTitle, DialogContent, TextField, DialogActions, Tooltip } from '@material-ui/core';
+import { Box, Typography, Tabs, Tab, Button, Accordion, AccordionSummary, Chip, AccordionDetails, Dialog, DialogTitle, DialogContent, TextField, DialogActions, CircularProgress, Tooltip } from '@material-ui/core';
 import CheckCircleIcon from '@material-ui/icons/CheckCircle';
 import CancelIcon from '@material-ui/icons/Cancel';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 
-const ApprovalDialog = ({ open, request, action, onClose, onConfirm }) => {
+const ApprovalDialog = ({ open, request, action, processing, onClose, onConfirm }) => {
   const [comment, setComment] = useState("");
   useEffect(() => {
     if (!open) {
@@ -18,9 +18,10 @@ const ApprovalDialog = ({ open, request, action, onClose, onConfirm }) => {
   }, [open]);
   const handleConfirm = () => {
     onConfirm(comment);
-    onClose();
   };
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, action === "approve" ? "Approve" : "Reject", " API Key Request"), /* @__PURE__ */ React.createElement(DialogContent, null, request && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "User:"), " ", request.spec.requestedBy.userId), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "API:"), " ", request.spec.apiName), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Plan:"), " ", request.spec.planTier), /* @__PURE__ */ React.createElement(Box, { mb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "span", style: { fontWeight: "bold" } }, "Use Case:"), " ", /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "span", style: { whiteSpace: "pre-wrap" } }, request.spec.useCase || "-")), /* @__PURE__ */ React.createElement(
+  const actionLabel = action === "approve" ? "Approve" : "Reject";
+  const processingLabel = action === "approve" ? "Approving..." : "Rejecting...";
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: processing ? undefined : onClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, actionLabel, " API Key Request"), /* @__PURE__ */ React.createElement(DialogContent, null, request && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "User:"), " ", request.spec.requestedBy.userId), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "API:"), " ", request.spec.apiName), /* @__PURE__ */ React.createElement("p", null, /* @__PURE__ */ React.createElement("strong", null, "Tier:"), " ", request.spec.planTier), /* @__PURE__ */ React.createElement(Box, { mb: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "span", style: { fontWeight: "bold" } }, "Use Case:"), " ", /* @__PURE__ */ React.createElement(Typography, { variant: "body2", component: "span", style: { whiteSpace: "pre-wrap" } }, request.spec.useCase || "-")), /* @__PURE__ */ React.createElement(
     TextField,
     {
       label: "Comment (optional)",
@@ -29,19 +30,22 @@ const ApprovalDialog = ({ open, request, action, onClose, onConfirm }) => {
       fullWidth: true,
       margin: "normal",
       value: comment,
-      onChange: (e) => setComment(e.target.value)
+      onChange: (e) => setComment(e.target.value),
+      disabled: processing
     }
-  ))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose }, "Cancel"), /* @__PURE__ */ React.createElement(
+  ))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: handleConfirm,
       color: action === "approve" ? "primary" : "secondary",
-      variant: "contained"
+      variant: "contained",
+      disabled: processing,
+      startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
     },
-    action === "approve" ? "Approve" : "Reject"
+    processing ? processingLabel : actionLabel
   )));
 };
-const BulkActionDialog = ({ open, requests, action, onClose, onConfirm }) => {
+const BulkActionDialog = ({ open, requests, action, processing, onClose, onConfirm }) => {
   const [comment, setComment] = useState("");
   useEffect(() => {
     if (!open) {
@@ -50,10 +54,11 @@ const BulkActionDialog = ({ open, requests, action, onClose, onConfirm }) => {
   }, [open]);
   const handleConfirm = () => {
     onConfirm(comment);
-    onClose();
   };
   const isApprove = action === "approve";
-  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, isApprove ? "Approve" : "Reject", " ", requests.length, " API Key Requests"), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "You are about to ", isApprove ? "approve" : "reject", " the following requests:"), /* @__PURE__ */ React.createElement(Box, { mb: 2, maxHeight: 200, overflow: "auto" }, requests.map((request) => /* @__PURE__ */ React.createElement(Box, { key: `${request.metadata.namespace}/${request.metadata.name}`, mb: 1, p: 1, bgcolor: "background.default" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement("strong", null, request.spec.requestedBy.userId), " - ", request.spec.apiName, " (", request.spec.planTier, ")")))), /* @__PURE__ */ React.createElement(
+  const actionLabel = isApprove ? "Approve All" : "Reject All";
+  const processingLabel = isApprove ? "Approving..." : "Rejecting...";
+  return /* @__PURE__ */ React.createElement(Dialog, { open, onClose: processing ? undefined : onClose, maxWidth: "md", fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, isApprove ? "Approve" : "Reject", " ", requests.length, " API Key Requests"), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "You are about to ", isApprove ? "approve" : "reject", " the following requests:"), /* @__PURE__ */ React.createElement(Box, { mb: 2, maxHeight: 200, overflow: "auto" }, requests.map((request) => /* @__PURE__ */ React.createElement(Box, { key: `${request.metadata.namespace}/${request.metadata.name}`, mb: 1, p: 1, bgcolor: "background.default" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, /* @__PURE__ */ React.createElement("strong", null, request.spec.requestedBy.userId), " - ", request.spec.apiName, " (", request.spec.planTier, ")")))), /* @__PURE__ */ React.createElement(
     TextField,
     {
       label: "Comment (optional)",
@@ -62,22 +67,26 @@ const BulkActionDialog = ({ open, requests, action, onClose, onConfirm }) => {
       margin: "normal",
       value: comment,
       onChange: (e) => setComment(e.target.value),
-      helperText: `This comment will be applied to all ${isApprove ? "approved" : "rejected"} requests`
+      helperText: `This comment will be applied to all ${isApprove ? "approved" : "rejected"} requests`,
+      disabled: processing
     }
-  )), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose }, "Cancel"), /* @__PURE__ */ React.createElement(
+  )), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
     Button,
     {
       onClick: handleConfirm,
       color: isApprove ? "primary" : "secondary",
-      variant: "contained"
+      variant: "contained",
+      disabled: processing,
+      startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
     },
-    isApprove ? "Approve All" : "Reject All"
+    processing ? processingLabel : actionLabel
   )));
 };
 const ApprovalQueueCard = () => {
   const config = useApi(configApiRef);
   const fetchApi = useApi(fetchApiRef);
   const identityApi = useApi(identityApiRef);
+  const alertApi = useApi(alertApiRef);
   const backendUrl = config.getString("backend.baseUrl");
   const [refresh, setRefresh] = useState(0);
   const [selectedTab, setSelectedTab] = useState(0);
@@ -85,12 +94,14 @@ const ApprovalQueueCard = () => {
   const [dialogState, setDialogState] = useState({
     open: false,
     request: null,
-    action: "approve"
+    action: "approve",
+    processing: false
   });
   const [bulkDialogState, setBulkDialogState] = useState({
     open: false,
     requests: [],
-    action: "approve"
+    action: "approve",
+    processing: false
   });
   const {
     allowed: canUpdateAllRequests,
@@ -102,29 +113,39 @@ const ApprovalQueueCard = () => {
     loading: updateOwnPermissionLoading,
     error: updateOwnPermissionError
   } = useKuadrantPermission(kuadrantApiKeyRequestUpdateOwnPermission);
-  const canUpdateRequests = canUpdateAllRequests || canUpdateOwnRequests;
   const updatePermissionLoading = updateAllPermissionLoading || updateOwnPermissionLoading;
   const updatePermissionError = updateAllPermissionError || updateOwnPermissionError;
   const { value, loading, error } = useAsync(async () => {
     const identity = await identityApi.getBackstageIdentity();
     const reviewedBy = identity.userEntityRef;
     console.log("ApprovalQueueCard: fetching all requests from", `${backendUrl}/api/kuadrant/requests`);
-    const response = await fetchApi.fetch(
-      `${backendUrl}/api/kuadrant/requests`
-    );
-    if (!response.ok) {
-      console.log("ApprovalQueueCard: failed to fetch requests, status:", response.status);
-      return { pending: [], approved: [], rejected: [], reviewedBy };
+    const [requestsResponse, apiProductsResponse] = await Promise.all([
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/requests`),
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`)
+    ]);
+    if (!requestsResponse.ok) {
+      console.log("ApprovalQueueCard: failed to fetch requests, status:", requestsResponse.status);
+      return { pending: [], approved: [], rejected: [], reviewedBy, ownedApiProducts: /* @__PURE__ */ new Set() };
     }
-    const contentType = response.headers.get("content-type");
+    const contentType = requestsResponse.headers.get("content-type");
     if (!contentType || !contentType.includes("application/json")) {
       console.log("ApprovalQueueCard: received non-json response");
-      return { pending: [], approved: [], rejected: [], reviewedBy };
+      return { pending: [], approved: [], rejected: [], reviewedBy, ownedApiProducts: /* @__PURE__ */ new Set() };
     }
-    const data = await response.json();
+    const data = await requestsResponse.json();
     const allRequests = data.items || [];
+    const ownedApiProducts = /* @__PURE__ */ new Set();
+    if (apiProductsResponse.ok) {
+      const apiProductsData = await apiProductsResponse.json();
+      for (const product of apiProductsData.items || []) {
+        const owner = product.metadata?.annotations?.["backstage.io/owner"];
+        if (owner === reviewedBy) {
+          ownedApiProducts.add(`${product.metadata.namespace}/${product.metadata.name}`);
+        }
+      }
+    }
     console.log("ApprovalQueueCard: received", allRequests.length, "total requests");
-    console.log("ApprovalQueueCard: raw requests:", allRequests);
+    console.log("ApprovalQueueCard: user owns", ownedApiProducts.size, "api products");
     const pending2 = allRequests.filter((r) => {
       const phase = r.status?.phase || "Pending";
       return phase === "Pending";
@@ -142,16 +163,17 @@ const ApprovalQueueCard = () => {
       approved: approved2.length,
       rejected: rejected2.length
     });
-    return { pending: pending2, approved: approved2, rejected: rejected2, reviewedBy };
+    return { pending: pending2, approved: approved2, rejected: rejected2, reviewedBy, ownedApiProducts };
   }, [backendUrl, fetchApi, identityApi, refresh]);
   const handleApprove = (request) => {
-    setDialogState({ open: true, request, action: "approve" });
+    setDialogState({ open: true, request, action: "approve", processing: false });
   };
   const handleReject = (request) => {
-    setDialogState({ open: true, request, action: "reject" });
+    setDialogState({ open: true, request, action: "reject", processing: false });
   };
   const handleConfirm = async (comment) => {
     if (!dialogState.request || !value) return;
+    setDialogState((prev) => ({ ...prev, processing: true }));
     const endpoint = dialogState.action === "approve" ? `${backendUrl}/api/kuadrant/requests/${dialogState.request.metadata.namespace}/${dialogState.request.metadata.name}/approve` : `${backendUrl}/api/kuadrant/requests/${dialogState.request.metadata.namespace}/${dialogState.request.metadata.name}/reject`;
     try {
       const response = await fetchApi.fetch(endpoint, {
@@ -165,22 +187,27 @@ const ApprovalQueueCard = () => {
       if (!response.ok) {
         throw new Error(`failed to ${dialogState.action} request`);
       }
-      setDialogState({ open: false, request: null, action: "approve" });
+      setDialogState({ open: false, request: null, action: "approve", processing: false });
       setRefresh((r) => r + 1);
+      const action = dialogState.action === "approve" ? "approved" : "rejected";
+      alertApi.post({ message: `Request ${action}`, severity: "success", display: "transient" });
     } catch (err) {
       console.error(`error ${dialogState.action}ing request:`, err);
+      setDialogState((prev) => ({ ...prev, processing: false }));
+      alertApi.post({ message: `Failed to ${dialogState.action} request`, severity: "error", display: "transient" });
     }
   };
   const handleBulkApprove = () => {
     if (selectedRequests.length === 0) return;
-    setBulkDialogState({ open: true, requests: selectedRequests, action: "approve" });
+    setBulkDialogState({ open: true, requests: selectedRequests, action: "approve", processing: false });
   };
   const handleBulkReject = () => {
     if (selectedRequests.length === 0) return;
-    setBulkDialogState({ open: true, requests: selectedRequests, action: "reject" });
+    setBulkDialogState({ open: true, requests: selectedRequests, action: "reject", processing: false });
   };
   const handleBulkConfirm = async (comment) => {
     if (!value || bulkDialogState.requests.length === 0) return;
+    setBulkDialogState((prev) => ({ ...prev, processing: true }));
     const isApprove = bulkDialogState.action === "approve";
     const endpoint = isApprove ? `${backendUrl}/api/kuadrant/requests/bulk-approve` : `${backendUrl}/api/kuadrant/requests/bulk-reject`;
     try {
@@ -199,11 +226,16 @@ const ApprovalQueueCard = () => {
       if (!response.ok) {
         throw new Error(`failed to bulk ${bulkDialogState.action} requests`);
       }
-      setBulkDialogState({ open: false, requests: [], action: "approve" });
+      const count = bulkDialogState.requests.length;
+      const action = isApprove ? "approved" : "rejected";
+      setBulkDialogState({ open: false, requests: [], action: "approve", processing: false });
       setSelectedRequests([]);
       setRefresh((r) => r + 1);
+      alertApi.post({ message: `${count} requests ${action}`, severity: "success", display: "transient" });
     } catch (err) {
       console.error(`error bulk ${bulkDialogState.action}ing requests:`, err);
+      setBulkDialogState((prev) => ({ ...prev, processing: false }));
+      alertApi.post({ message: `Failed to bulk ${bulkDialogState.action} requests`, severity: "error", display: "transient" });
     }
   };
   if (loading || updatePermissionLoading) {
@@ -250,7 +282,7 @@ const ApprovalQueueCard = () => {
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.spec.apiNamespace)
     },
     {
-      title: "Plan",
+      title: "Tier",
       field: "spec.planTier",
       render: (row) => /* @__PURE__ */ React.createElement(
         Chip,
@@ -291,7 +323,10 @@ const ApprovalQueueCard = () => {
       title: "Actions",
       filtering: false,
       render: (row) => {
-        if (!canUpdateRequests) return null;
+        const apiProductKey = `${row.spec.apiNamespace}/${row.spec.apiName}`;
+        const ownsApiProduct = value?.ownedApiProducts?.has(apiProductKey) ?? false;
+        const canUpdate = canUpdateAllRequests || canUpdateOwnRequests && ownsApiProduct;
+        if (!canUpdate) return null;
         return /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(
           Button,
           {
@@ -338,7 +373,7 @@ const ApprovalQueueCard = () => {
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.spec.apiNamespace)
     },
     {
-      title: "Plan",
+      title: "Tier",
       field: "spec.planTier",
       render: (row) => /* @__PURE__ */ React.createElement(
         Chip,
@@ -401,7 +436,7 @@ const ApprovalQueueCard = () => {
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.spec.apiNamespace)
     },
     {
-      title: "Plan",
+      title: "Tier",
       field: "spec.planTier",
       render: (row) => /* @__PURE__ */ React.createElement(
         Chip,
@@ -475,16 +510,16 @@ const ApprovalQueueCard = () => {
   const groupByApiProduct = (requests) => {
     const grouped = /* @__PURE__ */ new Map();
     requests.forEach((request) => {
-      const apiName = request.spec.apiName;
-      if (!grouped.has(apiName)) {
-        grouped.set(apiName, []);
+      const key = `${request.spec.apiNamespace}/${request.spec.apiName}`;
+      if (!grouped.has(key)) {
+        grouped.set(key, []);
       }
-      grouped.get(apiName).push(request);
+      grouped.get(key).push(request);
     });
     return grouped;
   };
   const groupedData = groupByApiProduct(tabData.data);
-  const apiProducts = Array.from(groupedData.keys()).sort();
+  const apiProductKeys = Array.from(groupedData.keys()).sort();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
     InfoCard,
     {
@@ -506,7 +541,7 @@ const ApprovalQueueCard = () => {
       /* @__PURE__ */ React.createElement(Tab, { label: `Pending (${pending.length})` }),
       /* @__PURE__ */ React.createElement(Tab, { label: `Rejected (${rejected.length})` })
     )),
-    canUpdateRequests && selectedTab === 1 && selectedRequests.length > 0 && /* @__PURE__ */ React.createElement(Box, { mb: 2, display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, bgcolor: "background.default" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, selectedRequests.length, " request", selectedRequests.length !== 1 ? "s" : "", " selected"), /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(
+    selectedTab === 1 && selectedRequests.length > 0 && /* @__PURE__ */ React.createElement(Box, { mb: 2, display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, bgcolor: "background.default" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, selectedRequests.length, " request", selectedRequests.length !== 1 ? "s" : "", " selected"), /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(
       Button,
       {
         size: "small",
@@ -527,9 +562,12 @@ const ApprovalQueueCard = () => {
       },
       "Reject Selected"
     ))),
-    tabData.data.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 3, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, selectedTab === 0 && "No approved requests.", selectedTab === 1 && "No pending requests.", selectedTab === 2 && "No rejected requests.")) : /* @__PURE__ */ React.createElement(Box, null, apiProducts.map((apiName) => {
-      const requests = groupedData.get(apiName) || [];
-      return /* @__PURE__ */ React.createElement(Accordion, { key: apiName, defaultExpanded: apiProducts.length === 1 }, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, apiName), /* @__PURE__ */ React.createElement(
+    tabData.data.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 3, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, selectedTab === 0 && "No approved requests.", selectedTab === 1 && "No pending requests.", selectedTab === 2 && "No rejected requests.")) : /* @__PURE__ */ React.createElement(Box, null, apiProductKeys.map((apiProductKey) => {
+      const requests = groupedData.get(apiProductKey) || [];
+      const displayName = requests[0]?.spec.apiName || apiProductKey;
+      const ownsThisApiProduct = value?.ownedApiProducts?.has(apiProductKey) ?? false;
+      const canSelectRows = canUpdateAllRequests || canUpdateOwnRequests && ownsThisApiProduct;
+      return /* @__PURE__ */ React.createElement(Accordion, { key: apiProductKey, defaultExpanded: apiProductKeys.length === 1 }, /* @__PURE__ */ React.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%" }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, displayName), /* @__PURE__ */ React.createElement(
         Chip,
         {
           label: `${requests.length} request${requests.length !== 1 ? "s" : ""}`,
@@ -541,7 +579,7 @@ const ApprovalQueueCard = () => {
         Table,
         {
           options: {
-            selection: canUpdateRequests && tabData.showSelection,
+            selection: canSelectRows && tabData.showSelection,
             paging: requests.length > 5,
             pageSize: 20,
             search: true,
@@ -555,7 +593,7 @@ const ApprovalQueueCard = () => {
           columns: tabData.columns,
           onSelectionChange: (rows) => {
             const otherSelections = selectedRequests.filter(
-              (r) => r.spec.apiName !== apiName
+              (r) => `${r.spec.apiNamespace}/${r.spec.apiName}` !== apiProductKey
             );
             setSelectedRequests([...otherSelections, ...rows]);
           }
@@ -568,7 +606,8 @@ const ApprovalQueueCard = () => {
       open: dialogState.open,
       request: dialogState.request,
       action: dialogState.action,
-      onClose: () => setDialogState({ open: false, request: null, action: "approve" }),
+      processing: dialogState.processing,
+      onClose: () => setDialogState({ open: false, request: null, action: "approve", processing: false }),
       onConfirm: handleConfirm
     }
   ), /* @__PURE__ */ React.createElement(
@@ -577,7 +616,8 @@ const ApprovalQueueCard = () => {
       open: bulkDialogState.open,
       requests: bulkDialogState.requests,
       action: bulkDialogState.action,
-      onClose: () => setBulkDialogState({ open: false, requests: [], action: "approve" }),
+      processing: bulkDialogState.processing,
+      onClose: () => setBulkDialogState({ open: false, requests: [], action: "approve", processing: false }),
       onConfirm: handleBulkConfirm
     }
   ));