@kuadrant/kuadrant-backstage-plugin-frontend 0.0.2-dev-83763ff → 0.0.2-dev-b696169

package/dist/components/ApprovalQueueTable/ApprovalQueueTable.esm.js

@@ -0,0 +1,645 @@
+import React, { useState, useMemo } from 'react';
+import { useApi, configApiRef, fetchApiRef, identityApiRef, alertApiRef } from '@backstage/core-plugin-api';
+import { useAsync } from 'react-use';
+import { Progress, ResponseErrorPanel, Table, Link } from '@backstage/core-components';
+import { kuadrantApiKeyUpdateAllPermission, kuadrantApiKeyUpdateOwnPermission } from '../../permissions.esm.js';
+import { useKuadrantPermission } from '../../utils/permissions.esm.js';
+import { makeStyles, Box, Typography, Button, Dialog, DialogTitle, DialogContent, TextField, DialogActions, CircularProgress, Chip } from '@material-ui/core';
+import CheckCircleIcon from '@material-ui/icons/CheckCircle';
+import CancelIcon from '@material-ui/icons/Cancel';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import { getStatusChipStyle } from '../../utils/styles.esm.js';
+
+const useStyles = makeStyles((theme) => ({
+  container: {
+    display: "flex",
+    height: "100%",
+    minHeight: 400
+  },
+  tableContainer: {
+    flex: 1,
+    overflow: "auto"
+  },
+  useCasePanel: {
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.background.default
+  },
+  useCaseLabel: {
+    fontWeight: 600,
+    marginBottom: theme.spacing(1),
+    color: theme.palette.text.secondary,
+    textTransform: "uppercase",
+    fontSize: "0.75rem"
+  },
+  bulkActions: {
+    padding: theme.spacing(2),
+    backgroundColor: theme.palette.background.default,
+    borderBottom: `1px solid ${theme.palette.divider}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }
+}));
+const ApprovalDialog = ({
+  open,
+  request,
+  action,
+  processing,
+  onClose,
+  onConfirm
+}) => {
+  const [confirmInput, setConfirmInput] = React.useState("");
+  const actionLabel = action === "approve" ? "Approve" : "Reject";
+  const processingLabel = action === "approve" ? "Approving..." : "Rejecting...";
+  const isReject = action === "reject";
+  const confirmText = request?.spec.requestedBy?.userId || "";
+  const canConfirm = isReject ? confirmInput === confirmText : true;
+  React.useEffect(() => {
+    if (!open) {
+      setConfirmInput("");
+    }
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open,
+      onClose: processing ? undefined : onClose,
+      maxWidth: "sm",
+      fullWidth: true
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, null, isReject ? /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(CancelIcon, { color: "error" }), /* @__PURE__ */ React.createElement("span", null, actionLabel, " API Key")) : /* @__PURE__ */ React.createElement("span", 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 || "-"
+    )), isReject && /* @__PURE__ */ React.createElement(Box, { mt: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true }, "Type ", /* @__PURE__ */ React.createElement("strong", null, confirmText), " to confirm rejection:"), /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        fullWidth: true,
+        variant: "outlined",
+        size: "small",
+        value: confirmInput,
+        onChange: (e) => setConfirmInput(e.target.value),
+        disabled: processing,
+        autoFocus: true,
+        placeholder: confirmText
+      }
+    )))),
+    /* @__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 || !canConfirm,
+        startIcon: processing ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      },
+      processing ? processingLabel : actionLabel
+    ))
+  );
+};
+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 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 ExpandedRowContent = ({ request }) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.useCasePanel, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(Typography, { className: classes.useCaseLabel }, "Use Case"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, request.spec.useCase || "No use case provided"));
+};
+const ApprovalQueueTable = () => {
+  const classes = useStyles();
+  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 [selectedRequests, setSelectedRequests] = useState([]);
+  const [dialogState, setDialogState] = useState({
+    open: false,
+    request: null,
+    action: "approve",
+    processing: false
+  });
+  const [bulkDialogState, setBulkDialogState] = useState({
+    open: false,
+    requests: [],
+    action: "approve",
+    processing: false
+  });
+  const [filters, setFilters] = useState({
+    status: [],
+    apiProduct: [],
+    tier: []
+  });
+  const {
+    allowed: canUpdateAllRequests,
+    loading: updateAllPermissionLoading,
+    error: updateAllPermissionError
+  } = useKuadrantPermission(kuadrantApiKeyUpdateAllPermission);
+  const {
+    allowed: canUpdateOwnRequests,
+    loading: updateOwnPermissionLoading,
+    error: updateOwnPermissionError
+  } = useKuadrantPermission(kuadrantApiKeyUpdateOwnPermission);
+  const updatePermissionLoading = updateAllPermissionLoading || updateOwnPermissionLoading;
+  const updatePermissionError = updateAllPermissionError || updateOwnPermissionError;
+  const { value, loading, error } = useAsync(async () => {
+    const identity = await identityApi.getBackstageIdentity();
+    const reviewedBy = identity.userEntityRef;
+    const [requestsResponse, apiProductsResponse] = await Promise.all([
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/requests`),
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`)
+    ]);
+    if (!requestsResponse.ok) {
+      return {
+        allRequests: [],
+        reviewedBy,
+        ownedApiProducts: /* @__PURE__ */ new Set()
+      };
+    }
+    const contentType = requestsResponse.headers.get("content-type");
+    if (!contentType?.includes("application/json")) {
+      alertApi.post({
+        message: "Unexpected content-type from the server response.",
+        display: "transient",
+        severity: "warning"
+      });
+      return {
+        allRequests: [],
+        reviewedBy,
+        ownedApiProducts: /* @__PURE__ */ new Set()
+      };
+    }
+    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}`
+          );
+        }
+      }
+    }
+    return { allRequests, reviewedBy, ownedApiProducts };
+  }, [backendUrl, fetchApi, identityApi, refresh]);
+  const filterSections = useMemo(() => {
+    if (!value?.allRequests) return [];
+    const statusCounts = { Approved: 0, Pending: 0, Rejected: 0 };
+    const apiProductCounts = /* @__PURE__ */ new Map();
+    const tierCounts = /* @__PURE__ */ new Map();
+    value.allRequests.forEach((r) => {
+      const status = r.status?.phase || "Pending";
+      statusCounts[status]++;
+      const apiProduct = r.spec.apiProductRef?.name || "unknown";
+      apiProductCounts.set(
+        apiProduct,
+        (apiProductCounts.get(apiProduct) || 0) + 1
+      );
+      const tier = r.spec.planTier || "unknown";
+      tierCounts.set(tier, (tierCounts.get(tier) || 0) + 1);
+    });
+    return [
+      {
+        id: "status",
+        title: "Status",
+        options: [
+          { value: "Pending", label: "Pending", count: statusCounts.Pending },
+          {
+            value: "Approved",
+            label: "Approved",
+            count: statusCounts.Approved
+          },
+          {
+            value: "Rejected",
+            label: "Rejected",
+            count: statusCounts.Rejected
+          }
+        ]
+      },
+      {
+        id: "apiProduct",
+        title: "API Product",
+        options: Array.from(apiProductCounts.entries()).map(
+          ([name, count]) => ({
+            value: name,
+            label: name,
+            count
+          })
+        ),
+        collapsed: apiProductCounts.size > 5
+      },
+      {
+        id: "tier",
+        title: "Tier",
+        options: Array.from(tierCounts.entries()).map(([tier, count]) => ({
+          value: tier,
+          label: tier.charAt(0).toUpperCase() + tier.slice(1),
+          count
+        }))
+      }
+    ];
+  }, [value?.allRequests]);
+  const filteredRequests = useMemo(() => {
+    if (!value?.allRequests) return [];
+    return value.allRequests.filter((r) => {
+      if (filters.status.length > 0) {
+        const status = r.status?.phase || "Pending";
+        if (!filters.status.includes(status)) return false;
+      }
+      if (filters.apiProduct.length > 0) {
+        const apiProduct = r.spec.apiProductRef?.name || "unknown";
+        if (!filters.apiProduct.includes(apiProduct)) return false;
+      }
+      if (filters.tier.length > 0) {
+        const tier = r.spec.planTier || "unknown";
+        if (!filters.tier.includes(tier)) return false;
+      }
+      return true;
+    });
+  }, [value?.allRequests, filters]);
+  const handleApprove = (request) => {
+    setDialogState({
+      open: true,
+      request,
+      action: "approve",
+      processing: false
+    });
+  };
+  const handleReject = (request) => {
+    setDialogState({
+      open: true,
+      request,
+      action: "reject",
+      processing: false
+    });
+  };
+  const handleConfirm = async () => {
+    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, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ reviewedBy: value.reviewedBy })
+      });
+      if (!response.ok) {
+        throw new Error(`failed to ${dialogState.action} request`);
+      }
+      setDialogState({
+        open: false,
+        request: null,
+        action: "approve",
+        processing: false
+      });
+      setSelectedRequests(
+        (prev) => prev.filter(
+          (r) => r.metadata.name !== dialogState.request?.metadata.name || r.metadata.namespace !== dialogState.request?.metadata.namespace
+        )
+      );
+      setRefresh((r) => r + 1);
+      const action = dialogState.action === "approve" ? "approved" : "rejected";
+      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} API key`,
+        severity: "error",
+        display: "transient"
+      });
+    }
+  };
+  const handleBulkApprove = () => {
+    if (selectedRequests.length === 0) return;
+    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
+    });
+  };
+  const handleBulkConfirm = async () => {
+    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 {
+      const response = await fetchApi.fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          requests: bulkDialogState.requests.map((r) => ({
+            namespace: r.metadata.namespace,
+            name: r.metadata.name
+          })),
+          reviewedBy: value.reviewedBy
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`failed to bulk ${bulkDialogState.action} requests`);
+      }
+      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} 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} API keys`,
+        severity: "error",
+        display: "transient"
+      });
+    }
+  };
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-GB", {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    });
+  };
+  const columns = [
+    {
+      title: "Requester",
+      field: "spec.requestedBy.userId",
+      render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.spec.requestedBy.userId)
+    },
+    {
+      title: "API Product",
+      field: "spec.apiProductRef.name",
+      render: (row) => {
+        const name = row.spec.apiProductRef?.name || "unknown";
+        return /* @__PURE__ */ React.createElement(Link, { to: `/catalog/default/api/${name}` }, /* @__PURE__ */ React.createElement("strong", null, name));
+      }
+    },
+    {
+      title: "Status",
+      field: "status.phase",
+      render: (row) => {
+        const phase = row.status?.phase || "Pending";
+        return /* @__PURE__ */ React.createElement(Chip, { label: phase, size: "small", style: getStatusChipStyle(phase) });
+      }
+    },
+    {
+      title: "Tier",
+      field: "spec.planTier",
+      render: (row) => /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, size: "small", variant: "outlined" })
+    },
+    {
+      title: "Requested",
+      field: "metadata.creationTimestamp",
+      render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.metadata.creationTimestamp ? formatDate(row.metadata.creationTimestamp) : "-")
+    },
+    {
+      title: "Reviewed By",
+      field: "status.reviewedBy",
+      render: (row) => {
+        if (!row.status?.reviewedBy)
+          return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "-");
+        const reviewer = row.status.reviewedBy.replace(/^user:default\//, "");
+        const isAutomatic = reviewer === "system";
+        return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, isAutomatic ? "Automatic" : reviewer), row.status.reviewedAt && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary" }, formatDate(row.status.reviewedAt)));
+      }
+    },
+    {
+      title: "Actions",
+      filtering: false,
+      render: (row) => {
+        const phase = row.status?.phase || "Pending";
+        if (phase !== "Pending") return null;
+        const apiProductKey = `${row.metadata.namespace}/${row.spec.apiProductRef?.name || "unknown"}`;
+        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,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ React.createElement(CheckCircleIcon, null),
+            onClick: () => handleApprove(row),
+            color: "primary",
+            variant: "outlined"
+          },
+          "Approve"
+        ), /* @__PURE__ */ React.createElement(
+          Button,
+          {
+            size: "small",
+            startIcon: /* @__PURE__ */ React.createElement(CancelIcon, null),
+            onClick: () => handleReject(row),
+            color: "secondary",
+            variant: "outlined"
+          },
+          "Reject"
+        ));
+      }
+    }
+  ];
+  const detailPanelConfig = useMemo(
+    () => [
+      {
+        render: (data) => {
+          const request = data.rowData;
+          if (!request?.metadata?.name) {
+            return /* @__PURE__ */ React.createElement(Box, null);
+          }
+          return /* @__PURE__ */ React.createElement(ExpandedRowContent, { request });
+        }
+      }
+    ],
+    []
+  );
+  if (loading || updatePermissionLoading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
+  if (updatePermissionError) {
+    return /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Typography, { color: "error" }, "Unable to check permissions: ", updatePermissionError.message));
+  }
+  const canSelectRows = canUpdateAllRequests || canUpdateOwnRequests;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: classes.container }, /* @__PURE__ */ React.createElement(
+    FilterPanel,
+    {
+      sections: filterSections,
+      filters,
+      onChange: setFilters
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { className: classes.tableContainer }, selectedRequests.length > 0 && /* @__PURE__ */ React.createElement(Box, { className: classes.bulkActions }, /* @__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"
+  ))), filteredRequests.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 4, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, value?.allRequests?.length === 0 ? "No API keys found." : "No API keys match the selected filters.")) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        selection: canSelectRows,
+        showSelectAllCheckbox: filteredRequests.some(
+          (r) => !r.status?.phase || r.status.phase === "Pending"
+        ),
+        selectionProps: (row) => ({
+          disabled: row.status?.phase !== "Pending" && row.status?.phase !== undefined
+        }),
+        paging: filteredRequests.length > 10,
+        pageSize: 20,
+        search: true,
+        filtering: false,
+        debounceInterval: 300,
+        showTextRowsSelected: false,
+        toolbar: true,
+        emptyRowsWhenPaging: false
+      },
+      columns,
+      data: filteredRequests.map((item) => {
+        const isSelected = selectedRequests.some(
+          (selected) => selected.metadata.name === item.metadata.name && selected.metadata.namespace === item.metadata.namespace
+        );
+        return {
+          ...item,
+          id: item.metadata.name,
+          tableData: { checked: isSelected }
+        };
+      }),
+      onSelectionChange: (rows) => {
+        const pendingOnly = rows.filter(
+          (r) => !r.status?.phase || r.status.phase === "Pending"
+        );
+        setSelectedRequests(pendingOnly);
+      },
+      detailPanel: detailPanelConfig
+    }
+  ))), /* @__PURE__ */ React.createElement(
+    ApprovalDialog,
+    {
+      open: dialogState.open,
+      request: dialogState.request,
+      action: dialogState.action,
+      processing: dialogState.processing,
+      onClose: () => setDialogState({
+        open: false,
+        request: null,
+        action: "approve",
+        processing: false
+      }),
+      onConfirm: handleConfirm
+    }
+  ), /* @__PURE__ */ React.createElement(
+    BulkActionDialog,
+    {
+      open: bulkDialogState.open,
+      requests: bulkDialogState.requests,
+      action: bulkDialogState.action,
+      processing: bulkDialogState.processing,
+      onClose: () => setBulkDialogState({
+        open: false,
+        requests: [],
+        action: "approve",
+        processing: false
+      }),
+      onConfirm: handleBulkConfirm
+    }
+  ));
+};
+
+export { ApprovalQueueTable };
+//# sourceMappingURL=ApprovalQueueTable.esm.js.map