mirror of
https://github.com/supabase/supabase.git
synced 2026-09-06 09:59:03 +08:00
6e0078182b
## Context There's 2 areas of the dashboard that has the project creation flow - and this PR consolidates both to use the same UI components to minimise duplication + keep things consistent ### Before <img width="1920" height="957" alt="image" src="https://github.com/user-attachments/assets/2a7ab79d-71c7-43f2-925b-1e1666cc3a69" /> ### After <img width="1389" height="957" alt="image" src="https://github.com/user-attachments/assets/f8465568-af99-46eb-80ee-7ac345383231" /> ## Changes involved - What this means for the project creation flow for Vercel Integration: - Smart region can be selected - Compute size can be selected - Enable Data API can be checked - Automatic RLS enable can be checked - How it differs from the main project creation flow on `new/slug` - Organization selection is disabled (cannot be changed) - The following UI is hidden: - "Internal configuration" section - "GitHub repository" field - "Free project info" at the bottom - "Cancel" button Eventually we could looking into reducing the differences more, e.g having data seeding for both ways, and showing GitHub repository field for Vercel integration Resolves DEPR-616 Resolves FE-3905 ## To test Tbh, I'm not really sure how you'd be able to test the vercel integration locally or on staging, this seemingly can only be done when changes land on prod. - What I'd do however is to just test the project creation flow minimally by landing on `/integrations/vercel/_/deploy-button/new-project` - Project creation can work, but just not the connection creation part - And also test project creation on `/new/slug` as well <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Added “Create sample tables with seed data” during project creation. * Enhanced Vercel integration setup with a guided creation flow and post-creation connection step. * Added an option to disable organization selection in specialized flows. * Added support for triggering a callback after successful project creation. * Added support for hiding the Cancel button in specialized flows. * **UI Improvements** * Refined the connected GitHub repository selector button/dropdown visuals. * Improved security options behavior for different project creation contexts. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { UseFormReturn } from 'react-hook-form'
|
|
import { Checkbox, FormControl, FormDescription, FormField, FormItem, FormLabel } from 'ui'
|
|
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
|
|
|
|
import { CreateProjectForm } from './ProjectCreation.schema'
|
|
import Panel from '@/components/ui/Panel'
|
|
|
|
interface DataSeedingProps {
|
|
form: UseFormReturn<CreateProjectForm>
|
|
layout?: 'vertical' | 'horizontal'
|
|
}
|
|
|
|
export const DataSeeding = ({ form, layout = 'horizontal' }: DataSeedingProps) => {
|
|
return (
|
|
<Panel.Content className="pb-8">
|
|
<FormItemLayout layout={layout} label="Data seeding" isReactForm={false}>
|
|
<div className="flex flex-col gap-4">
|
|
<FormField
|
|
name="shouldRunMigrations"
|
|
control={form.control}
|
|
render={({ field }) => (
|
|
<FormItem className="flex items-start gap-3">
|
|
<FormControl>
|
|
<Checkbox
|
|
checked={field.value}
|
|
disabled={field.disabled}
|
|
onCheckedChange={(value) => field.onChange(value === true)}
|
|
/>
|
|
</FormControl>
|
|
<div className="space-y-1">
|
|
<FormLabel className="text-sm text-foreground">
|
|
Create sample tables with seed data
|
|
</FormLabel>
|
|
<FormDescription className="text-foreground-lighter">
|
|
To get you started quickly, we can create new tables for you with seed (sample)
|
|
data. You can delete these tables later.
|
|
</FormDescription>
|
|
</div>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
</FormItemLayout>
|
|
</Panel.Content>
|
|
)
|
|
}
|