ui(editor): add release confirmation dialog to commit modal

packages/fern-dashboard/src/components/docs-page/visual-editor-section/VisualEditorContent.tsx

@@ -39,9 +39,11 @@ export function VisualEditorContent({
 }) {
     // If there's an error, show warning below header with disabled button
     if (error) {
+        const hideRightButton = error.type === "REPO_NOT_CONNECTED";
+
         return (
             <VisualEditorCard
-                rightContent={<GoToEditorButton docsUrl={docsUrl} session={session} disabled />}
+                rightContent={hideRightButton ? undefined : <GoToEditorButton docsUrl={docsUrl} session={session} disabled />}
                 warningContent={
                     <VisualEditorValidationErrorHandler
                         error={error}

packages/fern-dashboard/src/components/editor/EditorNextStepsModal.tsx

@@ -10,6 +10,7 @@ import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTi
 import { Skeleton } from "../ui/skeleton";
 import { Step, Steps } from "../ui/steps";
 import { MarkAsReadyButton } from "./MarkAsReadyButton";
+import { ReleaseConfirmDialog } from "./ReleaseConfirmDialog";
 
 export interface EditorNextStepsModalProps {
     open: boolean;
@@ -18,6 +19,7 @@ export interface EditorNextStepsModalProps {
 
 export function EditorNextStepsModal({ open, onOpenChange }: EditorNextStepsModalProps) {
     const [showConfetti, setShowConfetti] = useState(true);
+    const [showReleaseConfirm, setShowReleaseConfirm] = useState(false);
     const { gitPrUrl, isReadyForReview } = useGitPrInfo();
     const { startConfetti } = useConfetti();
 
@@ -29,6 +31,9 @@ export function EditorNextStepsModal({ open, onOpenChange }: EditorNextStepsModa
         }
     }, [open, showConfetti, startConfetti]);
 
+    const handleRelease = () => {
+    };
+
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-md">
@@ -53,12 +58,30 @@ export function EditorNextStepsModal({ open, onOpenChange }: EditorNextStepsModa
                         </Step>
                     </Steps>
                 </DialogBody>
+                <div className="px-6 pb-6">
+                    <p className="text-sm text-muted-foreground">
+                        Do you want to{" "}
+                        <button
+                            type="button"
+                            onClick={() => setShowReleaseConfirm(true)}
+                            className="text-primary hover:underline cursor-pointer"
+                        >
+                            release this change now
+                        </button>
+                        ?
+                    </p>
+                </div>
                 <DialogFooter className="justify-end">
                     <Button variant="outline" onClick={() => onOpenChange(false)}>
                         Done
                     </Button>
                 </DialogFooter>
             </DialogContent>
+            <ReleaseConfirmDialog
+                open={showReleaseConfirm}
+                onOpenChange={setShowReleaseConfirm}
+                onConfirm={handleRelease}
+            />
         </Dialog>
     );
 }

packages/fern-dashboard/src/components/editor/ReleaseConfirmDialog.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { Button } from "../ui/button";
+import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "../ui/dialog";
+
+export interface ReleaseConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onConfirm: () => void;
+}
+
+export function ReleaseConfirmDialog({ open, onOpenChange, onConfirm }: ReleaseConfirmDialogProps) {
+    const handleConfirm = () => {
+        onConfirm();
+        onOpenChange(false);
+    };
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="max-w-sm">
+                <DialogHeader>
+                    <DialogTitle className="text-center mt-4">Are you sure?</DialogTitle>
+                </DialogHeader>
+                <DialogBody className="px-6">
+                    <p className="text-sm text-center text-muted-foreground mb-4">
+                        This will push your changes to production.
+                    </p>
+                </DialogBody>
+                <DialogFooter className="justify-end gap-2">
+                    <Button variant="outline" onClick={() => onOpenChange(false)}>
+                        No
+                    </Button>
+                    <Button onClick={handleConfirm}>Yes, release</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    );
+}