StoragePoliciesReview.tsx73 lines · main

1	import { useState } from 'react'
2	import { Button, Modal } from 'ui'
3
4	import SqlEditor from '@/components/ui/SqlEditor'
5
6	const ReviewEmptyState = () => {
7	return (
8	<div className="my-10 flex items-center justify-center space-x-2 opacity-50">
9	<p>There are no changes made to this policy</p>
10	</div>
11	)
12	}
13
14	interface StoragePoliciesReviewProps {
15	policyStatements: any[]
16	onSelectBack: any
17	onSelectSave: any
18	}
19
20	const StoragePoliciesReview = ({
21	policyStatements = [],
22	onSelectBack = () => {},
23	onSelectSave = () => {},
24	}: StoragePoliciesReviewProps) => {
25	const [isSaving, setIsSaving] = useState(false)
26	const onSavePolicy = () => {
27	setIsSaving(true)
28	onSelectSave()
29	}
30
31	return (
32	<>
33	<Modal.Content className="space-y-6">
34	<div className="flex items-center justify-between space-y-8 space-x-4">
35	<div className="flex flex-col">
36	<p className="text-sm text-foreground-light">
37	These are the SQL statements that will be used to create your policies. The suffix
38	appended to the end of your policy name (<code>[hashString]_[number]</code>) just
39	functions as a unique identifier for each of your policies.
40	</p>
41	</div>
42	</div>
43	<div className="space-y-4 overflow-y-auto" style={{ maxHeight: '25rem' }}>
44	{policyStatements.length === 0 && <ReviewEmptyState />}
45	{policyStatements.map((policy, idx) => {
46	let formattedSQLStatement = policy.statement || ''
47	return (
48	<div key={`policy_${idx}`} className="space-y-2">
49	<span>{policy.description}</span>
50	<div className="h-40">
51	<SqlEditor readOnly defaultValue={formattedSQLStatement} />
52	</div>
53	</div>
54	)
55	})}
56	</div>
57	</Modal.Content>
58	<Modal.Separator />
59	<Modal.Content className="flex w-full items-center justify-end gap-2">
60	<Button type="default" onClick={onSelectBack}>
61	Back to edit
62	</Button>
63	{policyStatements.length > 0 && (
64	<Button type="primary" onClick={onSavePolicy} loading={isSaving}>
65	Save policy
66	</Button>
67	)}
68	</Modal.Content>
69	</>
70	)
71	}
72
73	export default StoragePoliciesReview