mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
Gildas GarciaandIvan Vasilov
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
117 lines
2.9 KiB
TypeScript
117 lines
2.9 KiB
TypeScript
import { SupportCategories } from '@supabase/shared-types/out/constants'
|
|
import { PropsWithChildren, useEffect, useRef } from 'react'
|
|
import { Button } from 'ui'
|
|
import { Admonition } from 'ui-patterns/admonition'
|
|
|
|
import { SupportLink } from '@/components/interfaces/Support/SupportLink'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
|
|
export interface AlertErrorProps {
|
|
projectRef?: string
|
|
subject?: string
|
|
description?: string
|
|
error?: { message: string } | null
|
|
layout?: 'vertical' | 'horizontal' | 'responsive'
|
|
className?: string
|
|
showIcon?: boolean
|
|
showInstructions?: boolean
|
|
showErrorPrefix?: boolean
|
|
additionalActions?: React.ReactNode
|
|
hideContactSupport?: boolean
|
|
}
|
|
|
|
export const ContactSupportButton = ({
|
|
projectRef,
|
|
subject,
|
|
error,
|
|
}: {
|
|
projectRef?: string
|
|
subject?: string
|
|
error?: { message: string } | null
|
|
}) => {
|
|
return (
|
|
<Button asChild variant="default" className="w-min">
|
|
<SupportLink
|
|
queryParams={{
|
|
category: SupportCategories.DASHBOARD_BUG,
|
|
projectRef,
|
|
subject,
|
|
error: error?.message,
|
|
}}
|
|
>
|
|
Contact support
|
|
</SupportLink>
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
// [Joshen] To standardize the language for all error UIs
|
|
export const AlertError = ({
|
|
projectRef,
|
|
subject,
|
|
description = 'Try refreshing your browser, but if the issue persists for more than a few minutes, please reach out to us via support.',
|
|
error,
|
|
className,
|
|
showIcon = true,
|
|
layout = 'responsive',
|
|
showInstructions = true,
|
|
showErrorPrefix = true,
|
|
children,
|
|
additionalActions,
|
|
hideContactSupport = false,
|
|
}: PropsWithChildren<AlertErrorProps>) => {
|
|
const track = useTrack()
|
|
const hasTrackedRef = useRef(false)
|
|
|
|
const formattedErrorMessage = error?.message?.includes('503')
|
|
? '503 Service Temporarily Unavailable'
|
|
: error?.message
|
|
|
|
useEffect(() => {
|
|
if (!hasTrackedRef.current) {
|
|
hasTrackedRef.current = true
|
|
if (Math.random() < 0.1) {
|
|
track('dashboard_error_created', {
|
|
source: 'admonition',
|
|
})
|
|
}
|
|
}
|
|
}, [track])
|
|
|
|
return (
|
|
<Admonition
|
|
type="warning"
|
|
layout={additionalActions ? 'vertical' : layout}
|
|
showIcon={showIcon}
|
|
title={subject}
|
|
description={
|
|
<>
|
|
{error?.message && (
|
|
<p>
|
|
{showErrorPrefix && 'Error: '}
|
|
{formattedErrorMessage}
|
|
</p>
|
|
)}
|
|
{showInstructions && <p>{description}</p>}
|
|
{children}
|
|
</>
|
|
}
|
|
actions={
|
|
hideContactSupport ? (
|
|
(additionalActions ?? null)
|
|
) : additionalActions ? (
|
|
<>
|
|
{additionalActions}
|
|
<ContactSupportButton projectRef={projectRef} subject={subject} error={error} />
|
|
</>
|
|
) : (
|
|
<ContactSupportButton projectRef={projectRef} subject={subject} error={error} />
|
|
)
|
|
}
|
|
className={className}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default AlertError
|