@kuadrant/kuadrant-backstage-plugin-frontend 0.2.0 → 0.3.0-aaa46b4

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

@@ -1,11 +1,11 @@
 import React, { useState, useMemo } from 'react';
 import { useAsync } from 'react-use';
 import { CodeSnippet, ResponseErrorPanel, Table } from '@backstage/core-components';
-import { Box, Typography, Tabs, Tab, Grid, Button, Menu, MenuItem, Dialog, DialogTitle, DialogContent, DialogActions, Chip, Tooltip, IconButton, CircularProgress } from '@material-ui/core';
+import { Box, Typography, Tabs, Tab, Grid, Button, Menu, MenuItem, Chip, Tooltip, IconButton, CircularProgress } from '@material-ui/core';
 import { Skeleton } from '@material-ui/lab';
 import { useApi, identityApiRef, alertApiRef } from '@backstage/core-plugin-api';
 import { kuadrantApiRef } from '../../api.esm.js';
-import { useEntity } from '@backstage/plugin-catalog-react';
+import { useEntity, catalogApiRef } from '@backstage/plugin-catalog-react';
 import VisibilityIcon from '@material-ui/icons/Visibility';
 import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
 import HourglassEmptyIcon from '@material-ui/icons/HourglassEmpty';
@@ -13,9 +13,9 @@ import CancelIcon from '@material-ui/icons/Cancel';
 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 { kuadrantApiKeyCreatePermission, kuadrantApiKeyDeleteOwnPermission, kuadrantApiKeyDeleteAllPermission, kuadrantApiKeyUpdateOwnPermission } from '../../permissions.esm.js';
 import { useKuadrantPermission, canDeleteResource } from '../../utils/permissions.esm.js';
+import { getAPIKeyPhase } from '../../utils/apikeys.esm.js';
 import { EditAPIKeyDialog } from '../EditAPIKeyDialog/EditAPIKeyDialog.esm.js';
 import { ConfirmDeleteDialog } from '../ConfirmDeleteDialog/ConfirmDeleteDialog.esm.js';
 import { generateAuthCodeSnippets } from '../../utils/codeSnippets.esm.js';
@@ -25,6 +25,7 @@ const ApiKeyManagementTab = ({
   namespace: propNamespace
 }) => {
   const { entity } = useEntity();
+  const catalogAPI = useApi(catalogApiRef);
   const kuadrantApi = useApi(kuadrantApiRef);
   const identityApi = useApi(identityApiRef);
   const alertApi = useApi(alertApiRef);
@@ -44,29 +45,28 @@ const ApiKeyManagementTab = ({
     /* @__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();
     const profile = await identityApi.getProfileInfo();
     setUserId(identity.userEntityRef);
-    setUserEmail(profile.email || "");
+    let email = profile.email || "";
+    if (!email && identity.userEntityRef) {
+      const userEntity = await catalogAPI.getEntityByRef(identity.userEntityRef);
+      if (userEntity?.spec?.profile?.email) {
+        email = userEntity.spec.profile.email;
+      }
+    }
+    setUserEmail(email);
   }, [identityApi]);
   const {
     value: requests,
     loading: requestsLoading,
     error: requestsError
   } = useAsync(async () => {
-    const data = await kuadrantApi.getRequestsByNamespace(namespace);
-    return (data.items || []).filter(
-      (r) => r.spec.apiProductRef.name === apiProductName && r.metadata.namespace === namespace
-      // APIProducts and APIKeys (and its Secret) will be in the same NS
-    );
+    const data = await kuadrantApi.getRequestsByApiProduct(apiProductName, namespace);
+    return data.items || [];
   }, [apiProductName, namespace, refresh, kuadrantApi]);
   const {
     value: apiProduct,
@@ -100,11 +100,11 @@ const ApiKeyManagementTab = ({
     loading: updateRequestPermissionLoading,
     error: updateRequestPermissionError
   } = useKuadrantPermission(kuadrantApiKeyUpdateOwnPermission);
-  const handleDeleteRequest = async (name) => {
-    setOptimisticallyDeleted((prev) => new Set(prev).add(name));
-    setDeleting(name);
+  const handleDeleteRequest = async (deleteNamespace, deleteName) => {
+    setOptimisticallyDeleted((prev) => new Set(prev).add(deleteName));
+    setDeleting(deleteName);
     try {
-      await kuadrantApi.deleteRequest(namespace, name);
+      await kuadrantApi.deleteRequest(deleteNamespace, deleteName);
       alertApi.post({
         message: "API key deleted successfully",
         severity: "success",
@@ -115,7 +115,7 @@ const ApiKeyManagementTab = ({
       const errorMessage = err instanceof Error ? err.message : "unknown error occurred";
       setOptimisticallyDeleted((prev) => {
         const next = new Set(prev);
-        next.delete(name);
+        next.delete(deleteName);
         return next;
       });
       alertApi.post({
@@ -136,23 +136,14 @@ const ApiKeyManagementTab = ({
     try {
       const data = await kuadrantApi.getApiKeySecret(requestNamespace, requestName);
       setApiKeyValues((prev) => new Map(prev).set(key, data.apiKey));
-      setAlreadyReadKeys((prev) => new Set(prev).add(key));
+      toggleVisibility(requestName);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "unknown error occurred";
-      if (errorMessage.includes("403") || errorMessage.includes("already been viewed")) {
-        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"
-        });
-      } else {
-        alertApi.post({
-          message: `Failed to fetch api key: ${errorMessage}`,
-          severity: "error",
-          display: "transient"
-        });
-      }
+      alertApi.post({
+        message: `Failed to fetch api key: ${errorMessage}`,
+        severity: "error",
+        display: "transient"
+      });
     } finally {
       setApiKeyLoading((prev) => {
         const next = new Set(prev);
@@ -200,7 +191,10 @@ const ApiKeyManagementTab = ({
   };
   const handleDeleteConfirm = async () => {
     if (!deleteDialogState.request) return;
-    await handleDeleteRequest(deleteDialogState.request.metadata.name);
+    await handleDeleteRequest(
+      deleteDialogState.request.metadata.namespace,
+      deleteDialogState.request.metadata.name
+    );
     setDeleteDialogState({ open: false, request: null });
   };
   const handleDeleteCancel = () => {
@@ -344,13 +338,13 @@ const ApiKeyManagementTab = ({
   );
   const plans = apiProduct?.status?.discoveredPlans || [];
   const pendingRequests = myRequests.filter(
-    (r) => !r.status?.phase || r.status.phase === "Pending"
+    (r) => getAPIKeyPhase(r.status?.conditions) === "Pending"
   );
   const approvedRequests = myRequests.filter(
-    (r) => r.status?.phase === "Approved"
+    (r) => getAPIKeyPhase(r.status?.conditions) === "Approved"
   );
   const rejectedRequests = myRequests.filter(
-    (r) => r.status?.phase === "Rejected"
+    (r) => getAPIKeyPhase(r.status?.conditions) === "Denied"
   );
   const approvedColumns = [
     {
@@ -360,8 +354,13 @@ const ApiKeyManagementTab = ({
     },
     {
       title: "Approved",
-      field: "status.reviewedAt",
-      render: (row) => /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, row.status?.reviewedAt ? new Date(row.status.reviewedAt).toLocaleDateString() : "-")
+      field: "status.conditions",
+      render: (row) => {
+        const approvalDate = row.status?.conditions?.find(
+          (c) => c.type === "Approved" && c.status === "True"
+        )?.lastTransitionTime;
+        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, approvalDate ? new Date(approvalDate).toLocaleDateString() : "-");
+      }
     },
     {
       title: "API Key",
@@ -373,33 +372,16 @@ const ApiKeyManagementTab = ({
         const isVisible = visibleKeys.has(row.metadata.name);
         const isLoading = apiKeyLoading.has(key);
         const apiKeyValue = apiKeyValues.get(key);
-        const hasSecretRef = row.status?.secretRef?.name;
-        const canReadSecret = row.status?.canReadSecret !== false;
-        const isAlreadyRead = alreadyReadKeys.has(key) || !canReadSecret;
+        const hasSecretRef = Boolean(row.spec?.secretRef?.name);
         if (!hasSecretRef) {
           return /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "Awaiting secret...");
         }
-        if (isAlreadyRead && !apiKeyValue) {
-          return /* @__PURE__ */ React.createElement(Tooltip, { title: "This API key has already been viewed and cannot be retrieved again" }, /* @__PURE__ */ React.createElement(Box, { display: "flex", alignItems: "center" }, /* @__PURE__ */ React.createElement(
-            Typography,
-            {
-              variant: "body2",
-              color: "textSecondary",
-              style: { fontFamily: "monospace", marginRight: 8 }
-            },
-            "Already viewed"
-          ), /* @__PURE__ */ React.createElement(VisibilityOffIcon, { fontSize: "small", color: "disabled" })));
-        }
         const handleRevealClick = () => {
           if (isVisible) {
             clearApiKeyValue(row.metadata.namespace, row.metadata.name);
             toggleVisibility(row.metadata.name);
-          } else if (!isAlreadyRead) {
-            setPendingKeyReveal({
-              namespace: row.metadata.namespace,
-              name: row.metadata.name
-            });
-            setShowOnceWarningOpen(true);
+          } else {
+            fetchApiKeyFromSecret(row.metadata.namespace, row.metadata.name);
           }
         };
         const handleCopy = async () => {
@@ -425,14 +407,14 @@ const ApiKeyManagementTab = ({
         ), 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)"
+            title: isVisible ? "Hide API key" : "Reveal API key"
           },
           /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement(
             IconButton,
             {
               size: "small",
               onClick: handleRevealClick,
-              disabled: isLoading || isAlreadyRead && !apiKeyValue
+              disabled: isLoading
             },
             isVisible ? /* @__PURE__ */ React.createElement(VisibilityOffIcon, null) : /* @__PURE__ */ React.createElement(VisibilityIcon, null)
           ))
@@ -479,9 +461,9 @@ const ApiKeyManagementTab = ({
   const requestColumns = [
     {
       title: "Status",
-      field: "status.phase",
+      field: "status.conditions",
       render: (row) => {
-        const phase = row.status?.phase || "Pending";
+        const phase = getAPIKeyPhase(row.status?.conditions || []);
         const isPending = phase === "Pending";
         return /* @__PURE__ */ React.createElement(
           Chip,
@@ -528,11 +510,12 @@ const ApiKeyManagementTab = ({
     },
     {
       title: "Reviewed",
-      field: "status.reviewedAt",
+      field: "status.conditions",
       render: (row) => {
-        if (!row.status?.reviewedAt)
-          return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "-");
-        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, new Date(row.status.reviewedAt).toLocaleDateString());
+        const approvedDate = row.status?.conditions?.find(
+          (c) => (c.type === "Approved" || c.type === "Denied") && c.status === "True"
+        )?.lastTransitionTime;
+        return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, approvedDate ? new Date(approvedDate).toLocaleDateString() : "-");
       }
     },
     {
@@ -545,7 +528,7 @@ const ApiKeyManagementTab = ({
         if (isDeleting) {
           return /* @__PURE__ */ React.createElement(CircularProgress, { size: 20 });
         }
-        const isPending = !row.status?.phase || row.status.phase === "Pending";
+        const isPending = getAPIKeyPhase(row.status?.conditions || []) === "Pending";
         const ownerId = row.spec.requestedBy.userId;
         const canDelete = canDeleteResource(
           ownerId,
@@ -592,12 +575,22 @@ const ApiKeyManagementTab = ({
         color: "primary",
         startIcon: /* @__PURE__ */ React.createElement(AddIcon, null),
         onClick: () => setRequestDialogOpen(true),
-        disabled: plans.length === 0,
+        disabled: plans.length === 0 || !userEmail,
         "data-testid": "request-api-access-button",
         "data-plans-count": plans.length
       },
       "Request API Access"
     ),
+    !userEmail && /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "caption",
+        color: "textSecondary",
+        style: { marginTop: 4 },
+        "data-testid": "no-email-message"
+      },
+      '"Email address is required"'
+    ),
     plans.length === 0 && /* @__PURE__ */ React.createElement(
       Typography,
       {
@@ -641,7 +634,7 @@ const ApiKeyManagementTab = ({
   )), rejectedRequests.length > 0 && /* @__PURE__ */ React.createElement(Grid, { item: true }, /* @__PURE__ */ React.createElement(
     Table,
     {
-      title: "Rejected Requests",
+      title: "Denied Requests",
       options: {
         paging: rejectedRequests.length > 5,
         pageSize: 20,
@@ -696,7 +689,7 @@ const ApiKeyManagementTab = ({
       anchorPosition: menuAnchor || { top: 0, left: 0 }
     },
     menuRequest && (() => {
-      const isPending = !menuRequest.status?.phase || menuRequest.status.phase === "Pending";
+      const isPending = getAPIKeyPhase(menuRequest.status?.conditions || []) === "Pending";
       const ownerId = menuRequest.spec.requestedBy.userId;
       const canEdit = canUpdateRequest && ownerId === userId && isPending;
       const items = [];
@@ -727,51 +720,11 @@ const ApiKeyManagementTab = ({
     {
       open: deleteDialogState.open,
       title: "Delete Request",
-      description: `Are you sure you want to delete this ${deleteDialogState.request?.status?.phase === "Approved" ? "API key" : "request"}?`,
+      description: `Are you sure you want to delete this ${getAPIKeyPhase(deleteDialogState.request?.status?.conditions || []) === "Approved" ? "API key" : "request"}?`,
       deleting: deleting !== null,
       onConfirm: handleDeleteConfirm,
       onCancel: handleDeleteCancel
     }
-  ), /* @__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"
-    ))
   ));
 };