konnosDashboard
Project.tsx110 lines · main
1import Link from 'next/link'
2import { Button, Card, CardContent } from 'ui'
3import {
4 PageSection,
5 PageSectionContent,
6 PageSectionDescription,
7 PageSectionMeta,
8 PageSectionSummary,
9 PageSectionTitle,
10} from 'ui-patterns/PageSection'
11
12import PauseProjectButton from './Infrastructure/PauseProjectButton'
13import RestartServerButton from './Infrastructure/RestartServerButton'
14import { ResumeProjectButton } from '@/components/interfaces/Project/ResumeProjectButton'
15import { useProjectPauseStatusQuery } from '@/data/projects/project-pause-status-query'
16import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
17import { useSelectedProjectQuery } from '@/hooks/misc/useSelectedProject'
18import { PROJECT_STATUS } from '@/lib/constants'
19
20export const Project = () => {
21 const { data: project } = useSelectedProjectQuery()
22 const isPaused = project?.status === PROJECT_STATUS.INACTIVE
23 const { projectSettingsRestartProject } = useIsFeatureEnabled([
24 'project_settings:restart_project',
25 ])
26 const {
27 data: pauseStatus,
28 isError: isPauseStatusError,
29 isSuccess: isPauseStatusSuccess,
30 } = useProjectPauseStatusQuery({ ref: project?.ref }, { enabled: isPaused })
31
32 const shouldShowDashboardLink =
33 isPaused && (isPauseStatusError || (isPauseStatusSuccess && !pauseStatus.can_restore))
34
35 const primaryActionLabel = isPaused
36 ? shouldShowDashboardLink
37 ? 'View project dashboard'
38 : 'Resume project'
39 : projectSettingsRestartProject
40 ? 'Restart project'
41 : 'Restart database'
42
43 const primaryActionDescription = isPaused
44 ? isPauseStatusSuccess && !pauseStatus.can_restore
45 ? 'This project can no longer be resumed here. Open the dashboard to download backups and view recovery options.'
46 : isPauseStatusError
47 ? 'Open the dashboard to manage this paused project.'
48 : 'Bring your paused project back online.'
49 : 'Your project will not be available for a few minutes.'
50
51 return (
52 <>
53 <PageSection id="restart-project">
54 <PageSectionMeta>
55 <PageSectionSummary>
56 <PageSectionTitle>Project availability</PageSectionTitle>
57 <PageSectionDescription>
58 {isPaused
59 ? 'Resume your paused project or review recovery options'
60 : 'Restart or pause your project when performing maintenance'}
61 </PageSectionDescription>
62 </PageSectionSummary>
63 </PageSectionMeta>
64 <PageSectionContent>
65 <Card>
66 <CardContent>
67 <div className="flex flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4">
68 <div>
69 <p className="text-sm">{primaryActionLabel}</p>
70 <div className="max-w-[420px]">
71 <p className="text-sm text-foreground-light">{primaryActionDescription}</p>
72 </div>
73 </div>
74 {isPaused ? (
75 shouldShowDashboardLink ? (
76 <Button asChild type="default">
77 <Link href={`/project/${project?.ref}`}>View project dashboard</Link>
78 </Button>
79 ) : (
80 <ResumeProjectButton />
81 )
82 ) : (
83 <RestartServerButton />
84 )}
85 </div>
86 </CardContent>
87 {!isPaused && (
88 <CardContent>
89 <div
90 className="flex w-full flex-col @lg:flex-row @lg:justify-between @lg:items-center gap-4"
91 id="pause-project"
92 >
93 <div>
94 <p className="text-sm">Pause project</p>
95 <div className="max-w-[420px]">
96 <p className="text-sm text-foreground-light">
97 Your project will not be accessible while it is paused.
98 </p>
99 </div>
100 </div>
101 <PauseProjectButton />
102 </div>
103 </CardContent>
104 )}
105 </Card>
106 </PageSectionContent>
107 </PageSection>
108 </>
109 )
110}