SqlWarningAdmonition.tsx63 lines · main

1	import { Button } from 'ui'
2	import { Admonition } from 'ui-patterns'
3
4	export interface SqlWarningAdmonitionProps {
5	warningType: 'hasWriteOperation' | 'hasUnknownFunctions'
6	onCancel: () => void
7	onConfirm: () => void
8	disabled?: boolean
9	className?: string
10	/** Optional override primary message */
11	message?: string
12	/** Optional override secondary message */
13	subMessage?: string
14	/** Optional override labels */
15	cancelLabel?: string
16	confirmLabel?: string
17	}
18
19	export const SqlWarningAdmonition = ({
20	warningType,
21	onCancel,
22	onConfirm,
23	disabled = false,
24	className,
25	message,
26	subMessage,
27	cancelLabel,
28	confirmLabel,
29	}: SqlWarningAdmonitionProps) => {
30	return (
31	<Admonition
32	type="warning"
33	className={`mb-0 rounded-none border-0 shrink-0 bg-background-100 ${className}`}
34	>
35	{!!message && (
36	<p className="text-xs mb-1!">
37	{`${
38	warningType === 'hasWriteOperation'
39	? 'This query contains write operations.'
40	: 'This query involves running a function.'
41	} Are you sure you want to execute it?`}
42	</p>
43	)}
44	<p className="text-foreground-light text-xs">
45	{subMessage ?? 'Make sure you are not accidentally removing something important.'}
46	</p>
47	<div className="flex justify-stretch mt-2 gap-2">
48	<Button type="outline" size="tiny" className="w-full flex-1" onClick={onCancel}>
49	{cancelLabel ?? 'Cancel'}
50	</Button>
51	<Button
52	type="danger"
53	size="tiny"
54	disabled={disabled}
55	className="w-full flex-1"
56	onClick={onConfirm}
57	>
58	{confirmLabel ?? 'Run'}
59	</Button>
60	</div>
61	</Admonition>
62	)
63	}