mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Danny WhiteandJoshen Lim
6b1fc3d11d
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? A failed Vercel connection after project creation is only logged, leaving the project-creation screen in its loading state. ## What is the new behavior? The flow preserves the created project and shows the connection error with retry and open-project actions in the standard project-creation footer. Project-creation failures remain ordinary inline form errors. Connection failures are owned by this flow without a duplicate toast or a no-op error handler. | Before | After | | --- | --- | |  | <img width="1024" height="563" alt="Create Vercel Project Supabase" src="https://github.com/user-attachments/assets/b7d3fdca-d7a0-4b50-9231-3cf7dc371a87" /> | ## To test ### Before on master 1. Switch to `master`. 2. With local Studio running and while signed in, open an organisation you can access. Copy its slug from `http://localhost:8082/org/<YOUR_ORG_SLUG>`. 3. Open `apps/studio/components/interfaces/ProjectCreation/ProjectCreationForm.tsx`. 4. Find `isSuccessNewProject={isSuccessNewProject}` in the `ProjectCreationFooter` props and temporarily change it to: ```tsx isSuccessNewProject={true} ``` 5. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then open it: `http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`. 6. Confirm **Create new project** remains in its loading state and there is no error, retry action, or route to the created project. This represents the current stuck state. 7. Revert the temporary edit before switching branches. ### After on this branch 1. Switch to `dnywh/vercel-deploy-recovery`. 2. With local Studio running and while signed in, open an organisation you can access. Copy its slug from `http://localhost:8082/org/<YOUR_ORG_SLUG>`. 3. Open `apps/studio/pages/integrations/vercel/[slug]/deploy-button/new-project.tsx`. 4. Find the conditional beginning with `newProjectRef === undefined` inside `InterstitialLayout`. 5. Replace that whole conditional with: ```tsx <VercelConnectionError projectRef="abcdefghijklmnopqrst" message="Connection request failed" onRetry={() => undefined} /> ``` 6. Replace `<YOUR_ORG_SLUG>` in this URL with the slug from step 2, then open it: `http://localhost:8082/integrations/vercel/<YOUR_ORG_SLUG>/deploy-button/new-project`. 7. Confirm the admonition says **Unable to connect to Vercel** and **Your Supabase project was still created. Error: Connection request failed**. 8. Confirm **Open project** and **Retry connection** appear as compact, right-aligned footer buttons. The retry action is intentionally inert in this visual-only mock, and no project or Vercel connection is created. 9. Revert the temporary edit. ## Additional context Follows #48473. The consistency follow-up #48640 is stacked on this PR. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added inline error messages to project creation forms for integration, API, and validation failures. - Added clear Vercel connection states, including waiting, connecting, success, and error screens. - Added retry actions and links to open successfully created projects. - **Bug Fixes** - Improved error handling so Vercel connection issues remain visible in context instead of appearing only as notifications. - **Tests** - Added coverage for partial-success messaging, project links, and retry behavior. <!-- 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>
}