feat: onboarding success step

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

@@ -2,12 +2,12 @@
 
 import { ConfirmPopover } from "@/components/confirmation-popover";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
-import { ArrowRight, Check, CircleInfo, Key2, Plus } from "@unkey/icons";
-import { Button, Code, CopyButton, InfoTooltip, VisibleButton, toast } from "@unkey/ui";
+import { ArrowRight, Check, Key2, Plus } from "@unkey/icons";
+import { Button, InfoTooltip, toast } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 import { UNNAMED_KEY } from "../create-key.constants";
-import { SecretKey } from "./secret-key";
+import { KeySecretSection } from "./key-secret-section";
 
 export const KeyCreatedSuccessDialog = ({
   isOpen,
@@ -24,7 +24,6 @@ export const KeyCreatedSuccessDialog = ({
   keyspaceId?: string | null;
   onCreateAnother?: () => void;
 }) => {
-  const [showKeyInSnippet, setShowKeyInSnippet] = useState(false);
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState<
     "close" | "create-another" | "go-to-details" | null
@@ -53,21 +52,6 @@ export const KeyCreatedSuccessDialog = ({
     return null;
   }
 
-  const split = keyData.key.split("_") ?? [];
-  const maskedKey =
-    split.length >= 2
-      ? `${split.at(0)}_${"*".repeat(split.at(1)?.length ?? 0)}`
-      : "*".repeat(split.at(0)?.length ?? 0);
-
-  const snippet = `curl -XPOST '${
-    process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.dev"
-  }/v1/keys.verifyKey' \\
-  -H 'Content-Type: application/json' \\
-  -d '{
-    "key": "${keyData.key}",
-    "apiId": "${apiId}"
-  }'`;
-
   const handleCloseAttempt = (action: "close" | "create-another" | "go-to-details" = "close") => {
     setPendingAction(action);
     setIsConfirmOpen(true);
@@ -199,36 +183,12 @@ export const KeyCreatedSuccessDialog = ({
                 </div>
               </div>
             </div>
-            <div className="flex flex-col gap-2 items-start w-full mt-6">
-              <div className="text-gray-12 text-sm font-semibold">Key Secret</div>
-              <SecretKey value={keyData.key} title="API Key" className="bg-white dark:bg-black " />
-              <div className="text-gray-9 text-[13px] flex items-center gap-1.5">
-                <CircleInfo className="text-accent-9" size="sm-regular" />
-                <span>
-                  Copy and save this key secret as it won't be shown again.{" "}
-                  <a
-                    href="https://www.unkey.com/docs/security/recovering-keys"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-info-11 hover:underline"
-                  >
-                    Learn more
-                  </a>
-                </span>
-              </div>
-            </div>
-            <div className="flex flex-col gap-2 items-start w-full mt-8">
-              <div className="text-gray-12 text-sm font-semibold">Try It Out</div>
-
-              <Code
-                visibleButton={
-                  <VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
-                }
-                copyButton={<CopyButton value={snippet} />}
-              >
-                {showKeyInSnippet ? snippet : snippet.replace(keyData.key, maskedKey)}
-              </Code>
-            </div>
+            <KeySecretSection
+              keyValue={keyData.key}
+              apiId={apiId}
+              className="mt-6 w-full"
+              secretKeyClassName="bg-white dark:bg-black"
+            />
             <div className="mt-6">
               <div className="mt-4 text-center text-gray-10 text-xs leading-6">
                 All set! You can now create another key or explore the docs to learn more

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

@@ -0,0 +1,74 @@
+"use client";
+
+import { SecretKey } from "@/app/(app)/apis/[apiId]/_components/create-key/components/secret-key";
+import { CircleInfo } from "@unkey/icons";
+import { Code, CopyButton, VisibleButton } from "@unkey/ui";
+import { useState } from "react";
+
+type KeySecretSectionProps = {
+  keyValue: string;
+  apiId: string;
+  className?: string;
+  secretKeyClassName?: string;
+  codeClassName?: string;
+};
+
+export const KeySecretSection = ({
+  keyValue,
+  apiId,
+  className,
+  secretKeyClassName = "bg-white dark:bg-black",
+  codeClassName,
+}: KeySecretSectionProps) => {
+  const [showKeyInSnippet, setShowKeyInSnippet] = useState(false);
+
+  const split = keyValue.split("_") ?? [];
+  const maskedKey =
+    split.length >= 2
+      ? `${split.at(0)}_${"*".repeat(split.at(1)?.length ?? 0)}`
+      : "*".repeat(split.at(0)?.length ?? 0);
+
+  const snippet = `curl -XPOST '${
+    process.env.NEXT_PUBLIC_UNKEY_API_URL ?? "https://api.unkey.dev"
+  }/v1/keys.verifyKey' \\
+  -H 'Content-Type: application/json' \\
+  -d '{
+    "key": "${keyValue}",
+    "apiId": "${apiId}"
+  }'`;
+
+  return (
+    <div className={className}>
+      <div className="flex flex-col gap-2 items-start w-full">
+        <div className="text-gray-12 text-sm font-semibold">Key Secret</div>
+        <SecretKey value={keyValue} title="API Key" className={secretKeyClassName} />
+        <div className="text-gray-9 text-[13px] flex items-center gap-1.5">
+          <CircleInfo className="text-accent-9" size="sm-regular" />
+          <span>
+            Copy and save this key secret as it won't be shown again.{" "}
+            <a
+              href="https://www.unkey.com/docs/security/recovering-keys"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-info-11 hover:underline"
+            >
+              Learn more
+            </a>
+          </span>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 items-start w-full mt-8">
+        <div className="text-gray-12 text-sm font-semibold">Try It Out</div>
+        <Code
+          className={codeClassName}
+          visibleButton={
+            <VisibleButton isVisible={showKeyInSnippet} setIsVisible={setShowKeyInSnippet} />
+          }
+          copyButton={<CopyButton value={snippet} />}
+        >
+          {showKeyInSnippet ? snippet : snippet.replace(keyValue, maskedKey)}
+        </Code>
+      </div>
+    </div>
+  );
+};

apps/dashboard/app/new-2/components/expandable-settings.tsx → apps/dashboard/app/new/components/expandable-settings.tsx

@@ -1,4 +1,6 @@
+"use client";
 import { Switch } from "@/components/ui/switch";
+
 import { CircleInfo } from "@unkey/icons";
 import { InfoTooltip } from "@unkey/ui";
 import { useState } from "react";
@@ -12,6 +14,7 @@ type ExpandableSettingsProps = {
   defaultChecked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
   disabled?: boolean;
+  disabledTooltip?: string;
 };
 
 export const ExpandableSettings = ({
@@ -22,6 +25,7 @@ export const ExpandableSettings = ({
   defaultChecked = false,
   onCheckedChange,
   disabled = false,
+  disabledTooltip = "You need to have a valid API name",
 }: ExpandableSettingsProps) => {
   const [isEnabled, setIsEnabled] = useState(defaultChecked);
 
@@ -32,13 +36,19 @@ export const ExpandableSettings = ({
     setIsEnabled(checked);
     onCheckedChange?.(checked);
   };
+  const handleSwitchClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
 
-  const handleHeaderClick = () => {
+  const handleHeaderClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
     handleCheckedChange(!isEnabled);
   };
 
   return (
-    <InfoTooltip content="You need to have a valid API name" disabled={!disabled}>
+    <InfoTooltip content={disabledTooltip} disabled={!disabled} asChild>
       <div className={disabled ? "opacity-50 pointer-events-none" : ""}>
         {/* Header */}
         <button
@@ -56,7 +66,7 @@ export const ExpandableSettings = ({
             )}
           </div>
           {/* biome-ignore lint/a11y/useKeyWithClickEvents: no need */}
-          <div onClick={(e) => e.stopPropagation()} className="ml-auto">
+          <div onClick={handleSwitchClick} className="ml-auto">
             <Switch
               checked={isEnabled}
               onCheckedChange={handleCheckedChange}