mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 20:05:06 +03:00
Joshen Lim
18080d88f7
## Context Adds an empty state for the branch management page, if no preview branches have yet to be created (overview wont be shown) - mainly visual changes here. The main intention here is to surface the GH connection setup a bit more (otherwise the only CTA for that is in the side nav which is easily missed + its not clear up front what the benefit of the GH connection is in the context of branching) This is how it looked like before for reference: <img width="1346" height="956" alt="image" src="https://github.com/user-attachments/assets/776ce3f4-e12b-42e4-8e90-0d5ca15dc58f" /> And this is what I'm thinking for the empty state: <img width="1037" height="431" alt="image" src="https://github.com/user-attachments/assets/d3a8871e-74d2-499a-b317-f739ed925668" /> GH connection will flip its badge and hide the CTA if there already is a GH connection <img width="1038" height="443" alt="image" src="https://github.com/user-attachments/assets/4bf2d34d-6c74-4206-b83c-38ba84b99fb3" />
33 lines
918 B
TypeScript
33 lines
918 B
TypeScript
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
|
|
import { useAppStateSnapshot } from '@/state/app-state'
|
|
|
|
export const CreateBranchButton = () => {
|
|
const snap = useAppStateSnapshot()
|
|
const { can: canCreateBranches } = useAsyncCheckPermissions(
|
|
PermissionAction.CREATE,
|
|
'preview_branches',
|
|
{ resource: { is_default: false } }
|
|
)
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
variant="primary"
|
|
disabled={!canCreateBranches}
|
|
onClick={() => snap.setShowCreateBranchModal(true)}
|
|
tooltip={{
|
|
content: {
|
|
side: 'bottom',
|
|
text: !canCreateBranches
|
|
? 'You need additional permissions to create branches'
|
|
: undefined,
|
|
},
|
|
}}
|
|
>
|
|
Create branch
|
|
</ButtonTooltip>
|
|
)
|
|
}
|