ui for provisioning key

messages/en-US.json

@@ -323,6 +323,25 @@
     "apiKeysDelete": "Delete API Key",
     "apiKeysManage": "Manage API Keys",
     "apiKeysDescription": "API keys are used to authenticate with the integration API",
+    "provisioningKeysTitle": "Provisioning Key",
+    "provisioningKeysManage": "Manage Provisioning Keys",
+    "provisioningKeysDescription": "Provisioning keys are used to authenticate automated site provisioning for your organization.",
+    "provisioningKeys": "Provisioning Keys",
+    "searchProvisioningKeys": "Search provisioning keys...",
+    "provisioningKeysAdd": "Generate Provisioning Key",
+    "provisioningKeysErrorDelete": "Error deleting provisioning key",
+    "provisioningKeysErrorDeleteMessage": "Error deleting provisioning key",
+    "provisioningKeysQuestionRemove": "Are you sure you want to remove this provisioning key from the organization?",
+    "provisioningKeysMessageRemove": "Once removed, the key can no longer be used for site provisioning.",
+    "provisioningKeysDeleteConfirm": "Confirm Delete Provisioning Key",
+    "provisioningKeysDelete": "Delete Provisioning key",
+    "provisioningKeysCreate": "Generate Provisioning Key",
+    "provisioningKeysCreateDescription": "Generate a new provisioning key for the organization",
+    "provisioningKeysSeeAll": "See all provisioning keys",
+    "provisioningKeysSave": "Save the provisioning key",
+    "provisioningKeysSaveDescription": "You will only be able to see this once. Copy it to a secure place.",
+    "provisioningKeysErrorCreate": "Error creating provisioning key",
+    "provisioningKeysList": "New provisioning key",
     "apiKeysSettings": "{apiKeyName} Settings",
     "userTitle": "Manage All Users",
     "userDescription": "View and manage all users in the system",
@@ -1266,6 +1285,7 @@
     "sidebarRoles": "Roles",
     "sidebarShareableLinks": "Links",
     "sidebarApiKeys": "API Keys",
+    "sidebarProvisioning": "Provisioning",
     "sidebarSettings": "Settings",
     "sidebarAllUsers": "All Users",
     "sidebarIdentityProviders": "Identity Providers",

src/app/[orgId]/settings/provisioning/create/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from "next/navigation";
+
+type PageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export default async function ProvisioningCreateRedirect(props: PageProps) {
+    const params = await props.params;
+    redirect(`/${params.orgId}/settings/provisioning`);
+}

src/app/[orgId]/settings/provisioning/page.tsx

@@ -0,0 +1,50 @@
+import { internal } from "@app/lib/api";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import { AxiosResponse } from "axios";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import SiteProvisioningKeysTable, {
+    SiteProvisioningKeyRow
+} from "../../../../components/SiteProvisioningKeysTable";
+import { ListSiteProvisioningKeysResponse } from "@server/routers/siteProvisioning/listSiteProvisioningKeys";
+import { getTranslations } from "next-intl/server";
+
+type ProvisioningPageProps = {
+    params: Promise<{ orgId: string }>;
+};
+
+export const dynamic = "force-dynamic";
+
+export default async function ProvisioningPage(props: ProvisioningPageProps) {
+    const params = await props.params;
+    const t = await getTranslations();
+
+    let siteProvisioningKeys: ListSiteProvisioningKeysResponse["siteProvisioningKeys"] =
+        [];
+    try {
+        const res = await internal.get<
+            AxiosResponse<ListSiteProvisioningKeysResponse>
+        >(
+            `/org/${params.orgId}/site-provisioning-keys`,
+            await authCookieHeader()
+        );
+        siteProvisioningKeys = res.data.data.siteProvisioningKeys;
+    } catch (e) {}
+
+    const rows: SiteProvisioningKeyRow[] = siteProvisioningKeys.map((k) => ({
+        name: k.name,
+        id: k.siteProvisioningKeyId,
+        key: `${k.siteProvisioningKeyId}••••••••••••••••••••${k.lastChars}`,
+        createdAt: k.createdAt
+    }));
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("provisioningKeysManage")}
+                description={t("provisioningKeysDescription")}
+            />
+
+            <SiteProvisioningKeysTable keys={rows} orgId={params.orgId} />
+        </>
+    );
+}

src/app/navigation.tsx

@@ -2,6 +2,7 @@ import { SidebarNavItem } from "@app/components/SidebarNav";
 import { Env } from "@app/lib/types/env";
 import { build } from "@server/build";
 import {
+    Boxes,
     Building2,
     ChartLine,
     Combine,
@@ -203,6 +204,11 @@ export const orgNavSections = (
                         href: "/{orgId}/settings/api-keys",
                         icon: <KeyRound className="size-4 flex-none" />
                     },
+                    {
+                        title: "sidebarProvisioning",
+                        href: "/{orgId}/settings/provisioning",
+                        icon: <Boxes className="size-4 flex-none" />
+                    },
                     {
                         title: "sidebarBluePrints",
                         href: "/{orgId}/settings/blueprints",

src/components/CreateSiteProvisioningKeyCredenza.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import { Alert, AlertDescription, AlertTitle } from "@app/components/ui/alert";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { CreateSiteProvisioningKeyResponse } from "@server/routers/siteProvisioning/createSiteProvisioningKey";
+import { AxiosResponse } from "axios";
+import { InfoIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { zodResolver } from "@hookform/resolvers/zod";
+import CopyTextBox from "@app/components/CopyTextBox";
+
+const FORM_ID = "create-site-provisioning-key-form";
+
+type CreateSiteProvisioningKeyCredenzaProps = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    orgId: string;
+};
+
+export default function CreateSiteProvisioningKeyCredenza({
+    open,
+    setOpen,
+    orgId
+}: CreateSiteProvisioningKeyCredenzaProps) {
+    const t = useTranslations();
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const [loading, setLoading] = useState(false);
+    const [created, setCreated] =
+        useState<CreateSiteProvisioningKeyResponse | null>(null);
+
+    const createFormSchema = z.object({
+        name: z
+            .string()
+            .min(1, {
+                message: t("nameMin", { len: 1 })
+            })
+            .max(255, {
+                message: t("nameMax", { len: 255 })
+            })
+    });
+
+    type CreateFormValues = z.infer<typeof createFormSchema>;
+
+    const form = useForm<CreateFormValues>({
+        resolver: zodResolver(createFormSchema),
+        defaultValues: {
+            name: ""
+        }
+    });
+
+    useEffect(() => {
+        if (!open) {
+            setCreated(null);
+            form.reset({ name: "" });
+        }
+    }, [open, form]);
+
+    async function onSubmit(data: CreateFormValues) {
+        setLoading(true);
+        try {
+            const res = await api
+                .put<
+                    AxiosResponse<CreateSiteProvisioningKeyResponse>
+                >(`/org/${orgId}/site-provisioning-key`, { name: data.name })
+                .catch((e) => {
+                    toast({
+                        variant: "destructive",
+                        title: t("provisioningKeysErrorCreate"),
+                        description: formatAxiosError(e)
+                    });
+                });
+
+            if (res && res.status === 201) {
+                setCreated(res.data.data);
+                router.refresh();
+            }
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    const credential =
+        created &&
+        `${created.siteProvisioningKeyId}.${created.siteProvisioningKey}`;
+
+    return (
+        <Credenza open={open} onOpenChange={setOpen}>
+            <CredenzaContent>
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {created
+                            ? t("provisioningKeysList")
+                            : t("provisioningKeysCreate")}
+                    </CredenzaTitle>
+                    {!created && (
+                        <CredenzaDescription>
+                            {t("provisioningKeysCreateDescription")}
+                        </CredenzaDescription>
+                    )}
+                </CredenzaHeader>
+                <CredenzaBody>
+                    {!created && (
+                        <Form {...form}>
+                            <form
+                                id={FORM_ID}
+                                onSubmit={form.handleSubmit(onSubmit)}
+                                className="space-y-4"
+                            >
+                                <FormField
+                                    control={form.control}
+                                    name="name"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>{t("name")}</FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    autoComplete="off"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    )}
+
+                    {created && credential && (
+                        <div className="space-y-4">
+                            <Alert variant="neutral">
+                                <InfoIcon className="h-4 w-4" />
+                                <AlertTitle className="font-semibold">
+                                    {t("provisioningKeysSave")}
+                                </AlertTitle>
+                                <AlertDescription>
+                                    {t("provisioningKeysSaveDescription")}
+                                </AlertDescription>
+                            </Alert>
+                            <CopyTextBox text={credential} />
+                        </div>
+                    )}
+                </CredenzaBody>
+                <CredenzaFooter>
+                    {!created ? (
+                        <>
+                            <CredenzaClose asChild>
+                                <Button variant="outline">{t("close")}</Button>
+                            </CredenzaClose>
+                            <Button
+                                type="submit"
+                                form={FORM_ID}
+                                loading={loading}
+                                disabled={loading}
+                            >
+                                {t("generate")}
+                            </Button>
+                        </>
+                    ) : (
+                        <CredenzaClose asChild>
+                            <Button variant="default">{t("done")}</Button>
+                        </CredenzaClose>
+                    )}
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/SiteProvisioningKeysTable.tsx

@@ -0,0 +1,216 @@
+"use client";
+
+import {
+    DataTable,
+    ExtendedColumnDef
+} from "@app/components/ui/data-table";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "@app/components/ui/dropdown-menu";
+import { Button } from "@app/components/ui/button";
+import { ArrowUpDown, MoreHorizontal } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import CreateSiteProvisioningKeyCredenza from "@app/components/CreateSiteProvisioningKeyCredenza";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import moment from "moment";
+import { useTranslations } from "next-intl";
+
+export type SiteProvisioningKeyRow = {
+    id: string;
+    key: string;
+    name: string;
+    createdAt: string;
+};
+
+type SiteProvisioningKeysTableProps = {
+    keys: SiteProvisioningKeyRow[];
+    orgId: string;
+};
+
+export default function SiteProvisioningKeysTable({
+    keys,
+    orgId
+}: SiteProvisioningKeysTableProps) {
+    const router = useRouter();
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const [selected, setSelected] = useState<SiteProvisioningKeyRow | null>(
+        null
+    );
+    const [rows, setRows] = useState<SiteProvisioningKeyRow[]>(keys);
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [createOpen, setCreateOpen] = useState(false);
+
+    useEffect(() => {
+        setRows(keys);
+    }, [keys]);
+
+    const refreshData = async () => {
+        setIsRefreshing(true);
+        try {
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            router.refresh();
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const deleteKey = async (siteProvisioningKeyId: string) => {
+        try {
+            await api.delete(
+                `/org/${orgId}/site-provisioning-key/${siteProvisioningKeyId}`
+            );
+            router.refresh();
+            setIsDeleteModalOpen(false);
+            setSelected(null);
+            setRows((prev) => prev.filter((row) => row.id !== siteProvisioningKeyId));
+        } catch (e) {
+            console.error(t("provisioningKeysErrorDelete"), e);
+            toast({
+                variant: "destructive",
+                title: t("provisioningKeysErrorDelete"),
+                description: formatAxiosError(
+                    e,
+                    t("provisioningKeysErrorDeleteMessage")
+                )
+            });
+            throw e;
+        }
+    };
+
+    const columns: ExtendedColumnDef<SiteProvisioningKeyRow>[] = [
+        {
+            accessorKey: "name",
+            enableHiding: false,
+            friendlyName: t("name"),
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("name")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            }
+        },
+        {
+            accessorKey: "key",
+            friendlyName: t("key"),
+            header: () => <span className="p-3">{t("key")}</span>,
+            cell: ({ row }) => {
+                const r = row.original;
+                return <span className="font-mono">{r.key}</span>;
+            }
+        },
+        {
+            accessorKey: "createdAt",
+            friendlyName: t("createdAt"),
+            header: () => <span className="p-3">{t("createdAt")}</span>,
+            cell: ({ row }) => {
+                const r = row.original;
+                return <span>{moment(r.createdAt).format("lll")}</span>;
+            }
+        },
+        {
+            id: "actions",
+            enableHiding: false,
+            header: () => <span className="p-3"></span>,
+            cell: ({ row }) => {
+                const r = row.original;
+                return (
+                    <div className="flex items-center gap-2 justify-end">
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="h-8 w-8 p-0">
+                                    <span className="sr-only">
+                                        {t("openMenu")}
+                                    </span>
+                                    <MoreHorizontal className="h-4 w-4" />
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                                <DropdownMenuItem
+                                    onClick={() => {
+                                        setSelected(r);
+                                        setIsDeleteModalOpen(true);
+                                    }}
+                                >
+                                    <span className="text-red-500">
+                                        {t("delete")}
+                                    </span>
+                                </DropdownMenuItem>
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                );
+            }
+        }
+    ];
+
+    return (
+        <>
+            <CreateSiteProvisioningKeyCredenza
+                open={createOpen}
+                setOpen={setCreateOpen}
+                orgId={orgId}
+            />
+
+            {selected && (
+                <ConfirmDeleteDialog
+                    open={isDeleteModalOpen}
+                    setOpen={(val) => {
+                        setIsDeleteModalOpen(val);
+                        if (!val) {
+                            setSelected(null);
+                        }
+                    }}
+                    dialog={
+                        <div className="space-y-2">
+                            <p>{t("provisioningKeysQuestionRemove")}</p>
+                            <p>{t("provisioningKeysMessageRemove")}</p>
+                        </div>
+                    }
+                    buttonText={t("provisioningKeysDeleteConfirm")}
+                    onConfirm={async () => deleteKey(selected.id)}
+                    string={selected.name}
+                    title={t("provisioningKeysDelete")}
+                />
+            )}
+
+            <DataTable
+                columns={columns}
+                data={rows}
+                persistPageSize="Org-provisioning-keys-table"
+                title={t("provisioningKeys")}
+                searchPlaceholder={t("searchProvisioningKeys")}
+                searchColumn="name"
+                onAdd={() => setCreateOpen(true)}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+                addButtonText={t("provisioningKeysAdd")}
+                enableColumnVisibility={true}
+                stickyLeftColumn="name"
+                stickyRightColumn="actions"
+            />
+        </>
+    );
+}