@kuadrant/kuadrant-backstage-plugin-frontend 0.0.2-dev-24d0757 → 0.0.2-dev-7d09bfa

package/dist/components/ApiAccessCard/ApiAccessCard.esm.js

@@ -1,22 +1,39 @@
 import React, { useState } from 'react';
 import { useAsync } from 'react-use';
 import { Progress, ResponseErrorPanel, InfoCard } from '@backstage/core-components';
-import { Box, Typography, Chip } from '@material-ui/core';
-import { useApi, configApiRef, identityApiRef, fetchApiRef } from '@backstage/core-plugin-api';
+import { Box, Typography, Button, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Tooltip, IconButton } from '@material-ui/core';
+import AddIcon from '@material-ui/icons/Add';
+import VisibilityIcon from '@material-ui/icons/Visibility';
+import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import WarningIcon from '@material-ui/icons/Warning';
+import { useApi, configApiRef, identityApiRef, fetchApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
+import { RequestAccessDialog } from '../RequestAccessDialog/RequestAccessDialog.esm.js';
+import { useKuadrantPermission } from '../../utils/permissions.esm.js';
+import { kuadrantApiKeyCreatePermission } from '../../permissions.esm.js';
 
 const ApiAccessCard = ({ namespace: propNamespace }) => {
   const { entity } = useEntity();
   const config = useApi(configApiRef);
   const identityApi = useApi(identityApiRef);
   const fetchApi = useApi(fetchApiRef);
+  const alertApi = useApi(alertApiRef);
   const backendUrl = config.getString("backend.baseUrl");
-  const [, setUserId] = useState("guest");
+  const [userEmail, setUserEmail] = useState("");
+  const [requestDialogOpen, setRequestDialogOpen] = useState(false);
+  const [refresh, setRefresh] = useState(0);
+  const [visibleKeys, setVisibleKeys] = useState(/* @__PURE__ */ new Set());
+  const [apiKeyValues, setApiKeyValues] = useState(/* @__PURE__ */ new Map());
+  const [apiKeyLoading, setApiKeyLoading] = 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;
   const namespace = entity.metadata.annotations?.["kuadrant.io/namespace"] || propNamespace || "default";
   useAsync(async () => {
-    const identity = await identityApi.getBackstageIdentity();
-    setUserId(identity.userEntityRef.split("/")[1] || "guest");
+    const profile = await identityApi.getProfileInfo();
+    setUserEmail(profile.email || "");
   }, [identityApi]);
   const { value: requests, loading: keysLoading, error: keysError } = useAsync(async () => {
     const url = `${backendUrl}/api/kuadrant/requests/my?namespace=${namespace}` ;
@@ -29,18 +46,219 @@ const ApiAccessCard = ({ namespace: propNamespace }) => {
     return allRequests.filter(
       (r) => r.spec.apiProductRef?.name === apiProductName && r.status?.phase === "Approved"
     );
-  }, [namespace, apiProductName, backendUrl, fetchApi]);
-  if (keysLoading) {
+  }, [namespace, apiProductName, backendUrl, fetchApi, refresh]);
+  const { value: apiProduct, loading: productLoading } = useAsync(async () => {
+    const response = await fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`);
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    return data.items?.find(
+      (p) => p.metadata.namespace === namespace && p.metadata.name === apiProductName
+    );
+  }, [namespace, apiProductName, fetchApi, backendUrl]);
+  const resourceRef = apiProduct ? `apiproduct:${apiProduct.metadata.namespace}/${apiProduct.metadata.name}` : undefined;
+  const { allowed: canCreateRequest, loading: permissionLoading } = useKuadrantPermission(
+    kuadrantApiKeyCreatePermission,
+    resourceRef
+  );
+  const fetchApiKeyFromSecret = async (requestNamespace, requestName) => {
+    const key = `${requestNamespace}/${requestName}`;
+    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));
+        setAlreadyReadKeys((prev) => new Set(prev).add(key));
+      } else if (response.status === 403) {
+        setAlreadyReadKeys((prev) => new Set(prev).add(key));
+        alertApi.post({
+          message: "This API key has already been viewed and cannot be retrieved again.",
+          severity: "warning",
+          display: "transient"
+        });
+      }
+    } catch (err) {
+      console.error("failed to fetch api key:", err);
+    } finally {
+      setApiKeyLoading((prev) => {
+        const next = new Set(prev);
+        next.delete(key);
+        return next;
+      });
+    }
+  };
+  const clearApiKeyValue = (requestNamespace, requestName) => {
+    const key = `${requestNamespace}/${requestName}`;
+    setApiKeyValues((prev) => {
+      const next = new Map(prev);
+      next.delete(key);
+      return next;
+    });
+  };
+  const toggleVisibility = (keyName) => {
+    setVisibleKeys((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(keyName)) {
+        newSet.delete(keyName);
+      } else {
+        newSet.add(keyName);
+      }
+      return newSet;
+    });
+  };
+  const loading = keysLoading || productLoading || permissionLoading;
+  if (loading) {
     return /* @__PURE__ */ React.createElement(Progress, null);
   }
   if (keysError) {
     return /* @__PURE__ */ React.createElement(ResponseErrorPanel, { error: keysError });
   }
   const keys = requests || [];
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InfoCard, { title: "Kuadrant API Keys" }, /* @__PURE__ */ React.createElement(Box, { p: 2 }, keys.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, "You have ", keys.length, " active API key", keys.length !== 1 ? "s" : "", " for this API"), keys.map((request) => {
-    const planTier = request.spec.planTier;
-    return /* @__PURE__ */ React.createElement(Box, { key: request.metadata.name, mb: 1, p: 1, border: 1, borderColor: "grey.300", borderRadius: 4 }, /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center" }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, request.metadata.name), /* @__PURE__ */ React.createElement(Chip, { label: planTier, color: "primary", size: "small" })));
-  }), /* @__PURE__ */ React.createElement(Box, { mt: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary" }, "Visit the API Keys tab to view keys, make new requests, or manage access"))) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, "You don't have any API keys for this API yet"), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Visit the API Keys tab to request access")))));
+  const plans = apiProduct?.status?.discoveredPlans || [];
+  const canRequest = canCreateRequest && plans.length > 0;
+  const renderKeyRow = (request) => {
+    const key = `${request.metadata.namespace}/${request.metadata.name}`;
+    const isVisible = visibleKeys.has(request.metadata.name);
+    const isLoading = apiKeyLoading.has(key);
+    const apiKeyValue = apiKeyValues.get(key);
+    const hasSecretRef = request.status?.secretRef?.name;
+    const canReadSecret = request.status?.canReadSecret !== false;
+    const isAlreadyRead = alreadyReadKeys.has(key) || !canReadSecret;
+    const handleRevealClick = () => {
+      if (isVisible) {
+        clearApiKeyValue(request.metadata.namespace, request.metadata.name);
+        toggleVisibility(request.metadata.name);
+      } else if (!isAlreadyRead) {
+        setPendingKeyReveal({
+          namespace: request.metadata.namespace,
+          name: request.metadata.name
+        });
+        setShowOnceWarningOpen(true);
+      }
+    };
+    const handleCopy = async () => {
+      if (apiKeyValue) {
+        await navigator.clipboard.writeText(apiKeyValue);
+        alertApi.post({
+          message: "API key copied to clipboard",
+          severity: "success",
+          display: "transient"
+        });
+      }
+    };
+    return /* @__PURE__ */ React.createElement(
+      Box,
+      {
+        key: request.metadata.name,
+        mb: 1,
+        p: 1.5,
+        border: 1,
+        borderColor: "grey.300",
+        borderRadius: 4
+      },
+      /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", style: { fontWeight: 500 } }, request.metadata.name), /* @__PURE__ */ React.createElement(Chip, { label: request.spec.planTier, color: "primary", size: "small" })),
+      hasSecretRef && /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          variant: "body2",
+          style: {
+            fontFamily: "monospace",
+            fontSize: "0.8rem",
+            flex: 1,
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        isLoading ? "Loading..." : isVisible && apiKeyValue ? apiKeyValue : isAlreadyRead && !apiKeyValue ? "Already viewed" : "\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: isAlreadyRead && !apiKeyValue ? "Key already viewed" : isVisible ? "Hide API key" : "Reveal API key (one-time only)"
+        },
+        /* @__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" })
+        ))
+      ))
+    );
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(InfoCard, { title: "Kuadrant API Keys" }, /* @__PURE__ */ React.createElement(Box, { p: 2 }, keys.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary", gutterBottom: true }, keys.length, " active key", keys.length !== 1 ? "s" : ""), keys.map(renderKeyRow)) : /* @__PURE__ */ React.createElement(Typography, { variant: "body1", gutterBottom: true }, "You don't have any API keys for this API yet"), /* @__PURE__ */ React.createElement(Box, { mt: 2 }, canRequest ? /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
+      onClick: () => setRequestDialogOpen(true)
+    },
+    "Request API Access"
+  ) : /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "textSecondary" }, "Visit the API Keys tab to view and manage access")))), /* @__PURE__ */ React.createElement(
+    RequestAccessDialog,
+    {
+      open: requestDialogOpen,
+      onClose: () => setRequestDialogOpen(false),
+      onSuccess: () => {
+        setRequestDialogOpen(false);
+        setRefresh((r) => r + 1);
+      },
+      apiProductName,
+      namespace,
+      userEmail,
+      plans
+    }
+  ), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: showOnceWarningOpen,
+      onClose: () => {
+        setShowOnceWarningOpen(false);
+        setPendingKeyReveal(null);
+      },
+      maxWidth: "sm"
+    },
+    /* @__PURE__ */ React.createElement(DialogTitle, null, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(WarningIcon, { color: "primary", style: { marginRight: 8 } }), "View API Key")),
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", paragraph: true }, "This API key can only be viewed ", /* @__PURE__ */ React.createElement("strong", null, "once"), ". After you reveal it, you will not be able to retrieve it again."), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Make sure to copy and store it securely before closing this view.")),
+    /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        onClick: () => {
+          setShowOnceWarningOpen(false);
+          setPendingKeyReveal(null);
+        }
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        onClick: () => {
+          if (pendingKeyReveal) {
+            fetchApiKeyFromSecret(
+              pendingKeyReveal.namespace,
+              pendingKeyReveal.name
+            );
+            toggleVisibility(pendingKeyReveal.name);
+          }
+          setShowOnceWarningOpen(false);
+          setPendingKeyReveal(null);
+        }
+      },
+      "Reveal API Key"
+    ))
+  ));
 };
 
 export { ApiAccessCard };

package/dist/components/ApiAccessCard/ApiAccessCard.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApiAccessCard.esm.js","sources":["../../../src/components/ApiAccessCard/ApiAccessCard.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useAsync } from 'react-use';\nimport {\n  InfoCard,\n  Progress,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport {\n  Typography,\n  Box,\n  Chip,\n} from '@material-ui/core';\nimport { useApi, configApiRef, identityApiRef, fetchApiRef } from '@backstage/core-plugin-api';\nimport { useEntity } from '@backstage/plugin-catalog-react';\n\ninterface APIKey {\n  metadata: {\n    name: string;\n    namespace: string;\n  };\n  spec: {\n    apiProductRef: {\n      name: string;\n    };\n    planTier: string;\n  };\n  status?: {\n    phase: 'Pending' | 'Approved' | 'Rejected';\n    apiKey?: string;\n  };\n}\n\nexport interface ApiAccessCardProps {\n  // deprecated: use entity annotations instead\n  namespace?: string;\n}\n\nexport const ApiAccessCard = ({ namespace: propNamespace }: ApiAccessCardProps) => {\n  const { entity } = useEntity();\n  const config = useApi(configApiRef);\n  const identityApi = useApi(identityApiRef);\n  const fetchApi = useApi(fetchApiRef);\n  const backendUrl = config.getString('backend.baseUrl');\n  const [, setUserId] = useState<string>('guest');\n\n  // get apiproduct name from entity annotation (set by entity provider)\n  const apiProductName = entity.metadata.annotations?.['kuadrant.io/apiproduct'] || entity.metadata.name;\n  const namespace = entity.metadata.annotations?.['kuadrant.io/namespace'] || propNamespace || 'default';\n\n  // get current user identity\n  useAsync(async () => {\n    const identity = await identityApi.getBackstageIdentity();\n    setUserId(identity.userEntityRef.split('/')[1] || 'guest');\n  }, [identityApi]);\n\n  const { value: requests, loading: keysLoading, error: keysError } = useAsync(async () => {\n    const url = namespace\n      ? `${backendUrl}/api/kuadrant/requests/my?namespace=${namespace}`\n      : `${backendUrl}/api/kuadrant/requests/my`;\n    const response = await fetchApi.fetch(url);\n    if (!response.ok) {\n      throw new Error('failed to fetch api key requests');\n    }\n    const data = await response.json();\n    // filter to only this apiproduct's approved requests\n    const allRequests = data.items || [];\n    return allRequests.filter((r: APIKey) =>\n      r.spec.apiProductRef?.name === apiProductName && r.status?.phase === 'Approved'\n    );\n  }, [namespace, apiProductName, backendUrl, fetchApi]);\n\n  if (keysLoading) {\n    return <Progress />;\n  }\n\n  if (keysError) {\n    return <ResponseErrorPanel error={keysError} />;\n  }\n\n  const keys = (requests as APIKey[]) || [];\n\n  return (\n    <>\n      <InfoCard title=\"Kuadrant API Keys\">\n        <Box p={2}>\n          {keys.length > 0 ? (\n            <>\n              <Typography variant=\"body1\" gutterBottom>\n                You have {keys.length} active API key{keys.length !== 1 ? 's' : ''} for this API\n              </Typography>\n              {keys.map((request: APIKey) => {\n                const planTier = request.spec.planTier;\n\n                return (\n                  <Box key={request.metadata.name} mb={1} p={1} border={1} borderColor=\"grey.300\" borderRadius={4}>\n                    <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\">\n                      <Typography variant=\"body2\">\n                        {request.metadata.name}\n                      </Typography>\n                      <Chip label={planTier} color=\"primary\" size=\"small\" />\n                    </Box>\n                  </Box>\n                );\n              })}\n              <Box mt={2}>\n                <Typography variant=\"caption\" color=\"textSecondary\">\n                  Visit the API Keys tab to view keys, make new requests, or manage access\n                </Typography>\n              </Box>\n            </>\n          ) : (\n            <>\n              <Typography variant=\"body1\" gutterBottom>\n                You don't have any API keys for this API yet\n              </Typography>\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                Visit the API Keys tab to request access\n              </Typography>\n            </>\n          )}\n        </Box>\n      </InfoCard>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ApiAccessCard.esm.js","sources":["../../../src/components/ApiAccessCard/ApiAccessCard.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { useAsync } from 'react-use';\nimport {\n  InfoCard,\n  Progress,\n  ResponseErrorPanel,\n} from '@backstage/core-components';\nimport {\n  Typography,\n  Box,\n  Chip,\n  Button,\n  IconButton,\n  Tooltip,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogActions,\n} from '@material-ui/core';\nimport AddIcon from '@material-ui/icons/Add';\nimport VisibilityIcon from '@material-ui/icons/Visibility';\nimport VisibilityOffIcon from '@material-ui/icons/VisibilityOff';\nimport FileCopyIcon from '@material-ui/icons/FileCopy';\nimport WarningIcon from '@material-ui/icons/Warning';\nimport { useApi, configApiRef, identityApiRef, fetchApiRef, alertApiRef } from '@backstage/core-plugin-api';\nimport { useEntity } from '@backstage/plugin-catalog-react';\nimport { RequestAccessDialog, Plan } from '../RequestAccessDialog';\nimport { useKuadrantPermission } from '../../utils/permissions';\nimport { kuadrantApiKeyCreatePermission } from '../../permissions';\n\ninterface APIKey {\n  metadata: {\n    name: string;\n    namespace: string;\n  };\n  spec: {\n    apiProductRef: {\n      name: string;\n    };\n    planTier: string;\n  };\n  status?: {\n    phase: 'Pending' | 'Approved' | 'Rejected';\n    secretRef?: {\n      name: string;\n      key: string;\n    };\n    canReadSecret?: boolean;\n  };\n}\n\ninterface APIProduct {\n  metadata: {\n    name: string;\n    namespace: string;\n  };\n  status?: {\n    discoveredPlans?: Plan[];\n  };\n}\n\nexport interface ApiAccessCardProps {\n  // deprecated: use entity annotations instead\n  namespace?: string;\n}\n\nexport const ApiAccessCard = ({ namespace: propNamespace }: ApiAccessCardProps) => {\n  const { entity } = useEntity();\n  const config = useApi(configApiRef);\n  const identityApi = useApi(identityApiRef);\n  const fetchApi = useApi(fetchApiRef);\n  const alertApi = useApi(alertApiRef);\n  const backendUrl = config.getString('backend.baseUrl');\n  const [userEmail, setUserEmail] = useState<string>('');\n  const [requestDialogOpen, setRequestDialogOpen] = useState(false);\n  const [refresh, setRefresh] = useState(0);\n\n  // key reveal state\n  const [visibleKeys, setVisibleKeys] = useState<Set<string>>(new Set());\n  const [apiKeyValues, setApiKeyValues] = useState<Map<string, string>>(new Map());\n  const [apiKeyLoading, setApiKeyLoading] = useState<Set<string>>(new Set());\n  const [alreadyReadKeys, setAlreadyReadKeys] = useState<Set<string>>(new Set());\n  const [showOnceWarningOpen, setShowOnceWarningOpen] = useState(false);\n  const [pendingKeyReveal, setPendingKeyReveal] = useState<{\n    namespace: string;\n    name: string;\n  } | null>(null);\n\n  // get apiproduct name from entity annotation (set by entity provider)\n  const apiProductName = entity.metadata.annotations?.['kuadrant.io/apiproduct'] || entity.metadata.name;\n  const namespace = entity.metadata.annotations?.['kuadrant.io/namespace'] || propNamespace || 'default';\n\n  // get current user identity\n  useAsync(async () => {\n    const profile = await identityApi.getProfileInfo();\n    setUserEmail(profile.email || '');\n  }, [identityApi]);\n\n  // fetch user's approved keys\n  const { value: requests, loading: keysLoading, error: keysError } = useAsync(async () => {\n    const url = namespace\n      ? `${backendUrl}/api/kuadrant/requests/my?namespace=${namespace}`\n      : `${backendUrl}/api/kuadrant/requests/my`;\n    const response = await fetchApi.fetch(url);\n    if (!response.ok) {\n      throw new Error('failed to fetch api key requests');\n    }\n    const data = await response.json();\n    const allRequests = data.items || [];\n    return allRequests.filter((r: APIKey) =>\n      r.spec.apiProductRef?.name === apiProductName && r.status?.phase === 'Approved'\n    );\n  }, [namespace, apiProductName, backendUrl, fetchApi, refresh]);\n\n  // fetch apiproduct to get available plans\n  const { value: apiProduct, loading: productLoading } = useAsync(async () => {\n    const response = await fetchApi.fetch(`${backendUrl}/api/kuadrant/apiproducts`);\n    if (!response.ok) {\n      return null;\n    }\n    const data = await response.json();\n    return data.items?.find(\n      (p: APIProduct) =>\n        p.metadata.namespace === namespace &&\n        p.metadata.name === apiProductName,\n    );\n  }, [namespace, apiProductName, fetchApi, backendUrl]);\n\n  const resourceRef = apiProduct\n    ? `apiproduct:${apiProduct.metadata.namespace}/${apiProduct.metadata.name}`\n    : undefined;\n\n  const { allowed: canCreateRequest, loading: permissionLoading } = useKuadrantPermission(\n    kuadrantApiKeyCreatePermission,\n    resourceRef,\n  );\n\n  const fetchApiKeyFromSecret = async (requestNamespace: string, requestName: string) => {\n    const key = `${requestNamespace}/${requestName}`;\n    if (apiKeyLoading.has(key)) {\n      return;\n    }\n\n    setApiKeyLoading((prev) => new Set(prev).add(key));\n    try {\n      const response = await fetchApi.fetch(\n        `${backendUrl}/api/kuadrant/apikeys/${requestNamespace}/${requestName}/secret`,\n      );\n      if (response.ok) {\n        const data = await response.json();\n        setApiKeyValues((prev) => new Map(prev).set(key, data.apiKey));\n        setAlreadyReadKeys((prev) => new Set(prev).add(key));\n      } else if (response.status === 403) {\n        setAlreadyReadKeys((prev) => new Set(prev).add(key));\n        alertApi.post({\n          message: 'This API key has already been viewed and cannot be retrieved again.',\n          severity: 'warning',\n          display: 'transient',\n        });\n      }\n    } catch (err) {\n      console.error('failed to fetch api key:', err);\n    } finally {\n      setApiKeyLoading((prev) => {\n        const next = new Set(prev);\n        next.delete(key);\n        return next;\n      });\n    }\n  };\n\n  const clearApiKeyValue = (requestNamespace: string, requestName: string) => {\n    const key = `${requestNamespace}/${requestName}`;\n    setApiKeyValues((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n  };\n\n  const toggleVisibility = (keyName: string) => {\n    setVisibleKeys((prev) => {\n      const newSet = new Set(prev);\n      if (newSet.has(keyName)) {\n        newSet.delete(keyName);\n      } else {\n        newSet.add(keyName);\n      }\n      return newSet;\n    });\n  };\n\n  const loading = keysLoading || productLoading || permissionLoading;\n\n  if (loading) {\n    return <Progress />;\n  }\n\n  if (keysError) {\n    return <ResponseErrorPanel error={keysError} />;\n  }\n\n  const keys = (requests as APIKey[]) || [];\n  const plans = (apiProduct?.status?.discoveredPlans || []) as Plan[];\n  const canRequest = canCreateRequest && plans.length > 0;\n\n  const renderKeyRow = (request: APIKey) => {\n    const key = `${request.metadata.namespace}/${request.metadata.name}`;\n    const isVisible = visibleKeys.has(request.metadata.name);\n    const isLoading = apiKeyLoading.has(key);\n    const apiKeyValue = apiKeyValues.get(key);\n    const hasSecretRef = request.status?.secretRef?.name;\n    const canReadSecret = request.status?.canReadSecret !== false;\n    const isAlreadyRead = alreadyReadKeys.has(key) || !canReadSecret;\n\n    const handleRevealClick = () => {\n      if (isVisible) {\n        clearApiKeyValue(request.metadata.namespace, request.metadata.name);\n        toggleVisibility(request.metadata.name);\n      } else if (!isAlreadyRead) {\n        setPendingKeyReveal({\n          namespace: request.metadata.namespace,\n          name: request.metadata.name,\n        });\n        setShowOnceWarningOpen(true);\n      }\n    };\n\n    const handleCopy = async () => {\n      if (apiKeyValue) {\n        await navigator.clipboard.writeText(apiKeyValue);\n        alertApi.post({\n          message: 'API key copied to clipboard',\n          severity: 'success',\n          display: 'transient',\n        });\n      }\n    };\n\n    return (\n      <Box\n        key={request.metadata.name}\n        mb={1}\n        p={1.5}\n        border={1}\n        borderColor=\"grey.300\"\n        borderRadius={4}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\" mb={1}>\n          <Typography variant=\"body2\" style={{ fontWeight: 500 }}>\n            {request.metadata.name}\n          </Typography>\n          <Chip label={request.spec.planTier} color=\"primary\" size=\"small\" />\n        </Box>\n        {hasSecretRef && (\n          <Box display=\"flex\" alignItems=\"center\">\n            <Typography\n              variant=\"body2\"\n              style={{\n                fontFamily: 'monospace',\n                fontSize: '0.8rem',\n                flex: 1,\n                overflow: 'hidden',\n                textOverflow: 'ellipsis',\n              }}\n            >\n              {isLoading\n                ? 'Loading...'\n                : isVisible && apiKeyValue\n                  ? apiKeyValue\n                  : isAlreadyRead && !apiKeyValue\n                    ? 'Already viewed'\n                    : '••••••••••••••••'}\n            </Typography>\n            {isVisible && apiKeyValue && (\n              <Tooltip title=\"Copy to clipboard\">\n                <IconButton size=\"small\" onClick={handleCopy}>\n                  <FileCopyIcon fontSize=\"small\" />\n                </IconButton>\n              </Tooltip>\n            )}\n            <Tooltip\n              title={\n                isAlreadyRead && !apiKeyValue\n                  ? 'Key already viewed'\n                  : isVisible\n                    ? 'Hide API key'\n                    : 'Reveal API key (one-time only)'\n              }\n            >\n              <span>\n                <IconButton\n                  size=\"small\"\n                  onClick={handleRevealClick}\n                  disabled={isLoading || (isAlreadyRead && !apiKeyValue)}\n                >\n                  {isVisible ? <VisibilityOffIcon fontSize=\"small\" /> : <VisibilityIcon fontSize=\"small\" />}\n                </IconButton>\n              </span>\n            </Tooltip>\n          </Box>\n        )}\n      </Box>\n    );\n  };\n\n  return (\n    <>\n      <InfoCard title=\"Kuadrant API Keys\">\n        <Box p={2}>\n          {keys.length > 0 ? (\n            <>\n              <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n                {keys.length} active key{keys.length !== 1 ? 's' : ''}\n              </Typography>\n              {keys.map(renderKeyRow)}\n            </>\n          ) : (\n            <Typography variant=\"body1\" gutterBottom>\n              You don't have any API keys for this API yet\n            </Typography>\n          )}\n          <Box mt={2}>\n            {canRequest ? (\n              <Button\n                variant=\"contained\"\n                color=\"primary\"\n                size=\"small\"\n                startIcon={<AddIcon />}\n                onClick={() => setRequestDialogOpen(true)}\n              >\n                Request API Access\n              </Button>\n            ) : (\n              <Typography variant=\"caption\" color=\"textSecondary\">\n                Visit the API Keys tab to view and manage access\n              </Typography>\n            )}\n          </Box>\n        </Box>\n      </InfoCard>\n\n      <RequestAccessDialog\n        open={requestDialogOpen}\n        onClose={() => setRequestDialogOpen(false)}\n        onSuccess={() => {\n          setRequestDialogOpen(false);\n          setRefresh((r) => r + 1);\n        }}\n        apiProductName={apiProductName}\n        namespace={namespace}\n        userEmail={userEmail}\n        plans={plans}\n      />\n\n      <Dialog\n        open={showOnceWarningOpen}\n        onClose={() => {\n          setShowOnceWarningOpen(false);\n          setPendingKeyReveal(null);\n        }}\n        maxWidth=\"sm\"\n      >\n        <DialogTitle>\n          <Box display=\"flex\" alignItems=\"center\">\n            <WarningIcon color=\"primary\" style={{ marginRight: 8 }} />\n            View API Key\n          </Box>\n        </DialogTitle>\n        <DialogContent>\n          <Typography variant=\"body1\" paragraph>\n            This API key can only be viewed <strong>once</strong>. After you\n            reveal it, you will not be able to retrieve it again.\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\">\n            Make sure to copy and store it securely before closing this view.\n          </Typography>\n        </DialogContent>\n        <DialogActions>\n          <Button\n            onClick={() => {\n              setShowOnceWarningOpen(false);\n              setPendingKeyReveal(null);\n            }}\n          >\n            Cancel\n          </Button>\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            onClick={() => {\n              if (pendingKeyReveal) {\n                fetchApiKeyFromSecret(\n                  pendingKeyReveal.namespace,\n                  pendingKeyReveal.name,\n                );\n                toggleVisibility(pendingKeyReveal.name);\n              }\n              setShowOnceWarningOpen(false);\n              setPendingKeyReveal(null);\n            }}\n          >\n            Reveal API Key\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useAsync } from 'react-use';
 import { CodeSnippet, Progress, ResponseErrorPanel, Table } from '@backstage/core-components';
-import { Box, Typography, Tabs, Tab, Grid, Button, Dialog, DialogTitle, DialogContent, FormControl, InputLabel, Select, MenuItem, TextField, DialogActions, CircularProgress, Menu, Chip, Tooltip, IconButton } from '@material-ui/core';
+import { Box, Typography, Tabs, Tab, Grid, Button, Menu, MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Tooltip, IconButton, CircularProgress } from '@material-ui/core';
 import { useApi, configApiRef, identityApiRef, fetchApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import { useEntity } from '@backstage/plugin-catalog-react';
 import VisibilityIcon from '@material-ui/icons/Visibility';
@@ -12,12 +12,12 @@ 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';
 import { generateAuthCodeSnippets } from '../../utils/codeSnippets.esm.js';
+import { RequestAccessDialog } from '../RequestAccessDialog/RequestAccessDialog.esm.js';
 
 const ApiKeyManagementTab = ({
   namespace: propNamespace
@@ -32,11 +32,7 @@ const ApiKeyManagementTab = ({
   const [refresh, setRefresh] = useState(0);
   const [userId, setUserId] = useState("");
   const [userEmail, setUserEmail] = useState("");
-  const [open, setOpen] = useState(false);
-  const [selectedPlan, setSelectedPlan] = useState("");
-  const [useCase, setUseCase] = useState("");
-  const [creating, setCreating] = useState(false);
-  const [createError, setCreateError] = useState(null);
+  const [requestDialogOpen, setRequestDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [requestToEdit, setRequestToEdit] = useState(null);
   const [menuAnchor, setMenuAnchor] = useState(null);
@@ -242,54 +238,6 @@ const ApiKeyManagementTab = ({
       return newSet;
     });
   };
-  const handleRequestAccess = async () => {
-    if (!selectedPlan) return;
-    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
-          })
-        }
-      );
-      if (!response.ok) {
-        const errorData = await response.json().catch(() => ({}));
-        throw new Error(
-          errorData.error || `failed to create request: ${response.status}`
-        );
-      }
-      alertApi.post({
-        message: "API key requested successfully",
-        severity: "success",
-        display: "transient"
-      });
-      setOpen(false);
-      setSelectedPlan("");
-      setUseCase("");
-      setRefresh((r) => r + 1);
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : "unknown error occurred";
-      alertApi.post({
-        message: `Failed to request API key: ${errorMessage}`,
-        severity: "error",
-        display: "transient"
-      });
-      setCreateError(errorMessage);
-    } finally {
-      setCreating(false);
-    }
-  };
   const detailPanelConfig = useMemo(
     () => [
       {
@@ -664,7 +612,7 @@ const ApiKeyManagementTab = ({
         variant: "contained",
         color: "primary",
         startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
-        onClick: () => setOpen(true),
+        onClick: () => setRequestDialogOpen(true),
         disabled: plans.length === 0,
         "data-testid": "request-api-access-button",
         "data-plans-count": plans.length
@@ -746,103 +694,19 @@ const ApiKeyManagementTab = ({
       detailPanel: detailPanelConfig
     }
   ))), /* @__PURE__ */ React.createElement(
-    Dialog,
+    RequestAccessDialog,
     {
-      open,
-      onClose: () => setOpen(false),
-      maxWidth: "sm",
-      fullWidth: true
-    },
-    /* @__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 }
+      open: requestDialogOpen,
+      onClose: () => setRequestDialogOpen(false),
+      onSuccess: () => {
+        setRequestDialogOpen(false);
+        setRefresh((r) => r + 1);
       },
-      /* @__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"
-    ))
+      apiProductName,
+      namespace,
+      userEmail,
+      plans
+    }
   ), /* @__PURE__ */ React.createElement(
     Menu,
     {