mirror of
https://github.com/supabase/supabase.git
synced 2026-10-08 19:05:06 +03:00
Joshen Lim
fd67a8014f
## Context Realised that if the project has a GH integration, but the user's account is not connected to GH - the branch validation in the "Sync with Git Branch" field will not work. The Edit branch modal also obfuscates the error being returned from the validation API so its not clear what the issue is <img width="500" alt="image" src="https://github.com/user-attachments/assets/739dfe7c-8920-4edf-a751-63d7f6273db4" /> Opting to show an "Authorize" CTA for this scenario so it's clear from the user's POV what to do (Refer to "To test" below for screenshots) ## To test - [ ] Verify that on an account which isn't connect to GH + project with no GH integration - CTA is as per normal ("Configure") which should direct you to the settings -> integrations page (Same for edit branch) <img width="500" alt="image" src="https://github.com/user-attachments/assets/9a010fde-8ab0-43d6-b5c9-ced9fed1426e" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/d129cccf-7238-4305-913b-0cf78c7dcc26" /> - [ ] Set up a GH integration and check Create / Edit branch - the branch input field should work with proper branch name validation <img width="500" alt="image" src="https://github.com/user-attachments/assets/4d643956-2d11-406b-b198-193f3221b7a9" /> - [ ] Now go to Account settings and remove the GH connection, then check the Create / Edit branch modals - should have the "Authorize" CTA (instead of the input field) <img width="500" alt="image" src="https://github.com/user-attachments/assets/ac152c0d-2e9c-4d89-95bc-36127c0fc8df" /> <img width="500" alt="image" src="https://github.com/user-attachments/assets/d1f50d38-d801-4546-96fd-8cf3b5d0f805" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a “Sync with a GitHub branch” connection entry with an inline authorize flow. * Integrated GitHub authorization awareness into branch create/edit modals so users are guided to authorize or proceed to syncing. * **Bug Fixes** * Unified loading, success, and error handling for GitHub authorization/connection checks across create and edit flows. * Improved Git branch validation messaging to show cleaner error text. * **Accessibility/UX** * Updated modal UI text and added an explicit label for the “Include data” toggle. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
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>
}