mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
Danny WhiteandJoshen Lim
69f3c43118
## What kind of change does this PR introduce? Bug fix / UX polish. ## What is the current behavior? Cancel on the Vercel create interstitial redirects to Vercel’s `next` URL. That finishes the install flow and shows “Completing installation…” / “Installation complete”, even though the user cancelled. The Deploy Button job still proceeds and fails. The button was also labelled “Return to Vercel”, which read like an alternate success path. | Before | | --- | | <img width="719" height="118" alt="Create Vercel Project Supabase" src="https://github.com/user-attachments/assets/c7ad261a-f132-4226-b460-21ec267595c0" />| | <img width="800" height="599" alt="95801" src="https://github.com/user-attachments/assets/6d235c4b-be90-4d5e-89bc-a68933f9dc46" /> | ## What is the new behavior? - _Return to Vercel_ button now labelled **Cancel** - **Cancel** closes the popup via `window.close()` (same honest abort as manually closing the window) - If the browser blocks programmatic close, Cancel is replaced by muted fallback copy: “Close window to cancel” (`role="status"` / `aria-live="polite"`) - Cancel is left-aligned with `justify-between` when there’s no additional-costs block; with costs, both actions stay on the right - Removes the free-limit hint line about returning to Vercel (Cancel makes that self-evident) - Success path is unchanged: after create, we still redirect via `next` - `/new` Cancel still navigates into Studio (`cancelAction: 'studio'`). This is unchanged behaviour | After (Fallback) | | --- | | <img width="713" height="103" alt="img" src="https://github.com/user-attachments/assets/95aafc0d-1c3d-4093-9681-88ad0a40f9fe" /> | ## Additional context Follow-up to #48311. Vercel’s `next` URL has no documented cancel/abort status, so closing the popup is the correct escape hatch. ### To test Full Deploy Button popup cancel can’t be verified on prod until this merges. Locally: 1. Open Studio on this branch. 2. In `ProjectCreationFooter.tsx`, temporarily force the fallback: ```ts const [showCloseWindowHint, setShowCloseWindowHint] = useState(true) ``` 3. Load create-project UI: - Free org / no costs: Confirm Cancel is left, Create is right (`justify-between`). With the forced hint, Cancel is replaced by “Close window to cancel”. - Paid org with additional costs: Confirm costs on the left; hint/Create on the right. 4. Revert `useState` to `false`. 5. Optional: open a Vercel create interstitial URL in a normal tab (not a popup), click Cancel. `window.close()` fails and the hint should replace Cancel after ~100ms. 6. On `/new/[slug]`, Confirm Cancel still returns to the Studio dashboard (not close-window). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Updated Project Creation Cancel to close the popup window directly when applicable, with a “close window to cancel” hint when closing isn’t available. * **Bug Fixes** * Removed Vercel-specific “return and restart” messaging and related return-url handling. * Standardized Cancel navigation for non-popup flows to return to the last relevant location (or the organizations page). * **Refactor** * Improved Project Creation footer layout/visibility for additional cost details. * **Chores** * Simplified the free-project limit warning configuration by removing an unused option. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}