Keep the connection form visible during sign-in

Rhys Sullivan committed 1 month ago

Commit 2fbc1fb1 parent 1b19b373 files · +46 −54Browse files

Unified · Split

3 files

.changeset/connection-oauth-cancel.md +1 −1
e2e/scenarios/connection-setup-ux.test.ts +22 −0
packages/react/src/components/add-account-modal.tsx +23 −53

.changeset/connection-oauth-cancel.md+1−1

@@ -2,4 +2,4 @@ · 1 unmodified line
2	"executor": patch	2	"executor": patch
3	---	3	---
4		4
5	Show a clear, cancellable sign-in state and prevent cancelled OAuth requests from disrupting a retry.	5	Let users cancel sign-in from the connection form and prevent cancelled OAuth requests from disrupting a retry.

e2e/scenarios/connection-setup-ux.test.ts+22−0

         await step("Sign in with a provider account without naming the connection", async () => {
           await visit(page, `/integrations/${slug}?addAccount=1`);
           await page.getByRole("tab", { name: "OAuth2", exact: true }).click();
+          // Attached previews can contain other compatible apps. Use this
+          // scenario's provider instance for the full callback and token exchange.
+          await page
+            .getByRole("radio", { name: new RegExp(slug.replace("setup-", ""), "i") })
+            .check();
           const opened = page.waitForEvent("popup");
           await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
           const popup = await opened;
         await step("Start provider sign-in without entering a name", async () => {
           await visit(page, `/integrations/${slug}?addAccount=1`);
           await page.getByRole("tab", { name: "OAuth2", exact: true }).click();
+          // Attached previews can contain other compatible apps. Use this
+          // scenario's provider instance for the full callback and token exchange.
+          await page
+            .getByRole("radio", { name: new RegExp(slug.replace("setup-", ""), "i") })
+            .check();
           const opened = page.waitForEvent("popup");
           await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
           const popup = await opened;
           ).toBe(true);
           expect(await cancel.isEnabled()).toBe(true);
           await page.getByText("Continue in the sign-in window", { exact: true }).waitFor();
+          expect(
+            await page.getByRole("tab", { name: "OAuth2", exact: true }).isVisible(),
+            "the authentication form stays visible during sign-in",
+          ).toBe(true);
+          expect(await page.getByRole("textbox", { name: /Display name/ }).isVisible()).toBe(true);
           expect(
             await page.getByRole("button", { name: "Connecting…", exact: true }).count(),
             "waiting for provider consent must not leave a dead Connecting button",
         try {
           await step("Cancel while the authorization response is still in flight", async () => {
             await visit(page, `/integrations/${slug}?addAccount=1`);
+            await page
+              .getByRole("radio", { name: new RegExp(slug.replace("setup-", ""), "i") })
+              .check();
             const opened = page.waitForEvent("popup");
             await page.getByRole("button", { name: "Connect with OAuth", exact: true }).click();
             const popup = await opened;
             const oldState = await started.promise;
+            expect(
+              await page.getByRole("textbox", { name: /Display name/ }).isVisible(),
+              "the connection form stays visible while sign-in is being prepared",
+            ).toBe(true);
             await page.getByRole("button", { name: "Cancel sign-in", exact: true }).click();
             await expect.poll(() => popup.isClosed()).toBe(true);
             const cancelled = page.waitForResponse((response) =>

packages/react/src/components/add-account-modal.tsx+23−53

   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "./dropdown-menu";
-import {
+import { ChevronDown, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "lucide-react";
-  ChevronDown,
-  EyeIcon,
-  EyeOffIcon,
-  LoaderCircleIcon,
-  PanelsTopLeftIcon,
-  PlusIcon,
-  XIcon,
-} from "lucide-react";
 import {
   Dialog,
   DialogContent,
             : "sm:max-w-xl",
         )}
       >
-        {signInPending ? (
+        {addingMethod && createCustomMethod ? (
-          <>
-            <DialogHeader>
-              <DialogTitle>Add connection · {integrationName}</DialogTitle>
-            </DialogHeader>
-            <div role="status" className="flex flex-col items-center px-4 py-8 text-center">
-              <div className="mb-5 flex size-12 items-center justify-center rounded-xl border border-border/70 bg-muted/30 text-foreground shadow-sm">
-                {oauthPopup.phase === "authorizing" ? (
-                  <PanelsTopLeftIcon aria-hidden="true" className="size-5" />
-                ) : (
-                  <LoaderCircleIcon
-                    aria-hidden="true"
-                    className="size-5 animate-spin motion-reduce:animate-none"
-                  />
-                )}
-              </div>
-              <p className="text-sm font-medium text-foreground">
-                {oauthPopup.phase === "authorizing"
-                  ? "Continue in the sign-in window"
-                  : oauthPopup.phase === "saving"
-                    ? "Finishing connection"
-                    : "Preparing sign-in"}
-              </p>
-              <DialogDescription className="mt-2 max-w-xs text-sm leading-relaxed">
-                {oauthPopup.phase === "authorizing"
-                  ? "If the window closed or sign-in stalled, cancel and try again."
-                  : oauthPopup.phase === "saving"
-                    ? "Sign-in complete. Updating your connections."
-                    : "The sign-in window will be ready shortly. You can cancel at any time."}
-              </DialogDescription>
-            </div>
-            <DialogFooter className="border-t border-border/60 pt-4 sm:justify-between">
-              <Button type="button" variant="ghost" onClick={close}>
-                Close
-              </Button>
-              {oauthPopup.phase !== "saving" ? (
-                <Button type="button" variant="outline" onClick={cancelSignIn}>
-                  Cancel sign-in
-                </Button>
-              ) : null}
-            </DialogFooter>
-          </>
-        ) : addingMethod && createCustomMethod ? (
           <>
             <DialogHeader className="border-b border-border/60 px-5 py-4">
               <DialogTitle className="text-base">Add authentication method</DialogTitle>
               </p>
             ) : null}
             <DialogFooter>
+              {signInPending ? (
+                <p role="status" className="flex-1 self-center text-xs text-muted-foreground">
+                  {oauthPopup.phase === "authorizing"
+                    ? "Continue in the sign-in window"
+                    : oauthPopup.phase === "saving"
+                      ? "Finishing connection…"
+                      : "Preparing sign-in…"}
+                </p>
+              ) : null}
               <Button type="button" variant="ghost" onClick={close} disabled={submitting || ccBusy}>
                 {isOAuth ? "Close" : "Cancel"}
               </Button>
               {/* Footer action, in precedence order:
+              - pending sign-in: cancel, or wait for an authorized connection to save;
               - transparent CIMD (no app registration): create/reuse a public
                 metadata-document client and start OAuth;
               - transparent DCR (no picker): a single Connect that runs
               - registering a BYO app: the form owns its own submit, no footer;
               - picked BYO OAuth app: Connect with OAuth / Connect (client creds);
               - credential/no-auth method: Add connection. */}
-              {cimdActive ? (
+              {signInPending ? (
+                oauthPopup.phase === "saving" ? (
+                  <Button type="button" loading>
+                    Finishing…
+                  </Button>
+                ) : (
+                  <Button type="button" variant="outline" onClick={cancelSignIn}>
+                    Cancel sign-in
+                  </Button>
+                )
+              ) : cimdActive ? (
                 <Button
                   type="button"
                   onClick={() => void handleCimdConnect()}