StorageBucketsError.tsx50 lines · main

1	import { SupportCategories } from '@supabase/shared-types/out/constants'
2	import { useParams } from 'common'
3	import { Button } from 'ui'
4	import { Admonition } from 'ui-patterns/admonition'
5
6	import { SupportLink } from '../Support/SupportLink'
7	import type { ResponseError } from '@/types'
8
9	export interface StorageBucketsErrorProps {
10	error: ResponseError
11	}
12
13	const StorageBucketsError = ({ error }: StorageBucketsErrorProps) => {
14	const { ref } = useParams()
15
16	return (
17	<div className="storage-container flex items-center justify-center grow">
18	<div>
19	<Admonition
20	type="warning"
21	layout="horizontal"
22	title="Failed to fetch buckets"
23	description={
24	<>
25	<p className="mb-1">
26	Please try refreshing your browser, or contact support if the issue persists
27	</p>
28	<p>Error: {(error as any)?.message ?? 'Unknown'}</p>
29	</>
30	}
31	actions={
32	<Button key="contact-support" asChild type="default" className="ml-4">
33	<SupportLink
34	queryParams={{
35	projectRef: ref,
36	category: SupportCategories.DASHBOARD_BUG,
37	subject: 'Unable to fetch storage buckets',
38	}}
39	>
40	Contact support
41	</SupportLink>
42	</Button>
43	}
44	/>
45	</div>
46	</div>
47	)
48	}
49
50	export default StorageBucketsError