fix(cloud): upgrade dialog flashes and closes when deleting an environment

[nimish-ks]

🔍 Overview

On Phase Cloud, when an owner/admin of a Free organisation opens an environment's manage dialog and clicks Delete, the "Upgrade to Pro to customize environments" dialog flashes and disappears (together with the manage dialog) instead of letting them start a trial. The same component backs every other upsell dialog in the console, so the first open of any of them after a page load was affected too.

Root cause, in frontend/components/settings/organisation/UpsellDialog.tsx:

1. UpgradeDialog is loaded with next/dynamic, but without a loading component. In the App Router, next/dynamic only wraps the lazy component in its own <Suspense> when loading is set (or ssr: false). Without it, loading the chunk suspended all the way up to the route's app/loading.tsx boundary: React hid the whole page (display: none on every committed node, including both open dialogs) and showed the full-page spinner. Headless UI's dialog has a "close when the dialog disappears" watcher (useOnDisappear), which then closed the manage dialog and the upsell dialog. When the chunk arrived, the page came back without them.
2. dynamic() was called inside the component body, so every render created a brand-new lazy component type. Each open therefore created a fresh React.lazy that suspended again even with the chunk cached (so the flash happened on every attempt, not just the first), and any re-render of UpsellDialog while it was open remounted UpgradeDialog, resetting its state and destroying an embedded Stripe checkout (creating a new Checkout Session each time).

💡 Proposed Changes

• Create the dynamic UpgradeDialog once at module scope, so its identity is stable across renders.
• Give it a loading fallback (the shared Spinner), so the chunk load suspends inside the dialog: the dialog stays open, shows a spinner briefly, then the pricing preview.
• Rendering is still gated by isCloudHosted(), so self-hosted builds never load the Stripe chunk.
• Add frontend/tests/components/UpsellDialog.test.tsx, a single test that runs the real App Router implementation of next/dynamic and asserts that an outer Suspense fallback is not rendered while the chunk loads (the dialog shows its own loading indicator instead). It fails on main.

UpsellDialog is the only next/dynamic usage in the frontend, so there is nothing else to update.

🖼️ Screenshots or Demo

Observed with a scripted Chromium session against a local cloud-mode console with Stripe stubbed (details under Testing). Timings are from the moment Delete is clicked in the manage dialog of a free-tier environment.

Before

Time	What happens
+50 ms	The whole page, including the open manage dialog, is replaced by the route's full-screen spinner (both dialog panels collapse to 0x0, body scroll lock released).
+340 ms	The chunk has loaded and the page is back, but the manage dialog is already closing.
+1.2 s	The upsell dialog closes too. Nothing is left open; no checkout was ever reached.

After

Time	What happens
+70 ms	The upsell dialog opens stacked over the manage dialog, showing a spinner inside the dialog. The page behind is untouched.
+340 ms	The pricing preview replaces the spinner. Both dialogs stay open.
click "Start 14-day trial"	The embedded checkout mounts ~160 ms later and stays mounted, with typed input intact, for the full 30 s observation window. Exactly one Checkout Session was created on the backend.

📝 Release Notes

• Fixed: on the Free plan, the "Upgrade to Pro" dialog no longer flashes and closes itself when you try to delete an environment (or open any other upgrade prompt for the first time). The embedded checkout also keeps its state while you fill it in instead of being reset.

❓ Open Questions

• None. If we add more next/dynamic imports inside dialogs, they need a loading component (or an explicit <Suspense>) for the same reason.

🧪 Testing

• New: frontend/tests/components/UpsellDialog.test.tsx (1 test, see above). Verified it fails on the previous code and passes with the fix.
• yarn lint, tsc --noEmit and the full frontend Jest suite pass.
• End-to-end, locally, before and after the fix: console running in cloud mode (APP_HOST=cloud, password auth) against a local Postgres/Redis, with the backend's stripe SDK calls stubbed (customer, subscription, price, checkout session) and js.stripe.com/v3 replaced by a stub implementing initEmbeddedCheckout/mount/destroy. A scripted Chromium session signed up, created an organisation and app, opened the Development environment's manage dialog, clicked Delete, then "Start 14-day trial", and watched the result for 30 s. Before the fix the dialogs closed as described above; after the fix the stubbed checkout mounted inside the dialog and survived, with one Checkout Session created.
• Not covered: a run against real Stripe test mode, and browsers other than Chromium.

🎯 Reviewer Focus

• frontend/components/settings/organisation/UpsellDialog.tsx: the module-scope dynamic() call and its loading option.
• frontend/tests/components/UpsellDialog.test.tsx: the next/dynamic mock maps to next/dist/shared/lib/app-dynamic so the test exercises the App Router behaviour.

➕ Additional Context

• Next.js App Router next/dynamic: a Suspense boundary is only added when loading is provided or ssr: false (see next/dist/shared/lib/lazy-dynamic/loadable.js).
• Headless UI Dialog closes itself when its element disappears from layout (useOnDisappear), which is what turned the page-level fallback into closed dialogs.

✨ How to Test the Changes Locally

1. Run the console in cloud mode (APP_HOST=cloud / NEXT_PUBLIC_APP_HOST=cloud) with Stripe test keys and the STRIPE_* price IDs configured.
2. As the owner of a Free organisation, open an app, hover an environment card and click its cog, then click Delete.
3. Expected: the "Upgrade to Pro to customize environments" dialog opens over the manage dialog, shows a spinner briefly, then the pricing preview. Click Start 14-day trial: the embedded Stripe checkout appears and stays open while you type.
4. Reload the page and repeat: the first open after a reload used to be the failing case.

💚 Did You...

• Ensure linting passes (code style checks)?
• Update dependencies and lockfiles (if required) - not required
• Update migrations (if required) - not required
• Regenerate graphql schema and types (if required) - not required
• Verify the app builds locally?
• Manually test the changes on different browsers/devices? - Chromium only (scripted), see Testing