DeleteProjectButton.tsx41 lines · main

1	import { PermissionAction } from '@supabase/shared-types/out/constants'
2	import { useState } from 'react'
3
4	import { DeleteProjectModal } from './DeleteProjectModal'
5	import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
6	import { useAsyncCheckPermissions } from '@/hooks/misc/useCheckPermissions'
7	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
8
9	export interface DeleteProjectButtonProps {
10	type?: 'danger' | 'default'
11	}
12
13	export const DeleteProjectButton = ({ type = 'danger' }: DeleteProjectButtonProps) => {
14	const { data: project } = useSelectedProjectQuery()
15	const [isOpen, setIsOpen] = useState(false)
16
17	const { can: canDeleteProject } = useAsyncCheckPermissions(PermissionAction.UPDATE, 'projects', {
18	resource: { project_id: project?.id },
19	})
20
21	return (
22	<>
23	<ButtonTooltip
24	type={type}
25	disabled={!canDeleteProject}
26	onClick={() => setIsOpen(true)}
27	tooltip={{
28	content: {
29	side: 'bottom',
30	text: !canDeleteProject
31	? 'You need additional permissions to delete this project'
32	: undefined,
33	},
34	}}
35	>
36	Delete project
37	</ButtonTooltip>
38	<DeleteProjectModal visible={isOpen} onClose={() => setIsOpen(false)} />
39	</>
40	)
41	}