@lukoweb/apitogo-plugin-dev-portal-billing 0.1.72 → 0.1.73

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { Button, Head, Heading } from "@lukoweb/apitogo/components";
+import { Button, Head, Heading, Spinner } from "@lukoweb/apitogo/components";
 import { CreditCardIcon, KeyRoundIcon, ShieldIcon, StarsIcon, TrashIcon } from "@lukoweb/apitogo/icons";
 import { createContext, useContext, useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useNavigate, useSearchParams } from "@lukoweb/apitogo/router";
@@ -11,7 +11,7 @@ import { useMutation, useQuery, useQueryClient } from "@lukoweb/apitogo/react-qu
 import { useAuth } from "@lukoweb/apitogo/hooks";
 import { Alert, AlertTitle } from "@lukoweb/apitogo/ui/Alert.js";
 import { Button as Button$1 } from "@lukoweb/apitogo/ui/Button.js";
-import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@lukoweb/apitogo/ui/Dialog.js";
 import { Input } from "@lukoweb/apitogo/ui/Input.js";
 import { Secret } from "@lukoweb/apitogo/ui/Secret.js";
 import { createPlugin } from "@lukoweb/apitogo/plugins";
@@ -314,7 +314,6 @@ function createDemoCredentials(plans) {
 	return {
 		idToken: "demo-id-token",
 		accessToken: null,
-		subscriptionKey: DEMO_SUBSCRIPTION_KEY,
 		gatewayBaseUrl: null,
 		planSku: resolveDemoPlanSku(plans),
 		expiresAt: null
@@ -593,6 +592,8 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 	const revokeKey = useRevokeApiKey();
 	const [name, setName] = useState("");
 	const [newKey, setNewKey] = useState(null);
+	const [openRevokeId, setOpenRevokeId] = useState(null);
+	const [pendingRevokeId, setPendingRevokeId] = useState(null);
 	const activeKeys = data?.keys.filter((key) => key.status === "active") ?? [];
 	const capLabel = data?.maxKeys == null ? `${data?.activeCount ?? activeKeys.length} active` : `${data.activeCount} of ${data.maxKeys} used`;
 	const canCreate = !readOnly && (data?.canCreate ?? false);
@@ -604,6 +605,13 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 			setName("");
 		} });
 	};
+	const handleRevoke = (keyId) => {
+		setPendingRevokeId(keyId);
+		revokeKey.mutate(keyId, { onSettled: () => {
+			setPendingRevokeId(null);
+			setOpenRevokeId(null);
+		} });
+	};
 	return /* @__PURE__ */ jsxs("article", {
 		className: "rounded-xl border bg-card/60 p-6 space-y-5",
 		children: [
@@ -670,52 +678,59 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 			}) : null,
 			activeKeys.length > 0 ? /* @__PURE__ */ jsx("ul", {
 				className: "divide-y rounded-lg border",
-				children: activeKeys.map((key) => /* @__PURE__ */ jsxs("li", {
-					className: "flex flex-wrap items-center justify-between gap-3 p-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "min-w-0 space-y-1",
-						children: [/* @__PURE__ */ jsx("p", {
-							className: "truncate font-medium",
-							children: key.name
-						}), /* @__PURE__ */ jsxs("p", {
-							className: "text-xs text-muted-foreground",
-							children: [
-								/* @__PURE__ */ jsxs("code", { children: [key.keyPrefix, "…"] }),
-								" · created",
-								" ",
-								new Date(key.createdAtUtc).toLocaleDateString()
-							]
-						})]
-					}), readOnly ? null : /* @__PURE__ */ jsxs(Dialog, { children: [/* @__PURE__ */ jsx(DialogTrigger, {
-						asChild: true,
-						children: /* @__PURE__ */ jsxs(Button$1, {
-							variant: "ghost",
-							className: "flex items-center gap-2",
-							disabled: revokeKey.isPending,
-							children: [/* @__PURE__ */ jsx(TrashIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
-								className: "hidden md:block",
-								children: "Revoke"
+				children: activeKeys.map((key) => {
+					const isRevoking = pendingRevokeId === key.id;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-wrap items-center justify-between gap-3 p-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0 space-y-1",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "truncate font-medium",
+								children: key.name
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "text-xs text-muted-foreground",
+								children: [
+									/* @__PURE__ */ jsxs("code", { children: [key.keyPrefix, "…"] }),
+									" · created",
+									" ",
+									new Date(key.createdAtUtc).toLocaleDateString()
+								]
 							})]
-						})
-					}), /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
-						"Revoke “",
-						key.name,
-						"”?"
-					] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Any application using this key will immediately start getting 401 responses from the gateway. This cannot be undone." })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(DialogClose, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button$1, {
-							variant: "outline",
-							children: "Cancel"
-						})
-					}), /* @__PURE__ */ jsx(DialogClose, {
-						asChild: true,
-						children: /* @__PURE__ */ jsx(Button$1, {
-							variant: "destructive",
-							onClick: () => revokeKey.mutate(key.id),
-							children: "Revoke key"
-						})
-					})] })] })] })]
-				}, key.id))
+						}), readOnly ? null : /* @__PURE__ */ jsxs(Dialog, {
+							open: openRevokeId === key.id,
+							onOpenChange: (open) => {
+								if (isRevoking) return;
+								setOpenRevokeId(open ? key.id : null);
+							},
+							children: [/* @__PURE__ */ jsx(DialogTrigger, {
+								asChild: true,
+								children: /* @__PURE__ */ jsxs(Button$1, {
+									variant: "ghost",
+									className: "flex items-center gap-2",
+									disabled: isRevoking,
+									children: [isRevoking ? /* @__PURE__ */ jsx(Spinner, { size: 14 }) : /* @__PURE__ */ jsx(TrashIcon, { size: 16 }), /* @__PURE__ */ jsx("span", {
+										className: "hidden md:block",
+										children: isRevoking ? "Revoking…" : "Revoke"
+									})]
+								})
+							}), /* @__PURE__ */ jsxs(DialogContent, { children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: [
+								"Revoke “",
+								key.name,
+								"”?"
+							] }), /* @__PURE__ */ jsx(DialogDescription, { children: "Any application using this key will immediately start getting 401 responses from the gateway. This cannot be undone." })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button$1, {
+								variant: "outline",
+								disabled: isRevoking,
+								onClick: () => setOpenRevokeId(null),
+								children: "Cancel"
+							}), /* @__PURE__ */ jsx(Button$1, {
+								variant: "destructive",
+								disabled: isRevoking,
+								onClick: () => handleRevoke(key.id),
+								children: isRevoking ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { size: 14 }), "Revoking…"] }) : "Revoke key"
+							})] })] })]
+						})]
+					}, key.id);
+				})
 			}) : null,
 			readOnly ? null : /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-wrap items-center gap-2",
@@ -733,7 +748,8 @@ const ApiKeysPanel = ({ readOnly = false }) => {
 				}), /* @__PURE__ */ jsx(Button$1, {
 					onClick: handleCreate,
 					disabled: !canCreate || createKey.isPending || !name.trim(),
-					children: createKey.isPending ? "Creating…" : "Create API key"
+					className: "flex items-center gap-2",
+					children: createKey.isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Spinner, { size: 14 }), "Creating…"] }) : "Create API key"
 				})]
 			}),
 			data && !data.canCreate && !readOnly ? /* @__PURE__ */ jsx("p", {
@@ -966,7 +982,6 @@ const CredentialsPage = () => {
 	const isDemoSession = useIsDemoSession();
 	const { data: credentials, isLoading, error } = useCredentials();
 	const { data: catalog } = usePlans();
-	const [revealed, setRevealed] = useState(false);
 	const plan = catalog?.plans.find((item) => item.sku === credentials?.planSku);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "mx-auto max-w-screen-lg px-4 pb-16 pt-(--padding-content-top) lg:px-8",
@@ -1048,29 +1063,6 @@ const CredentialsPage = () => {
 						})
 					}),
 					/* @__PURE__ */ jsx(ApiKeysPanel, { readOnly: isDemoSession }),
-					credentials.subscriptionKey ? /* @__PURE__ */ jsxs("article", {
-						className: "rounded-xl border bg-card/60 p-6 space-y-4",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "space-y-1",
-							children: [/* @__PURE__ */ jsx("h2", {
-								className: "text-lg font-medium",
-								children: "Default key value"
-							}), /* @__PURE__ */ jsxs("p", {
-								className: "text-sm text-muted-foreground",
-								children: [
-									"The full value of the ",
-									/* @__PURE__ */ jsx("code", { children: "default" }),
-									" key issued with your plan. Keys you create above are shown only once, so store them yourself."
-								]
-							})]
-						}), /* @__PURE__ */ jsx(Secret, {
-							className: "max-w-full w-full",
-							secret: credentials.subscriptionKey,
-							status: "active",
-							revealed,
-							onReveal: setRevealed
-						})]
-					}) : null,
 					/* @__PURE__ */ jsxs("article", {
 						className: "rounded-xl border bg-card/60 p-6 space-y-4",
 						children: [/* @__PURE__ */ jsxs("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukoweb/apitogo-plugin-dev-portal-billing",
-  "version": "0.1.72",
+  "version": "0.1.73",
   "repository": {
     "type": "git",
     "url": "https://github.com/zuplo/zudoku",
@@ -46,7 +46,7 @@
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tsdown": "0.20.3",
-    "@lukoweb/apitogo": "0.1.72"
+    "@lukoweb/apitogo": "0.1.73"
   },
   "peerDependencies": {
     "react": ">=19.2.0",