mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
Ivan VasilovandJoshen Lim
05a542ccea
* Add lucide-react to docs (to make the autocomplete work). * Migrate the docs app icons. * Migrate the ui-patterns. * Remove the old icons from ui package. * Migrate the www app from react-feather icons. * Migrate all of studio icons. * Migrate the only component in design-system. * Fix an old import in ui package. Revert an import in docs app. * Fix some pages in www. * Remove unneeded files used in generation of icons. * Fix a prettier error. * Fix more issues in www. * Fix an issue in Log Date picker. * Replace all string sizes with number sizes because the icons grew in some cases. * Fix more imports in security page. * Fix an extra import. * Remove the size prop from all icons if they're in a button and they match the button size. * Minor fixes for docs and www. --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { useQueryClient } from '@tanstack/react-query'
|
|
import { useParams } from 'common'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { Button } from 'ui'
|
|
|
|
import { projectKeys } from 'data/projects/keys'
|
|
import { invalidateProjectDetailsQuery } from 'data/projects/project-detail-query'
|
|
import { getWithTimeout } from 'lib/common/fetch'
|
|
import { API_URL, PROJECT_STATUS } from 'lib/constants'
|
|
import { useProjectContext } from './ProjectContext'
|
|
import { CheckCircle, Loader } from 'lucide-react'
|
|
|
|
const RestoringState = () => {
|
|
const { ref } = useParams()
|
|
const queryClient = useQueryClient()
|
|
const { project } = useProjectContext()
|
|
const checkServerInterval = useRef<number>()
|
|
|
|
const [loading, setLoading] = useState(false)
|
|
const [isCompleted, setIsCompleted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
checkServerInterval.current = window.setInterval(checkServer, 4000)
|
|
return () => clearInterval(checkServerInterval.current)
|
|
}, [])
|
|
|
|
async function checkServer() {
|
|
if (!project) return
|
|
|
|
const projectStatus = await getWithTimeout(`${API_URL}/projects/${project.ref}/status`, {
|
|
timeout: 2000,
|
|
})
|
|
if (projectStatus && !projectStatus.error) {
|
|
const { status } = projectStatus
|
|
if (status === PROJECT_STATUS.ACTIVE_HEALTHY) {
|
|
clearInterval(checkServerInterval.current)
|
|
setIsCompleted(true)
|
|
} else {
|
|
queryClient.invalidateQueries(projectKeys.detail(ref))
|
|
}
|
|
}
|
|
}
|
|
|
|
const onConfirm = async () => {
|
|
if (!project) return console.error('Project is required')
|
|
|
|
setLoading(true)
|
|
if (ref) await invalidateProjectDetailsQuery(queryClient, ref)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center justify-center h-full">
|
|
<div className="bg-surface-100 border border-overlay rounded-md w-3/4 lg:w-1/2">
|
|
{isCompleted ? (
|
|
<div className="space-y-6 pt-6">
|
|
<div className="flex px-8 space-x-8">
|
|
<div className="mt-1">
|
|
<CheckCircle className="text-brand" size={18} strokeWidth={2} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p>Restoration complete!</p>
|
|
<p className="text-sm text-foreground-light">
|
|
Your project has been successfully restored and is now back online.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-overlay flex items-center justify-end py-4 px-8">
|
|
<Button disabled={loading} loading={loading} onClick={onConfirm}>
|
|
Return to project
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6 py-6">
|
|
<div className="flex px-8 space-x-8">
|
|
<div className="mt-1">
|
|
<Loader className="animate-spin" size={18} />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p>Restoration in progress</p>
|
|
<p className="text-sm text-foreground-light">
|
|
Restoration can take from a few minutes up to several hours depending on the size
|
|
of your database. Your project will be offline while the restoration is running.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RestoringState
|