Files
supabase/studio/components/ui/AlertError.tsx
T
Ivan VasilovandJoshen Lim e02181aba8 feat: Realtime inspector (#17617)
* Initial work.

* Cleanup the listbox component.

* Set the endpoint correctly.

* Add checks for permissions on the realtime inspector.

* Make the select for choosing tokens.

* Make the JWT input work with the toggle.

* Change the icon for broadcast.

* Add a modal for sending an event.

* Fix the events table to use react-data-grid.

* Remove table id.

* Refactor the no-results component.

* Fix the listening state to match the new designs.

* Add a functional no results component.

* Remove unnecessary index page on realtime

* First round of small styling and interaction behaviours fixes

* Another round of small styling fixes

* One more styling fix

* Another style fix

* One last styling fixes

* Add line

* last last fix

* Rename events to messages.

* Rename all files related to realtime messages to use the message wording.

* Update the icon for realtime in the left sidebar.

* Minor fix for the shimmer line.

* Make the Realtime icons use currentColor.

* Listen to all schemas by default.

* Add all schemas option to the schema filter.

* Fix the colors for error rows in the realtime table.

* Fix the system icon to sit in center.

* Use the correct icon for the right bar navigation.

* Remove the realtime icon since it's not used anywhere.

* Fix the filter popover colors.

* Remove the side panel background color.

* Add link to documentation on the filtering panel.

* Refactor the RLS popover to the new design.

* Minor styling fixes.

* Add code editor to the send message modal.

* Update the wording per Terry suggestions.

* Remove default channel + fix filter button styling

* Small styling fixes

* Update messagestable

* Deprecate all schema selector, extend existing schema selector

* remove unnecessary divs

* Last few fixes

* okay last few

* Small padding issue

* Improve label

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2023-11-06 15:32:20 +08:00

51 lines
1.4 KiB
TypeScript

import Link from 'next/link'
import { ResponseError } from 'types'
import {
AlertDescription_Shadcn_,
AlertTitle_Shadcn_,
Alert_Shadcn_,
Button,
IconAlertCircle,
} from 'ui'
export interface AlertErrorProps {
ref?: string
subject?: string
error?: ResponseError | null
className?: string
}
// [Joshen] To standardize the language for all error UIs
const AlertError = ({ ref, subject, error, className }: AlertErrorProps) => {
const subjectString = subject?.replace(/ /g, '%20')
let href = `/support/new?category=dashboard_bug`
if (ref) href += `&ref=${ref}`
if (subjectString) href += `&subject=${subjectString}`
if (error) href += `&message=Error:%20${error.message}`
return (
<Alert_Shadcn_ className={className} variant="warning" title={subject}>
<IconAlertCircle className="h-4 w-4" color="bg-warning-300" strokeWidth={2} />
<AlertTitle_Shadcn_>{subject}</AlertTitle_Shadcn_>
<AlertDescription_Shadcn_ className="flex flex-col gap-3">
<div>
{error?.message && <p>Error: {error?.message}</p>}
<p>
Try refreshing your browser, but if the issue persists, please reach out to us via
support.
</p>
</div>
<div>
<Button asChild type="warning">
<Link href={href}>Contact support</Link>
</Button>
</div>
</AlertDescription_Shadcn_>
</Alert_Shadcn_>
)
}
export default AlertError