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

package/dist/components/ApiKeyManagementTab/ApiKeyManagementTab.esm.js

@@ -12,12 +12,15 @@ import AddIcon from '@material-ui/icons/Add';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import FileCopyIcon from '@material-ui/icons/FileCopy';
 import WarningIcon from '@material-ui/icons/Warning';
+import InfoIcon from '@material-ui/icons/Info';
 import { kuadrantApiKeyCreatePermission, kuadrantApiKeyDeleteOwnPermission, kuadrantApiKeyDeleteAllPermission, kuadrantApiKeyUpdateOwnPermission } from '../../permissions.esm.js';
 import { useKuadrantPermission, canDeleteResource } from '../../utils/permissions.esm.js';
 import { EditAPIKeyDialog } from '../EditAPIKeyDialog/EditAPIKeyDialog.esm.js';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog/ConfirmDeleteDialog.esm.js';
 
-const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
+const ApiKeyManagementTab = ({
+  namespace: propNamespace
+}) => {
   const { entity } = useEntity();
   const config = useApi(configApiRef);
   const identityApi = useApi(identityApiRef);
@@ -40,9 +43,13 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
   const [deleting, setDeleting] = useState(null);
   const [optimisticallyDeleted, setOptimisticallyDeleted] = useState(/* @__PURE__ */ new Set());
   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);
   const apiProductName = entity.metadata.annotations?.["kuadrant.io/apiproduct"] || entity.metadata.name;
@@ -53,7 +60,11 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
     setUserId(identity.userEntityRef);
     setUserEmail(profile.email || "");
   }, [identityApi]);
-  const { value: requests, loading: requestsLoading, error: requestsError } = useAsync(async () => {
+  const {
+    value: requests,
+    loading: requestsLoading,
+    error: requestsError
+  } = useAsync(async () => {
     const response = await fetchApi.fetch(
       `${backendUrl}/api/kuadrant/requests/my?namespace=${namespace}`
     );
@@ -66,8 +77,14 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
       // APIProducts and APIKeys (and its Secret) will be in the same NS
     );
   }, [apiProductName, namespace, refresh, fetchApi, backendUrl]);
-  const { value: apiProduct, loading: plansLoading, error: plansError } = useAsync(async () => {
-    const response = await fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`);
+  const {
+    value: apiProduct,
+    loading: plansLoading,
+    error: plansError
+  } = useAsync(async () => {
+    const response = await fetchApi.fetch(
+      `${backendUrl}/api/kuadrant/apiproducts`
+    );
     if (!response.ok) {
       throw new Error("failed to fetch api products");
     }
@@ -110,7 +127,7 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
         throw new Error("failed to delete request");
       }
       alertApi.post({
-        message: "API key request deleted successfully",
+        message: "API key deleted successfully",
         severity: "success",
         display: "transient"
       });
@@ -123,7 +140,7 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
         return next;
       });
       alertApi.post({
-        message: `Failed to delete API key request: ${errorMessage}`,
+        message: `Failed to delete API key: ${errorMessage}`,
         severity: "error",
         display: "transient"
       });
@@ -178,7 +195,11 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
   const handleEditSuccess = () => {
     setRefresh((r) => r + 1);
     setEditDialogOpen(false);
-    alertApi.post({ message: "Request updated", severity: "success", display: "transient" });
+    alertApi.post({
+      message: "API key updated",
+      severity: "success",
+      display: "transient"
+    });
     setRequestToEdit(null);
   };
   const handleMenuClose = () => {
@@ -220,25 +241,30 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
     setCreating(true);
     setCreateError(null);
     try {
-      const response = await fetchApi.fetch(`${backendUrl}/api/kuadrant/requests`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({
-          apiProductName,
-          namespace,
-          planTier: selectedPlan,
-          useCase: useCase.trim() || "",
-          userEmail
-        })
-      });
+      const response = await fetchApi.fetch(
+        `${backendUrl}/api/kuadrant/requests`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            apiProductName,
+            namespace,
+            planTier: selectedPlan,
+            useCase: useCase.trim() || "",
+            userEmail
+          })
+        }
+      );
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.error || `failed to create request: ${response.status}`);
+        throw new Error(
+          errorData.error || `failed to create request: ${response.status}`
+        );
       }
       alertApi.post({
-        message: "API access request submitted successfully",
+        message: "API key requested successfully",
         severity: "success",
         display: "transient"
       });
@@ -249,7 +275,7 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "unknown error occurred";
       alertApi.post({
-        message: `Failed to create API access request: ${errorMessage}`,
+        message: `Failed to request API key: ${errorMessage}`,
         severity: "error",
         display: "transient"
       });
@@ -258,60 +284,94 @@ const ApiKeyManagementTab = ({ namespace: propNamespace }) => {
       setCreating(false);
     }
   };
-  const detailPanelConfig = useMemo(() => [
-    {
-      render: (data) => {
-        const request = data.rowData;
-        if (!request?.metadata?.name) {
-          return /* @__PURE__ */ React.createElement(Box, null);
+  const detailPanelConfig = useMemo(
+    () => [
+      {
+        render: (data) => {
+          const request = data.rowData;
+          if (!request?.metadata?.name) {
+            return /* @__PURE__ */ React.createElement(Box, null);
+          }
+          const key = `${request.metadata.namespace}/${request.metadata.name}`;
+          const revealedKey = apiKeyValues.get(key);
+          return /* @__PURE__ */ React.createElement(
+            DetailPanelContent,
+            {
+              request,
+              apiName: apiProductName,
+              revealedApiKey: revealedKey
+            }
+          );
         }
-        const key = `${request.metadata.namespace}/${request.metadata.name}`;
-        const revealedKey = apiKeyValues.get(key);
-        return /* @__PURE__ */ React.createElement(DetailPanelContent, { request, apiName: apiProductName, revealedApiKey: revealedKey });
       }
-    }
-  ], [apiProductName, apiKeyValues]);
-  const DetailPanelContent = ({ request, apiName: api, revealedApiKey }) => {
+    ],
+    [apiProductName, apiKeyValues]
+  );
+  const DetailPanelContent = ({
+    request,
+    apiName: api,
+    revealedApiKey
+  }) => {
     const [selectedLanguage, setSelectedLanguage] = useState(0);
     const hostname = request.status?.apiHostname || `${api}.apps.example.com`;
     const displayApiKey = revealedApiKey || "<your-api-key>";
-    return /* @__PURE__ */ React.createElement(Box, { p: 3, bgcolor: "background.default", onClick: (e) => e.stopPropagation() }, request.spec.useCase && /* @__PURE__ */ React.createElement(Box, { mb: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Use Case"), /* @__PURE__ */ React.createElement(Box, { p: 2, bgcolor: "background.paper", borderRadius: 1, border: "1px solid rgba(0, 0, 0, 0.12)" }, /* @__PURE__ */ React.createElement(
-      Typography,
+    return /* @__PURE__ */ React.createElement(
+      Box,
       {
-        variant: "body2",
-        style: {
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word",
-          overflowWrap: "break-word"
-        }
+        p: 3,
+        bgcolor: "background.default",
+        onClick: (e) => e.stopPropagation()
       },
-      request.spec.useCase
-    ))), /* @__PURE__ */ React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Usage Examples"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "Use these code examples to test the API with your ", request.spec.planTier, " tier key."), /* @__PURE__ */ React.createElement(Box, { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
-      Tabs,
-      {
-        value: selectedLanguage,
-        onChange: (e, newValue) => {
-          e.stopPropagation();
-          setSelectedLanguage(newValue);
+      request.spec.useCase && /* @__PURE__ */ React.createElement(Box, { mb: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Use Case"), /* @__PURE__ */ React.createElement(
+        Box,
+        {
+          p: 2,
+          bgcolor: "background.paper",
+          borderRadius: 1,
+          border: "1px solid rgba(0, 0, 0, 0.12)"
         },
-        indicatorColor: "primary"
-      },
-      /* @__PURE__ */ React.createElement(Tab, { label: "cURL", onClick: (e) => e.stopPropagation() }),
-      /* @__PURE__ */ React.createElement(Tab, { label: "Node.js", onClick: (e) => e.stopPropagation() }),
-      /* @__PURE__ */ React.createElement(Tab, { label: "Python", onClick: (e) => e.stopPropagation() }),
-      /* @__PURE__ */ React.createElement(Tab, { label: "Go", onClick: (e) => e.stopPropagation() })
-    )), /* @__PURE__ */ React.createElement(Box, { mt: 2 }, selectedLanguage === 0 && /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: `curl -X GET https://${hostname}/api/v1/endpoint \\
+        /* @__PURE__ */ React.createElement(
+          Typography,
+          {
+            variant: "body2",
+            style: {
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              overflowWrap: "break-word"
+            }
+          },
+          request.spec.useCase
+        )
+      )),
+      /* @__PURE__ */ React.createElement(Typography, { variant: "h6", gutterBottom: true }, "Usage Examples"),
+      /* @__PURE__ */ React.createElement(Typography, { variant: "body2", paragraph: true }, "Use these code examples to test the API with your", " ", request.spec.planTier, " tier key."),
+      /* @__PURE__ */ React.createElement(Box, { onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React.createElement(
+        Tabs,
+        {
+          value: selectedLanguage,
+          onChange: (e, newValue) => {
+            e.stopPropagation();
+            setSelectedLanguage(newValue);
+          },
+          indicatorColor: "primary"
+        },
+        /* @__PURE__ */ React.createElement(Tab, { label: "cURL", onClick: (e) => e.stopPropagation() }),
+        /* @__PURE__ */ React.createElement(Tab, { label: "Node.js", onClick: (e) => e.stopPropagation() }),
+        /* @__PURE__ */ React.createElement(Tab, { label: "Python", onClick: (e) => e.stopPropagation() }),
+        /* @__PURE__ */ React.createElement(Tab, { label: "Go", onClick: (e) => e.stopPropagation() })
+      )),
+      /* @__PURE__ */ React.createElement(Box, { mt: 2 }, selectedLanguage === 0 && /* @__PURE__ */ React.createElement(
+        CodeSnippet,
+        {
+          text: `curl -X GET https://${hostname}/api/v1/endpoint \\
   -H "Authorization: Bearer ${displayApiKey}"`,
-        language: "bash",
-        showCopyCodeButton: true
-      }
-    ), selectedLanguage === 1 && /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: `const fetch = require('node-fetch');
+          language: "bash",
+          showCopyCodeButton: true
+        }
+      ), selectedLanguage === 1 && /* @__PURE__ */ React.createElement(
+        CodeSnippet,
+        {
+          text: `const fetch = require('node-fetch');
 
 const apiKey = '${displayApiKey}';
 const endpoint = 'https://${hostname}/api/v1/endpoint';
@@ -325,13 +385,13 @@ fetch(endpoint, {
   .then(response => response.json())
   .then(data => console.log(data))
   .catch(error => console.error('Error:', error));`,
-        language: "javascript",
-        showCopyCodeButton: true
-      }
-    ), selectedLanguage === 2 && /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: `import requests
+          language: "javascript",
+          showCopyCodeButton: true
+        }
+      ), selectedLanguage === 2 && /* @__PURE__ */ React.createElement(
+        CodeSnippet,
+        {
+          text: `import requests
 
 api_key = '${displayApiKey}'
 endpoint = 'https://${hostname}/api/v1/endpoint'
@@ -342,13 +402,13 @@ headers = {
 
 response = requests.get(endpoint, headers=headers)
 print(response.json())`,
-        language: "python",
-        showCopyCodeButton: true
-      }
-    ), selectedLanguage === 3 && /* @__PURE__ */ React.createElement(
-      CodeSnippet,
-      {
-        text: `package main
+          language: "python",
+          showCopyCodeButton: true
+        }
+      ), selectedLanguage === 3 && /* @__PURE__ */ React.createElement(
+        CodeSnippet,
+        {
+          text: `package main
 
 import (
     "fmt"
@@ -374,10 +434,11 @@ func main() {
     body, _ := io.ReadAll(resp.Body)
     fmt.Println(string(body))
 }`,
-        language: "go",
-        showCopyCodeButton: true
-      }
-    )));
+          language: "go",
+          showCopyCodeButton: true
+        }
+      ))
+    );
   };
   const loading = requestsLoading || plansLoading || createRequestPermissionLoading || deleteOwnPermissionLoading || deleteAllPermissionLoading || updateRequestPermissionLoading;
   const error = requestsError || plansError;
@@ -396,9 +457,15 @@ func main() {
     (r) => !optimisticallyDeleted.has(r.metadata.name)
   );
   const plans = apiProduct?.status?.discoveredPlans || [];
-  const pendingRequests = myRequests.filter((r) => !r.status?.phase || r.status.phase === "Pending");
-  const approvedRequests = myRequests.filter((r) => r.status?.phase === "Approved");
-  const rejectedRequests = myRequests.filter((r) => r.status?.phase === "Rejected");
+  const pendingRequests = myRequests.filter(
+    (r) => !r.status?.phase || r.status.phase === "Pending"
+  );
+  const approvedRequests = myRequests.filter(
+    (r) => r.status?.phase === "Approved"
+  );
+  const rejectedRequests = myRequests.filter(
+    (r) => r.status?.phase === "Rejected"
+  );
   const approvedColumns = [
     {
       title: "Tier",
@@ -442,7 +509,10 @@ func main() {
             clearApiKeyValue(row.metadata.namespace, row.metadata.name);
             toggleVisibility(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);
           }
         };
@@ -466,15 +536,21 @@ func main() {
             }
           },
           isLoading ? "Loading..." : isVisible && apiKeyValue ? apiKeyValue : "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022"
-        ), 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,
+        ), 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, null) : /* @__PURE__ */ React.createElement(VisibilityIcon, null)
-        ))));
+          /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
+            IconButton,
+            {
+              size: "small",
+              onClick: handleRevealClick,
+              disabled: isLoading || isAlreadyRead && !apiKeyValue
+            },
+            isVisible ? /* @__PURE__ */ React.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React.createElement(VisibilityIcon, null)
+          ))
+        ));
       }
     },
     {
@@ -488,7 +564,12 @@ func main() {
           return /* @__PURE__ */ React.createElement(CircularProgress, { size: 20 });
         }
         const ownerId = row.spec.requestedBy.userId;
-        const canDelete = canDeleteResource(ownerId, userId, canDeleteOwnKey, canDeleteAllKeys);
+        const canDelete = canDeleteResource(
+          ownerId,
+          userId,
+          canDeleteOwnKey,
+          canDeleteAllKeys
+        );
         if (!canDelete) return null;
         return /* @__PURE__ */ React.createElement(
           IconButton,
@@ -563,7 +644,8 @@ func main() {
       title: "Reviewed",
       field: "status.reviewedAt",
       render: (row) => {
-        if (!row.status?.reviewedAt) return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "-");
+        if (!row.status?.reviewedAt)
+          return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "-");
         return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, new Date(row.status.reviewedAt).toLocaleDateString());
       }
     },
@@ -579,7 +661,12 @@ func main() {
         }
         const isPending = !row.status?.phase || row.status.phase === "Pending";
         const ownerId = row.spec.requestedBy.userId;
-        const canDelete = canDeleteResource(ownerId, userId, canDeleteOwnKey, canDeleteAllKeys);
+        const canDelete = canDeleteResource(
+          ownerId,
+          userId,
+          canDeleteOwnKey,
+          canDeleteAllKeys
+        );
         const canEdit = canUpdateRequest && ownerId === userId;
         if (!isPending || !canEdit && !canDelete) return null;
         return /* @__PURE__ */ React.createElement(
@@ -604,29 +691,52 @@ func main() {
   const pendingRequestColumns = requestColumns.filter(
     (col) => col.title !== "Reviewed" && col.title !== "Reason"
   );
-  return /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, canCreateRequest && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { display: "flex", flexDirection: "column", alignItems: "flex-end", mb: 2 }, /* @__PURE__ */ React.createElement(
-    Button,
+  return /* @__PURE__ */ React.createElement(Box, { p: 2 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 3, direction: "column" }, canCreateRequest && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    Box,
     {
-      variant: "contained",
-      color: "primary",
-      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
-      onClick: () => setOpen(true),
-      disabled: plans.length === 0,
-      "data-testid": "request-api-access-button",
-      "data-plans-count": plans.length
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "flex-end",
+      mb: 2
     },
-    "Request API Access"
-  ), plans.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary", style: { marginTop: 4 }, "data-testid": "no-plans-message" }, !apiProduct ? "API product not found" : (() => {
-    const readyCondition = apiProduct.status?.conditions?.find((c) => c.type === "Ready");
-    const planCondition = apiProduct.status?.conditions?.find((c) => c.type === "PlanPolicyDiscovered");
-    if (readyCondition?.status !== "True") {
-      return `HTTPRoute not ready: ${readyCondition?.message || "unknown"}`;
-    }
-    if (planCondition?.status !== "True") {
-      return `No plans discovered: ${planCondition?.message || "no PlanPolicy found"}`;
-    }
-    return "No plans available";
-  })()))), pendingRequests.length === 0 && rejectedRequests.length === 0 && approvedRequests.length === 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { p: 3, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, "No API keys yet. Request access to get started."))), pendingRequests.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
+        onClick: () => setOpen(true),
+        disabled: plans.length === 0,
+        "data-testid": "request-api-access-button",
+        "data-plans-count": plans.length
+      },
+      "Request API Access"
+    ),
+    plans.length === 0 && /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "caption",
+        color: "textSecondary",
+        style: { marginTop: 4 },
+        "data-testid": "no-plans-message"
+      },
+      !apiProduct ? "API product not found" : (() => {
+        const readyCondition = apiProduct.status?.conditions?.find(
+          (c) => c.type === "Ready"
+        );
+        const planCondition = apiProduct.status?.conditions?.find(
+          (c) => c.type === "PlanPolicyDiscovered"
+        );
+        if (readyCondition?.status !== "True") {
+          return `HTTPRoute not ready: ${readyCondition?.message || "unknown"}`;
+        }
+        if (planCondition?.status !== "True") {
+          return `No plans discovered: ${planCondition?.message || "no PlanPolicy found"}`;
+        }
+        return "No plans available";
+      })()
+    )
+  )), pendingRequests.length === 0 && rejectedRequests.length === 0 && approvedRequests.length === 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(Box, { p: 3, textAlign: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "textSecondary" }, "No API keys yet. Request access to get started."))), pendingRequests.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Table,
     {
       title: "Pending Requests",
@@ -676,44 +786,105 @@ func main() {
       data: approvedRequests,
       detailPanel: detailPanelConfig
     }
-  ))), /* @__PURE__ */ React.createElement(Dialog, { open, onClose: () => setOpen(false), maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React.createElement(DialogTitle, null, "Request API Access"), /* @__PURE__ */ React.createElement(DialogContent, null, createError && /* @__PURE__ */ React.createElement(Box, { mb: 2, p: 2, bgcolor: "error.main", color: "error.contrastText", borderRadius: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, createError)), /* @__PURE__ */ React.createElement(FormControl, { fullWidth: true, margin: "normal", disabled: creating, "data-testid": "tier-select-form" }, /* @__PURE__ */ React.createElement(InputLabel, { id: "tier-select-label" }, "Select Tier"), /* @__PURE__ */ React.createElement(
-    Select,
-    {
-      labelId: "tier-select-label",
-      "data-testid": "tier-select",
-      value: selectedPlan,
-      onChange: (e) => setSelectedPlan(e.target.value),
-      disabled: creating
-    },
-    plans.map((plan) => {
-      const limitDesc = Object.entries(plan.limits || {}).map(([key, val]) => `${val} per ${key}`).join(", ");
-      return /* @__PURE__ */ React.createElement(MenuItem, { key: plan.tier, value: plan.tier, "data-testid": `tier-option-${plan.tier}` }, plan.tier, " ", limitDesc ? `(${limitDesc})` : "");
-    })
-  )), /* @__PURE__ */ React.createElement(
-    TextField,
-    {
-      label: "Use Case (optional)",
-      placeholder: "Describe how you plan to use this API",
-      multiline: true,
-      rows: 3,
-      fullWidth: true,
-      margin: "normal",
-      value: useCase,
-      onChange: (e) => setUseCase(e.target.value),
-      helperText: "Explain your intended use of this API for admin review",
-      disabled: creating
-    }
-  )), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: () => setOpen(false), disabled: creating }, "Cancel"), /* @__PURE__ */ React.createElement(
-    Button,
+  ))), /* @__PURE__ */ React.createElement(
+    Dialog,
     {
-      onClick: handleRequestAccess,
-      color: "primary",
-      variant: "contained",
-      disabled: !selectedPlan || creating,
-      startIcon: creating ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      open,
+      onClose: () => setOpen(false),
+      maxWidth: "sm",
+      fullWidth: true
     },
-    creating ? "Submitting..." : "Submit Request"
-  ))), /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(DialogTitle, null, "Request API Access"),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        mb: 2,
+        p: 1.5,
+        bgcolor: "info.light",
+        borderRadius: 1,
+        display: "flex",
+        alignItems: "flex-start",
+        style: { gap: 8 }
+      },
+      /* @__PURE__ */ React.createElement(
+        InfoIcon,
+        {
+          color: "primary",
+          fontSize: "small",
+          style: { marginTop: 2 }
+        }
+      ),
+      /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "Your request will be reviewed by an API owner before access is granted.")
+    ), createError && /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        mb: 2,
+        p: 2,
+        bgcolor: "error.main",
+        color: "error.contrastText",
+        borderRadius: 1
+      },
+      /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, createError)
+    ), /* @__PURE__ */ React.createElement(
+      FormControl,
+      {
+        fullWidth: true,
+        margin: "normal",
+        disabled: creating,
+        "data-testid": "tier-select-form"
+      },
+      /* @__PURE__ */ React.createElement(InputLabel, { id: "tier-select-label" }, "Select Tier"),
+      /* @__PURE__ */ React.createElement(
+        Select,
+        {
+          labelId: "tier-select-label",
+          "data-testid": "tier-select",
+          value: selectedPlan,
+          onChange: (e) => setSelectedPlan(e.target.value),
+          disabled: creating
+        },
+        plans.map((plan) => {
+          const limitDesc = Object.entries(plan.limits || {}).map(([key, val]) => `${val} per ${key}`).join(", ");
+          return /* @__PURE__ */ React.createElement(
+            MenuItem,
+            {
+              key: plan.tier,
+              value: plan.tier,
+              "data-testid": `tier-option-${plan.tier}`
+            },
+            plan.tier,
+            " ",
+            limitDesc ? `(${limitDesc})` : ""
+          );
+        })
+      )
+    ), /* @__PURE__ */ React.createElement(
+      TextField,
+      {
+        label: "Use Case (optional)",
+        placeholder: "Describe how you plan to use this API",
+        multiline: true,
+        rows: 3,
+        fullWidth: true,
+        margin: "normal",
+        value: useCase,
+        onChange: (e) => setUseCase(e.target.value),
+        helperText: "Explain your intended use of this API for admin review",
+        disabled: creating
+      }
+    )),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, { onClick: () => setOpen(false), disabled: creating }, "Cancel"), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: handleRequestAccess,
+        color: "primary",
+        variant: "contained",
+        disabled: !selectedPlan || creating,
+        startIcon: creating ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 16, color: "inherit" }) : undefined
+      },
+      creating ? "Submitting..." : "Submit Request"
+    ))
+  ), /* @__PURE__ */ React.createElement(
     Menu,
     {
       id: "actions-menu",
@@ -728,9 +899,13 @@ func main() {
       const canEdit = canUpdateRequest && ownerId === userId && isPending;
       const items = [];
       if (canEdit) {
-        items.push(/* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: handleMenuEdit }, "Edit"));
+        items.push(
+          /* @__PURE__ */ React.createElement(MenuItem, { key: "edit", onClick: handleMenuEdit }, "Edit")
+        );
       }
-      items.push(/* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleMenuDeleteClick }, "Delete"));
+      items.push(
+        /* @__PURE__ */ React.createElement(MenuItem, { key: "delete", onClick: handleMenuDeleteClick }, "Delete")
+      );
       return items;
     })()
   ), requestToEdit && /* @__PURE__ */ React.createElement(
@@ -783,7 +958,10 @@ func main() {
         color: "primary",
         onClick: () => {
           if (pendingKeyReveal) {
-            fetchApiKeyFromSecret(pendingKeyReveal.namespace, pendingKeyReveal.name);
+            fetchApiKeyFromSecret(
+              pendingKeyReveal.namespace,
+              pendingKeyReveal.name
+            );
             toggleVisibility(pendingKeyReveal.name);
           }
           setShowOnceWarningOpen(false);