feat: keys action menu

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/credits-setup.tsx

@@ -29,44 +29,64 @@ export const UsageSetup = () => {
   const handleSwitchChange = (checked: boolean) => {
     setValue("limit.enabled", checked);
 
-    // When enabling, ensure refill has the correct structure
-    if (checked && !getValues("limit.data.refill.interval")) {
-      setValue("limit.data.refill.interval", "none", { shouldValidate: true });
-      setValue("limit.data.refill.amount", undefined, { shouldValidate: true });
-      setValue("limit.data.refill.refillDay", undefined, {
-        shouldValidate: true,
-      });
+    // When enabling, ensure default values are set properly
+    if (checked) {
+      // Set default remaining to 100 if not already set
+      if (!getValues("limit.data.remaining")) {
+        setValue("limit.data.remaining", 100, { shouldValidate: true });
+      }
+
+      // Set up refill structure with defaults, using the entire object at once
+      if (!getValues("limit.data.refill.interval")) {
+        setValue(
+          "limit.data.refill",
+          {
+            interval: "none",
+            amount: undefined,
+            refillDay: undefined,
+          },
+          { shouldValidate: true },
+        );
+      }
     }
 
     trigger("limit");
   };
 
   const handleRefillIntervalChange = (value: "none" | "daily" | "monthly") => {
-    setValue("limit.data.refill.interval", value, { shouldValidate: true });
-
-    // Clean up related fields based on the selected interval
     if (value === "none") {
-      setValue("limit.data.refill.amount", undefined, { shouldValidate: true });
-      setValue("limit.data.refill.refillDay", undefined, {
-        shouldValidate: true,
-      });
+      // For "none", set entire refill object
+      setValue(
+        "limit.data.refill",
+        {
+          interval: "none",
+          amount: undefined,
+          refillDay: undefined,
+        },
+        { shouldValidate: true },
+      );
     } else if (value === "daily") {
-      // For daily, ensure refillDay is undefined but keep amount if present
-      setValue("limit.data.refill.refillDay", undefined, {
-        shouldValidate: true,
-      });
-      // If amount is not set, set a default
-      if (!getValues("limit.data.refill.amount")) {
-        setValue("limit.data.refill.amount", 100, { shouldValidate: true });
-      }
+      // For "daily"
+      setValue(
+        "limit.data.refill",
+        {
+          interval: "daily",
+          amount: getValues("limit.data.refill.amount") || 100,
+          refillDay: undefined, // Must be undefined for daily
+        },
+        { shouldValidate: true },
+      );
     } else if (value === "monthly") {
-      // For monthly, ensure both amount and refillDay have values
-      if (!getValues("limit.data.refill.amount")) {
-        setValue("limit.data.refill.amount", 100, { shouldValidate: true });
-      }
-      if (!getValues("limit.data.refill.refillDay")) {
-        setValue("limit.data.refill.refillDay", 1, { shouldValidate: true });
-      }
+      // For "monthly"
+      setValue(
+        "limit.data.refill",
+        {
+          interval: "monthly",
+          amount: getValues("limit.data.refill.amount") || 100,
+          refillDay: getValues("limit.data.refill.refillDay") || 1,
+        },
+        { shouldValidate: true },
+      );
     }
   };
 

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/external-id-field.tsx

@@ -0,0 +1,111 @@
+import { useCreateIdentity } from "@/app/(app)/apis/[apiId]/_components/create-key/hooks/use-create-identity";
+import { useFetchIdentities } from "@/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities";
+import { createIdentityOptions } from "@/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options";
+import { FormCombobox } from "@/components/ui/form-combobox";
+import { TriangleWarning2 } from "@unkey/icons";
+import { Button } from "@unkey/ui";
+import { cn } from "@unkey/ui/src/lib/utils";
+import { useState } from "react";
+
+type ExternalIdFieldProps = {
+  value: string | null;
+  onChange: (id: string | null) => void;
+  error?: string;
+  disabled?: boolean;
+};
+
+export const ExternalIdField = ({
+  value,
+  onChange,
+  error,
+  disabled = false,
+}: ExternalIdFieldProps) => {
+  const [searchValue, setSearchValue] = useState("");
+
+  const { identities, isFetchingNextPage, hasNextPage, loadMore } = useFetchIdentities();
+  const identityOptions = createIdentityOptions({
+    identities,
+    hasNextPage,
+    isFetchingNextPage,
+    loadMore,
+  });
+
+  const createIdentity = useCreateIdentity((data) => {
+    onChange(data.identityId);
+  });
+
+  const handleCreateIdentity = () => {
+    if (searchValue.trim()) {
+      createIdentity.mutate({
+        externalId: searchValue.trim(),
+        meta: null,
+      });
+    }
+  };
+
+  return (
+    <FormCombobox
+      optional
+      label="External ID"
+      description="ID of the user/workspace in your system for key attribution."
+      options={identityOptions}
+      // This will force close popover whenever new item added or selected.
+      key={value}
+      value={value || ""}
+      onChange={(e) => setSearchValue(e.currentTarget.value)}
+      onSelect={(val) => {
+        const identity = identities.find((id) => id.id === val);
+        onChange(identity?.id || null);
+      }}
+      placeholder={
+        <div className="flex w-full text-grayA-8 text-xs gap-1.5 items-center py-2">
+          Select External ID
+        </div>
+      }
+      searchPlaceholder="Search External ID..."
+      emptyMessage={
+        <div className="p-0 max-w-[460px]">
+          <div className="px-3 py-3 w-full">
+            <div className="flex gap-2 items-center justify-start">
+              <div
+                className={cn(
+                  "flex items-center rounded size-5 justify-center",
+                  "bg-warningA-4",
+                  "text-warning-11",
+                )}
+              >
+                <TriangleWarning2 size="sm-regular" />
+              </div>
+              <div className="font-medium text-[13px] leading-7 text-gray-12">
+                External ID not found
+              </div>
+            </div>
+          </div>
+          <div className="w-full">
+            <div className="h-[1px] bg-grayA-3 w-full" />
+          </div>
+          <div className="px-4 w-full text-gray-11 text-[13px] leading-6 my-4 text-left">
+            You can create a new identity with this <span className="font-medium">External ID</span>{" "}
+            and connect it <span className="font-medium">immediately</span>.
+          </div>
+          <div className="w-full px-4 pb-4">
+            <Button
+              type="button"
+              variant="primary"
+              size="xlg"
+              className="rounded-lg w-full"
+              onClick={handleCreateIdentity}
+              loading={createIdentity.isLoading}
+              disabled={!searchValue.trim() || createIdentity.isLoading || disabled}
+            >
+              Create
+            </Button>
+          </div>
+        </div>
+      }
+      variant="default"
+      error={error}
+      disabled={disabled}
+    />
+  );
+};

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/general-setup.tsx

@@ -1,12 +1,14 @@
 "use client";
 import { FormInput } from "@unkey/ui";
-import { useFormContext } from "react-hook-form";
+import { Controller, useFormContext } from "react-hook-form";
 import type { FormValues } from "../create-key.schema";
+import { ExternalIdField } from "./external-id-field";
 
 export const GeneralSetup = () => {
   const {
     register,
     formState: { errors },
+    control,
   } = useFormContext<FormValues>();
 
   return (
@@ -32,15 +34,17 @@ export const GeneralSetup = () => {
         optional
         {...register("prefix")}
       />
-      <FormInput
-        className="[&_input:first-of-type]:h-[36px]"
-        label="External ID"
-        maxLength={256}
-        placeholder="Enter external ID"
-        description="ID of the user/workspace in your system for key attribution."
-        error={errors.externalId?.message}
-        optional
-        {...register("externalId")}
+      <Controller
+        name="externalId"
+        control={control}
+        defaultValue=""
+        render={({ field }) => (
+          <ExternalIdField
+            value={field.value ?? null}
+            onChange={field.onChange}
+            error={errors.externalId?.message}
+          />
+        )}
       />
       <FormInput
         className="[&_input:first-of-type]:h-[36px]"
@@ -55,18 +59,6 @@ export const GeneralSetup = () => {
         maxLength={3}
         {...register("bytes")}
       />
-
-      {/* INFO: We'll enable that soon */}
-      {/* <FormInput */}
-      {/*   className="[&_input:first-of-type]:h-[36px]" */}
-      {/*   label="Environments" */}
-      {/*   maxLength={256} */}
-      {/*   placeholder="Enter environment (e.g. test, dev, prod)" */}
-      {/*   description="Environment label to separate keys (e.g. test, live)." */}
-      {/*   error={errors.environment?.message} */}
-      {/*   optional */}
-      {/*   {...register("environment")} */}
-      {/* /> */}
     </div>
   );
 };

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -1,28 +1,16 @@
 "use client";
 
 import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
+import { ConfirmPopover } from "@/components/confirmation-popover";
 import { CopyButton } from "@/components/dashboard/copy-button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { Popover, PopoverContent } from "@/components/ui/popover";
 import { toast } from "@/components/ui/toaster";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import {
-  ArrowRight,
-  Check,
-  CircleInfo,
-  Eye,
-  EyeSlash,
-  Key2,
-  Plus,
-  TriangleWarning2,
-} from "@unkey/icons";
+import { ArrowRight, Check, CircleInfo, Eye, EyeSlash, Key2, Plus } from "@unkey/icons";
 import { Button } from "@unkey/ui";
 import { useRef, useState } from "react";
+import { UNNAMED_KEY } from "../create-key.constants";
 import { SecretKey } from "./secret-key";
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverClose = PopoverPrimitive.Close;
-
 export const KeyCreatedSuccessDialog = ({
   isOpen,
   onClose,
@@ -42,7 +30,6 @@ export const KeyCreatedSuccessDialog = ({
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [isCreateAnother, setIsCreateAnother] = useState(false);
   const xButtonRef = useRef<HTMLButtonElement>(null);
-  const shouldShowWarning = true;
 
   if (!keyData) {
     return null;
@@ -87,8 +74,8 @@ export const KeyCreatedSuccessDialog = ({
     >
       <DialogContent
         className="drop-shadow-2xl border-gray-4 overflow-hidden !rounded-2xl p-0 gap-0 min-w-[760px] max-h-[90vh] overflow-y-auto"
-        showCloseWarning={shouldShowWarning}
-        onAttemptClose={shouldShowWarning ? handleAttemptClose : undefined}
+        showCloseWarning
+        onAttemptClose={handleAttemptClose}
         xButtonRef={xButtonRef}
       >
         <>
@@ -139,7 +126,7 @@ export const KeyCreatedSuccessDialog = ({
                       disabled={!keyData.name}
                     >
                       <div className="text-accent-9 text-xs max-w-[160px] truncate">
-                        {keyData.name ?? "Unnamed Key"}
+                        {keyData.name ?? UNNAMED_KEY}
                       </div>
                     </RatelimitOverviewTooltip>
                   </div>
@@ -238,42 +225,21 @@ export const KeyCreatedSuccessDialog = ({
               </div>
             </div>
           </div>
-
-          <Popover open={isConfirmOpen} onOpenChange={setIsConfirmOpen}>
-            <PopoverAnchor virtualRef={xButtonRef} />
-            <PopoverContent
-              sideOffset={5}
-              className="bg-white dark:bg-black flex flex-col items-center justify-center border-grayA-4 overflow-hidden !rounded-[10px] p-0 gap-0 min-w-[344px]"
-              onOpenAutoFocus={(e) => e.preventDefault()}
-            >
-              <div className="p-4 w-full">
-                <div className="flex gap-4  items-center justify-start">
-                  <div className="bg-warningA-4 text-warning-11 flex items-center justify-center rounded size-[22px]">
-                    <TriangleWarning2 size="sm-regular" />
-                  </div>
-                  <div className="font-medium text-[13px] leading-7 text-gray-12">
-                    You won't see this secret key again!
-                  </div>
-                </div>
-              </div>
-              <div className="w-full">
-                <div className="h-[1px] bg-grayA-3 w-full" />
-              </div>
-              <div className="px-4 w-full text-gray-11 text-[13px] leading-6 my-4">
-                Make sure to copy your secret key before closing. It cannot be retrieved later.
-              </div>
-              <div className="space-x-3 w-full px-4 pb-4">
-                <Button color="warning" onClick={handleConfirmAndClose}>
-                  Close anyway
-                </Button>
-                <PopoverClose asChild>
-                  <Button variant="ghost" className="text-gray-9">
-                    Dismiss
-                  </Button>
-                </PopoverClose>
-              </div>
-            </PopoverContent>
-          </Popover>
+          <ConfirmPopover
+            isOpen={isConfirmOpen}
+            onOpenChange={setIsConfirmOpen}
+            onConfirm={handleConfirmAndClose}
+            triggerRef={xButtonRef}
+            title="You won't see this secret key again!"
+            description="Make sure to copy your secret key before closing. It cannot be retrieved later."
+            confirmButtonText="Close anyway"
+            cancelButtonText="Dismiss"
+            variant="warning"
+            popoverProps={{
+              sideOffset: 5,
+              onOpenAutoFocus: (e) => e.preventDefault(),
+            }}
+          />
         </>
       </DialogContent>
     </Dialog>