+
+ {t("portal.accountLink.rail.title", "Connect your Stirling account")}
+
+
+ {t(
+ "portal.accountLink.rail.sub",
+ "Unlocks teams, PDF processor, pipelines, and policies. PDF editing stays free.",
+ )}
+
+
+
+
+
+
+
+
{body}
- {/* The SaaS sign-in and the server link are separate outcomes. Say so when
- one worked and the other did not, or the admin re-runs the whole thing
- to fix a problem that is already half solved. */}
+ {/* Two separate outcomes: without this the admin re-runs the lot to fix a half-solved
+ problem. */}
{sessionRestored ? (
);
}
@@ -115,7 +115,6 @@ function failure(state: ConnectCallbackState, t: Translate) {
"portal.accountLink.connect.callback.expired.body",
"Connection requests are short lived. Start another one.",
),
- retryable: true,
};
case "rejected":
return {
@@ -128,7 +127,6 @@ function failure(state: ConnectCallbackState, t: Translate) {
"portal.accountLink.connect.callback.rejected.body",
"This request was declined or has already been used. Start another one if that was not intended.",
),
- retryable: true,
};
case "malformed":
return {
@@ -141,7 +139,6 @@ function failure(state: ConnectCallbackState, t: Translate) {
"portal.accountLink.connect.callback.malformed.body",
"This page was opened without a valid connection response. Start the connection from settings.",
),
- retryable: false,
};
default:
return {
@@ -156,7 +153,6 @@ function failure(state: ConnectCallbackState, t: Translate) {
"portal.accountLink.connect.callback.unfinished.body",
"Stirling did not confirm the connection. This is usually temporary.",
),
- retryable: true,
};
}
}
diff --git a/frontend/editor/src/portal/components/account-link/ConnectGuardedRoute.tsx b/frontend/editor/src/portal/components/account-link/ConnectGuardedRoute.tsx
new file mode 100644
index 0000000000..e5bd45eff9
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/ConnectGuardedRoute.tsx
@@ -0,0 +1,26 @@
+import { useEffect, type ReactNode } from "react";
+import { Navigate } from "react-router-dom";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
+
+interface Props {
+ children: ReactNode;
+ fallback: string;
+}
+
+/**
+ * At the route, not on the buttons: the pipeline builder is reachable from its list, the Documents
+ * queue, the connect flow's next steps and a typed URL, and a guard per entry point is one more to
+ * remember each time someone adds a link.
+ */
+export function ConnectGuardedRoute({ children, fallback }: Props) {
+ const { gated, loading, connect } = useConnectGate();
+
+ useEffect(() => {
+ if (gated) connect();
+ }, [gated, connect]);
+
+ // Unknown is not gated: bouncing first would throw a linked admin off a page they are entitled to.
+ if (loading) return null;
+ if (gated) return
- {}} mode={mode} />
- ,
+
+
+ {}}
+ mode={mode}
+ outcome={outcome}
+ />
+
+ ,
);
}
-/** Clicks the primary action (the secondary one is Cancel). */
-function clickContinue(getAllByRole: (role: string) => HTMLElement[]) {
- const buttons = getAllByRole("button");
- act(() => buttons[buttons.length - 1].click());
+function click(label: string | RegExp) {
+ act(() => screen.getByRole("button", { name: label }).click());
+}
+
+/** Read off the body because the dialog portals out; the badge itself is uninterpolated here. */
+function filledSteps(): number {
+ return document.body.querySelectorAll(
+ ".portal-stepmodal__progress .is-filled",
+ ).length;
}
describe("LinkAccountModal", () => {
@@ -36,6 +68,7 @@ describe("LinkAccountModal", () => {
beforeEach(() => {
vi.clearAllMocks();
+ fetchWallet.mockResolvedValue(freeWallet);
startConnect.mockResolvedValue({
phase: "PENDING",
authorizeUrl: AUTHORIZE,
@@ -54,28 +87,39 @@ describe("LinkAccountModal", () => {
value: {
origin: "http://localhost:5173",
hostname: "localhost",
+ href: "http://localhost:5173/app",
+ search: "",
assign,
},
});
});
+ it("opens on the pitch, and asks nothing of the backend until told", () => {
+ renderModal();
+
+ expect(screen.getByText(BENEFITS)).toBeTruthy();
+ expect(screen.getByRole("button", { name: CONNECT })).toBeTruthy();
+ expect(filledSteps()).toBe(1);
+ expect(startConnect).not.toHaveBeenCalled();
+ });
+
it("offers no sign-in form, because a sign-in started here cannot complete", () => {
const { container } = renderModal();
+ click(CONNECT);
- // The provider buttons this modal used to carry sent the admin to Stirling and
- // abandoned them there. Nothing should collect credentials on this origin.
+ // A sign-in started on this origin cannot complete, so nothing here may collect credentials.
expect(container.querySelector("input[type=password]")).toBeNull();
expect(container.querySelector("input[type=email]")).toBeNull();
});
- it("starts a link handshake and hands the browser to Stirling", async () => {
- const { getAllByRole } = renderModal();
-
- clickContinue(getAllByRole);
+ it("hands over on the first click, showing the ghost while it goes", async () => {
+ renderModal();
+ click(CONNECT);
await waitFor(() => expect(startConnect).toHaveBeenCalled());
- // Callback built from this page's own origin, which the backend then checks
- // against the request's Origin header.
+ expect(screen.getByText(GHOST)).toBeTruthy();
+ expect(filledSteps()).toBe(2);
+ // The backend checks this against the request's Origin header.
expect(startConnect).toHaveBeenCalledWith(
"localhost",
"http://localhost:5173/account-link/callback",
@@ -84,13 +128,16 @@ describe("LinkAccountModal", () => {
expect(startReauth).not.toHaveBeenCalled();
});
- it("uses the reauth endpoint when only the session needs renewing", async () => {
- const { getAllByRole } = renderModal("reauth");
+ it("uses the reauth endpoint, with no pitch and no steps", async () => {
+ renderModal("reauth");
- clickContinue(getAllByRole);
+ // A server that is already connected is not sold anything.
+ expect(screen.queryByText(BENEFITS)).toBeNull();
+ expect(screen.queryByText(/Step 1 of 3/)).toBeNull();
- // A different endpoint on purpose: reauth presents the device credential so
- // Stirling pins the handshake to the team that already owns this server.
+ click(/Sign in again/);
+
+ // A different endpoint: reauth presents the credential, so the team is pinned server-side.
await waitFor(() =>
expect(startReauth).toHaveBeenCalledWith(
"http://localhost:5173/account-link/callback",
@@ -100,14 +147,18 @@ describe("LinkAccountModal", () => {
await waitFor(() => expect(assign).toHaveBeenCalledWith(AUTHORIZE));
});
- it("stays put and explains itself when the handshake cannot start", async () => {
+ it("falls back to step 1 with the reason when the handshake cannot start", async () => {
startConnect.mockRejectedValue(new Error("offline"));
- const { getAllByRole } = renderModal();
- clickContinue(getAllByRole);
+ renderModal();
+ click(CONNECT);
await waitFor(() => expect(startConnect).toHaveBeenCalled());
expect(assign).not.toHaveBeenCalled();
+ // The ghost unmounts when the request settles, so the reason lands on step 1.
+ expect(await screen.findByText(/outbound network access/)).toBeTruthy();
+ expect(screen.getByText(BENEFITS)).toBeTruthy();
+ expect(filledSteps()).toBe(1);
});
it("does not navigate when there is nothing to navigate to", async () => {
@@ -119,10 +170,85 @@ describe("LinkAccountModal", () => {
teamId: 7,
});
- const { getAllByRole } = renderModal();
- clickContinue(getAllByRole);
+ renderModal();
+ click(CONNECT);
await waitFor(() => expect(startConnect).toHaveBeenCalled());
expect(assign).not.toHaveBeenCalled();
});
+
+ /** Busy is never cleared on success, because the page was meant to be gone. */
+ describe("coming back from a hand-off that never completed", () => {
+ it("clears the in-flight flag when the page is shown again", async () => {
+ renderModal();
+ click(CONNECT);
+
+ await waitFor(() => expect(screen.getByText(GHOST)).toBeTruthy());
+
+ act(() => {
+ window.dispatchEvent(new Event("pageshow"));
+ });
+
+ expect(screen.getByText(BENEFITS)).toBeTruthy();
+ expect(filledSteps()).toBe(1);
+ });
+
+ /**
+ * Not the close path itself (the host unmounts, so a fresh mount is clean by construction) but
+ * the property behind it: hoist the flag into UIContext and the trap returns, failing here.
+ */
+ it("keeps the in-flight flag local, so a fresh mount cannot inherit one", async () => {
+ const first = renderModal();
+ click(CONNECT);
+ await waitFor(() => expect(screen.getByText(GHOST)).toBeTruthy());
+
+ first.unmount();
+ renderModal();
+
+ expect(screen.getByText(BENEFITS)).toBeTruthy();
+ expect(screen.queryByText(GHOST)).toBeNull();
+ });
+ });
+
+ describe("resuming after the round trip", () => {
+ it("lands on step 3 rather than restarting the pitch", async () => {
+ renderModal("link", { state: "linked", sessionRestored: true });
+
+ expect(
+ await screen.findByText(/now runs against your Stirling account/),
+ ).toBeTruthy();
+ expect(screen.queryByText(BENEFITS)).toBeNull();
+ // Left on 2 of 3, arrived on 3: the whole reason the bar spans the redirect.
+ expect(filledSteps()).toBe(3);
+ expect(await screen.findByText(EMAIL)).toBeTruthy();
+ expect(await screen.findByText("Invite your team")).toBeTruthy();
+ });
+
+ it("opens a fresh handshake for a spent one, showing the ghost again", async () => {
+ renderModal("link", { state: "expired", sessionRestored: false });
+
+ expect(await screen.findByText("Request expired")).toBeTruthy();
+ click(/Try again/);
+
+ await waitFor(() => expect(startConnect).toHaveBeenCalled());
+ // Busy outranks the stale outcome, or they sit on "Request expired" until the browser goes.
+ expect(screen.getByText(GHOST)).toBeTruthy();
+ });
+
+ it("offers no retry while the claim is still in flight", async () => {
+ renderModal("link", { state: "working", sessionRestored: false });
+
+ expect(await screen.findByText(/Finishing the connection/)).toBeTruthy();
+ expect(screen.queryByRole("button", { name: /Try again/ })).toBeNull();
+ });
+
+ it("does not offer a retry for a response it could not read", async () => {
+ renderModal("link", { state: "malformed", sessionRestored: false });
+
+ expect(
+ await screen.findByText(/Could not read the response/),
+ ).toBeTruthy();
+ expect(screen.queryByRole("button", { name: /Try again/ })).toBeNull();
+ });
+ });
});
diff --git a/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx b/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
index 8bd47a9eb4..2b6315eb17 100644
--- a/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
+++ b/frontend/editor/src/portal/components/account-link/LinkAccountModal.tsx
@@ -1,143 +1,205 @@
-import { useCallback, useState } from "react";
import { useTranslation } from "react-i18next";
-import { Banner, Button, Modal } from "@app/ui";
-import { withBasePath } from "@app/constants/app";
-import { startConnect, startReauth } from "@portal/api/link";
-import { isSaasSupabaseConfigured } from "@portal/auth/saasSupabase";
-import "@portal/components/account-link/LinkAccountModal.css";
+import { Button } from "@app/ui";
+import { FlowModal } from "@portal/components/shared/FlowModal";
+import { StepModalHeader } from "@portal/components/shared/StepModalHeader";
+import { ConnectAskStep } from "@portal/components/account-link/connect/ConnectAskStep";
+import { ConnectHandoffGhost } from "@portal/components/account-link/connect/ConnectHandoffGhost";
+import {
+ ConnectCallbackView,
+ isRetryableOutcome,
+ type ConnectOutcome,
+} from "@portal/components/account-link/ConnectCallbackView";
+import { useConnectHandoff } from "@portal/hooks/useConnectHandoff";
+import "@portal/views/ConnectCallback.css";
+
+/**
+ * Ordered, so a step's position in this list is its number and the list's length is the total.
+ * Adding or removing a step means editing this and its arm of `stepBody`, nothing else.
+ */
+const STEP_ORDER = ["ask", "handoff", "outcome"] as const;
+
+type StepId = (typeof STEP_ORDER)[number];
interface Props {
open: boolean;
onClose: () => void;
- /**
- * "link" connects this server to a team for the first time; "reauth" only re-establishes the browser's Stirling session for a server that is already linked.
- */
+ /** "reauth" only re-establishes the browser session, so it stays one step with no pitch. */
mode?: "link" | "reauth";
+ /** Published by the callback route; present means the admin is returning from Stirling. */
+ outcome?: ConnectOutcome | null;
}
-/** Sends the admin off to Stirling to connect this server. */
-export function LinkAccountModal({ open, onClose, mode = "link" }: Props) {
+/**
+ * The progress bar spans the redirect on purpose: the admin leaves on the hand-off and returns on
+ * the outcome step of the dialog they left, rather than being greeted by a different one.
+ */
+export function LinkAccountModal({
+ open,
+ onClose,
+ mode = "link",
+ outcome = null,
+}: Props) {
const { t } = useTranslation();
const reauth = mode === "reauth";
- const [busy, setBusy] = useState(false);
- const [error, setError] = useState(null);
+ const handoff = useConnectHandoff(reauth);
- const begin = useCallback(async () => {
- setBusy(true);
- setError(null);
- try {
- const callbackUrl = new URL(
- withBasePath("/account-link/callback"),
- window.location.origin,
- ).toString();
- const status = reauth
- ? await startReauth(callbackUrl)
- : await startConnect(window.location.hostname, callbackUrl);
- if (status.authorizeUrl) {
- window.location.assign(status.authorizeUrl);
- return;
- }
- // Already linked, or a handshake we cannot act on. Nothing to navigate to.
- setError(
- t(
- "portal.accountLink.modal.noAuthorizeUrl",
- "Stirling did not return somewhere to continue. Try again in a moment.",
+ // Busy outranks a stale outcome, or a retry sits on the old result until the browser leaves.
+ let step: StepId = "ask";
+ if (handoff.busy) step = "handoff";
+ else if (outcome) step = "outcome";
+
+ const title = stepTitle();
+ const current = STEP_ORDER.indexOf(step) + 1;
+
+ // Re-auth is one step, so it carries no count and no progress bar.
+ const stepChrome = reauth
+ ? {}
+ : {
+ step: current,
+ total: STEP_ORDER.length,
+ stepLabel: t(
+ "portal.accountLink.connect.step",
+ "Step {{current}} of {{total}}",
+ { current, total: STEP_ORDER.length },
),
- );
- } catch {
- setError(
- t(
- "portal.accountLink.modal.startFailed",
- "Could not reach Stirling to start the connection. Check this server's outbound network access, then try again.",
- ),
- );
- } finally {
- setBusy(false);
- }
- }, [reauth, t]);
+ };
return (
-
-
+ openLinkModal()}>
- {t("portal.accountLink.gate.action", "Link account")}
-
- }
- />
- );
-}
diff --git a/frontend/editor/src/portal/components/account-link/connect/ConnectAskStep.tsx b/frontend/editor/src/portal/components/account-link/connect/ConnectAskStep.tsx
new file mode 100644
index 0000000000..7c795645b7
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/connect/ConnectAskStep.tsx
@@ -0,0 +1,52 @@
+import { useTranslation } from "react-i18next";
+import { Banner } from "@app/ui";
+import { isSaasSupabaseConfigured } from "@portal/auth/saasSupabase";
+import { ConnectBenefitsSlide } from "@portal/components/account-link/connect/ConnectBenefitsSlide";
+import "@portal/components/account-link/connect/connect.css";
+
+interface Props {
+ /** Re-auth says why it is being asked; a first link is pitched instead. */
+ reauth: boolean;
+ /** A hand-off that failed to start drops back here, so this is where its reason belongs. */
+ error?: string | null;
+}
+
+export function ConnectAskStep({ reauth, error }: Props) {
+ const { t } = useTranslation();
+
+ return (
+ <>
+ {reauth ? (
+
+ {t("portal.accountLink.modal.loginNotConfigured.before", "Set")}{" "}
+
+ )}
+
+ {error && {error} }
+
+ );
+}
diff --git a/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.stories.tsx b/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.stories.tsx
new file mode 100644
index 0000000000..bdad6f32b0
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { ConnectBenefitsSlide } from "@portal/components/account-link/connect/ConnectBenefitsSlide";
+
+const meta: Meta = {
+ title: "Portal/AccountLink/Connect/BenefitsSlide",
+ component: ConnectBenefitsSlide,
+};
+export default meta;
+type Story = StoryObj;
+
+/** Step 1 of the Connect flow: the case for linking. */
+export const Default: Story = {};
diff --git a/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.tsx b/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.tsx
new file mode 100644
index 0000000000..a0258f7802
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/connect/ConnectBenefitsSlide.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from "react-i18next";
+import "@portal/components/account-link/connect/connect.css";
+
+/**
+ * Processor is one row naming its parts rather than four competing ones, and credits come last:
+ * first, and the screen reads as a price list.
+ *
+ *
+
+ {}} />
+
+ ,
+ );
+
+describe("ConnectDoneSlide", () => {
+ it("shows the wallet's remaining balance, not a fixed grant", async () => {
+ fetchWallet.mockResolvedValue(wallet(128));
+ renderDone();
+ await waitFor(() => expect(screen.getByText("128")).toBeTruthy());
+ });
+
+ it("shows a spent grant as zero rather than hiding it", async () => {
+ fetchWallet.mockResolvedValue(wallet(0));
+ renderDone();
+ await waitFor(() => expect(screen.getByText("0")).toBeTruthy());
+ });
+
+ it("omits the meter entirely when the wallet cannot be read", async () => {
+ fetchWallet.mockRejectedValue(new Error("not linked"));
+ renderDone();
+ await waitFor(() =>
+ expect(screen.getByText("Invite your team")).toBeTruthy(),
+ );
+ expect(document.querySelector(".paygf-meter")).toBeNull();
+ expect(screen.queryByText(SWITCH_ON)).toBeNull();
+ });
+
+ it("asks the admin to switch the Processor on once the trial is nearly gone", async () => {
+ fetchWallet.mockResolvedValue(wallet(40));
+ renderDone();
+ await waitFor(() => expect(screen.getByText(SWITCH_ON)).toBeTruthy());
+ const rows = [...document.querySelectorAll(".portal-connect__next-item")];
+ expect(rows[0]?.textContent).toMatch(SWITCH_ON);
+ });
+
+ it("leaves the upgrade unmentioned while there is trial left to use", async () => {
+ fetchWallet.mockResolvedValue(wallet(500));
+ renderDone();
+ await waitFor(() =>
+ expect(document.querySelector(".paygf-meter")).toBeTruthy(),
+ );
+ expect(screen.queryByText(SWITCH_ON)).toBeNull();
+ });
+
+ it("always offers the next steps", async () => {
+ fetchWallet.mockResolvedValue(wallet(500));
+ renderDone();
+ await waitFor(() =>
+ expect(screen.getByText("Invite your team")).toBeTruthy(),
+ );
+ expect(screen.getByText("Set up a pipeline")).toBeTruthy();
+ expect(screen.getByText("Add a policy")).toBeTruthy();
+ });
+});
diff --git a/frontend/editor/src/portal/components/account-link/connect/ConnectDoneSlide.tsx b/frontend/editor/src/portal/components/account-link/connect/ConnectDoneSlide.tsx
new file mode 100644
index 0000000000..4854048ab8
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/connect/ConnectDoneSlide.tsx
@@ -0,0 +1,157 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { MeterBar, remainingMeter } from "@app/billing";
+import { fetchWallet, type Wallet } from "@portal/api/billing";
+import { useLinkedAccountEmail } from "@portal/hooks/useLinkedAccountEmail";
+import { VIEW_PATHS, toPortalPath } from "@portal/contexts/ViewContext";
+import "@portal/components/billing/billing.css";
+import "@portal/components/account-link/connect/connect.css";
+
+interface Props {
+ /** Closes the dialog first, so a next step does not land behind the overlay. */
+ onNavigate: () => void;
+}
+
+/** Below this the meter grows an upgrade row; above it the meter is information, not a prompt. */
+const LOW_CREDITS = 100;
+
+function Chevron() {
+ return (
+
+ );
+}
+
+/**
+ * The bar without the plan card around it: at dialog width that card's headline and price wrapped
+ * over four lines. Upgrading is a row rather than a button on the bar for the same reason, and it
+ * goes to Usage rather than starting checkout, which already lives there with its quotes and
+ * resumable bundle.
+ */
+export function ConnectDoneSlide({ onNavigate }: Props) {
+ const { t } = useTranslation();
+ const navigate = useNavigate();
+ const email = useLinkedAccountEmail();
+ const [wallet, setWallet] = useState(null);
+
+ useEffect(() => {
+ let cancelled = false;
+ void fetchWallet()
+ .then((w) => {
+ if (!cancelled) setWallet(w);
+ })
+ .catch(() => {
+ // The wallet needs a live SaaS session and a team that has finished provisioning. Neither
+ // is guaranteed the instant a link completes, and neither is worth blocking this screen on.
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, []);
+
+ const go = (path: string) => {
+ onNavigate();
+ navigate(path);
+ };
+
+ const lowOnCredits = wallet != null && wallet.freeRemaining < LOW_CREDITS;
+
+ const nextSteps: { key: string; label: string; path: string }[] = [
+ ...(lowOnCredits
+ ? [
+ {
+ key: "processor",
+ label: t(
+ "portal.accountLink.connect.done.switchOnProcessor",
+ "Switch on the Processor",
+ ),
+ path: toPortalPath(VIEW_PATHS.usage),
+ },
+ ]
+ : []),
+ {
+ key: "team",
+ label: t(
+ "portal.accountLink.connect.done.inviteTeam",
+ "Invite your team",
+ ),
+ path: toPortalPath(VIEW_PATHS.users),
+ },
+ {
+ key: "pipeline",
+ label: t(
+ "portal.accountLink.connect.done.buildPipeline",
+ "Set up a pipeline",
+ ),
+ path: `${toPortalPath(VIEW_PATHS.pipelines)}/new`,
+ },
+ {
+ key: "policy",
+ label: t("portal.accountLink.connect.done.addPolicy", "Add a policy"),
+ path: toPortalPath(VIEW_PATHS.policies),
+ },
+ ];
+
+ return (
+ <>
+ {wallet && (
+ = {
- title: "Portal/Billing/LinkAccountPrompt",
- component: LinkAccountPrompt,
- parameters: { layout: "padded" },
-};
-export default meta;
-type Story = StoryObj;
-
-/** Unlinked billing page — CTA opens the login modal (UIProvider from the preview decorator). */
-export const Default: Story = {};
diff --git a/frontend/editor/src/portal/components/billing/LinkAccountPrompt.tsx b/frontend/editor/src/portal/components/billing/LinkAccountPrompt.tsx
deleted file mode 100644
index 394668c56b..0000000000
--- a/frontend/editor/src/portal/components/billing/LinkAccountPrompt.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { Button, Card, EmptyState } from "@app/ui";
-import { useUI } from "@portal/contexts/UIContext";
-
-/**
- * Unlinked state — the billing page asks the admin to link their Stirling
- * account to claim the 500-PDF free grant. The CTA opens the login modal
- * directly (no detour through Settings).
- */
-export function LinkAccountPrompt() {
- const { t } = useTranslation();
- const { openLinkModal } = useUI();
- return (
-
- openLinkModal()}>
- {t("portal.billing.linkPrompt.cta", "Link Stirling account")}
-
- }
- />
-
- );
-}
diff --git a/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx b/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
index f15d8ade51..097eebd52e 100644
--- a/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
+++ b/frontend/editor/src/portal/components/billing/PortalBillingGate.test.tsx
@@ -1,39 +1,82 @@
import { beforeEach, describe, expect, it, vi } from "vitest";
import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
-const linkState = { isLinked: false };
+/**
+ * Usage must not render while unlinked: it reports `linked` as a fact from its wallet read, so a
+ * browser holding a SaaS session with no link to this server would flip the whole portal to linked.
+ */
+const gate = { gated: false, loading: false, available: true };
+const connect = vi.fn();
+const applyLinkFacts = vi.fn();
+
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({ ...gate, connect, guard: (f: unknown) => f }),
+}));
vi.mock("@portal/contexts/LinkContext", () => ({
- useLink: () => linkState,
- useApplyLinkFacts: () => vi.fn(),
+ useApplyLinkFacts: () => applyLinkFacts,
}));
vi.mock("@portal/contexts/UIContext", () => ({
useUI: () => ({ openLinkModal: vi.fn() }),
}));
-vi.mock("@portal/components/billing/LinkAccountPrompt", () => ({
- LinkAccountPrompt: () => ,
-}));
vi.mock("@portal/views/Usage", () => ({
- Usage: () => ,
+ Usage: ({ onWalletLoaded }: { onWalletLoaded?: (w: unknown) => void }) => {
+ onWalletLoaded?.({ status: "free" });
+ return ;
+ },
}));
import { PortalBillingGate } from "@portal/components/billing/PortalBillingGate";
+const renderGate = () =>
+ render(
+
+
+
+ ,
+ );
+
describe("PortalBillingGate — self-hosted", () => {
beforeEach(() => {
- linkState.isLinked = false;
+ connect.mockReset();
+ applyLinkFacts.mockReset();
+ gate.gated = false;
+ gate.loading = false;
});
- it("shows the link prompt when unlinked (billing gated on link)", () => {
- linkState.isLinked = false;
- render(
{t( @@ -44,21 +59,14 @@ export function ConnectCallbackView({ if (state === "linked") { return (
-
+
- {/* The inverse of the failure note below: the link took but the sign-in did
- not, which otherwise only shows up later as "session expired" on a page
- that gives no hint the two are related. */}
+
+ {/* Link took, sign-in did not: otherwise this resurfaces later as "session expired" with
+ nothing tying it back here. */}
{sessionRestored ? null : (
);
}
- const { tone, title, body, retryable } = failure(state, t);
+ const { tone, title, body } = failure(state, t);
return (
{t( - "portal.accountLink.connect.callback.linked.body", - "This server is connected to your Stirling account.", + "portal.accountLink.connect.done.lede", + "This server now runs against your Stirling account.", )} -
{t( @@ -67,22 +75,19 @@ export function ConnectCallbackView({ )}
)} - +{t( @@ -91,11 +96,6 @@ export function ConnectCallbackView({ )}
) : null} -
-
- {t("portal.accountLink.modal.loginNotConfigured.before", "Set")}{" "}
-
- )}
-
- {error && {error} }
-
-
- -
-
- - {t( - "portal.accountLink.modal.step1", - "We send you to stirling.com to sign in. Any sign-in method works there, including Google and single sign-on.", - )} - -
- - {t( - "portal.accountLink.modal.step2", - "You check this server's address and approve it. A team owner has to do this the first time.", - )} - -
- - {t( - "portal.accountLink.modal.step3", - "Stirling brings you straight back here and finishes up.", - )} - -
VITE_SUPABASE_URL{" "}
- {t("portal.accountLink.modal.loginNotConfigured.and", "and")}{" "}
- VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY{" "}
- {t(
- "portal.accountLink.modal.loginNotConfigured.after",
- "so this server can finish the connection when you come back.",
- )}
-
-
-
-
- + {t( + "portal.accountLink.connect.handoff.reauthLede", + "Your Stirling session expired. Signing in again keeps usage and billing visible. This server stays connected either way.", + )} +
+ ) : ( +VITE_SUPABASE_URL{" "}
+ {t("portal.accountLink.modal.loginNotConfigured.and", "and")}{" "}
+ VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY{" "}
+ {t(
+ "portal.accountLink.modal.loginNotConfigured.after",
+ "so this server can finish the connection when you come back.",
+ )}
+ TODO(#7712): the credits row promises a monthly allowance the billing model does not grant — + * {@code freeGrantUnits} is a one-time lifetime pool — so either the grant becomes recurring or the + * copy drops "per month" before this reaches customers. + */ +export function ConnectBenefitsSlide() { + const { t } = useTranslation(); + + const unlocks: { key: string; label: string; detail: string }[] = [ + { + key: "processor", + label: t( + "portal.accountLink.connect.benefits.processorLabel", + "Processor", + ), + detail: t( + "portal.accountLink.connect.benefits.processorDetail", + "Pipelines, policies, sources and audit", + ), + }, + { + key: "teams", + label: t("portal.accountLink.connect.benefits.teamsLabel", "Teams"), + detail: t( + "portal.accountLink.connect.benefits.teamsDetail", + "Free for up to 5 users", + ), + }, + { + key: "credits", + label: t("portal.accountLink.connect.benefits.creditsLabel", "Credits"), + detail: t( + "portal.accountLink.connect.benefits.creditsDetail", + "500 free per month", + ), + }, + ]; + + return ( +
-
+ {unlocks.map((unlock) => (
+
- {unlock.label} +
- {unlock.detail} +
+
+ ))}
+
+ {/* No status chip: its tone goes red on an exhausted trial, which on a success screen
+ reads as something having gone wrong. */}
+
+ )}
+
+ {/* Proves it landed on the account they meant. Read from the session the callback deposited,
+ so it is absent exactly when that hand-off failed — which the note above already says. */}
+ {email && (
+
+
+ {t("portal.accountLink.connect.done.accountLabel", "Account")}
+
+ {email}
+
+ )}
+
+ -
+ {nextSteps.map((step) => (
+
- + + + ))} +
+
+ );
+}
diff --git a/frontend/editor/src/portal/components/account-link/connect/connect.css b/frontend/editor/src/portal/components/account-link/connect/connect.css
new file mode 100644
index 0000000000..393695bb0a
--- /dev/null
+++ b/frontend/editor/src/portal/components/account-link/connect/connect.css
@@ -0,0 +1,112 @@
+/* Connect flow, the three account-link steps.
+
+ Deliberately flat: bordered rows and plain type, not icon tiles or coloured
+ cards. FlowModal stacks and spaces the body, so these blocks own only their
+ own internals. */
+
+.portal-connect__lede {
+ margin: 0;
+ font-size: 0.875rem;
+ line-height: 1.55;
+ color: var(--c-text-muted);
+}
+
+.portal-connect__list {
+ margin: 0;
+ border-top: 1px solid var(--c-border);
+}
+
+.portal-connect__row {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 1rem;
+ padding: 0.5rem 0;
+ border-bottom: 1px solid var(--c-border);
+}
+
+.portal-connect__row-label {
+ font-size: 0.8125rem;
+ font-weight: 600;
+ color: var(--c-text);
+}
+
+.portal-connect__row-detail {
+ margin: 0;
+ font-size: 0.8125rem;
+ color: var(--c-text-muted);
+ text-align: right;
+}
+
+/* ── Step 2: the ghost ──────────────────────────────────────────────────── */
+
+.portal-connect__ghost {
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+}
+
+.portal-connect__ghost-bars {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+/* ── Step 3 ─────────────────────────────────────────────────────────────── */
+
+/* Standalone, so it needs the top edge the benefits list would have given it. */
+.portal-connect__row--standalone {
+ border-top: 1px solid var(--c-border);
+}
+
+/* The shared bar without the plan card it wears on Usage; padded into the row rhythm. */
+.portal-connect__meter {
+ padding: 0.25rem 0 0.5rem;
+}
+
+/* Rows, not full-width buttons: three competing primaries were the loudest thing
+ on a screen whose job is to confirm. Same flat row as step 1, so both ends match. */
+.portal-connect__next {
+ display: flex;
+ flex-direction: column;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ border-top: 1px solid var(--c-border);
+}
+
+/* The Account row above draws a bottom edge; both would render as a double line. */
+.portal-connect__row + .portal-connect__next {
+ border-top: 0;
+}
+
+.portal-connect__next-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 1rem;
+ width: 100%;
+ padding: 0.625rem 0.25rem;
+ border: 0;
+ border-bottom: 1px solid var(--c-border);
+ background: none;
+ font: inherit;
+ font-size: 0.875rem;
+ font-weight: 500;
+ color: var(--c-text);
+ text-align: left;
+ cursor: pointer;
+}
+
+.portal-connect__next-item:hover {
+ color: var(--c-accent-text);
+}
+
+.portal-connect__next-chevron {
+ flex: none;
+ color: var(--c-text-subtle);
+}
+
+.portal-connect__next-item:hover .portal-connect__next-chevron {
+ color: var(--c-accent-text);
+}
diff --git a/frontend/editor/src/portal/components/billing/LinkAccountPrompt.stories.tsx b/frontend/editor/src/portal/components/billing/LinkAccountPrompt.stories.tsx
deleted file mode 100644
index 20a9ab2e80..0000000000
--- a/frontend/editor/src/portal/components/billing/LinkAccountPrompt.stories.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { LinkAccountPrompt } from "@portal/components/billing/LinkAccountPrompt";
-import "@portal/components/billing/billing.css";
-
-const meta: Meta+ {t( + "portal.accountLink.connect.handoff.going", + "Taking you to stirling.com", + )} +
+ +
+
+ Self-hosted (this base): billing only makes sense once the instance has - * linked its SaaS account, so gate on link state — unlinked shows the link prompt; - * linked renders the (flavor-agnostic) Usage page and maps its callbacks onto the - * link/tier dimension: the wallet's subscription status refines the plan/tier - * badge, and a lapsed SaaS session re-opens the account-link re-auth. This keeps - * the "link" concept entirely out of the Usage page. The SaaS build shadows this - * with a passthrough — there is no linking there. + *
Usage must not render while unlinked: {@link onWalletLoaded} reports linked as a fact, and the
+ * browser can hold a SaaS session with no link to this server, so rendering it flipped the portal
+ * to linked.
*/
export function PortalBillingGate() {
- const { isLinked } = useLink();
const applyLinkFacts = useApplyLinkFacts();
const { openLinkModal } = useUI();
@@ -27,6 +24,9 @@ export function PortalBillingGate() {
);
const onReauth = useCallback(() => openLinkModal("reauth"), [openLinkModal]);
- if (!isLinked) return
{brand ? (
+ {/* `wordmark`, not `wordmark-light-only`: theme.css hides the former in dark mode and
+ has no rule for the latter, so both used to render at once. */}
},
{ id: "integrations", icon: (
+ null,
+ );
// When the link modal is opened from inside Settings, remember the section to
// restore so closing the modal returns the admin to where they were.
const [reopenSettingsAfterLink, setReopenSettingsAfterLink] = useState<
@@ -155,9 +166,19 @@ export function UIProvider({ children }: { children: ReactNode }) {
setTrialSetupRequested(true);
},
clearTrialSetupRequest: () => setTrialSetupRequested(false),
+ connectOutcome,
+ publishConnectOutcome: (outcome: ConnectOutcome) => {
+ setMobileNavOpen(false);
+ setConnectOutcome(outcome);
+ setLinkModalMode("link");
+ setLinkModalOpen(true);
+ },
+ clearConnectOutcome: () => setConnectOutcome(null),
closeLinkModal: () => {
setLinkModalOpen(false);
setLinkModalMode("link");
+ // A reopen from a CTA is a fresh flow, not a handshake already dismissed.
+ setConnectOutcome(null);
if (reopenSettingsAfterLink) {
setSettingsInitialSection(reopenSettingsAfterLink);
setSettingsInitialFocus(null);
@@ -177,6 +198,7 @@ export function UIProvider({ children }: { children: ReactNode }) {
linkModalMode,
reopenSettingsAfterLink,
trialSetupRequested,
+ connectOutcome,
],
);
diff --git a/frontend/editor/src/portal/hooks/useConnectGate.test.tsx b/frontend/editor/src/portal/hooks/useConnectGate.test.tsx
new file mode 100644
index 0000000000..00cd34d643
--- /dev/null
+++ b/frontend/editor/src/portal/hooks/useConnectGate.test.tsx
@@ -0,0 +1,78 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { PortalTestProviders } from "@portal/test/TestQueryProvider";
+import { LinkProvider, type LinkState } from "@portal/contexts/LinkContext";
+import { UIProvider } from "@portal/contexts/UIContext";
+
+/**
+ * The gate answers two questions, and conflating them is the failure that matters: an instance
+ * running with the account-link flag off CANNOT link, so gating on link state alone would lock
+ * Pipelines, Policies, Users, Sources and Integrations on every default install with no way out.
+ */
+const { json } = vi.hoisted(() => ({ json: vi.fn() }));
+vi.mock("@portal/api/http", () => ({
+ apiClient: { local: { json } },
+ errorMessage: (e: unknown) => String(e),
+}));
+
+import { useConnectGate } from "@portal/hooks/useConnectGate";
+
+function Probe() {
+ const { gated, loading, available } = useConnectGate();
+ return (
+
+ {loading
+ ? "loading"
+ : `${available ? "available" : "unavailable"}:${gated ? "gated" : "open"}`}
+
+ );
+}
+
+function renderProbe(linkState: LinkState) {
+ return render(
+
+
+
+
+
+ ,
+ );
+}
+
+const settled = async (expected: string) =>
+ waitFor(() => expect(screen.getByTestId("state").textContent).toBe(expected));
+
+describe("useConnectGate", () => {
+ beforeEach(() => json.mockReset());
+
+ it("gates an unlinked instance that can link", async () => {
+ json.mockResolvedValue({ accountLinkAvailable: true });
+ renderProbe("unlinked");
+ await settled("available:gated");
+ });
+
+ it("does not gate when linking is unavailable, whatever the link state", async () => {
+ json.mockResolvedValue({ accountLinkAvailable: false });
+ renderProbe("unlinked");
+ await settled("unavailable:open");
+ });
+
+ it("does not gate a linked instance", async () => {
+ json.mockResolvedValue({ accountLinkAvailable: true });
+ renderProbe("linked-free");
+ await settled("available:open");
+ });
+
+ it("treats a missing flag as unavailable rather than gating on a guess", async () => {
+ json.mockResolvedValue({});
+ renderProbe("unlinked");
+ await settled("unavailable:open");
+ });
+
+ it("does not gate while the capability is still unknown", async () => {
+ json.mockResolvedValue({ accountLinkAvailable: true });
+ renderProbe("unlinked");
+ expect(screen.getByTestId("state").textContent).toBe("loading");
+ });
+});
diff --git a/frontend/editor/src/portal/hooks/useConnectGate.ts b/frontend/editor/src/portal/hooks/useConnectGate.ts
new file mode 100644
index 0000000000..253ee26212
--- /dev/null
+++ b/frontend/editor/src/portal/hooks/useConnectGate.ts
@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { apiClient } from "@portal/api/http";
+import { qk } from "@portal/queries/keys";
+import { useLinkOptional } from "@portal/contexts/LinkContext";
+import { useUI } from "@portal/contexts/UIContext";
+import { useDevConnectBypass } from "@portal/hooks/useDevConnectBypass";
+
+interface AppConfigShape {
+ accountLinkAvailable?: boolean;
+}
+
+interface ConnectGate {
+ /** Can link but has not, so gated features must ask first. */
+ gated: boolean;
+ /** Capability still unknown; hold the decision rather than flash a gate. */
+ loading: boolean;
+ /** Whether linking is possible here at all, i.e. the feature flag is on. */
+ available: boolean;
+ connect: () => void;
+ /** Wraps a create or edit handler so the click asks for a connection instead. */
+ guard: (
+ action: (...args: A) => void,
+ ) => (...args: A) => void;
+}
+
+/**
+ * Two facts, not one: linked, and *could* be linked. The account-link endpoints 404 with the flag
+ * off, which the client cannot tell from "not linked yet", so gating on link state alone would lock
+ * these features on every default install.
+ */
+export function useConnectGate(): ConnectGate {
+ // Optional: the SaaS portal mounts no LinkProvider, and no provider means nothing to gate.
+ const link = useLinkOptional();
+ const { openLinkModal } = useUI();
+ const devBypass = useDevConnectBypass();
+
+ const query = useQuery({
+ queryKey: qk.appConfig(),
+ queryFn: () =>
+ apiClient.local.json("/api/v1/config/app-config"),
+ });
+
+ const available = Boolean(query.data?.accountLinkAvailable) && link != null;
+ const loading = query.isPending;
+ const gated = available && !link?.isLinked && !devBypass;
+
+ const connect = useCallback(() => openLinkModal(), [openLinkModal]);
+
+ const guard = useCallback(
+ (action: (...args: A) => void) =>
+ (...args: A) => {
+ if (gated) {
+ openLinkModal();
+ return;
+ }
+ action(...args);
+ },
+ [gated, openLinkModal],
+ );
+
+ return { gated, loading, available, connect, guard };
+}
diff --git a/frontend/editor/src/portal/hooks/useConnectHandoff.ts b/frontend/editor/src/portal/hooks/useConnectHandoff.ts
new file mode 100644
index 0000000000..1349086085
--- /dev/null
+++ b/frontend/editor/src/portal/hooks/useConnectHandoff.ts
@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { withBasePath } from "@app/constants/app";
+import { startConnect, startReauth } from "@portal/api/link";
+
+interface ConnectHandoff {
+ /** Stays true through a successful hand-off: the page is leaving, so nothing resolves. */
+ busy: boolean;
+ error: string | null;
+ begin: () => void;
+}
+
+export function useConnectHandoff(reauth: boolean): ConnectHandoff {
+ const { t } = useTranslation();
+ const [busy, setBusy] = useState(false);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ // Back from Stirling can restore this page with its heap intact, leaving busy stuck on and the
+ // dialog pinned to the ghost step. Being shown at all means we are not mid-navigation.
+ const shown = () => setBusy(false);
+ window.addEventListener("pageshow", shown);
+ return () => window.removeEventListener("pageshow", shown);
+ }, []);
+
+ const begin = useCallback(() => {
+ setBusy(true);
+ setError(null);
+ void (async () => {
+ try {
+ // Stated, not inferred: only the frontend knows its own base path.
+ const callbackUrl = new URL(
+ withBasePath("/account-link/callback"),
+ window.location.origin,
+ ).toString();
+ const status = reauth
+ ? await startReauth(callbackUrl)
+ : await startConnect(window.location.hostname, callbackUrl);
+ if (status.authorizeUrl) {
+ window.location.assign(status.authorizeUrl);
+ return;
+ }
+ // Already linked, or a handshake we cannot act on. Nothing to navigate to.
+ setError(
+ t(
+ "portal.accountLink.modal.noAuthorizeUrl",
+ "Stirling did not return somewhere to continue. Try again in a moment.",
+ ),
+ );
+ setBusy(false);
+ } catch {
+ setError(
+ t(
+ "portal.accountLink.modal.startFailed",
+ "Could not reach Stirling to start the connection. Check this server's outbound network access, then try again.",
+ ),
+ );
+ setBusy(false);
+ }
+ })();
+ }, [reauth, t]);
+
+ return { busy, error, begin };
+}
diff --git a/frontend/editor/src/portal/hooks/useConnectPrompt.test.tsx b/frontend/editor/src/portal/hooks/useConnectPrompt.test.tsx
new file mode 100644
index 0000000000..dc54fce35c
--- /dev/null
+++ b/frontend/editor/src/portal/hooks/useConnectPrompt.test.tsx
@@ -0,0 +1,74 @@
+import { describe, expect, it, vi, beforeEach } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+
+/**
+ * The cadence decision: dismissible, but it always comes back. Persisting "seen" would end the ask
+ * after one dismissal, so the marker has to be session scoped and has to be written when the prompt
+ * opens rather than when it closes, or an admin who ignores the dialog gets it again on every
+ * re-render.
+ */
+const { connect, gate } = vi.hoisted(() => ({
+ connect: vi.fn(),
+ gate: { gated: true, loading: false, available: true },
+}));
+
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({ ...gate, connect, guard: (f: unknown) => f }),
+}));
+
+import { useConnectPrompt } from "@portal/hooks/useConnectPrompt";
+
+function Probe() {
+ useConnectPrompt();
+ return null;
+}
+
+describe("useConnectPrompt", () => {
+ beforeEach(() => {
+ connect.mockReset();
+ sessionStorage.clear();
+ gate.gated = true;
+ gate.loading = false;
+ });
+
+ it("opens the flow once while unlinked", async () => {
+ render(
+
+ {children}
+
+
+ );
+}
diff --git a/frontend/editor/src/portal/views/ConnectCallback.css b/frontend/editor/src/portal/views/ConnectCallback.css
index 35e9b09ef7..99c0539658 100644
--- a/frontend/editor/src/portal/views/ConnectCallback.css
+++ b/frontend/editor/src/portal/views/ConnectCallback.css
@@ -1,24 +1,13 @@
-/* Account-link callback. A transient page the admin passes through, so it is
- centred and says one thing rather than trying to be a settings screen. */
+/* Step 3 of the connect flow: what the round trip to Stirling came back with.
+
+ Was a standalone page, centred with its own margins and max-width. It is now a
+ step body inside FlowModal, which already owns the dialog's width, padding and
+ spacing, so this only stacks its own blocks. */
.portal-connect-callback {
display: flex;
flex-direction: column;
- align-items: center;
- gap: 1rem;
- max-width: 30rem;
- margin: 4rem auto;
- padding: 0 1rem;
- text-align: center;
-}
-
-.portal-connect-callback > * {
- width: 100%;
-}
-
-/* The button is the one thing that should not stretch to the banner's width. */
-.portal-connect-callback button {
- width: auto;
+ gap: 0.75rem;
}
.portal-connect-callback p {
@@ -30,3 +19,11 @@
.portal-connect-callback__note {
font-size: 0.8125rem;
}
+
+/* Only "working" is centred: a spinner with a line under it, which has nothing to
+ align against. */
+.portal-connect-callback--working {
+ align-items: center;
+ gap: 0.625rem;
+ padding: 1.5rem 0;
+}
diff --git a/frontend/editor/src/portal/views/ConnectCallback.test.tsx b/frontend/editor/src/portal/views/ConnectCallback.test.tsx
index bdadee03e4..b934e11cd7 100644
--- a/frontend/editor/src/portal/views/ConnectCallback.test.tsx
+++ b/frontend/editor/src/portal/views/ConnectCallback.test.tsx
@@ -2,10 +2,10 @@ import { beforeEach, describe, expect, it, vi } from "vitest";
import { act, render, waitFor } from "@testing-library/react";
import { MemoryRouter, Route, Routes } from "react-router-dom";
import { MantineProvider } from "@mantine/core";
+import { UIProvider, useUI } from "@portal/contexts/UIContext";
+import type { ConnectOutcome } from "@portal/components/account-link/ConnectCallbackView";
-/**
- * The callback handles a live session token in a URL fragment, so the behaviour worth pinning is what it does with it: strip it immediately, refuse anything it cannot verify, and keep the two outcomes (SaaS sign-in, server link) independent of each other.
- */
+/** A live session token rides in the fragment: strip it at once, refuse what cannot be verified. */
const { completeConnect, startConnect, setSession, refresh } = vi.hoisted(
() => ({
completeConnect: vi.fn(),
@@ -32,19 +32,38 @@ function landOn(fragment: string) {
window.history.replaceState(null, "", `/account-link/callback${fragment}`);
}
-/**
- * Route and host together: the route reads the fragment, the portal renders the
- * outcome. Exercising them apart would test the hand-off rather than the flow.
- */
+/** Stands in for the dialog that consumes the outcome. */
+let published: ConnectOutcome[] = [];
+
+function OutcomeSpy() {
+ const { connectOutcome } = useUI();
+ if (
+ connectOutcome &&
+ published[published.length - 1]?.state !== connectOutcome.state
+ ) {
+ published.push(connectOutcome);
+ }
+ return null;
+}
+
+const lastOutcome = () => published[published.length - 1];
+
+/** Route and host together: apart, this would test the hand-off rather than the flow. */
function renderFlow() {
return render(
-
-
+
+
+
+
,
);
@@ -53,6 +72,7 @@ function renderFlow() {
describe("account-link callback", () => {
beforeEach(() => {
vi.clearAllMocks();
+ published = [];
completeConnect.mockResolvedValue({
phase: "LINKED",
authorizeUrl: null,
@@ -67,8 +87,7 @@ describe("account-link callback", () => {
renderFlow();
- // Synchronous, before any await: the fragment must not survive long enough
- // to be read from the address bar or land in a history entry.
+ // Before any await: the fragment must not reach the address bar or a history entry.
expect(window.location.hash).toBe("");
await waitFor(() => expect(completeConnect).toHaveBeenCalled());
});
@@ -109,8 +128,7 @@ describe("account-link callback", () => {
renderFlow();
- // The two outcomes are independent: a failed sign-in must not strand the
- // server unlinked.
+ // Independent outcomes: a failed sign-in must not strand the server unlinked.
await waitFor(() => expect(completeConnect).toHaveBeenCalledWith(NONCE));
});
@@ -131,6 +149,18 @@ describe("account-link callback", () => {
await waitFor(() => expect(window.location.hash).toBe(""));
expect(completeConnect).not.toHaveBeenCalled();
expect(setSession).not.toHaveBeenCalled();
+ await waitFor(() => expect(lastOutcome()?.state).toBe("malformed"));
+ expect(lastOutcome()?.reclaim).toBeUndefined();
+ });
+
+ it("hands the result to the dialog rather than rendering its own", async () => {
+ landOn(`#type=link&nonce=${NONCE}&access_token=at&refresh_token=rt`);
+
+ const { container } = renderFlow();
+
+ await waitFor(() => expect(lastOutcome()?.state).toBe("linked"));
+ expect(lastOutcome()?.sessionRestored).toBe(true);
+ expect(container.querySelector(".portal-connect-callback")).toBeNull();
});
it("refuses a fragment that is not a link response", async () => {
@@ -160,16 +190,30 @@ describe("account-link callback", () => {
teamId: null,
});
- const { getAllByRole } = renderFlow();
+ renderFlow();
await waitFor(() => expect(completeConnect).toHaveBeenCalledTimes(1));
- // Last button, not the only one: the modal shell contributes a close button.
- const buttons = getAllByRole("button");
- act(() => buttons[buttons.length - 1].click());
+ await waitFor(() => expect(lastOutcome()?.state).toBe("retry"));
- // Retries the existing handshake; starting a new one would waste the
- // approval a human just gave.
+ act(() => lastOutcome()!.reclaim!());
+
+ // Re-claims rather than opening a new handshake, which would spend a leader's approval.
await waitFor(() => expect(completeConnect).toHaveBeenCalledTimes(2));
expect(startConnect).not.toHaveBeenCalled();
});
+
+ it("gives a spent handshake no re-claim, so the dialog asks for a new one", async () => {
+ landOn(`#type=link&nonce=${NONCE}`);
+ completeConnect.mockResolvedValue({
+ phase: "EXPIRED",
+ authorizeUrl: null,
+ secondsRemaining: null,
+ teamId: null,
+ });
+
+ renderFlow();
+
+ await waitFor(() => expect(lastOutcome()?.state).toBe("expired"));
+ expect(lastOutcome()?.reclaim).toBeUndefined();
+ });
});
diff --git a/frontend/editor/src/portal/views/Integrations.test.tsx b/frontend/editor/src/portal/views/Integrations.test.tsx
index 8c4e684bfa..acf1f1b1b1 100644
--- a/frontend/editor/src/portal/views/Integrations.test.tsx
+++ b/frontend/editor/src/portal/views/Integrations.test.tsx
@@ -13,6 +13,16 @@ import type { IntegrationConfig } from "@portal/api/integrations";
const render = (ui: Parameters[0]) =>
baseRender(ui, { wrapper: MantineProvider });
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: false,
+ loading: false,
+ available: false,
+ connect: vi.fn(),
+ guard: (fn: unknown) => fn,
+ }),
+}));
+
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (key: string) => key,
diff --git a/frontend/editor/src/portal/views/Integrations.tsx b/frontend/editor/src/portal/views/Integrations.tsx
index 793c21f880..fc40feb1e9 100644
--- a/frontend/editor/src/portal/views/Integrations.tsx
+++ b/frontend/editor/src/portal/views/Integrations.tsx
@@ -31,6 +31,7 @@ import {
} from "@portal/components/sources/connectionTypes";
import { STEP_OPERATIONS } from "@portal/components/policies/stepOperations";
import { COMING_SOON_SOURCE_TYPES } from "@portal/components/sources/sourceTypes";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
import "@portal/theme/surface.css";
import "@portal/views/Integrations.css";
@@ -94,6 +95,7 @@ type IntegrationRow = {
export function Integrations() {
const { t } = useTranslation();
+ const { guard } = useConnectGate();
const [connections, setConnections] = useState(
null,
);
@@ -212,13 +214,23 @@ export function Integrations() {
return counts;
}, [catalogue]);
- const openCreate = useCallback((typeId: string) => {
- setModal({ open: true, editing: null, fixedTypeId: typeId });
- }, []);
+ // Connecting an integration and editing one both need a linked account. Memoised
+ // because both land in the row-building useMemo deps below.
+ const openCreate = useMemo(
+ () =>
+ guard((typeId: string) => {
+ setModal({ open: true, editing: null, fixedTypeId: typeId });
+ }),
+ [guard],
+ );
- const openEdit = useCallback((connection: IntegrationConfig) => {
- setModal({ open: true, editing: connection });
- }, []);
+ const openEdit = useMemo(
+ () =>
+ guard((connection: IntegrationConfig) => {
+ setModal({ open: true, editing: connection });
+ }),
+ [guard],
+ );
const remove = useCallback(
async (connection: IntegrationConfig) => {
diff --git a/frontend/editor/src/portal/views/Pipelines.gated.test.tsx b/frontend/editor/src/portal/views/Pipelines.gated.test.tsx
new file mode 100644
index 0000000000..993edc876b
--- /dev/null
+++ b/frontend/editor/src/portal/views/Pipelines.gated.test.tsx
@@ -0,0 +1,117 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { PortalViewProviders } from "@portal/test/TestQueryProvider";
+
+/**
+ * The page must look exactly as it always does: the ask is a dialog on the attempt, not a lock
+ * screen in place of the feature. The route half is what a later link cannot walk around.
+ */
+const { connect } = vi.hoisted(() => ({ connect: vi.fn() }));
+
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: true,
+ loading: false,
+ available: true,
+ connect,
+ guard:
+ (_action: (...args: A) => void) =>
+ () =>
+ connect(),
+ }),
+}));
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ i18n: { changeLanguage: vi.fn() },
+ }),
+}));
+
+const fetchPipelines = vi.fn();
+vi.mock("@portal/api/pipelines", () => ({
+ fetchPipelines: () => fetchPipelines(),
+}));
+
+import { Pipelines } from "@portal/views/Pipelines";
+import { ConnectGuardedRoute } from "@portal/components/account-link/ConnectGuardedRoute";
+
+const PIPELINE = {
+ id: "plc-1",
+ name: "Redact claims",
+ enabled: true,
+ status: "active",
+ trigger: "schedule",
+ sources: [{ id: "src-claims", name: "Claims intake" }],
+ steps: ["/api/v1/security/auto-redact"],
+ output: "inline",
+ owner: "security@acme.com",
+};
+
+function renderAt(initial: string) {
+ return render(
+
+
+
+
+
+
+ ,
+ );
+}
+
+describe("Pipelines when the account is not connected", () => {
+ beforeEach(() => {
+ connect.mockReset();
+ fetchPipelines.mockReset();
+ });
+
+ it("leaves the empty state exactly as it is", async () => {
+ fetchPipelines.mockResolvedValue({ kpis: [], pipelines: [] });
+ renderAt("/processor/pipelines");
+ expect(
+ await screen.findByText("portal.pipelines.empty.title"),
+ ).toBeInTheDocument();
+ });
+
+ it("still lists pipelines that already exist", async () => {
+ fetchPipelines.mockResolvedValue({ kpis: [], pipelines: [PIPELINE] });
+ renderAt("/processor/pipelines");
+ expect(await screen.findByText("Redact claims")).toBeInTheDocument();
+ });
+
+ it("asks to connect instead of opening the builder", async () => {
+ fetchPipelines.mockResolvedValue({ kpis: [], pipelines: [] });
+ renderAt("/processor/pipelines");
+ await screen.findByText("portal.pipelines.empty.title");
+ fireEvent.click(screen.getByText("portal.pipelines.actions.newPipeline"));
+ expect(connect).toHaveBeenCalled();
+ expect(screen.queryByText("builder")).toBeNull();
+ });
+
+ it("asks to connect instead of opening an existing pipeline", async () => {
+ fetchPipelines.mockResolvedValue({ kpis: [], pipelines: [PIPELINE] });
+ renderAt("/processor/pipelines");
+ fireEvent.click(await screen.findByText("Redact claims"));
+ expect(connect).toHaveBeenCalled();
+ });
+
+ it("turns away a direct arrival at the builder, however it was reached", async () => {
+ fetchPipelines.mockResolvedValue({ kpis: [], pipelines: [] });
+ renderAt("/processor/pipelines/new");
+ expect(
+ await screen.findByText("portal.pipelines.empty.title"),
+ ).toBeInTheDocument();
+ expect(screen.queryByText("builder")).toBeNull();
+ expect(connect).toHaveBeenCalled();
+ });
+});
diff --git a/frontend/editor/src/portal/views/Pipelines.test.tsx b/frontend/editor/src/portal/views/Pipelines.test.tsx
index 655abf62cb..250722706e 100644
--- a/frontend/editor/src/portal/views/Pipelines.test.tsx
+++ b/frontend/editor/src/portal/views/Pipelines.test.tsx
@@ -14,6 +14,16 @@ const render = (
options?: Parameters[1],
) => baseRender(ui, { wrapper: PortalTestProviders, ...options });
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: false,
+ loading: false,
+ available: false,
+ connect: vi.fn(),
+ guard: (fn: unknown) => fn,
+ }),
+}));
+
// Deterministic i18n: keys returned verbatim.
vi.mock("react-i18next", () => ({
useTranslation: () => ({
diff --git a/frontend/editor/src/portal/views/Pipelines.tsx b/frontend/editor/src/portal/views/Pipelines.tsx
index f2203de972..6311e3c438 100644
--- a/frontend/editor/src/portal/views/Pipelines.tsx
+++ b/frontend/editor/src/portal/views/Pipelines.tsx
@@ -9,11 +9,13 @@ import { VIEW_PATHS, toPortalPath } from "@portal/contexts/ViewContext";
import { PipelinesIcon } from "@portal/components/icons";
import { KpiStrip } from "@portal/components/pipelines/KpiStrip";
import { PipelinesTable } from "@portal/components/pipelines/PipelinesTable";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
import "@portal/views/Pipelines.css";
export function Pipelines() {
const { t } = useTranslation();
const navigate = useNavigate();
+ const { guard } = useConnectGate();
const state = usePipelines();
const { data, loading } = state;
const { isLoading } = useSectionFlags(state);
@@ -26,13 +28,18 @@ export function Pipelines() {
// the loading and empty states don't flash a row of placeholder cards.
const hasPipelines = pipelines.length > 0;
- const openCreate = () =>
- navigate(`${toPortalPath(VIEW_PATHS.pipelines)}/new`);
- const connectSource = () =>
- navigate(`${toPortalPath(VIEW_PATHS.sources)}/new`);
+ // Building and editing a pipeline both need a linked account, so both ask for one first.
+ const openCreate = guard(() =>
+ navigate(`${toPortalPath(VIEW_PATHS.pipelines)}/new`),
+ );
+ // Guarded in its own right so the ask happens here rather than after a pointless hop to Sources.
+ const connectSource = guard(() =>
+ navigate(`${toPortalPath(VIEW_PATHS.sources)}/new`),
+ );
// A row opens that pipeline's own page (view / edit / run / delete live there).
- const openPipeline = (pipeline: PipelineView) =>
- navigate(`${toPortalPath(VIEW_PATHS.pipelines)}/${pipeline.id}`);
+ const openPipeline = guard((pipeline: PipelineView) =>
+ navigate(`${toPortalPath(VIEW_PATHS.pipelines)}/${pipeline.id}`),
+ );
return (
builder
+
+ }
+ />
+
diff --git a/frontend/editor/src/portal/views/Policies.tsx b/frontend/editor/src/portal/views/Policies.tsx
index 9e316852fd..b8cb42112a 100644
--- a/frontend/editor/src/portal/views/Policies.tsx
+++ b/frontend/editor/src/portal/views/Policies.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useQueryClient } from "@tanstack/react-query";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
@@ -23,11 +23,13 @@ import { PolicyCatalogueTable } from "@portal/components/policies/PolicyCatalogu
import { PolicyDetailPanel } from "@portal/components/policies/PolicyDetailPanel";
import { PolicySetupWizard } from "@portal/components/policies/PolicySetupWizard";
import { useAiEngineEnabled } from "@portal/hooks/useAiEngineEnabled";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
import "@portal/views/Policies.css";
export function Policies() {
const { t } = useTranslation();
const queryClient = useQueryClient();
+ const { gated, connect } = useConnectGate();
const state = usePoliciesOverview();
const { data, loading, error: fetchError } = state;
const { isLoading } = useSectionFlags(state);
@@ -38,18 +40,27 @@ export function Policies() {
const [pageError, setPageError] = useState(null);
const [searchParams, setSearchParams] = useSearchParams();
+ // Held in a ref so the effects below do not re-run on its identity. They write back to the URL,
+ // so a callback that changes each render would loop: strip the param, re-render, run again.
+ const connectRef = useRef(connect);
+ connectRef.current = connect;
+
+ // Deep link from the Home processor flow. It sets the wizard directly rather than going through
+ // openEntry, so the gate belongs here too: guarding openEntry alone would leave ?setup= as a way
+ // past it.
useEffect(() => {
const setupId = searchParams.get("setup");
if (!setupId || !data) return;
const entry = data.catalogue.find((e) => e.category.id === setupId);
if (entry && !entry.category.comingSoon) {
- if (entry.policy) setDetail(entry);
+ if (gated) connectRef.current();
+ else if (entry.policy) setDetail(entry);
else setWizard(entry);
}
const next = new URLSearchParams(searchParams);
next.delete("setup");
setSearchParams(next, { replace: true });
- }, [searchParams, data, setSearchParams]);
+ }, [searchParams, data, setSearchParams, gated]);
const { enabled: aiEngineEnabled, loading: aiEngineLoading } =
useAiEngineEnabled();
@@ -95,6 +106,13 @@ export function Policies() {
const openEntry = useCallback(
(entry: CatalogueEntry) => {
+ // Ask rather than open an editor whose save would fail; viewing the catalogue stays open.
+ // Via the ref so this keeps its identity: the deep-link effect depends on it and writes the
+ // URL back, which would otherwise loop.
+ if (gated) {
+ connectRef.current();
+ return;
+ }
// Block setup of an AI-required policy until the engine is confirmed on (so a
// click during the app-config load can't open a wizard for a disabled
// feature); a configured policy stays openable so it can be paused/deleted.
@@ -103,7 +121,7 @@ export function Policies() {
if (entry.policy) setDetail(entry);
else setWizard(entry);
},
- [aiEngineEnabled],
+ [aiEngineEnabled, gated],
);
// Open a category passed as ?category= (deep link from the super
diff --git a/frontend/editor/src/portal/views/Sources.gated.test.tsx b/frontend/editor/src/portal/views/Sources.gated.test.tsx
new file mode 100644
index 0000000000..944ab8c37c
--- /dev/null
+++ b/frontend/editor/src/portal/views/Sources.gated.test.tsx
@@ -0,0 +1,111 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { PortalViewProviders } from "@portal/test/TestQueryProvider";
+
+/**
+ * The deep link into the create flow, which the gate has to cover in its own right.
+ *
+ * `?new=1` opens the modal from an effect rather than through the click handler, so guarding
+ * openCreate does nothing for it. Both the Documents review queue and the pipelines empty state
+ * arrive here that way, so each is a way past the gate unless the deep link is guarded too.
+ */
+const { connect } = vi.hoisted(() => ({ connect: vi.fn() }));
+const gate = { gated: true };
+
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: gate.gated,
+ loading: false,
+ available: true,
+ connect,
+ guard:
+ (action: (...args: A) => void) =>
+ (...args: A) => {
+ if (gate.gated) connect();
+ else action(...args);
+ },
+ }),
+}));
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ i18n: { changeLanguage: vi.fn() },
+ }),
+}));
+
+const fetchSources = vi.fn();
+vi.mock("@portal/api/sources", () => ({
+ fetchSources: () => fetchSources(),
+ fetchSource: vi.fn(),
+ createSource: vi.fn(),
+ deleteSource: vi.fn(),
+ isFolderAccessDeniedError: () => false,
+}));
+vi.mock("@portal/api/integrations", () => ({
+ fetchIntegrations: () => Promise.resolve([]),
+ fetchIntegrationCapabilities: () => Promise.resolve({ customApi: false }),
+ fetchS3Connections: () => Promise.resolve([]),
+ deleteIntegration: vi.fn(),
+}));
+
+import { Sources } from "@portal/views/Sources";
+
+const EDITOR_ROW = {
+ id: "editor",
+ name: "Editor",
+ type: "editor",
+ status: "active",
+ referenceCount: 0,
+ referencingPolicies: [],
+ config: [],
+ docsTotal: 0,
+ docs24h: 0,
+ docs30d: 0,
+};
+
+const renderAt = (initial: string) =>
+ render(
+
+
+
+
+
+ ,
+ );
+
+describe("Sources deep link when the account is not connected", () => {
+ beforeEach(() => {
+ connect.mockReset();
+ gate.gated = true;
+ fetchSources.mockReset();
+ fetchSources.mockResolvedValue({ kpis: [], sources: [EDITOR_ROW] });
+ });
+
+ // Renders only once the fetch resolves, so finding it is also the await.
+ const LIST = "portal.sources.table.source";
+ const MODAL = "portal.sources.builder.createTitle";
+
+ it("asks to connect instead of opening the create modal", async () => {
+ renderAt("/processor/sources?new=1");
+ expect(await screen.findByText(LIST)).toBeInTheDocument();
+ expect(connect).toHaveBeenCalled();
+ expect(screen.queryByText(MODAL)).toBeNull();
+ });
+
+ it("leaves the page looking exactly as it always does", async () => {
+ renderAt("/processor/sources");
+ expect(await screen.findByText(LIST)).toBeInTheDocument();
+ expect(connect).not.toHaveBeenCalled();
+ });
+
+ it("still honours the deep link once connected", async () => {
+ gate.gated = false;
+ renderAt("/processor/sources?new=1");
+ expect(await screen.findByText(LIST)).toBeInTheDocument();
+ expect(connect).not.toHaveBeenCalled();
+ expect(await screen.findByText(MODAL)).toBeInTheDocument();
+ });
+});
diff --git a/frontend/editor/src/portal/views/Sources.test.tsx b/frontend/editor/src/portal/views/Sources.test.tsx
index 166d4016fc..3891f1955d 100644
--- a/frontend/editor/src/portal/views/Sources.test.tsx
+++ b/frontend/editor/src/portal/views/Sources.test.tsx
@@ -22,6 +22,16 @@ const Providers = ({ children }: { children: ReactNode }) => (
const render = (ui: Parameters[0]) =>
baseRender(ui, { wrapper: Providers });
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: false,
+ loading: false,
+ available: false,
+ connect: vi.fn(),
+ guard: (fn: unknown) => fn,
+ }),
+}));
+
// Deterministic i18n: keys returned verbatim.
vi.mock("react-i18next", () => ({
useTranslation: () => ({
diff --git a/frontend/editor/src/portal/views/Sources.tsx b/frontend/editor/src/portal/views/Sources.tsx
index f676b4f3db..bb740f5d69 100644
--- a/frontend/editor/src/portal/views/Sources.tsx
+++ b/frontend/editor/src/portal/views/Sources.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { Navigate, useSearchParams } from "react-router-dom";
import AddRoundedIcon from "@mui/icons-material/AddRounded";
@@ -10,11 +10,13 @@ import { VIEW_PATHS, toPortalPath } from "@portal/contexts/ViewContext";
import { KpiStrip } from "@portal/components/sources/KpiStrip";
import { SourcesTable } from "@portal/components/sources/SourcesTable";
import { SourceModal } from "@portal/components/sources/SourceModal";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
import "@portal/views/Sources.css";
export function Sources() {
const { t } = useTranslation();
const [searchParams, setSearchParams] = useSearchParams();
+ const { guard, gated, connect } = useConnectGate();
const state = useSources();
const { data, loading } = state;
@@ -27,13 +29,20 @@ export function Sources() {
sourceId: string | null;
}>({ open: false, sourceId: null });
+ // Ref so the effect does not loop: it writes the param back, which would re-run it.
+ const connectRef = useRef(connect);
+ connectRef.current = connect;
+
+ // Sets the modal directly, so it needs the gate in its own right: guarding openCreate would
+ // leave ?new=1 as a way past it.
useEffect(() => {
if (searchParams.get("new") !== "1") return;
- setModal({ open: true, sourceId: null });
+ if (gated) connectRef.current();
+ else setModal({ open: true, sourceId: null });
const next = new URLSearchParams(searchParams);
next.delete("new");
setSearchParams(next, { replace: true });
- }, [searchParams, setSearchParams]);
+ }, [searchParams, setSearchParams, gated]);
const sources = data?.sources ?? [];
@@ -42,9 +51,11 @@ export function Sources() {
const configuredCount = sources.filter((s) => s.type !== "editor").length;
const showKpis = isLoading || configuredCount > 0;
- const openCreate = () => setModal({ open: true, sourceId: null });
- const openSource = (source: SourceView) =>
- setModal({ open: true, sourceId: source.id });
+ // Connecting a source and editing one both need a linked account.
+ const openCreate = guard(() => setModal({ open: true, sourceId: null }));
+ const openSource = guard((source: SourceView) =>
+ setModal({ open: true, sourceId: source.id }),
+ );
// The Connections tab moved to its own Integrations view.
if (searchParams.get("tab") === "connections") {
diff --git a/frontend/editor/src/portal/views/Users.caching.test.tsx b/frontend/editor/src/portal/views/Users.caching.test.tsx
index a619d883b7..1a9e3e28c6 100644
--- a/frontend/editor/src/portal/views/Users.caching.test.tsx
+++ b/frontend/editor/src/portal/views/Users.caching.test.tsx
@@ -29,6 +29,16 @@ import { qk } from "@portal/queries/keys";
* one /team/my resolve. Same SaaS mocks as Users.saas.test.tsx.
*/
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: false,
+ loading: false,
+ available: false,
+ connect: vi.fn(),
+ guard: (fn: unknown) => fn,
+ }),
+}));
+
vi.mock("@app/auth", () => ({
getStoredToken: () => null,
clearStoredToken: vi.fn(),
diff --git a/frontend/editor/src/portal/views/Users.gated.test.tsx b/frontend/editor/src/portal/views/Users.gated.test.tsx
new file mode 100644
index 0000000000..b5286964fc
--- /dev/null
+++ b/frontend/editor/src/portal/views/Users.gated.test.tsx
@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { PortalViewProviders } from "@portal/test/TestQueryProvider";
+
+/**
+ * `?invite` opens the modal from an effect, so guarding openInvite did nothing for it. Same hole as
+ * Sources' `?new=1`, and it survived that fix.
+ */
+const { connect } = vi.hoisted(() => ({ connect: vi.fn() }));
+const gate = { gated: true };
+
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: gate.gated,
+ loading: false,
+ available: true,
+ connect,
+ guard:
+ (action: (...args: A) => void) =>
+ (...args: A) => {
+ if (gate.gated) connect();
+ else action(...args);
+ },
+ }),
+}));
+
+vi.mock("react-i18next", () => ({
+ useTranslation: () => ({
+ t: (key: string) => key,
+ i18n: { changeLanguage: vi.fn() },
+ }),
+}));
+
+vi.mock("@portal/contexts/TierContext", () => ({
+ useTier: () => ({ tier: "pro" }),
+}));
+vi.mock("@app/auth", () => ({
+ getStoredToken: () => null,
+ clearStoredToken: vi.fn(),
+}));
+vi.mock("@app/auth/supabase/supabaseClient", () => ({
+ getSupabaseClient: () => null,
+ configureSupabase: vi.fn(),
+}));
+vi.mock("@portal/auth/saasSupabase", () => ({ ensureSaasSupabase: vi.fn() }));
+
+vi.mock("@portal/hooks/useUsersData", () => ({
+ useUsersData: () => ({
+ usersState: { data: [], loading: false, error: null },
+ grantsState: { data: [], loading: false, error: null },
+ teamsState: { data: [], loading: false, error: null },
+ authState: { data: null, loading: false, error: null },
+ refresh: vi.fn(),
+ }),
+}));
+
+import { Users } from "@portal/views/Users";
+
+const INVITE_MODAL = "users.invite.title";
+
+const renderAt = (initial: string) =>
+ render(
+
+
+
+
+
+ ,
+ );
+
+describe("Users deep link when the account is not connected", () => {
+ beforeEach(() => {
+ connect.mockReset();
+ gate.gated = true;
+ });
+
+ it("asks to connect instead of opening the invite modal", () => {
+ renderAt("/processor/users?invite");
+ expect(connect).toHaveBeenCalled();
+ expect(screen.queryByText(INVITE_MODAL)).toBeNull();
+ });
+
+ it("leaves the page alone when there is no deep link", () => {
+ renderAt("/processor/users");
+ expect(connect).not.toHaveBeenCalled();
+ });
+
+ it("still honours the deep link once connected", () => {
+ gate.gated = false;
+ renderAt("/processor/users?invite");
+ expect(connect).not.toHaveBeenCalled();
+ expect(screen.getByText(INVITE_MODAL)).toBeInTheDocument();
+ });
+});
diff --git a/frontend/editor/src/portal/views/Users.saas.test.tsx b/frontend/editor/src/portal/views/Users.saas.test.tsx
index 5313857c2c..1ea72e5a10 100644
--- a/frontend/editor/src/portal/views/Users.saas.test.tsx
+++ b/frontend/editor/src/portal/views/Users.saas.test.tsx
@@ -32,6 +32,16 @@ import {
*/
// Keep apiClient.local's transport hermetic (no real token / Supabase at import).
+vi.mock("@portal/hooks/useConnectGate", () => ({
+ useConnectGate: () => ({
+ gated: false,
+ loading: false,
+ available: false,
+ connect: vi.fn(),
+ guard: (fn: unknown) => fn,
+ }),
+}));
+
vi.mock("@app/auth", () => ({
getStoredToken: () => null,
clearStoredToken: vi.fn(),
diff --git a/frontend/editor/src/portal/views/Users.tsx b/frontend/editor/src/portal/views/Users.tsx
index 79c6c11611..95b51091f0 100644
--- a/frontend/editor/src/portal/views/Users.tsx
+++ b/frontend/editor/src/portal/views/Users.tsx
@@ -21,6 +21,7 @@ import {
import { deleteTeam as apiDeleteTeam } from "@portal/api/teams";
import { errorMessage } from "@portal/api/http";
import { usersCapabilities as caps } from "@app/portal/usersCapabilities";
+import { useConnectGate } from "@portal/hooks/useConnectGate";
import { UsersDirectory } from "@portal/components/users/UsersDirectory";
import { PendingInvitations } from "@portal/components/users/PendingInvitations";
import { InviteMemberModal } from "@portal/components/users/InviteMemberModal";
@@ -46,6 +47,7 @@ interface Confirm {
*/
export function Users() {
const { t } = useTranslation();
+ const { guard, gated, connect } = useConnectGate();
const { usersState, grantsState, teamsState, authState, refresh } =
useUsersData();
@@ -62,13 +64,20 @@ export function Users() {
const [confirm, setConfirm] = useState(null);
const [searchParams, setSearchParams] = useSearchParams();
+
+ // Ref so the effect does not loop: it writes the param back, which would re-run it.
+ const connectRef = useRef(connect);
+ connectRef.current = connect;
+
+ // Sets the modal directly, so it needs the gate in its own right.
useEffect(() => {
if (searchParams.get("invite") === null) return;
- setInviteOpen(true);
+ if (gated) connectRef.current();
+ else setInviteOpen(true);
const next = new URLSearchParams(searchParams);
next.delete("invite");
setSearchParams(next, { replace: true });
- }, [searchParams, setSearchParams]);
+ }, [searchParams, setSearchParams, gated]);
// Scroll to and flash the row for ?member= (deep link from the super
// search), once the roster has rendered; then strip the param. Scoped to the
@@ -194,10 +203,12 @@ export function Users() {
if (!grant) return;
run(() => revokeGrant(grant.id));
}
- function openInvite(teamId: number | null) {
+ // Teams need a linked account, so inviting or creating one asks for the connection first.
+ const openInvite = guard((teamId: number | null) => {
setInviteTeamId(teamId);
setInviteOpen(true);
- }
+ });
+ const openNewTeam = guard(() => setNewTeamOpen(true));
// Kebab actions
function toggleEnabled(member: Member) {
@@ -282,11 +293,7 @@ export function Users() {
{caps.createTeam && (
-
+
);
}
diff --git a/frontend/editor/src/saas/routes/connect.css b/frontend/editor/src/saas/routes/connect.css
index 5a709abfbe..391f9dad28 100644
--- a/frontend/editor/src/saas/routes/connect.css
+++ b/frontend/editor/src/saas/routes/connect.css
@@ -8,11 +8,10 @@
text-align: left;
}
-.saas-connect__title {
- margin: 0;
- font-size: 1.25rem;
- font-weight: 600;
- color: var(--c-text);
+.saas-connect__waiting {
+ display: flex;
+ justify-content: center;
+ padding: 1.5rem 0;
}
.saas-connect__lead {