@sentry/junior-dashboard 0.266.0 → 0.268.0

package/src/client/conversations/ForkConversationButton.tsx

@@ -1,16 +1,22 @@
 import { GitFork } from "lucide-react";
-import { useId, useState } from "react";
-import { createPortal } from "react-dom";
+import { useId, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 import { Button } from "../components/ui/button";
 import { Textarea } from "../components/ui/textarea";
-import { Field, FieldLabel } from "../components/ui/field";
+import { Field, FieldError, FieldLabel } from "../components/ui/field";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogTitle,
+} from "../components/ui/dialog";
+import { useSheet } from "../components/ui/useSheet";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "../components/ui/tooltip";
-import { Drawer } from "../components/Drawer";
 import { DashboardApiError } from "../http";
 import { conversationPath } from "./conversationRoutes";
 import { useForkConversation } from "./queries";
@@ -36,26 +42,22 @@ export function ForkConversationButton(props: ForkTarget) {
         />
         <TooltipContent size="compact">Fork after this message</TooltipContent>
       </Tooltip>
-      {open
-        ? createPortal(
-            <ForkConversationDialog
-              {...props}
-              onClose={() => setOpen(false)}
-            />,
-            document.body,
-          )
-        : null}
+      {open ? (
+        <ForkConversationDialog {...props} onClose={() => setOpen(false)} />
+      ) : null}
     </>
   );
 }
 
 function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
-  const titleId = useId();
   const inputId = useId();
+  const errorId = `${inputId}-error`;
+  const inputRef = useRef<HTMLTextAreaElement>(null);
   const [idempotencyKey] = useState(() => crypto.randomUUID());
   const [message, setMessage] = useState("");
   const navigate = useNavigate();
   const fork = useForkConversation(props.conversationId);
+  const sheet = useSheet(props.onClose, inputRef);
   const submit = () => {
     if (!message.trim() || fork.isPending) return;
     fork.mutate(
@@ -68,68 +70,72 @@ function ForkConversationDialog(props: ForkTarget & { onClose(): void }) {
       },
     );
   };
+  const error = fork.error
+    ? (fork.error instanceof DashboardApiError && fork.error.apiError) ||
+      "Could not fork the conversation. Try again."
+    : undefined;
   return (
-    <Drawer
-      closeLabel="Close fork dialog"
-      header={
-        <h2 id={titleId} className="m-0 text-lg font-semibold">
-          Fork Conversation
-        </h2>
-      }
-      titleId={titleId}
-      openKey={idempotencyKey}
-      onClose={() => {
-        if (!fork.isPending) props.onClose();
+    <Dialog
+      {...sheet.rootProps}
+      onOpenChange={(nextOpen, details) => {
+        // A pending fork must finish so its navigation is not lost.
+        if (!nextOpen && fork.isPending) {
+          details.cancel();
+          return;
+        }
+        sheet.rootProps.onOpenChange(nextOpen, details);
       }}
-      width="narrow"
     >
-      <form
-        className="grid gap-4 text-sm"
-        onSubmit={(event) => {
-          event.preventDefault();
-          submit();
-        }}
-      >
-        <p className="m-0">
-          Creates a fork of the conversation from this point.
-        </p>
-        <Field>
-          <FieldLabel htmlFor={inputId}>Message</FieldLabel>
-          <Textarea
-            id={inputId}
-            autoFocus
-            className="min-h-28 leading-relaxed"
-            placeholder="Message Junior…"
-            value={message}
-            disabled={fork.isPending}
-            onChange={(event) => setMessage(event.target.value)}
-            onKeyDown={(event) => {
-              // Same keys as the composer: Enter sends, Shift+Enter adds a line.
-              if (
-                event.key === "Enter" &&
-                !event.shiftKey &&
-                !event.nativeEvent.isComposing
-              ) {
-                event.preventDefault();
-                submit();
-              }
-            }}
-          />
-        </Field>
-        {fork.error ? (
-          <p role="alert" className="m-0 text-red-300">
-            {(fork.error instanceof DashboardApiError && fork.error.apiError) ||
-              "Could not fork the conversation. Try again."}
-          </p>
-        ) : null}
-        <Button
-          variant="primary"
-          type="submit"
-          disabled={!message.trim() || fork.isPending}
+      <DialogContent {...sheet.contentProps}>
+        <form
+          className="grid gap-4"
+          onSubmit={(event) => {
+            event.preventDefault();
+            submit();
+          }}
         >
-          {fork.isPending ? "Forking…" : "Fork and send"}
-        </Button>
-      </form>
-    </Drawer>
+          <DialogTitle>Fork Conversation</DialogTitle>
+          <Field>
+            <FieldLabel htmlFor={inputId}>Message</FieldLabel>
+            <Textarea
+              ref={inputRef}
+              id={inputId}
+              aria-describedby={error ? errorId : undefined}
+              aria-invalid={error ? true : undefined}
+              className="min-h-24 leading-relaxed"
+              placeholder="Message Junior…"
+              value={message}
+              disabled={fork.isPending}
+              onChange={(event) => setMessage(event.target.value)}
+              onKeyDown={(event) => {
+                // Same keys as the composer: Enter sends, Shift+Enter adds a line.
+                if (
+                  event.key === "Enter" &&
+                  !event.shiftKey &&
+                  !event.nativeEvent.isComposing
+                ) {
+                  event.preventDefault();
+                  submit();
+                }
+              }}
+            />
+            <FieldError id={errorId}>{error}</FieldError>
+          </Field>
+          <DialogFooter>
+            <DialogClose
+              disabled={fork.isPending}
+              render={<Button>Cancel</Button>}
+            />
+            <Button
+              variant="primary"
+              type="submit"
+              disabled={!message.trim() || fork.isPending}
+            >
+              {fork.isPending ? "Forking…" : "Fork and send"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }