DeleteProjectPanel.tsx53 lines · main

1	import { Alert, AlertDescription, AlertTitle, CriticalIcon } from 'ui'
2	import {
3	PageSection,
4	PageSectionContent,
5	PageSectionDescription,
6	PageSectionMeta,
7	PageSectionSummary,
8	PageSectionTitle,
9	} from 'ui-patterns/PageSection'
10
11	import { DeleteProjectButton } from './DeleteProjectButton'
12	import { useSelectedOrganizationQuery } from '@/hooks/misc/useSelectedOrganization'
13	import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
14
15	export const DeleteProjectPanel = () => {
16	const { data: project } = useSelectedProjectQuery()
17	const { data: selectedOrganization } = useSelectedOrganizationQuery()
18
19	if (project === undefined) return null
20
21	const title =
22	selectedOrganization?.managed_by === 'vercel-marketplace'
23	? 'Deleting this project will also remove your database and uninstall the resource on Vercel.'
24	: 'Deleting this project will also remove your database.'
25	const description =
26	selectedOrganization?.managed_by === 'vercel-marketplace'
27	? 'Make sure you have made a backup if you want to keep your data, and that no Vercel project is connected to this resource.'
28	: 'Make sure you have made a backup if you want to keep your data.'
29
30	return (
31	<PageSection id="delete-project">
32	<PageSectionMeta>
33	<PageSectionSummary>
34	<PageSectionTitle>Delete project</PageSectionTitle>
35	<PageSectionDescription>
36	Permanently remove your project and its database
37	</PageSectionDescription>
38	</PageSectionSummary>
39	</PageSectionMeta>
40
41	<PageSectionContent>
42	<Alert variant="destructive">
43	<CriticalIcon />
44	<AlertTitle>{title}</AlertTitle>
45	<AlertDescription>{description}</AlertDescription>
46	<div className="mt-2">
47	<DeleteProjectButton />
48	</div>
49	</Alert>
50	</PageSectionContent>
51	</PageSection>
52	)
53	}