Files
supabase/apps/studio/components/interfaces/BranchManagement/EmptyStates.tsx
Joshen Lim be0d05fb08 Bring Branching 2.0 out of feature preview (#44279)
## Context

Have Branching 2.0 as the default behaviour + remove it from feature
preview
Behaviour should match staging / prod if branching 2.0 feature preview
is toggled on

## To test

- [ ] Test branching flow in general for any oddities

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Chores**
* Removed the Branching 2.0 preview and cleared its persisted preview
setting; branching UI and branch editing are now available without
opt‑in.
* Simplified branch management flows and empty states by removing
preview-dependent conditions and tooltips.
* Made GitHub branch sync optional in create/edit forms and simplified
validation and submit behavior.
* "Create merge request" and related branch actions now render
consistently across the UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-14 18:39:20 +08:00

78 lines
2.3 KiB
TypeScript

import { Github } from 'lucide-react'
import Link from 'next/link'
import { Button } from 'ui'
import { BranchSelector } from './BranchSelector'
import { DocsButton } from '@/components/ui/DocsButton'
import type { Branch } from '@/data/branches/branches-query'
import { DOCS_URL } from '@/lib/constants'
const EMPTY_STATE_CONTAINER = 'flex items-center flex-col gap-0.5 justify-center w-full py-10 px-4'
export const PullRequestsEmptyState = ({
url,
projectRef,
branches,
onBranchSelected,
isUpdating,
hasGithubConnection,
}: {
url: string
projectRef: string
branches: Branch[]
onBranchSelected: (branch: Branch) => void
isUpdating: boolean
hasGithubConnection?: boolean
}) => {
return (
<div className={EMPTY_STATE_CONTAINER}>
<p>No merge requests</p>
<p className="text-foreground-lighter text-center text-balance">
Create your first merge request to merge changes back to the main branch
</p>
<div className="flex items-center space-x-2 mt-4">
{hasGithubConnection ? (
<Button type="outline" asChild icon={<Github />}>
<a href={url} target="_blank" rel="noopener noreferrer">
Create pull request
</a>
</Button>
) : (
<Button asChild type="outline">
<Link href={`/project/${projectRef}/settings/integrations`}>Connect to GitHub</Link>
</Button>
)}
<BranchSelector
type="outline"
align="center"
branches={branches}
onBranchSelected={onBranchSelected}
isUpdating={isUpdating}
/>
</div>
</div>
)
}
export const PreviewBranchesEmptyState = ({
onSelectCreateBranch,
}: {
onSelectCreateBranch: () => void
}) => {
return (
<div className={EMPTY_STATE_CONTAINER}>
<p>Create your first preview branch</p>
<p className="text-foreground-lighter text-center text-balance mb-4">
Preview branches are short-lived environments that let you safely experiment with changes to
your database schema without affecting your main database.
</p>
<div className="flex items-center space-x-2">
<DocsButton href={`${DOCS_URL}/guides/platform/branching`} />
<Button type="primary" onClick={() => onSelectCreateBranch()}>
Create branch
</Button>
</div>
</div>
)
}