@kuadrant/kuadrant-backstage-plugin-frontend 0.0.2-dev-61ff3d3 → 0.0.2-dev-b696169

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

@@ -9,36 +9,97 @@ 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, processing, onClose, onConfirm }) => {
+const ApprovalDialog = ({
+  open,
+  request,
+  action,
+  processing,
+  onClose,
+  onConfirm
+}) => {
   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.apiProductRef?.name || "unknown"), /* @__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(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
     {
-      onClick: onConfirm,
-      color: action === "approve" ? "primary" : "secondary",
-      variant: "contained",
-      disabled: processing,
-      startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      open,
+      onClose: processing ? undefined : onClose,
+      maxWidth: "sm",
+      fullWidth: true
     },
-    processing ? processingLabel : actionLabel
-  )));
+    /* @__PURE__ */ React.createElement(DialogTitle, null, actionLabel, " API Key"),
+    /* @__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.apiProductRef?.name || "unknown"), /* @__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(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: onConfirm,
+        color: action === "approve" ? "primary" : "secondary",
+        variant: "contained",
+        disabled: processing,
+        startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      },
+      processing ? processingLabel : actionLabel
+    ))
+  );
 };
-const BulkActionDialog = ({ open, requests, action, processing, onClose, onConfirm }) => {
+const BulkActionDialog = ({
+  open,
+  requests,
+  action,
+  processing,
+  onClose,
+  onConfirm
+}) => {
   const isApprove = action === "approve";
   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.apiProductRef?.name || "unknown", " (", request.spec.planTier, ")"))))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
     {
-      onClick: onConfirm,
-      color: isApprove ? "primary" : "secondary",
-      variant: "contained",
-      disabled: processing,
-      startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      open,
+      onClose: processing ? undefined : onClose,
+      maxWidth: "md",
+      fullWidth: true
     },
-    processing ? processingLabel : actionLabel
-  )));
+    /* @__PURE__ */ React.createElement(DialogTitle, null, isApprove ? "Approve" : "Reject", " ", requests.length, " API Keys"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "You are about to ", isApprove ? "approve" : "reject", " the following API keys:"), /* @__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.apiProductRef?.name || "unknown", " (", request.spec.planTier, ")")
+    )))),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: onClose, disabled: processing }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: onConfirm,
+        color: isApprove ? "primary" : "secondary",
+        variant: "contained",
+        disabled: processing,
+        startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      },
+      processing ? processingLabel : actionLabel
+    ))
+  );
 };
 const ApprovalQueueCard = () => {
   const config = useApi(configApiRef);
@@ -76,14 +137,26 @@ const ApprovalQueueCard = () => {
   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`);
+    console.log(
+      "ApprovalQueueCard: fetching all requests from",
+      `${backendUrl}/api/kuadrant/requests`
+    );
     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() };
+      console.log(
+        "ApprovalQueueCard: failed to fetch requests, status:",
+        requestsResponse.status
+      );
+      return {
+        pending: [],
+        approved: [],
+        rejected: [],
+        reviewedBy,
+        ownedApiProducts: /* @__PURE__ */ new Set()
+      };
     }
     const contentType = requestsResponse.headers.get("content-type");
     if (!contentType?.includes("application/json")) {
@@ -93,7 +166,13 @@ const ApprovalQueueCard = () => {
         display: "transient",
         severity: "warning"
       });
-      return { pending: [], approved: [], rejected: [], reviewedBy, ownedApiProducts: /* @__PURE__ */ new Set() };
+      return {
+        pending: [],
+        approved: [],
+        rejected: [],
+        reviewedBy,
+        ownedApiProducts: /* @__PURE__ */ new Set()
+      };
     }
     const data = await requestsResponse.json();
     const allRequests = data.items || [];
@@ -103,12 +182,22 @@ const ApprovalQueueCard = () => {
       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}`);
+          ownedApiProducts.add(
+            `${product.metadata.namespace}/${product.metadata.name}`
+          );
         }
       }
     }
-    console.log("ApprovalQueueCard: received", allRequests.length, "total requests");
-    console.log("ApprovalQueueCard: user owns", ownedApiProducts.size, "api products");
+    console.log(
+      "ApprovalQueueCard: received",
+      allRequests.length,
+      "total requests"
+    );
+    console.log(
+      "ApprovalQueueCard: user owns",
+      ownedApiProducts.size,
+      "api products"
+    );
     const pending2 = allRequests.filter((r) => {
       const phase = r.status?.phase || "Pending";
       return phase === "Pending";
@@ -129,10 +218,20 @@ const ApprovalQueueCard = () => {
     return { pending: pending2, approved: approved2, rejected: rejected2, reviewedBy, ownedApiProducts };
   }, [backendUrl, fetchApi, identityApi, refresh]);
   const handleApprove = (request) => {
-    setDialogState({ open: true, request, action: "approve", processing: false });
+    setDialogState({
+      open: true,
+      request,
+      action: "approve",
+      processing: false
+    });
   };
   const handleReject = (request) => {
-    setDialogState({ open: true, request, action: "reject", processing: false });
+    setDialogState({
+      open: true,
+      request,
+      action: "reject",
+      processing: false
+    });
   };
   const handleConfirm = async () => {
     if (!dialogState.request || !value) return;
@@ -149,23 +248,46 @@ const ApprovalQueueCard = () => {
       if (!response.ok) {
         throw new Error(`failed to ${dialogState.action} request`);
       }
-      setDialogState({ open: false, request: null, action: "approve", processing: false });
+      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" });
+      alertApi.post({
+        message: `API key ${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" });
+      alertApi.post({
+        message: `Failed to ${dialogState.action} API key`,
+        severity: "error",
+        display: "transient"
+      });
     }
   };
   const handleBulkApprove = () => {
     if (selectedRequests.length === 0) return;
-    setBulkDialogState({ open: true, requests: selectedRequests, action: "approve", processing: false });
+    setBulkDialogState({
+      open: true,
+      requests: selectedRequests,
+      action: "approve",
+      processing: false
+    });
   };
   const handleBulkReject = () => {
     if (selectedRequests.length === 0) return;
-    setBulkDialogState({ open: true, requests: selectedRequests, action: "reject", processing: false });
+    setBulkDialogState({
+      open: true,
+      requests: selectedRequests,
+      action: "reject",
+      processing: false
+    });
   };
   const handleBulkConfirm = async () => {
     if (!value || bulkDialogState.requests.length === 0) return;
@@ -189,14 +311,27 @@ const ApprovalQueueCard = () => {
       }
       const count = bulkDialogState.requests.length;
       const action = isApprove ? "approved" : "rejected";
-      setBulkDialogState({ open: false, requests: [], action: "approve", processing: false });
+      setBulkDialogState({
+        open: false,
+        requests: [],
+        action: "approve",
+        processing: false
+      });
       setSelectedRequests([]);
       setRefresh((r) => r + 1);
-      alertApi.post({ message: `${count} requests ${action}`, severity: "success", display: "transient" });
+      alertApi.post({
+        message: `${count} API keys ${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" });
+      alertApi.post({
+        message: `Failed to bulk ${bulkDialogState.action} API keys`,
+        severity: "error",
+        display: "transient"
+      });
     }
   };
   if (loading || updatePermissionLoading) {
@@ -223,7 +358,7 @@ const ApprovalQueueCard = () => {
   };
   const pendingColumns = [
     {
-      title: "Request Name",
+      title: "Name",
       field: "metadata.name",
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.metadata.name)
     },
@@ -245,13 +380,7 @@ const ApprovalQueueCard = () => {
     {
       title: "Tier",
       field: "spec.planTier",
-      render: (row) => /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          label: row.spec.planTier,
-          size: "small"
-        }
-      )
+      render: (row) => /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, size: "small" })
     },
     {
       title: "Use Case",
@@ -314,7 +443,7 @@ const ApprovalQueueCard = () => {
   ];
   const approvedColumns = [
     {
-      title: "Request Name",
+      title: "Name",
       field: "metadata.name",
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.metadata.name)
     },
@@ -336,13 +465,7 @@ const ApprovalQueueCard = () => {
     {
       title: "Tier",
       field: "spec.planTier",
-      render: (row) => /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          label: row.spec.planTier,
-          size: "small"
-        }
-      )
+      render: (row) => /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, size: "small" })
     },
     {
       title: "Requested",
@@ -377,7 +500,7 @@ const ApprovalQueueCard = () => {
   ];
   const rejectedColumns = [
     {
-      title: "Request Name",
+      title: "Name",
       field: "metadata.name",
       render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.metadata.name)
     },
@@ -399,13 +522,7 @@ const ApprovalQueueCard = () => {
     {
       title: "Tier",
       field: "spec.planTier",
-      render: (row) => /* @__PURE__ */ React.createElement(
-        Chip,
-        {
-          label: row.spec.planTier,
-          size: "small"
-        }
-      )
+      render: (row) => /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, size: "small" })
     },
     {
       title: "Requested",
@@ -436,13 +553,29 @@ const ApprovalQueueCard = () => {
             tableData: { checked: isSelected }
           };
         });
-        return { data: pendingWithSelection, columns: pendingColumns, showSelection: true };
+        return {
+          data: pendingWithSelection,
+          columns: pendingColumns,
+          showSelection: true
+        };
       case 1:
-        return { data: addIds(approved), columns: approvedColumns, showSelection: false };
+        return {
+          data: addIds(approved),
+          columns: approvedColumns,
+          showSelection: false
+        };
       case 2:
-        return { data: addIds(rejected), columns: rejectedColumns, showSelection: false };
+        return {
+          data: addIds(rejected),
+          columns: rejectedColumns,
+          showSelection: false
+        };
       default:
-        return { data: addIds(pending), columns: pendingColumns, showSelection: true };
+        return {
+          data: addIds(pending),
+          columns: pendingColumns,
+          showSelection: true
+        };
     }
   };
   const tabData = getTabData();
@@ -477,68 +610,119 @@ const ApprovalQueueCard = () => {
         textColor: "primary",
         "data-testid": "approval-queue-tabs"
       },
-      /* @__PURE__ */ React.createElement(Tab, { label: `Pending (${pending.length})`, "data-testid": "approval-queue-pending-tab" }),
-      /* @__PURE__ */ React.createElement(Tab, { label: `Approved (${approved.length})`, "data-testid": "approval-queue-approved-tab" }),
-      /* @__PURE__ */ React.createElement(Tab, { label: `Rejected (${rejected.length})`, "data-testid": "approval-queue-rejected-tab" })
+      /* @__PURE__ */ React.createElement(
+        Tab,
+        {
+          label: `Pending (${pending.length})`,
+          "data-testid": "approval-queue-pending-tab"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Tab,
+        {
+          label: `Approved (${approved.length})`,
+          "data-testid": "approval-queue-approved-tab"
+        }
+      ),
+      /* @__PURE__ */ React.createElement(
+        Tab,
+        {
+          label: `Rejected (${rejected.length})`,
+          "data-testid": "approval-queue-rejected-tab"
+        }
+      )
     )),
-    selectedTab === 0 && 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",
-        variant: "contained",
-        color: "primary",
-        startIcon: /* @__PURE__ */ React.createElement(CheckCircleIcon, null),
-        onClick: handleBulkApprove
-      },
-      "Approve Selected"
-    ), /* @__PURE__ */ React.createElement(
-      Button,
+    selectedTab === 0 && selectedRequests.length > 0 && /* @__PURE__ */ React.createElement(
+      Box,
       {
-        size: "small",
-        variant: "contained",
-        color: "secondary",
-        startIcon: /* @__PURE__ */ React.createElement(CancelIcon, null),
-        onClick: handleBulkReject
+        mb: 2,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        p: 2,
+        bgcolor: "background.default"
       },
-      "Reject Selected"
-    ))),
+      /* @__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",
+          variant: "contained",
+          color: "primary",
+          startIcon: /* @__PURE__ */ React.createElement(CheckCircleIcon, null),
+          onClick: handleBulkApprove
+        },
+        "Approve Selected"
+      ), /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          size: "small",
+          variant: "contained",
+          color: "secondary",
+          startIcon: /* @__PURE__ */ React.createElement(CancelIcon, null),
+          onClick: handleBulkReject
+        },
+        "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 pending requests.", selectedTab === 1 && "No approved requests.", selectedTab === 2 && "No rejected requests.")) : /* @__PURE__ */ React.createElement(Box, null, apiProductKeys.map((apiProductKey) => {
       const requests = groupedData.get(apiProductKey) || [];
       const displayName = requests[0]?.spec.apiProductRef?.name || 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,
+      return /* @__PURE__ */ React.createElement(
+        Accordion,
         {
-          label: `${requests.length} request${requests.length !== 1 ? "s" : ""}`,
-          size: "small",
-          color: "primary",
-          style: { marginRight: 16 }
-        }
-      ))), /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { width: "100%" }, /* @__PURE__ */ React.createElement(
-        Table,
-        {
-          options: {
-            selection: canSelectRows && tabData.showSelection,
-            paging: requests.length > 5,
-            pageSize: 20,
-            search: true,
-            filtering: true,
-            debounceInterval: 300,
-            showTextRowsSelected: false,
-            toolbar: true,
-            emptyRowsWhenPaging: false
+          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%"
           },
-          data: requests,
-          columns: tabData.columns,
-          onSelectionChange: (rows) => {
-            const otherSelections = selectedRequests.filter(
-              (r) => `${r.metadata.namespace}/${r.spec.apiProductRef?.name || "unknown"}` !== apiProductKey
-            );
-            setSelectedRequests([...otherSelections, ...rows]);
+          /* @__PURE__ */ React.createElement(Typography, { variant: "h6" }, displayName),
+          /* @__PURE__ */ React.createElement(
+            Chip,
+            {
+              label: `${requests.length} request${requests.length !== 1 ? "s" : ""}`,
+              size: "small",
+              color: "primary",
+              style: { marginRight: 16 }
+            }
+          )
+        )),
+        /* @__PURE__ */ React.createElement(AccordionDetails, null, /* @__PURE__ */ React.createElement(Box, { width: "100%" }, /* @__PURE__ */ React.createElement(
+          Table,
+          {
+            options: {
+              selection: canSelectRows && tabData.showSelection,
+              paging: requests.length > 5,
+              pageSize: 20,
+              search: true,
+              filtering: true,
+              debounceInterval: 300,
+              showTextRowsSelected: false,
+              toolbar: true,
+              emptyRowsWhenPaging: false
+            },
+            data: requests,
+            columns: tabData.columns,
+            onSelectionChange: (rows) => {
+              const otherSelections = selectedRequests.filter(
+                (r) => `${r.metadata.namespace}/${r.spec.apiProductRef?.name || "unknown"}` !== apiProductKey
+              );
+              setSelectedRequests([
+                ...otherSelections,
+                ...rows
+              ]);
+            }
           }
-        }
-      ))));
+        )))
+      );
     }))
   ), /* @__PURE__ */ React.createElement(
     ApprovalDialog,
@@ -547,7 +731,12 @@ const ApprovalQueueCard = () => {
       request: dialogState.request,
       action: dialogState.action,
       processing: dialogState.processing,
-      onClose: () => setDialogState({ open: false, request: null, action: "approve", processing: false }),
+      onClose: () => setDialogState({
+        open: false,
+        request: null,
+        action: "approve",
+        processing: false
+      }),
       onConfirm: handleConfirm
     }
   ), /* @__PURE__ */ React.createElement(
@@ -557,7 +746,12 @@ const ApprovalQueueCard = () => {
       requests: bulkDialogState.requests,
       action: bulkDialogState.action,
       processing: bulkDialogState.processing,
-      onClose: () => setBulkDialogState({ open: false, requests: [], action: "approve", processing: false }),
+      onClose: () => setBulkDialogState({
+        open: false,
+        requests: [],
+        action: "approve",
+        processing: false
+      }),
       onConfirm: handleBulkConfirm
     }
   ));