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

package/dist/components/{MyApiKeysCard/MyApiKeysCard.esm.js → MyApiKeysTable/MyApiKeysTable.esm.js}

@@ -1,69 +1,188 @@
-import React, { useState } from 'react';
-import { InfoCard, Progress, Table, Link } from '@backstage/core-components';
-import { useApi, configApiRef, fetchApiRef, identityApiRef, alertApiRef } from '@backstage/core-plugin-api';
+import React, { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Progress, ResponseErrorPanel, Table, Link } from '@backstage/core-components';
+import { useApi, configApiRef, fetchApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import useAsync from 'react-use/lib/useAsync';
-import { Typography, Box, Tabs, Tab, Menu, MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, Button, Chip, Tooltip, IconButton, CircularProgress } from '@material-ui/core';
+import { makeStyles, Box, Typography, Menu, MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, Button, Chip, Tooltip, IconButton, CircularProgress } from '@material-ui/core';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import WarningIcon from '@material-ui/icons/Warning';
+import DeleteIcon from '@material-ui/icons/Delete';
 import { EditAPIKeyDialog } from '../EditAPIKeyDialog/EditAPIKeyDialog.esm.js';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog/ConfirmDeleteDialog.esm.js';
+import { FilterPanel } from '../FilterPanel/FilterPanel.esm.js';
+import { getStatusChipStyle } from '../../utils/styles.esm.js';
 
-const MyApiKeysCard = () => {
+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"
+  },
+  rejectedBanner: {
+    backgroundColor: theme.palette.error.light,
+    border: `1px solid ${theme.palette.error.main}`,
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1.5, 2),
+    marginBottom: theme.spacing(2),
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }
+}));
+const ExpandedRowContent = ({ request }) => {
+  const classes = useStyles();
+  const isRejected = request.status?.phase === "Rejected";
+  const apiProductName = request.spec.apiProductRef?.name || "unknown";
+  return /* @__PURE__ */ React.createElement(Box, { className: classes.useCasePanel, onClick: (e) => e.stopPropagation() }, isRejected && /* @__PURE__ */ React.createElement(Box, { className: classes.rejectedBanner }, /* @__PURE__ */ React.createElement(WarningIcon, { color: "error", fontSize: "small" }), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "This API key was rejected.", " ", /* @__PURE__ */ React.createElement(Link, { to: `/catalog/default/api/${apiProductName}/api-keys` }, "Request a new API key"))), /* @__PURE__ */ React.createElement(Typography, { className: classes.useCaseLabel }, "Use Case"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, request.spec.useCase || "No use case provided"));
+};
+const MyApiKeysTable = () => {
+  const classes = useStyles();
+  const navigate = useNavigate();
   const config = useApi(configApiRef);
   const fetchApi = useApi(fetchApiRef);
-  const identityApi = useApi(identityApiRef);
   const alertApi = useApi(alertApiRef);
   const backendUrl = config.getString("backend.baseUrl");
-  const [selectedTab, setSelectedTab] = useState(0);
-  const [, setUserId] = useState("");
   const [visibleKeys, setVisibleKeys] = useState(/* @__PURE__ */ new Set());
   const [menuAnchor, setMenuAnchor] = useState(null);
   const [menuRequest, setMenuRequest] = useState(null);
-  const [editDialogState, setEditDialogState] = useState({
-    open: false,
-    request: null,
-    plans: []
-  });
+  const [editDialogState, setEditDialogState] = useState({ open: false, request: null, plans: [] });
   const [refresh, setRefresh] = useState(0);
   const [deleting, setDeleting] = useState(null);
   const [deleteDialogState, setDeleteDialogState] = useState({ open: false, request: null });
-  const [apiKeyValues, setApiKeyValues] = useState(/* @__PURE__ */ new Map());
+  const [apiKeyValues, setApiKeyValues] = useState(
+    /* @__PURE__ */ new Map()
+  );
   const [apiKeyLoading, setApiKeyLoading] = useState(/* @__PURE__ */ new Set());
-  const [alreadyReadKeys, setAlreadyReadKeys] = useState(/* @__PURE__ */ new Set());
+  const [alreadyReadKeys, setAlreadyReadKeys] = useState(
+    /* @__PURE__ */ new Set()
+  );
   const [showOnceWarningOpen, setShowOnceWarningOpen] = useState(false);
   const [pendingKeyReveal, setPendingKeyReveal] = useState(null);
-  useAsync(async () => {
-    const identity = await identityApi.getBackstageIdentity();
-    const extractedUserId = identity.userEntityRef.split("/")[1] || "guest";
-    console.log(`MyApiKeysCard: setting userId from userEntityRef: ${identity.userEntityRef} -> "${extractedUserId}"`);
-    setUserId(extractedUserId);
-  }, [identityApi]);
   const [optimisticallyDeleted, setOptimisticallyDeleted] = useState(/* @__PURE__ */ new Set());
-  const { value: requests, loading, error } = useAsync(async () => {
-    const response = await fetchApi.fetch(
-      `${backendUrl}/api/kuadrant/requests/my`
-    );
-    if (!response.ok) {
+  const [filters, setFilters] = useState({
+    status: [],
+    apiProduct: [],
+    tier: []
+  });
+  const {
+    value: data,
+    loading,
+    error
+  } = useAsync(async () => {
+    const [requestsResponse, productsResponse] = await Promise.all([
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/requests/my`),
+      fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`)
+    ]);
+    if (!requestsResponse.ok) {
       throw new Error("failed to fetch requests");
     }
-    const data = await response.json();
-    return data.items || [];
+    const requestsData = await requestsResponse.json();
+    const requests = requestsData.items || [];
+    let products = [];
+    if (productsResponse.ok) {
+      const productsData = await productsResponse.json();
+      products = productsData.items || [];
+    }
+    const ownerMap = /* @__PURE__ */ new Map();
+    products.forEach((p) => {
+      const key = `${p.metadata.namespace}/${p.metadata.name}`;
+      const owner = p.metadata.annotations?.["backstage.io/owner"] || "unknown";
+      ownerMap.set(key, owner);
+    });
+    return { requests, products, ownerMap };
   }, [backendUrl, fetchApi, refresh]);
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { title: "My API Keys" }, /* @__PURE__ */ React.createElement(Progress, null));
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(InfoCard, { title: "My API Keys" }, /* @__PURE__ */ React.createElement(Typography, { color: "error" }, "Error loading API keys: ", error.message));
-  }
-  const allRequests = (requests || []).filter(
-    (r) => !optimisticallyDeleted.has(r.metadata.name)
-  );
-  const approvedRequests = allRequests.filter((r) => r.status?.phase === "Approved");
-  const pendingRequests = allRequests.filter((r) => !r.status?.phase || r.status.phase === "Pending");
-  const rejectedRequests = allRequests.filter((r) => r.status?.phase === "Rejected");
+  const allRequests = useMemo(() => {
+    if (!data?.requests) return [];
+    return data.requests.filter(
+      (r) => !optimisticallyDeleted.has(r.metadata.name)
+    );
+  }, [data?.requests, optimisticallyDeleted]);
+  const filterSections = useMemo(() => {
+    const statusCounts = { Approved: 0, Pending: 0, Rejected: 0 };
+    const apiProductCounts = /* @__PURE__ */ new Map();
+    const tierCounts = /* @__PURE__ */ new Map();
+    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: "Approved", label: "Active", count: statusCounts.Approved },
+          { value: "Pending", label: "Pending", count: statusCounts.Pending },
+          {
+            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
+        }))
+      }
+    ];
+  }, [allRequests]);
+  const filteredRequests = useMemo(() => {
+    return 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;
+    });
+  }, [allRequests, filters]);
   const toggleKeyVisibility = (keyName) => {
     setVisibleKeys((prev) => {
       const newSet = new Set(prev);
@@ -77,17 +196,15 @@ const MyApiKeysCard = () => {
   };
   const fetchApiKeyFromSecret = async (requestNamespace, requestName) => {
     const key = `${requestNamespace}/${requestName}`;
-    if (apiKeyLoading.has(key)) {
-      return;
-    }
+    if (apiKeyLoading.has(key)) return;
     setApiKeyLoading((prev) => new Set(prev).add(key));
     try {
       const response = await fetchApi.fetch(
         `${backendUrl}/api/kuadrant/apikeys/${requestNamespace}/${requestName}/secret`
       );
       if (response.ok) {
-        const data = await response.json();
-        setApiKeyValues((prev) => new Map(prev).set(key, data.apiKey));
+        const result = await response.json();
+        setApiKeyValues((prev) => new Map(prev).set(key, result.apiKey));
         setAlreadyReadKeys((prev) => new Set(prev).add(key));
       } else if (response.status === 403) {
         setAlreadyReadKeys((prev) => new Set(prev).add(key));
@@ -134,7 +251,6 @@ const MyApiKeysCard = () => {
         const plans = apiProduct.spec?.plans || [];
         setEditDialogState({ open: true, request, plans });
       } else {
-        console.error("Failed to fetch API product");
         setEditDialogState({ open: true, request, plans: [] });
       }
     } catch (err) {
@@ -163,7 +279,11 @@ const MyApiKeysCard = () => {
         throw new Error("Failed to delete request");
       }
       setRefresh((r) => r + 1);
-      alertApi.post({ message: "Request deleted", severity: "success", display: "transient" });
+      alertApi.post({
+        message: "API key deleted",
+        severity: "success",
+        display: "transient"
+      });
       setDeleteDialogState({ open: false, request: null });
     } catch (err) {
       console.error("Error deleting request:", err);
@@ -172,7 +292,11 @@ const MyApiKeysCard = () => {
         next.delete(requestName);
         return next;
       });
-      alertApi.post({ message: "Failed to delete request", severity: "error", display: "transient" });
+      alertApi.post({
+        message: "Failed to delete API key",
+        severity: "error",
+        display: "transient"
+      });
     } finally {
       setDeleting(null);
     }
@@ -190,33 +314,13 @@ const MyApiKeysCard = () => {
       }
     },
     {
-      title: "Tier",
-      field: "spec.planTier",
-      render: (row) => {
-        const color = row.spec.planTier === "gold" ? "primary" : row.spec.planTier === "silver" ? "default" : "secondary";
-        return /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, color, size: "small" });
-      }
-    },
-    {
-      title: "Use Case",
-      field: "spec.useCase",
+      title: "Owner",
+      field: "owner",
       render: (row) => {
-        if (!row.spec.useCase) {
-          return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "-");
-        }
-        return /* @__PURE__ */ React.createElement(Tooltip, { title: row.spec.useCase, placement: "top" }, /* @__PURE__ */ React.createElement(
-          Typography,
-          {
-            variant: "body2",
-            style: {
-              maxWidth: "200px",
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            }
-          },
-          row.spec.useCase
-        ));
+        const key = `${row.metadata.namespace}/${row.spec.apiProductRef?.name}`;
+        const owner = data?.ownerMap?.get(key) || "unknown";
+        const displayOwner = owner.replace(/^user:default\//, "");
+        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, displayOwner);
       }
     },
     {
@@ -224,20 +328,14 @@ const MyApiKeysCard = () => {
       field: "status.phase",
       render: (row) => {
         const phase = row.status?.phase || "Pending";
-        const color = phase === "Approved" ? "primary" : phase === "Rejected" ? "secondary" : "default";
-        return /* @__PURE__ */ React.createElement(Chip, { label: phase, color, size: "small" });
+        const label = phase === "Approved" ? "Active" : phase;
+        return /* @__PURE__ */ React.createElement(Chip, { label, size: "small", style: getStatusChipStyle(phase) });
       }
     },
     {
-      title: "Reviewed By",
-      field: "status.reviewedBy",
-      render: (row) => {
-        if ((row.status?.phase === "Approved" || row.status?.phase === "Rejected") && row.status.reviewedBy) {
-          const reviewedDate = row.status.reviewedAt ? new Date(row.status.reviewedAt).toLocaleDateString() : "";
-          return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.status.reviewedBy), reviewedDate && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary" }, reviewedDate));
-        }
-        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "-");
-      }
+      title: "Tier",
+      field: "spec.planTier",
+      render: (row) => /* @__PURE__ */ React.createElement(Chip, { label: row.spec.planTier, size: "small", variant: "outlined" })
     },
     {
       title: "API Key",
@@ -273,7 +371,10 @@ const MyApiKeysCard = () => {
             clearApiKeyValue(row.metadata.namespace, row.metadata.name);
             toggleKeyVisibility(row.metadata.name);
           } else if (!isAlreadyRead) {
-            setPendingKeyReveal({ namespace: row.metadata.namespace, name: row.metadata.name });
+            setPendingKeyReveal({
+              namespace: row.metadata.namespace,
+              name: row.metadata.name
+            });
             setShowOnceWarningOpen(true);
           }
         };
@@ -287,15 +388,21 @@ const MyApiKeysCard = () => {
             });
           }
         };
-        return /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(Box, { fontFamily: "monospace", fontSize: "0.875rem" }, isLoading ? "Loading..." : isVisible && apiKeyValue ? apiKeyValue : "\u2022".repeat(20) + "..."), isVisible && apiKeyValue && /* @__PURE__ */ React.createElement(Tooltip, { title: "Copy to clipboard" }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: handleCopy }, /* @__PURE__ */ React.createElement(FileCopyIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(Tooltip, { title: isVisible ? "Hide API key" : "Reveal API key (one-time only)" }, /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
-          IconButton,
+        return /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center", style: { gap: 8 } }, /* @__PURE__ */ React.createElement(Box, { fontFamily: "monospace", fontSize: "0.875rem" }, isLoading ? "Loading..." : isVisible && apiKeyValue ? apiKeyValue : "\u2022".repeat(20) + "..."), isVisible && apiKeyValue && /* @__PURE__ */ React.createElement(Tooltip, { title: "Copy to clipboard" }, /* @__PURE__ */ React.createElement(IconButton, { size: "small", onClick: handleCopy }, /* @__PURE__ */ React.createElement(FileCopyIcon, { fontSize: "small" }))), /* @__PURE__ */ React.createElement(
+          Tooltip,
           {
-            size: "small",
-            onClick: handleRevealClick,
-            disabled: isLoading || isAlreadyRead && !apiKeyValue
+            title: isVisible ? "Hide API key" : "Reveal API key (one-time only)"
           },
-          isVisible ? /* @__PURE__ */ React.createElement(VisibilityOffIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(VisibilityIcon, { fontSize: "small" })
-        ))));
+          /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleRevealClick,
+              disabled: isLoading || isAlreadyRead && !apiKeyValue
+            },
+            isVisible ? /* @__PURE__ */ React.createElement(VisibilityOffIcon, { fontSize: "small" }) : /* @__PURE__ */ React.createElement(VisibilityIcon, { fontSize: "small" })
+          ))
+        ));
       }
     },
     {
@@ -310,99 +417,88 @@ const MyApiKeysCard = () => {
       }
     },
     {
-      title: "",
+      title: "Actions",
       filtering: false,
+      width: "100px",
       render: (row) => {
         const isDeleting = deleting === row.metadata.name;
         if (isDeleting) {
           return /* @__PURE__ */ React.createElement(CircularProgress, { size: 20 });
         }
-        return /* @__PURE__ */ React.createElement(
+        return /* @__PURE__ */ React.createElement(Box, { display: "flex", style: { gap: 4 } }, /* @__PURE__ */ React.createElement(Tooltip, { title: "View details" }, /* @__PURE__ */ React.createElement(
           IconButton,
           {
             size: "small",
             onClick: (e) => {
               e.stopPropagation();
-              const rect = e.currentTarget.getBoundingClientRect();
-              setMenuAnchor({ top: rect.bottom, left: rect.left });
-              setMenuRequest(row);
-            },
-            "aria-controls": menuAnchor ? "myapikeys-menu" : undefined,
-            "aria-haspopup": "true"
+              navigate(
+                `/kuadrant/api-keys/${row.metadata.namespace}/${row.metadata.name}`
+              );
+            }
           },
-          /* @__PURE__ */ React.createElement(MoreVertIcon, null)
-        );
+          /* @__PURE__ */ React.createElement(VisibilityIcon, { fontSize: "small" })
+        )), /* @__PURE__ */ React.createElement(Tooltip, { title: "Delete" }, /* @__PURE__ */ React.createElement(
+          IconButton,
+          {
+            size: "small",
+            onClick: (e) => {
+              e.stopPropagation();
+              setDeleteDialogState({ open: true, request: row });
+            }
+          },
+          /* @__PURE__ */ React.createElement(DeleteIcon, { fontSize: "small" })
+        )));
       }
     }
   ];
-  const getTabData = () => {
-    switch (selectedTab) {
-      case 0:
-        return approvedRequests;
-      case 1:
-        return pendingRequests;
-      case 2:
-        return rejectedRequests;
-      default:
-        return allRequests;
-    }
-  };
-  const getTabColumns = () => {
-    switch (selectedTab) {
-      case 0:
-        return columns.filter((col) => col.title !== "Reason");
-      case 1:
-        return columns.filter(
-          (col) => col.title !== "Reason" && col.title !== "Reviewed By" && col.title !== "API Key"
-        );
-      case 2:
-        return columns.filter((col) => col.title !== "API Key");
-      default:
-        return columns;
-    }
-  };
-  const tabData = getTabData();
-  const tabColumns = getTabColumns();
+  const detailPanelConfig = useMemo(
+    () => [
+      {
+        render: (data2) => {
+          const request = data2.rowData;
+          if (!request?.metadata?.name) {
+            return /* @__PURE__ */ React.createElement(Box, null);
+          }
+          return /* @__PURE__ */ React.createElement(ExpandedRowContent, { request });
+        }
+      }
+    ],
+    []
+  );
+  if (loading) {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (error) {
+    return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error });
+  }
   const isPending = (row) => !row.status || row.status.phase === "Pending";
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    InfoCard,
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { className: classes.container }, /* @__PURE__ */ React.createElement(
+    FilterPanel,
     {
-      title: "My API Keys",
-      subheader: `${approvedRequests.length} active, ${pendingRequests.length} pending`
-    },
-    /* @__PURE__ */ React.createElement(Box, { mb: 2, "data-testid": "my-api-keys-card" }, /* @__PURE__ */ React.createElement(
-      Tabs,
-      {
-        value: selectedTab,
-        onChange: (_, newValue) => setSelectedTab(newValue),
-        indicatorColor: "primary",
-        textColor: "primary",
-        "data-testid": "my-api-keys-tabs"
+      sections: filterSections,
+      filters,
+      onChange: setFilters
+    }
+  ), /* @__PURE__ */ React.createElement(Box, { className: classes.tableContainer }, filteredRequests.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 4, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, allRequests.length === 0 ? "No API keys found. Request access to an API to get started." : "No API keys match the selected filters.")) : /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      options: {
+        paging: filteredRequests.length > 10,
+        pageSize: 20,
+        search: true,
+        filtering: false,
+        debounceInterval: 300,
+        toolbar: true,
+        emptyRowsWhenPaging: false
       },
-      /* @__PURE__ */ React.createElement(Tab, { label: `Active (${approvedRequests.length})`, "data-testid": "my-api-keys-active-tab" }),
-      /* @__PURE__ */ React.createElement(Tab, { label: `Pending (${pendingRequests.length})`, "data-testid": "my-api-keys-pending-tab" }),
-      /* @__PURE__ */ React.createElement(Tab, { label: `Rejected (${rejectedRequests.length})`, "data-testid": "my-api-keys-rejected-tab" })
-    )),
-    tabData.length === 0 ? /* @__PURE__ */ React.createElement(Box, { p: 3, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, selectedTab === 0 && "No active API keys. Request access to an API to get started.", selectedTab === 1 && "No pending requests.", selectedTab === 2 && "No rejected requests.")) : /* @__PURE__ */ React.createElement(
-      Table,
-      {
-        options: {
-          paging: tabData.length > 5,
-          pageSize: 20,
-          search: true,
-          filtering: true,
-          debounceInterval: 300,
-          toolbar: true,
-          emptyRowsWhenPaging: false
-        },
-        columns: tabColumns,
-        data: tabData.map((item) => ({
-          ...item,
-          id: item.metadata.name
-        }))
-      }
-    )
-  ), /* @__PURE__ */ React.createElement(
+      columns,
+      data: filteredRequests.map((item) => ({
+        ...item,
+        id: item.metadata.name
+      })),
+      detailPanel: detailPanelConfig
+    }
+  ))), /* @__PURE__ */ React.createElement(
     Menu,
     {
       id: "myapikeys-menu",
@@ -413,10 +509,29 @@ const MyApiKeysCard = () => {
     },
     menuRequest && (() => {
       const items = [];
+      items.push(
+        /* @__PURE__ */ React.createElement(
+          MenuItem,
+          {
+            key: "view",
+            onClick: () => {
+              navigate(
+                `/kuadrant/api-keys/${menuRequest.metadata.namespace}/${menuRequest.metadata.name}`
+              );
+              handleMenuClose();
+            }
+          },
+          "View Details"
+        )
+      );
       if (isPending(menuRequest)) {
-        items.push(/* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: handleEdit }, "Edit"));
+        items.push(
+          /* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: handleEdit }, "Edit")
+        );
       }
-      items.push(/* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleDeleteClick }, "Delete"));
+      items.push(
+        /* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleDeleteClick }, "Delete")
+      );
       return items;
     })()
   ), editDialogState.request && /* @__PURE__ */ React.createElement(
@@ -435,8 +550,8 @@ const MyApiKeysCard = () => {
     ConfirmDeleteDialog,
     {
       open: deleteDialogState.open,
-      title: "Delete API Key Request",
-      description: `Are you sure you want to delete the API key request for ${deleteDialogState.request?.spec.apiProductRef?.name || "this API"}?`,
+      title: "Delete API Key",
+      description: `Are you sure you want to delete this API key for ${deleteDialogState.request?.spec.apiProductRef?.name || "this API"}?`,
       deleting: deleting !== null,
       onConfirm: handleDeleteConfirm,
       onCancel: handleDeleteCancel
@@ -469,7 +584,10 @@ const MyApiKeysCard = () => {
         color: "primary",
         onClick: () => {
           if (pendingKeyReveal) {
-            fetchApiKeyFromSecret(pendingKeyReveal.namespace, pendingKeyReveal.name);
+            fetchApiKeyFromSecret(
+              pendingKeyReveal.namespace,
+              pendingKeyReveal.name
+            );
             toggleKeyVisibility(pendingKeyReveal.name);
           }
           setShowOnceWarningOpen(false);
@@ -481,5 +599,5 @@ const MyApiKeysCard = () => {
   ));
 };
 
-export { MyApiKeysCard };
-//# sourceMappingURL=MyApiKeysCard.esm.js.map
+export { MyApiKeysTable };
+//# sourceMappingURL=MyApiKeysTable.esm.js.map