Update api key page to use iam api
Signed-off-by: Bryan Frimin <bryan@getprobo.com>
This commit is contained in:
Bryan Frimin
@@ -379,7 +379,7 @@ function UserDropdown() {
|
|||||||
<UserDropdownRoot fullName={user.fullName} email={user.email}>
|
<UserDropdownRoot fullName={user.fullName} email={user.email}>
|
||||||
{isAuthorized("Organization", "deleteOrganization") && (
|
{isAuthorized("Organization", "deleteOrganization") && (
|
||||||
<UserDropdownItem
|
<UserDropdownItem
|
||||||
to="/api-keys"
|
to="/me/api-keys"
|
||||||
icon={IconKey}
|
icon={IconKey}
|
||||||
label={__("API Keys")}
|
label={__("API Keys")}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,846 +0,0 @@
|
|||||||
import { useState, useEffect } from "react";
|
|
||||||
import {
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Dialog,
|
|
||||||
DialogContent,
|
|
||||||
DialogFooter,
|
|
||||||
Field,
|
|
||||||
IconTrashCan,
|
|
||||||
IconPlusLarge,
|
|
||||||
IconPencil,
|
|
||||||
IconSquareBehindSquare2,
|
|
||||||
Label,
|
|
||||||
Select,
|
|
||||||
Badge,
|
|
||||||
useConfirm,
|
|
||||||
useDialogRef,
|
|
||||||
Option,
|
|
||||||
useToast,
|
|
||||||
Checkbox,
|
|
||||||
Table,
|
|
||||||
Thead,
|
|
||||||
Tbody,
|
|
||||||
Tr,
|
|
||||||
Th,
|
|
||||||
Td,
|
|
||||||
Input,
|
|
||||||
} from "@probo/ui";
|
|
||||||
import { useTranslate } from "@probo/i18n";
|
|
||||||
import { formatDate } from "@probo/helpers";
|
|
||||||
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
|
||||||
import { Controller } from "react-hook-form";
|
|
||||||
import { z } from "zod";
|
|
||||||
import { UnAuthenticatedError } from "@probo/relay";
|
|
||||||
|
|
||||||
interface APIKey {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
expiresAt: string;
|
|
||||||
createdAt: string;
|
|
||||||
organizations: APIKeyOrganization[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface APIKeyOrganization {
|
|
||||||
organizationId: string;
|
|
||||||
organizationName: string;
|
|
||||||
role: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Organization {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
|
||||||
authStatus: "authenticated" | "unauthenticated" | "expired";
|
|
||||||
}
|
|
||||||
|
|
||||||
const createSchema = z.object({
|
|
||||||
name: z.string().min(1, "Name is required"),
|
|
||||||
expiresIn: z.enum(["1month", "3months", "6months", "1year"]),
|
|
||||||
organizations: z
|
|
||||||
.array(
|
|
||||||
z.object({
|
|
||||||
organizationId: z.string(),
|
|
||||||
role: z.string(),
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.min(1, "At least one organization is required"),
|
|
||||||
});
|
|
||||||
|
|
||||||
type CreateFormData = z.infer<typeof createSchema>;
|
|
||||||
|
|
||||||
export default function APIKeysPage() {
|
|
||||||
const { __ } = useTranslate();
|
|
||||||
const { toast } = useToast();
|
|
||||||
const confirm = useConfirm();
|
|
||||||
const dialogRef = useDialogRef();
|
|
||||||
const editDialogRef = useDialogRef();
|
|
||||||
const keyDialogRef = useDialogRef();
|
|
||||||
const [currentKey, setCurrentKey] = useState<string | null>(null);
|
|
||||||
const [isLoadingKey, setIsLoadingKey] = useState(false);
|
|
||||||
const [apiKeys, setApiKeys] = useState<APIKey[]>([]);
|
|
||||||
const [organizations, setOrganizations] = useState<Organization[]>([]);
|
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
|
||||||
const [isCreating, setIsCreating] = useState(false);
|
|
||||||
const [isUpdating, setIsUpdating] = useState(false);
|
|
||||||
const [isDeleting, setIsDeleting] = useState(false);
|
|
||||||
const [selectedOrganizations, setSelectedOrganizations] = useState<string[]>(
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
const [organizationRoles, setOrganizationRoles] = useState<
|
|
||||||
Record<string, string>
|
|
||||||
>({});
|
|
||||||
const [editingAPIKey, setEditingAPIKey] = useState<APIKey | null>(null);
|
|
||||||
const [editingName, setEditingName] = useState<string>("");
|
|
||||||
const [error, setError] = useState<Error | null>(null);
|
|
||||||
|
|
||||||
const { formState, handleSubmit, reset, control, setValue, register } =
|
|
||||||
useFormWithSchema(createSchema, {
|
|
||||||
defaultValues: {
|
|
||||||
name: new Date().toISOString().split("T")[0],
|
|
||||||
expiresIn: "1month",
|
|
||||||
organizations: [],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (error) {
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fetchAPIKeys = async () => {
|
|
||||||
try {
|
|
||||||
const response = await fetch("/connect/api-keys", {
|
|
||||||
credentials: "include",
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to fetch API keys");
|
|
||||||
}
|
|
||||||
const data: { apiKeys: APIKey[] } = await response.json();
|
|
||||||
setApiKeys(data.apiKeys);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to fetch API keys:", err);
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: __("Failed to load API keys"),
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const fetchData = async () => {
|
|
||||||
try {
|
|
||||||
const [apiKeysResponse, organizationsResponse] = await Promise.all([
|
|
||||||
fetch("/connect/api-keys", { credentials: "include" }),
|
|
||||||
fetch("/connect/organizations?role=OWNER", {
|
|
||||||
credentials: "include",
|
|
||||||
}),
|
|
||||||
]);
|
|
||||||
|
|
||||||
if (
|
|
||||||
apiKeysResponse.status === 401 ||
|
|
||||||
organizationsResponse.status === 401
|
|
||||||
) {
|
|
||||||
setError(new UnAuthenticatedError());
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!apiKeysResponse.ok) {
|
|
||||||
throw new Error("Failed to fetch API keys");
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!organizationsResponse.ok) {
|
|
||||||
throw new Error("Failed to fetch organizations");
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiKeysData: { apiKeys: APIKey[] } = await apiKeysResponse.json();
|
|
||||||
const orgsData: { organizations: Organization[] } =
|
|
||||||
await organizationsResponse.json();
|
|
||||||
|
|
||||||
const authenticatedOrgs = orgsData.organizations.filter(
|
|
||||||
(org) => org.authStatus === "authenticated"
|
|
||||||
);
|
|
||||||
|
|
||||||
setApiKeys(apiKeysData.apiKeys);
|
|
||||||
setOrganizations(authenticatedOrgs);
|
|
||||||
} catch (err) {
|
|
||||||
console.error("Failed to fetch data:", err);
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: __("Failed to load data"),
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsLoading(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchData();
|
|
||||||
}, [__, toast]);
|
|
||||||
|
|
||||||
const handleCreate = async (formData: CreateFormData) => {
|
|
||||||
const now = new Date();
|
|
||||||
const expiresAt = new Date(now);
|
|
||||||
|
|
||||||
switch (formData.expiresIn) {
|
|
||||||
case "1month":
|
|
||||||
expiresAt.setMonth(now.getMonth() + 1);
|
|
||||||
break;
|
|
||||||
case "3months":
|
|
||||||
expiresAt.setMonth(now.getMonth() + 3);
|
|
||||||
break;
|
|
||||||
case "6months":
|
|
||||||
expiresAt.setMonth(now.getMonth() + 6);
|
|
||||||
break;
|
|
||||||
case "1year":
|
|
||||||
expiresAt.setFullYear(now.getFullYear() + 1);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
setIsCreating(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch("/connect/api-keys", {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({
|
|
||||||
name: formData.name,
|
|
||||||
expiresAt: expiresAt.toISOString(),
|
|
||||||
organizations: formData.organizations,
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to create API key");
|
|
||||||
}
|
|
||||||
|
|
||||||
const data: { apiKey: APIKey; key: string } = await response.json();
|
|
||||||
|
|
||||||
await fetchAPIKeys();
|
|
||||||
dialogRef.current?.close();
|
|
||||||
reset();
|
|
||||||
setSelectedOrganizations([]);
|
|
||||||
setOrganizationRoles({});
|
|
||||||
setCurrentKey(data.key);
|
|
||||||
keyDialogRef.current?.open();
|
|
||||||
toast({
|
|
||||||
title: __("Success"),
|
|
||||||
description: __("API Key created successfully"),
|
|
||||||
variant: "success",
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: (error as Error).message,
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsCreating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleEdit = (apiKey: APIKey) => {
|
|
||||||
setEditingAPIKey(apiKey);
|
|
||||||
setEditingName(apiKey.name);
|
|
||||||
const orgIds = apiKey.organizations.map((org) => org.organizationId);
|
|
||||||
const roles: Record<string, string> = {};
|
|
||||||
apiKey.organizations.forEach((org) => {
|
|
||||||
roles[org.organizationId] = org.role;
|
|
||||||
});
|
|
||||||
setSelectedOrganizations(orgIds);
|
|
||||||
setOrganizationRoles(roles);
|
|
||||||
editDialogRef.current?.open();
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleUpdate = async () => {
|
|
||||||
if (!editingAPIKey) return;
|
|
||||||
|
|
||||||
setIsUpdating(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch("/connect/api-keys", {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({
|
|
||||||
id: editingAPIKey.id,
|
|
||||||
name: editingName,
|
|
||||||
organizations: selectedOrganizations.map((id) => ({
|
|
||||||
organizationId: id,
|
|
||||||
role: organizationRoles[id] || "FULL",
|
|
||||||
})),
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to update API key");
|
|
||||||
}
|
|
||||||
|
|
||||||
await fetchAPIKeys();
|
|
||||||
editDialogRef.current?.close();
|
|
||||||
setEditingAPIKey(null);
|
|
||||||
setEditingName("");
|
|
||||||
setSelectedOrganizations([]);
|
|
||||||
setOrganizationRoles({});
|
|
||||||
toast({
|
|
||||||
title: __("Success"),
|
|
||||||
description: __("API Key updated successfully"),
|
|
||||||
variant: "success",
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: (error as Error).message,
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsUpdating(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = (id: string, name: string) => {
|
|
||||||
confirm(
|
|
||||||
async () => {
|
|
||||||
setIsDeleting(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch("/connect/api-keys", {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
},
|
|
||||||
credentials: "include",
|
|
||||||
body: JSON.stringify({ id }),
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to delete API key");
|
|
||||||
}
|
|
||||||
|
|
||||||
setApiKeys(apiKeys.filter((key) => key.id !== id));
|
|
||||||
toast({
|
|
||||||
title: __("Success"),
|
|
||||||
description: __("API Key deleted successfully"),
|
|
||||||
variant: "success",
|
|
||||||
});
|
|
||||||
} catch (error) {
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: (error as Error).message,
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
throw error;
|
|
||||||
} finally {
|
|
||||||
setIsDeleting(false);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
message: __(
|
|
||||||
`Are you sure you want to delete the API key "${name}"? This action cannot be undone.`
|
|
||||||
),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleShowToken = async (id: string) => {
|
|
||||||
setIsLoadingKey(true);
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/connect/api-keys/${id}`, {
|
|
||||||
credentials: "include",
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error("Failed to load API key");
|
|
||||||
}
|
|
||||||
|
|
||||||
const data: { key: string } = await response.json();
|
|
||||||
setCurrentKey(data.key);
|
|
||||||
keyDialogRef.current?.open();
|
|
||||||
} catch {
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: __("Failed to load API key"),
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
} finally {
|
|
||||||
setIsLoadingKey(false);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const copyToClipboard = async (text: string) => {
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(text);
|
|
||||||
toast({
|
|
||||||
title: __("Success"),
|
|
||||||
description: __("API key copied to clipboard"),
|
|
||||||
variant: "success",
|
|
||||||
});
|
|
||||||
} catch {
|
|
||||||
toast({
|
|
||||||
title: __("Error"),
|
|
||||||
description: __("Failed to copy to clipboard"),
|
|
||||||
variant: "error",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const isExpired = (expiresAt: string) => {
|
|
||||||
return new Date(expiresAt) < new Date();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (isLoading) {
|
|
||||||
return (
|
|
||||||
<div className="space-y-6 w-full py-6">
|
|
||||||
<h1 className="text-3xl font-bold text-center">{__("API Keys")}</h1>
|
|
||||||
<Card padded>
|
|
||||||
<div className="text-center py-8">
|
|
||||||
<p className="text-txt-tertiary">{__("Loading...")}</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6 w-full py-6">
|
|
||||||
<h1 className="text-3xl font-bold text-center">{__("API Keys")}</h1>
|
|
||||||
|
|
||||||
<div className="space-y-4 w-full">
|
|
||||||
{apiKeys.length === 0 ? (
|
|
||||||
<Card padded>
|
|
||||||
<div className="text-center py-8">
|
|
||||||
<p className="text-txt-tertiary mb-4">
|
|
||||||
{__("No API keys yet. Create one to get started.")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
) : (
|
|
||||||
apiKeys.map((apiKey) => {
|
|
||||||
const expired = isExpired(apiKey.expiresAt);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Card key={apiKey.id} padded className="w-full">
|
|
||||||
<div className="flex items-start justify-between gap-4">
|
|
||||||
<div className="flex-1 space-y-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<h3 className="text-lg font-semibold">{apiKey.name}</h3>
|
|
||||||
{expired ? (
|
|
||||||
<Badge variant="danger">{__("Expired")}</Badge>
|
|
||||||
) : (
|
|
||||||
<Badge variant="success">{__("Active")}</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-4 text-sm text-txt-secondary">
|
|
||||||
<span>
|
|
||||||
{__("Created")}: {formatDate(apiKey.createdAt)}
|
|
||||||
</span>
|
|
||||||
<span>•</span>
|
|
||||||
<span>
|
|
||||||
{__("Expires")}: {formatDate(apiKey.expiresAt)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{apiKey.organizations.length > 0 && (
|
|
||||||
<div className="flex flex-wrap gap-2 mt-2">
|
|
||||||
{apiKey.organizations.map((org) => (
|
|
||||||
<Badge key={org.organizationId} variant="neutral">
|
|
||||||
{org.organizationName} ({org.role})
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => handleShowToken(apiKey.id)}
|
|
||||||
disabled={isLoadingKey}
|
|
||||||
title={__("Show Token")}
|
|
||||||
>
|
|
||||||
{__("Show")}
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="secondary"
|
|
||||||
onClick={() => handleEdit(apiKey)}
|
|
||||||
disabled={isLoadingKey}
|
|
||||||
icon={IconPencil}
|
|
||||||
title={__("Edit")}
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="danger"
|
|
||||||
onClick={() => handleDelete(apiKey.id, apiKey.name)}
|
|
||||||
disabled={isDeleting}
|
|
||||||
icon={IconTrashCan}
|
|
||||||
title={__("Delete")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Card padded>
|
|
||||||
<h2 className="text-xl font-semibold mb-1">
|
|
||||||
{__("Create an API key")}
|
|
||||||
</h2>
|
|
||||||
<p className="text-txt-tertiary mb-4">
|
|
||||||
{__(
|
|
||||||
"Generate a new API key for programmatic access to your organization"
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
onClick={() => dialogRef.current?.open()}
|
|
||||||
variant="quaternary"
|
|
||||||
icon={IconPlusLarge}
|
|
||||||
className="w-full"
|
|
||||||
>
|
|
||||||
{__("Create API Key")}
|
|
||||||
</Button>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Dialog ref={dialogRef} title={__("Create API Key")}>
|
|
||||||
<form onSubmit={handleSubmit(handleCreate)}>
|
|
||||||
<DialogContent padded className="space-y-4">
|
|
||||||
<Field error={formState.errors.name?.message}>
|
|
||||||
<Label>{__("Name")}</Label>
|
|
||||||
<Input
|
|
||||||
{...register("name")}
|
|
||||||
placeholder={__("e.g., Production API Key")}
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
<Field error={formState.errors.expiresIn?.message}>
|
|
||||||
<Label>{__("Expires In")}</Label>
|
|
||||||
<Controller
|
|
||||||
control={control}
|
|
||||||
name="expiresIn"
|
|
||||||
render={({ field }) => (
|
|
||||||
<Select
|
|
||||||
{...field}
|
|
||||||
onValueChange={field.onChange}
|
|
||||||
value={field.value}
|
|
||||||
>
|
|
||||||
<Option value="1month">{__("1 Month")}</Option>
|
|
||||||
<Option value="3months">{__("3 Months")}</Option>
|
|
||||||
<Option value="6months">{__("6 Months")}</Option>
|
|
||||||
<Option value="1year">{__("1 Year")}</Option>
|
|
||||||
</Select>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
<Field error={formState.errors.organizations?.message}>
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h4 className="font-medium text-txt-primary">
|
|
||||||
{__("Organizations")}
|
|
||||||
</h4>
|
|
||||||
{organizations.length > 0 && (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="tertiary"
|
|
||||||
onClick={() => {
|
|
||||||
const allSelected =
|
|
||||||
selectedOrganizations.length === organizations.length;
|
|
||||||
if (allSelected) {
|
|
||||||
setSelectedOrganizations([]);
|
|
||||||
setOrganizationRoles({});
|
|
||||||
setValue("organizations", []);
|
|
||||||
} else {
|
|
||||||
const allOrgIds = organizations.map((org) => org.id);
|
|
||||||
const newRoles: Record<string, string> = {};
|
|
||||||
allOrgIds.forEach((id) => {
|
|
||||||
newRoles[id] = organizationRoles[id] || "FULL";
|
|
||||||
});
|
|
||||||
setSelectedOrganizations(allOrgIds);
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
setValue(
|
|
||||||
"organizations",
|
|
||||||
allOrgIds.map((id) => ({
|
|
||||||
organizationId: id,
|
|
||||||
role: newRoles[id],
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="text-xs h-7 min-h-7"
|
|
||||||
>
|
|
||||||
{selectedOrganizations.length === organizations.length
|
|
||||||
? __("Clear All")
|
|
||||||
: __("Select All")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{organizations.length === 0 ? (
|
|
||||||
<div className="text-center text-txt-tertiary py-8">
|
|
||||||
{__("No organizations available")}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-bg-secondary rounded-lg overflow-hidden">
|
|
||||||
<Table>
|
|
||||||
<Thead>
|
|
||||||
<Tr>
|
|
||||||
<Th>{__("Name")}</Th>
|
|
||||||
<Th width={180}>{__("Role")}</Th>
|
|
||||||
<Th width={100}>
|
|
||||||
<div className="flex justify-end">{__("Access")}</div>
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{organizations.map((org) => (
|
|
||||||
<Tr key={org.id}>
|
|
||||||
<Td>
|
|
||||||
<div className="font-medium text-txt-primary">
|
|
||||||
{org.name}
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
<Td>
|
|
||||||
<div className="min-h-[36px] flex items-center">
|
|
||||||
{selectedOrganizations.includes(org.id) ? (
|
|
||||||
<Select
|
|
||||||
value={organizationRoles[org.id] || "FULL"}
|
|
||||||
onValueChange={(role) => {
|
|
||||||
const newRoles = {
|
|
||||||
...organizationRoles,
|
|
||||||
[org.id]: role,
|
|
||||||
};
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
setValue(
|
|
||||||
"organizations",
|
|
||||||
selectedOrganizations.map((id) => ({
|
|
||||||
organizationId: id,
|
|
||||||
role: newRoles[id] || "FULL",
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Option value="FULL">{__("Full")}</Option>
|
|
||||||
</Select>
|
|
||||||
) : (
|
|
||||||
<span className="text-txt-tertiary">—</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
<Td>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedOrganizations.includes(org.id)}
|
|
||||||
onChange={(checked: boolean) => {
|
|
||||||
let newSelected: string[];
|
|
||||||
const newRoles = { ...organizationRoles };
|
|
||||||
if (checked) {
|
|
||||||
newSelected = [
|
|
||||||
...selectedOrganizations,
|
|
||||||
org.id,
|
|
||||||
];
|
|
||||||
if (!newRoles[org.id]) {
|
|
||||||
newRoles[org.id] = "FULL";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
newSelected = selectedOrganizations.filter(
|
|
||||||
(id) => id !== org.id
|
|
||||||
);
|
|
||||||
delete newRoles[org.id];
|
|
||||||
}
|
|
||||||
setSelectedOrganizations(newSelected);
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
setValue(
|
|
||||||
"organizations",
|
|
||||||
newSelected.map((id) => ({
|
|
||||||
organizationId: id,
|
|
||||||
role: newRoles[id] || "FULL",
|
|
||||||
}))
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
))}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</Field>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button type="submit" disabled={isCreating}>
|
|
||||||
{isCreating ? __("Creating...") : __("Create")}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</form>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<Dialog ref={editDialogRef} title={__("Edit API Key")}>
|
|
||||||
<DialogContent padded className="space-y-6">
|
|
||||||
<Field>
|
|
||||||
<Label>{__("Name")}</Label>
|
|
||||||
<Input
|
|
||||||
value={editingName}
|
|
||||||
onChange={(e) => setEditingName(e.target.value)}
|
|
||||||
placeholder={__("API Key Name")}
|
|
||||||
/>
|
|
||||||
</Field>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="flex justify-between items-center mb-4">
|
|
||||||
<h4 className="font-medium text-txt-primary">
|
|
||||||
{__("Organizations")}
|
|
||||||
</h4>
|
|
||||||
{organizations.length > 0 && (
|
|
||||||
<Button
|
|
||||||
type="button"
|
|
||||||
variant="tertiary"
|
|
||||||
onClick={() => {
|
|
||||||
const allSelected =
|
|
||||||
selectedOrganizations.length === organizations.length;
|
|
||||||
if (allSelected) {
|
|
||||||
setSelectedOrganizations([]);
|
|
||||||
setOrganizationRoles({});
|
|
||||||
} else {
|
|
||||||
const allOrgIds = organizations.map((org) => org.id);
|
|
||||||
const newRoles: Record<string, string> = {};
|
|
||||||
allOrgIds.forEach((id) => {
|
|
||||||
newRoles[id] = organizationRoles[id] || "FULL";
|
|
||||||
});
|
|
||||||
setSelectedOrganizations(allOrgIds);
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
className="text-xs h-7 min-h-7"
|
|
||||||
>
|
|
||||||
{selectedOrganizations.length === organizations.length
|
|
||||||
? __("Clear All")
|
|
||||||
: __("Select All")}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
{organizations.length === 0 ? (
|
|
||||||
<div className="text-center text-txt-tertiary py-8">
|
|
||||||
{__("No organizations available")}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="bg-bg-secondary rounded-lg overflow-hidden">
|
|
||||||
<Table>
|
|
||||||
<Thead>
|
|
||||||
<Tr>
|
|
||||||
<Th>{__("Name")}</Th>
|
|
||||||
<Th width={180}>{__("Role")}</Th>
|
|
||||||
<Th width={100}>
|
|
||||||
<div className="flex justify-end">{__("Access")}</div>
|
|
||||||
</Th>
|
|
||||||
</Tr>
|
|
||||||
</Thead>
|
|
||||||
<Tbody>
|
|
||||||
{organizations.map((org) => (
|
|
||||||
<Tr key={org.id}>
|
|
||||||
<Td>
|
|
||||||
<div className="font-medium text-txt-primary">
|
|
||||||
{org.name}
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
<Td>
|
|
||||||
<div className="min-h-[36px] flex items-center">
|
|
||||||
{selectedOrganizations.includes(org.id) ? (
|
|
||||||
<Select
|
|
||||||
value={organizationRoles[org.id] || "FULL"}
|
|
||||||
onValueChange={(role) => {
|
|
||||||
const newRoles = {
|
|
||||||
...organizationRoles,
|
|
||||||
[org.id]: role,
|
|
||||||
};
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Option value="FULL">{__("Full")}</Option>
|
|
||||||
</Select>
|
|
||||||
) : (
|
|
||||||
<span className="text-txt-tertiary">—</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
<Td>
|
|
||||||
<div className="flex justify-end">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedOrganizations.includes(org.id)}
|
|
||||||
onChange={(checked: boolean) => {
|
|
||||||
let newSelected: string[];
|
|
||||||
const newRoles = { ...organizationRoles };
|
|
||||||
if (checked) {
|
|
||||||
newSelected = [
|
|
||||||
...selectedOrganizations,
|
|
||||||
org.id,
|
|
||||||
];
|
|
||||||
if (!newRoles[org.id]) {
|
|
||||||
newRoles[org.id] = "FULL";
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
newSelected = selectedOrganizations.filter(
|
|
||||||
(id) => id !== org.id
|
|
||||||
);
|
|
||||||
delete newRoles[org.id];
|
|
||||||
}
|
|
||||||
setSelectedOrganizations(newSelected);
|
|
||||||
setOrganizationRoles(newRoles);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Td>
|
|
||||||
</Tr>
|
|
||||||
))}
|
|
||||||
</Tbody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
onClick={handleUpdate}
|
|
||||||
disabled={
|
|
||||||
isUpdating ||
|
|
||||||
(selectedOrganizations.length === 0 && !editingName.trim())
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{isUpdating ? __("Updating...") : __("Update")}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</Dialog>
|
|
||||||
|
|
||||||
<Dialog ref={keyDialogRef} title={__("API Key")}>
|
|
||||||
<DialogContent padded className="space-y-4">
|
|
||||||
<p className="text-sm text-txt-tertiary">
|
|
||||||
{__("Please save this API key securely.")}
|
|
||||||
</p>
|
|
||||||
<div className="bg-gray-100 p-4 rounded-lg flex items-center gap-2">
|
|
||||||
<code className="text-sm font-mono break-all flex-1">
|
|
||||||
{currentKey || ""}
|
|
||||||
</code>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
if (currentKey) {
|
|
||||||
copyToClipboard(currentKey);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
variant="secondary"
|
|
||||||
disabled={!currentKey}
|
|
||||||
title={__("Copy to Clipboard")}
|
|
||||||
>
|
|
||||||
<IconSquareBehindSquare2 size={16} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</DialogContent>
|
|
||||||
<DialogFooter>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
keyDialogRef.current?.close();
|
|
||||||
setCurrentKey(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{__("Done")}
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
28
apps/console/src/pages/iam/apiKeys/APIKeysPage.tsx
Normal file
28
apps/console/src/pages/iam/apiKeys/APIKeysPage.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import { graphql, usePreloadedQuery, type PreloadedQuery } from "react-relay";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import type { APIKeysPageQuery } from "./__generated__/APIKeysPageQuery.graphql";
|
||||||
|
import { PersonalAPIKeyList } from "./_components/PersonalAPIKeyList";
|
||||||
|
|
||||||
|
export const apiKeysPageQuery = graphql`
|
||||||
|
query APIKeysPageQuery {
|
||||||
|
viewer {
|
||||||
|
...PersonalAPIKeyListFragment
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export function APIKeysPage(props: {
|
||||||
|
queryRef: PreloadedQuery<APIKeysPageQuery>;
|
||||||
|
}) {
|
||||||
|
const { queryRef } = props;
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
|
||||||
|
const data = usePreloadedQuery<APIKeysPageQuery>(apiKeysPageQuery, queryRef);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6 w-full py-6">
|
||||||
|
<h1 className="text-3xl font-bold text-center">{__("API Keys")}</h1>
|
||||||
|
{data.viewer && <PersonalAPIKeyList fKey={data.viewer} />}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx
Normal file
33
apps/console/src/pages/iam/apiKeys/APIKeysPageLoader.tsx
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import { Suspense, useEffect } from "react";
|
||||||
|
import { useQueryLoader } from "react-relay";
|
||||||
|
import { CenteredLayoutSkeleton } from "@probo/ui";
|
||||||
|
import { APIKeysPage, apiKeysPageQuery } from "./APIKeysPage";
|
||||||
|
import type { APIKeysPageQuery } from "./__generated__/APIKeysPageQuery.graphql";
|
||||||
|
import { IAMRelayProvider } from "/providers/IAMRelayProvider";
|
||||||
|
|
||||||
|
function APIKeysPageLoaderInner() {
|
||||||
|
const [queryRef, loadQuery] =
|
||||||
|
useQueryLoader<APIKeysPageQuery>(apiKeysPageQuery);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadQuery({});
|
||||||
|
}, [loadQuery]);
|
||||||
|
|
||||||
|
if (!queryRef) {
|
||||||
|
return <CenteredLayoutSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<CenteredLayoutSkeleton />}>
|
||||||
|
<APIKeysPage queryRef={queryRef} />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function APIKeysPageLoader() {
|
||||||
|
return (
|
||||||
|
<IAMRelayProvider>
|
||||||
|
<APIKeysPageLoaderInner />
|
||||||
|
</IAMRelayProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
209
apps/console/src/pages/iam/apiKeys/__generated__/APIKeysPageQuery.graphql.ts
generated
Normal file
209
apps/console/src/pages/iam/apiKeys/__generated__/APIKeysPageQuery.graphql.ts
generated
Normal file
@@ -0,0 +1,209 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<83cc00d864e6388ef2156203499da849>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
|
import { FragmentRefs } from "relay-runtime";
|
||||||
|
export type APIKeysPageQuery$variables = Record<PropertyKey, never>;
|
||||||
|
export type APIKeysPageQuery$data = {
|
||||||
|
readonly viewer: {
|
||||||
|
readonly " $fragmentSpreads": FragmentRefs<"PersonalAPIKeyListFragment">;
|
||||||
|
} | null | undefined;
|
||||||
|
};
|
||||||
|
export type APIKeysPageQuery = {
|
||||||
|
response: APIKeysPageQuery$data;
|
||||||
|
variables: APIKeysPageQuery$variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ConcreteRequest = (function(){
|
||||||
|
var v0 = {
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "id",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
v1 = [
|
||||||
|
{
|
||||||
|
"kind": "Literal",
|
||||||
|
"name": "first",
|
||||||
|
"value": 1000
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
"fragment": {
|
||||||
|
"argumentDefinitions": [],
|
||||||
|
"kind": "Fragment",
|
||||||
|
"metadata": null,
|
||||||
|
"name": "APIKeysPageQuery",
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "Identity",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "viewer",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"args": null,
|
||||||
|
"kind": "FragmentSpread",
|
||||||
|
"name": "PersonalAPIKeyListFragment"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Query",
|
||||||
|
"abstractKey": null
|
||||||
|
},
|
||||||
|
"kind": "Request",
|
||||||
|
"operation": {
|
||||||
|
"argumentDefinitions": [],
|
||||||
|
"kind": "Operation",
|
||||||
|
"name": "APIKeysPageQuery",
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "Identity",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "viewer",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
(v0/*: any*/),
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": (v1/*: any*/),
|
||||||
|
"concreteType": "PersonalAPIKeyConnection",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "personalAPIKeys",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKeyEdge",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "edges",
|
||||||
|
"plural": true,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKey",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "node",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
(v0/*: any*/),
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "name",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "createdAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "expiresAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "lastUsedAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "__typename",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "cursor",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PageInfo",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "pageInfo",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "endCursor",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "hasNextPage",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": "personalAPIKeys(first:1000)"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": (v1/*: any*/),
|
||||||
|
"filters": null,
|
||||||
|
"handle": "connection",
|
||||||
|
"key": "PersonalAPIKeyListFragment_personalAPIKeys",
|
||||||
|
"kind": "LinkedHandle",
|
||||||
|
"name": "personalAPIKeys"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"params": {
|
||||||
|
"cacheID": "14e698e7b6edf0afe9cf3398986cd529",
|
||||||
|
"id": null,
|
||||||
|
"metadata": {},
|
||||||
|
"name": "APIKeysPageQuery",
|
||||||
|
"operationKind": "query",
|
||||||
|
"text": "query APIKeysPageQuery {\n viewer {\n ...PersonalAPIKeyListFragment\n id\n }\n}\n\nfragment PersonalAPIKeyListFragment on Identity {\n id\n personalAPIKeys(first: 1000) {\n edges {\n node {\n id\n name\n createdAt\n expiresAt\n lastUsedAt\n __typename\n }\n cursor\n }\n pageInfo {\n endCursor\n hasNextPage\n }\n }\n}\n"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "e99d7224e11d4e9060518c3155f98a7d";
|
||||||
|
|
||||||
|
export default node;
|
||||||
@@ -0,0 +1,393 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Controller } from "react-hook-form";
|
||||||
|
import {
|
||||||
|
ConnectionHandler,
|
||||||
|
graphql,
|
||||||
|
useFragment,
|
||||||
|
useMutation,
|
||||||
|
} from "react-relay";
|
||||||
|
import type { RecordSourceSelectorProxy } from "relay-runtime";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { formatError, type GraphQLError } from "@probo/helpers";
|
||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
Field,
|
||||||
|
Input,
|
||||||
|
Label,
|
||||||
|
Option,
|
||||||
|
Select,
|
||||||
|
useConfirm,
|
||||||
|
useDialogRef,
|
||||||
|
useToast,
|
||||||
|
} from "@probo/ui";
|
||||||
|
import { useFormWithSchema } from "/hooks/useFormWithSchema";
|
||||||
|
import type { PersonalAPIKeyListFragment$key } from "./__generated__/PersonalAPIKeyListFragment.graphql";
|
||||||
|
import type { PersonalAPIKeyListCreateMutation } from "./__generated__/PersonalAPIKeyListCreateMutation.graphql";
|
||||||
|
import type { PersonalAPIKeyListRevokeMutation } from "./__generated__/PersonalAPIKeyListRevokeMutation.graphql";
|
||||||
|
import type { PersonalAPIKeyListRevealTokenMutation } from "./__generated__/PersonalAPIKeyListRevealTokenMutation.graphql";
|
||||||
|
import { PersonalAPIKeysTable } from "./PersonalAPIKeysTable";
|
||||||
|
import { PersonalAPIKeyTokenDialog } from "./PersonalAPIKeyTokenDialog";
|
||||||
|
|
||||||
|
const fragment = graphql`
|
||||||
|
fragment PersonalAPIKeyListFragment on Identity {
|
||||||
|
id
|
||||||
|
|
||||||
|
personalAPIKeys(first: 1000)
|
||||||
|
@required(action: THROW)
|
||||||
|
@connection(key: "PersonalAPIKeyListFragment_personalAPIKeys") {
|
||||||
|
edges @required(action: THROW) {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
createdAt
|
||||||
|
expiresAt
|
||||||
|
lastUsedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const createMutation = graphql`
|
||||||
|
mutation PersonalAPIKeyListCreateMutation(
|
||||||
|
$input: CreatePersonalAPIKeyInput!
|
||||||
|
$connections: [ID!]!
|
||||||
|
) {
|
||||||
|
createPersonalAPIKey(input: $input) {
|
||||||
|
personalAPIKeyEdge @prependEdge(connections: $connections) {
|
||||||
|
node {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
createdAt
|
||||||
|
expiresAt
|
||||||
|
lastUsedAt
|
||||||
|
}
|
||||||
|
}
|
||||||
|
token
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const revokeMutation = graphql`
|
||||||
|
mutation PersonalAPIKeyListRevokeMutation(
|
||||||
|
$input: RevokePersonalAPIKeyInput!
|
||||||
|
) {
|
||||||
|
revokePersonalAPIKey(input: $input) {
|
||||||
|
success
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const revealTokenMutation = graphql`
|
||||||
|
mutation PersonalAPIKeyListRevealTokenMutation(
|
||||||
|
$input: RevealPersonalAPIKeyTokenInput!
|
||||||
|
) {
|
||||||
|
revealPersonalAPIKeyToken(input: $input) {
|
||||||
|
token
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const createSchema = z.object({
|
||||||
|
name: z.string().min(1, "Name is required"),
|
||||||
|
expiresIn: z.enum(["1month", "3months", "6months", "1year"]),
|
||||||
|
});
|
||||||
|
type CreateFormData = z.infer<typeof createSchema>;
|
||||||
|
|
||||||
|
function computeExpiresAt(expiresIn: CreateFormData["expiresIn"]) {
|
||||||
|
const now = new Date();
|
||||||
|
const expiresAt = new Date(now);
|
||||||
|
switch (expiresIn) {
|
||||||
|
case "1month":
|
||||||
|
expiresAt.setMonth(now.getMonth() + 1);
|
||||||
|
break;
|
||||||
|
case "3months":
|
||||||
|
expiresAt.setMonth(now.getMonth() + 3);
|
||||||
|
break;
|
||||||
|
case "6months":
|
||||||
|
expiresAt.setMonth(now.getMonth() + 6);
|
||||||
|
break;
|
||||||
|
case "1year":
|
||||||
|
expiresAt.setFullYear(now.getFullYear() + 1);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return expiresAt;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PersonalAPIKeyList(props: {
|
||||||
|
fKey: PersonalAPIKeyListFragment$key;
|
||||||
|
}) {
|
||||||
|
const { fKey } = props;
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const { toast } = useToast();
|
||||||
|
const confirm = useConfirm();
|
||||||
|
const createDialogRef = useDialogRef();
|
||||||
|
const tokenDialogRef = useDialogRef();
|
||||||
|
|
||||||
|
const [token, setToken] = useState<string>("");
|
||||||
|
|
||||||
|
const viewer = useFragment(fragment, fKey);
|
||||||
|
|
||||||
|
const keys = viewer.personalAPIKeys.edges.map(({ node }) => node);
|
||||||
|
|
||||||
|
const { formState, handleSubmit, register, control, reset, watch } =
|
||||||
|
useFormWithSchema(createSchema, {
|
||||||
|
defaultValues: {
|
||||||
|
name: new Date().toISOString().split("T")[0],
|
||||||
|
expiresIn: "1month",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
watch();
|
||||||
|
|
||||||
|
const [createCommit, isCreating] =
|
||||||
|
useMutation<PersonalAPIKeyListCreateMutation>(createMutation);
|
||||||
|
const [revokeCommit] =
|
||||||
|
useMutation<PersonalAPIKeyListRevokeMutation>(revokeMutation);
|
||||||
|
const [revealTokenCommit, isRevealingToken] =
|
||||||
|
useMutation<PersonalAPIKeyListRevealTokenMutation>(revealTokenMutation);
|
||||||
|
|
||||||
|
const handleCreate = (data: CreateFormData) => {
|
||||||
|
const expiresAt = computeExpiresAt(data.expiresIn);
|
||||||
|
const connectionID = ConnectionHandler.getConnectionID(
|
||||||
|
viewer.id,
|
||||||
|
"PersonalAPIKeyListFragment_personalAPIKeys"
|
||||||
|
);
|
||||||
|
|
||||||
|
createCommit({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
name: data.name,
|
||||||
|
expiresAt: expiresAt.toISOString(),
|
||||||
|
// API keys are no longer linked to organizations; keep schema compatibility.
|
||||||
|
organizationIds: [],
|
||||||
|
},
|
||||||
|
connections: [connectionID],
|
||||||
|
},
|
||||||
|
onCompleted: (response) => {
|
||||||
|
toast({
|
||||||
|
title: __("Success"),
|
||||||
|
description: __("API key created successfully."),
|
||||||
|
variant: "success",
|
||||||
|
});
|
||||||
|
const newToken = response.createPersonalAPIKey?.token;
|
||||||
|
if (newToken) {
|
||||||
|
setToken(newToken);
|
||||||
|
tokenDialogRef.current?.open();
|
||||||
|
}
|
||||||
|
createDialogRef.current?.close();
|
||||||
|
reset();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: formatError(__("Failed to create API key."), error),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRevoke = (key: { id: string; name: string }) => {
|
||||||
|
confirm(
|
||||||
|
async () => {
|
||||||
|
await new Promise<void>((resolve, reject) => {
|
||||||
|
revokeCommit({
|
||||||
|
variables: {
|
||||||
|
input: { tokenId: key.id },
|
||||||
|
},
|
||||||
|
updater: (store: RecordSourceSelectorProxy) => {
|
||||||
|
const viewerRecord = store.getRoot().getLinkedRecord("viewer");
|
||||||
|
if (!viewerRecord) return;
|
||||||
|
const connection = ConnectionHandler.getConnection(
|
||||||
|
viewerRecord,
|
||||||
|
"PersonalAPIKeyListFragment_personalAPIKeys"
|
||||||
|
);
|
||||||
|
if (connection) {
|
||||||
|
ConnectionHandler.deleteNode(connection, key.id);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onCompleted: (_response, errors) => {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: formatError(
|
||||||
|
__("Failed to revoke API key."),
|
||||||
|
errors as GraphQLError[]
|
||||||
|
),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
reject(errors);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast({
|
||||||
|
title: __("Success"),
|
||||||
|
description: __("API key revoked successfully."),
|
||||||
|
variant: "success",
|
||||||
|
});
|
||||||
|
resolve();
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: formatError(
|
||||||
|
__("Failed to revoke API key."),
|
||||||
|
error
|
||||||
|
),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
reject(error);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: __("Revoke API Key"),
|
||||||
|
message: __(
|
||||||
|
`Are you sure you want to revoke the API key "${key.name}"? This action cannot be undone.`
|
||||||
|
),
|
||||||
|
label: __("Revoke"),
|
||||||
|
variant: "danger",
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShowToken = (key: { id: string; name: string }) => {
|
||||||
|
revealTokenCommit({
|
||||||
|
variables: {
|
||||||
|
input: {
|
||||||
|
tokenId: key.id,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
onCompleted: (response, errors) => {
|
||||||
|
if (errors?.length) {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: formatError(
|
||||||
|
__("Failed to reveal API key token."),
|
||||||
|
errors as any
|
||||||
|
),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tokenValue = response.revealPersonalAPIKeyToken?.token;
|
||||||
|
if (!tokenValue) {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: __("No token returned."),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setToken(tokenValue);
|
||||||
|
tokenDialogRef.current?.open();
|
||||||
|
},
|
||||||
|
onError: (error: Error) => {
|
||||||
|
toast({
|
||||||
|
title: __("Error"),
|
||||||
|
description: formatError(
|
||||||
|
__("Failed to reveal API key token."),
|
||||||
|
error
|
||||||
|
),
|
||||||
|
variant: "error",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<h2 className="text-base font-medium">{__("API Keys")}</h2>
|
||||||
|
<Button onClick={() => createDialogRef.current?.open()}>
|
||||||
|
{__("Create API Key")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{keys.length === 0 ? (
|
||||||
|
<Card padded>
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||||
|
{__("No API keys")}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 mb-6">
|
||||||
|
{__("Create an API key to authenticate programmatic access.")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<Card padded>
|
||||||
|
<PersonalAPIKeysTable
|
||||||
|
keys={keys}
|
||||||
|
onRevoke={handleRevoke}
|
||||||
|
onShowToken={handleShowToken}
|
||||||
|
isShowingToken={isRevealingToken}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
ref={createDialogRef}
|
||||||
|
title={<Breadcrumb items={[__("API Keys"), __("Create")]} />}
|
||||||
|
onClose={() => reset()}
|
||||||
|
>
|
||||||
|
<form onSubmit={handleSubmit(handleCreate)}>
|
||||||
|
<DialogContent padded className="space-y-5">
|
||||||
|
<Field error={formState.errors.name?.message}>
|
||||||
|
<Label>{__("Name")}</Label>
|
||||||
|
<Input
|
||||||
|
{...register("name")}
|
||||||
|
placeholder={__("e.g., Production API Key")}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
|
||||||
|
<Field error={formState.errors.expiresIn?.message}>
|
||||||
|
<Label>{__("Expires In")}</Label>
|
||||||
|
<Controller
|
||||||
|
control={control}
|
||||||
|
name="expiresIn"
|
||||||
|
render={({ field }) => (
|
||||||
|
<Select
|
||||||
|
{...field}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
>
|
||||||
|
<Option value="1month">{__("1 Month")}</Option>
|
||||||
|
<Option value="3months">{__("3 Months")}</Option>
|
||||||
|
<Option value="6months">{__("6 Months")}</Option>
|
||||||
|
<Option value="1year">{__("1 Year")}</Option>
|
||||||
|
</Select>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</Field>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button type="submit" disabled={isCreating}>
|
||||||
|
{isCreating ? __("Creating...") : __("Create")}
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</form>
|
||||||
|
</Dialog>
|
||||||
|
|
||||||
|
<PersonalAPIKeyTokenDialog
|
||||||
|
dialogRef={tokenDialogRef}
|
||||||
|
token={token}
|
||||||
|
onDone={() => {
|
||||||
|
tokenDialogRef.current?.close();
|
||||||
|
setToken("");
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,45 @@
|
|||||||
|
import {
|
||||||
|
Breadcrumb,
|
||||||
|
Button,
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogFooter,
|
||||||
|
} from "@probo/ui";
|
||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { useCopy } from "@probo/hooks";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
export function PersonalAPIKeyTokenDialog(props: {
|
||||||
|
dialogRef: React.RefObject<{ open: () => void; close: () => void } | null>;
|
||||||
|
token: string;
|
||||||
|
onDone: () => void;
|
||||||
|
}) {
|
||||||
|
const { dialogRef, token, onDone } = props;
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const [isCopied, copy] = useCopy();
|
||||||
|
|
||||||
|
useEffect(() => {}, [token]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog
|
||||||
|
ref={dialogRef}
|
||||||
|
title={<Breadcrumb items={[__("API Keys"), __("Token")]} />}
|
||||||
|
>
|
||||||
|
<DialogContent padded className="space-y-4">
|
||||||
|
<div className="bg-gray-100 p-4 rounded-lg flex items-center gap-2">
|
||||||
|
<code className="text-sm font-mono break-all flex-1">{token}</code>
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => copy(token)}
|
||||||
|
disabled={!token}
|
||||||
|
>
|
||||||
|
{isCopied ? __("Copied") : __("Copy")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button onClick={onDone}>{__("Done")}</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,83 @@
|
|||||||
|
import { useTranslate } from "@probo/i18n";
|
||||||
|
import { formatDate } from "@probo/helpers";
|
||||||
|
import { Button, Table, Tbody, Td, Th, Thead, Tr } from "@probo/ui";
|
||||||
|
|
||||||
|
export type PersonalAPIKeyRow = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
createdAt: string;
|
||||||
|
expiresAt: string;
|
||||||
|
lastUsedAt: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function PersonalAPIKeysTable(props: {
|
||||||
|
keys: PersonalAPIKeyRow[];
|
||||||
|
onRevoke: (key: { id: string; name: string }) => void;
|
||||||
|
onShowToken: (key: { id: string; name: string }) => void;
|
||||||
|
isShowingToken?: boolean;
|
||||||
|
}) {
|
||||||
|
const { keys, onRevoke, onShowToken, isShowingToken } = props;
|
||||||
|
const { __ } = useTranslate();
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Table>
|
||||||
|
<Thead>
|
||||||
|
<Tr>
|
||||||
|
<Th>{__("Name")}</Th>
|
||||||
|
<Th>{__("Last used")}</Th>
|
||||||
|
<Th>{__("Created")}</Th>
|
||||||
|
<Th>{__("Expires")}</Th>
|
||||||
|
<Th></Th>
|
||||||
|
</Tr>
|
||||||
|
</Thead>
|
||||||
|
<Tbody>
|
||||||
|
{keys.map((k) => {
|
||||||
|
const expired = new Date(k.expiresAt) < now;
|
||||||
|
return (
|
||||||
|
<Tr key={k.id}>
|
||||||
|
<Td>
|
||||||
|
<div className="font-medium text-txt-primary">{k.name}</div>
|
||||||
|
<div className="text-xs text-txt-tertiary">
|
||||||
|
{expired ? __("Expired") : __("Active")}
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<span className="text-sm text-txt-secondary">
|
||||||
|
{k.lastUsedAt ? formatDate(k.lastUsedAt) : "—"}
|
||||||
|
</span>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<span className="text-sm text-txt-secondary">
|
||||||
|
{formatDate(k.createdAt)}
|
||||||
|
</span>
|
||||||
|
</Td>
|
||||||
|
<Td>
|
||||||
|
<span className="text-sm text-txt-secondary">
|
||||||
|
{formatDate(k.expiresAt)}
|
||||||
|
</span>
|
||||||
|
</Td>
|
||||||
|
<Td width={140} className="text-end">
|
||||||
|
<div className="flex gap-2 justify-end">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
onClick={() => onShowToken({ id: k.id, name: k.name })}
|
||||||
|
disabled={!!isShowingToken}
|
||||||
|
>
|
||||||
|
{__("Show")}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="danger"
|
||||||
|
onClick={() => onRevoke({ id: k.id, name: k.name })}
|
||||||
|
>
|
||||||
|
{__("Revoke")}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Tbody>
|
||||||
|
</Table>
|
||||||
|
);
|
||||||
|
}
|
||||||
202
apps/console/src/pages/iam/apiKeys/_components/__generated__/PersonalAPIKeyListCreateMutation.graphql.ts
generated
Normal file
202
apps/console/src/pages/iam/apiKeys/_components/__generated__/PersonalAPIKeyListCreateMutation.graphql.ts
generated
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<875eae6f5455a17a1bb8e0590c7acdb0>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
|
export type CreatePersonalAPIKeyInput = {
|
||||||
|
expiresAt: any;
|
||||||
|
name: string;
|
||||||
|
organizationIds: ReadonlyArray<string>;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListCreateMutation$variables = {
|
||||||
|
connections: ReadonlyArray<string>;
|
||||||
|
input: CreatePersonalAPIKeyInput;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListCreateMutation$data = {
|
||||||
|
readonly createPersonalAPIKey: {
|
||||||
|
readonly personalAPIKeyEdge: {
|
||||||
|
readonly node: {
|
||||||
|
readonly createdAt: any;
|
||||||
|
readonly expiresAt: any;
|
||||||
|
readonly id: string;
|
||||||
|
readonly lastUsedAt: any | null | undefined;
|
||||||
|
readonly name: string;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
readonly token: string;
|
||||||
|
} | null | undefined;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListCreateMutation = {
|
||||||
|
response: PersonalAPIKeyListCreateMutation$data;
|
||||||
|
variables: PersonalAPIKeyListCreateMutation$variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ConcreteRequest = (function(){
|
||||||
|
var v0 = {
|
||||||
|
"defaultValue": null,
|
||||||
|
"kind": "LocalArgument",
|
||||||
|
"name": "connections"
|
||||||
|
},
|
||||||
|
v1 = {
|
||||||
|
"defaultValue": null,
|
||||||
|
"kind": "LocalArgument",
|
||||||
|
"name": "input"
|
||||||
|
},
|
||||||
|
v2 = [
|
||||||
|
{
|
||||||
|
"kind": "Variable",
|
||||||
|
"name": "input",
|
||||||
|
"variableName": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
v3 = {
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKeyEdge",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "personalAPIKeyEdge",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKey",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "node",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "id",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "name",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "createdAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "expiresAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "lastUsedAt",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
v4 = {
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "token",
|
||||||
|
"storageKey": null
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
"fragment": {
|
||||||
|
"argumentDefinitions": [
|
||||||
|
(v0/*: any*/),
|
||||||
|
(v1/*: any*/)
|
||||||
|
],
|
||||||
|
"kind": "Fragment",
|
||||||
|
"metadata": null,
|
||||||
|
"name": "PersonalAPIKeyListCreateMutation",
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": (v2/*: any*/),
|
||||||
|
"concreteType": "CreatePersonalAPIKeyPayload",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "createPersonalAPIKey",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
(v3/*: any*/),
|
||||||
|
(v4/*: any*/)
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Mutation",
|
||||||
|
"abstractKey": null
|
||||||
|
},
|
||||||
|
"kind": "Request",
|
||||||
|
"operation": {
|
||||||
|
"argumentDefinitions": [
|
||||||
|
(v1/*: any*/),
|
||||||
|
(v0/*: any*/)
|
||||||
|
],
|
||||||
|
"kind": "Operation",
|
||||||
|
"name": "PersonalAPIKeyListCreateMutation",
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": (v2/*: any*/),
|
||||||
|
"concreteType": "CreatePersonalAPIKeyPayload",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "createPersonalAPIKey",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
(v3/*: any*/),
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"filters": null,
|
||||||
|
"handle": "prependEdge",
|
||||||
|
"key": "",
|
||||||
|
"kind": "LinkedHandle",
|
||||||
|
"name": "personalAPIKeyEdge",
|
||||||
|
"handleArgs": [
|
||||||
|
{
|
||||||
|
"kind": "Variable",
|
||||||
|
"name": "connections",
|
||||||
|
"variableName": "connections"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
(v4/*: any*/)
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"params": {
|
||||||
|
"cacheID": "5b1f6109730bd9f261afd6635d568b59",
|
||||||
|
"id": null,
|
||||||
|
"metadata": {},
|
||||||
|
"name": "PersonalAPIKeyListCreateMutation",
|
||||||
|
"operationKind": "mutation",
|
||||||
|
"text": "mutation PersonalAPIKeyListCreateMutation(\n $input: CreatePersonalAPIKeyInput!\n) {\n createPersonalAPIKey(input: $input) {\n personalAPIKeyEdge {\n node {\n id\n name\n createdAt\n expiresAt\n lastUsedAt\n }\n }\n token\n }\n}\n"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "c7e932ad41ff2740e8687b7edb904431";
|
||||||
|
|
||||||
|
export default node;
|
||||||
176
apps/console/src/pages/iam/apiKeys/_components/__generated__/PersonalAPIKeyListFragment.graphql.ts
generated
Normal file
176
apps/console/src/pages/iam/apiKeys/_components/__generated__/PersonalAPIKeyListFragment.graphql.ts
generated
Normal file
@@ -0,0 +1,176 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<e518a98137eb07e37499d945991b15ed>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ReaderFragment } from 'relay-runtime';
|
||||||
|
import { FragmentRefs } from "relay-runtime";
|
||||||
|
export type PersonalAPIKeyListFragment$data = {
|
||||||
|
readonly id: string;
|
||||||
|
readonly personalAPIKeys: {
|
||||||
|
readonly edges: ReadonlyArray<{
|
||||||
|
readonly node: {
|
||||||
|
readonly createdAt: any;
|
||||||
|
readonly expiresAt: any;
|
||||||
|
readonly id: string;
|
||||||
|
readonly lastUsedAt: any | null | undefined;
|
||||||
|
readonly name: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
readonly " $fragmentType": "PersonalAPIKeyListFragment";
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListFragment$key = {
|
||||||
|
readonly " $data"?: PersonalAPIKeyListFragment$data;
|
||||||
|
readonly " $fragmentSpreads": FragmentRefs<"PersonalAPIKeyListFragment">;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ReaderFragment = (function(){
|
||||||
|
var v0 = {
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "id",
|
||||||
|
"storageKey": null
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
"argumentDefinitions": [],
|
||||||
|
"kind": "Fragment",
|
||||||
|
"metadata": {
|
||||||
|
"connection": [
|
||||||
|
{
|
||||||
|
"count": null,
|
||||||
|
"cursor": null,
|
||||||
|
"direction": "forward",
|
||||||
|
"path": [
|
||||||
|
"personalAPIKeys"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"name": "PersonalAPIKeyListFragment",
|
||||||
|
"selections": [
|
||||||
|
(v0/*: any*/),
|
||||||
|
{
|
||||||
|
"kind": "RequiredField",
|
||||||
|
"field": {
|
||||||
|
"alias": "personalAPIKeys",
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKeyConnection",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "__PersonalAPIKeyListFragment_personalAPIKeys_connection",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"kind": "RequiredField",
|
||||||
|
"field": {
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKeyEdge",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "edges",
|
||||||
|
"plural": true,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PersonalAPIKey",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "node",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
(v0/*: any*/),
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "name",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "createdAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "expiresAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "lastUsedAt",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "__typename",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "cursor",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
"action": "THROW"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"concreteType": "PageInfo",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "pageInfo",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "endCursor",
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "hasNextPage",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
},
|
||||||
|
"action": "THROW"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"type": "Identity",
|
||||||
|
"abstractKey": null
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "70fa6b4e568fc1598b8dc23a030428b5";
|
||||||
|
|
||||||
|
export default node;
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<7a6fb678e9147fd1810e02bd09d5cef1>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
|
export type RevealPersonalAPIKeyTokenInput = {
|
||||||
|
tokenId: string;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevealTokenMutation$variables = {
|
||||||
|
input: RevealPersonalAPIKeyTokenInput;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevealTokenMutation$data = {
|
||||||
|
readonly revealPersonalAPIKeyToken: {
|
||||||
|
readonly token: string;
|
||||||
|
} | null | undefined;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevealTokenMutation = {
|
||||||
|
response: PersonalAPIKeyListRevealTokenMutation$data;
|
||||||
|
variables: PersonalAPIKeyListRevealTokenMutation$variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ConcreteRequest = (function(){
|
||||||
|
var v0 = [
|
||||||
|
{
|
||||||
|
"defaultValue": null,
|
||||||
|
"kind": "LocalArgument",
|
||||||
|
"name": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
v1 = [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": [
|
||||||
|
{
|
||||||
|
"kind": "Variable",
|
||||||
|
"name": "input",
|
||||||
|
"variableName": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"concreteType": "RevealPersonalAPIKeyTokenPayload",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "revealPersonalAPIKeyToken",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "token",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
"fragment": {
|
||||||
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
|
"kind": "Fragment",
|
||||||
|
"metadata": null,
|
||||||
|
"name": "PersonalAPIKeyListRevealTokenMutation",
|
||||||
|
"selections": (v1/*: any*/),
|
||||||
|
"type": "Mutation",
|
||||||
|
"abstractKey": null
|
||||||
|
},
|
||||||
|
"kind": "Request",
|
||||||
|
"operation": {
|
||||||
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
|
"kind": "Operation",
|
||||||
|
"name": "PersonalAPIKeyListRevealTokenMutation",
|
||||||
|
"selections": (v1/*: any*/)
|
||||||
|
},
|
||||||
|
"params": {
|
||||||
|
"cacheID": "25ffba7c8a69e22dcc46b56a6c8633ed",
|
||||||
|
"id": null,
|
||||||
|
"metadata": {},
|
||||||
|
"name": "PersonalAPIKeyListRevealTokenMutation",
|
||||||
|
"operationKind": "mutation",
|
||||||
|
"text": "mutation PersonalAPIKeyListRevealTokenMutation(\n $input: RevealPersonalAPIKeyTokenInput!\n) {\n revealPersonalAPIKeyToken(input: $input) {\n token\n }\n}\n"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "7dad7ebd6e8086a01b2bac8aa80c532e";
|
||||||
|
|
||||||
|
export default node;
|
||||||
@@ -0,0 +1,92 @@
|
|||||||
|
/**
|
||||||
|
* @generated SignedSource<<84eef5bca22c2ad2b73bbe068767e35a>>
|
||||||
|
* @lightSyntaxTransform
|
||||||
|
* @nogrep
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* tslint:disable */
|
||||||
|
/* eslint-disable */
|
||||||
|
// @ts-nocheck
|
||||||
|
|
||||||
|
import { ConcreteRequest } from 'relay-runtime';
|
||||||
|
export type RevokePersonalAPIKeyInput = {
|
||||||
|
tokenId: string;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevokeMutation$variables = {
|
||||||
|
input: RevokePersonalAPIKeyInput;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevokeMutation$data = {
|
||||||
|
readonly revokePersonalAPIKey: {
|
||||||
|
readonly success: boolean;
|
||||||
|
} | null | undefined;
|
||||||
|
};
|
||||||
|
export type PersonalAPIKeyListRevokeMutation = {
|
||||||
|
response: PersonalAPIKeyListRevokeMutation$data;
|
||||||
|
variables: PersonalAPIKeyListRevokeMutation$variables;
|
||||||
|
};
|
||||||
|
|
||||||
|
const node: ConcreteRequest = (function(){
|
||||||
|
var v0 = [
|
||||||
|
{
|
||||||
|
"defaultValue": null,
|
||||||
|
"kind": "LocalArgument",
|
||||||
|
"name": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
v1 = [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": [
|
||||||
|
{
|
||||||
|
"kind": "Variable",
|
||||||
|
"name": "input",
|
||||||
|
"variableName": "input"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"concreteType": "RevokePersonalAPIKeyPayload",
|
||||||
|
"kind": "LinkedField",
|
||||||
|
"name": "revokePersonalAPIKey",
|
||||||
|
"plural": false,
|
||||||
|
"selections": [
|
||||||
|
{
|
||||||
|
"alias": null,
|
||||||
|
"args": null,
|
||||||
|
"kind": "ScalarField",
|
||||||
|
"name": "success",
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"storageKey": null
|
||||||
|
}
|
||||||
|
];
|
||||||
|
return {
|
||||||
|
"fragment": {
|
||||||
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
|
"kind": "Fragment",
|
||||||
|
"metadata": null,
|
||||||
|
"name": "PersonalAPIKeyListRevokeMutation",
|
||||||
|
"selections": (v1/*: any*/),
|
||||||
|
"type": "Mutation",
|
||||||
|
"abstractKey": null
|
||||||
|
},
|
||||||
|
"kind": "Request",
|
||||||
|
"operation": {
|
||||||
|
"argumentDefinitions": (v0/*: any*/),
|
||||||
|
"kind": "Operation",
|
||||||
|
"name": "PersonalAPIKeyListRevokeMutation",
|
||||||
|
"selections": (v1/*: any*/)
|
||||||
|
},
|
||||||
|
"params": {
|
||||||
|
"cacheID": "fd05bb0236b583ca54be466cffe8f45b",
|
||||||
|
"id": null,
|
||||||
|
"metadata": {},
|
||||||
|
"name": "PersonalAPIKeyListRevokeMutation",
|
||||||
|
"operationKind": "mutation",
|
||||||
|
"text": "mutation PersonalAPIKeyListRevokeMutation(\n $input: RevokePersonalAPIKeyInput!\n) {\n revokePersonalAPIKey(input: $input) {\n success\n }\n}\n"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
})();
|
||||||
|
|
||||||
|
(node as any).hash = "34ef04d19251c479827ca5028346f65b";
|
||||||
|
|
||||||
|
export default node;
|
||||||
@@ -75,7 +75,7 @@ export function SessionDropdown(props: { fKey: SessionDropdownFragment$key }) {
|
|||||||
<UserDropdown fullName={fullName} email={email}>
|
<UserDropdown fullName={fullName} email={email}>
|
||||||
{isAuthorized("Organization", "deleteOrganization") && (
|
{isAuthorized("Organization", "deleteOrganization") && (
|
||||||
<UserDropdownItem
|
<UserDropdownItem
|
||||||
to="/api-keys"
|
to="/me/api-keys"
|
||||||
icon={IconKey}
|
icon={IconKey}
|
||||||
label={__("API Keys")}
|
label={__("API Keys")}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -123,8 +123,8 @@ const routes = [
|
|||||||
Component: lazy(() => import("./pages/DocumentSigningRequestsPage")),
|
Component: lazy(() => import("./pages/DocumentSigningRequestsPage")),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "api-keys",
|
path: "me/api-keys",
|
||||||
Component: lazy(() => import("./pages/APIKeysPage")),
|
Component: lazy(() => import("./pages/iam/apiKeys/APIKeysPageLoader")),
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user