konnosDashboard
PolicyReview.tsx66 lines · main
1import { isEmpty, noop } from 'lodash'
2import { useState } from 'react'
3import { Button, Modal } from 'ui'
4
5import type { PolicyForReview } from './Policies.types'
6import SqlEditor from '@/components/ui/SqlEditor'
7
8interface PolicyReviewProps {
9 policy: PolicyForReview
10 onSelectBack: () => void
11 onSelectSave: () => void
12}
13
14export const PolicyReview = ({
15 policy = {},
16 onSelectBack = noop,
17 onSelectSave = noop,
18}: PolicyReviewProps) => {
19 const [isSaving, setIsSaving] = useState(false)
20 const onSavePolicy = () => {
21 setIsSaving(true)
22 onSelectSave()
23 }
24
25 let formattedSQLStatement = policy.statement || ''
26
27 return (
28 <>
29 <Modal.Content>
30 <div className="space-y-6">
31 <div className="flex items-center justify-between space-y-8">
32 <div className="flex flex-col">
33 <p className="text-sm text-foreground-light">
34 This is the SQL statement that will be used to create your policy.
35 </p>
36 </div>
37 </div>
38 <div className="space-y-4 overflow-y-auto" style={{ maxHeight: '25rem' }}>
39 {isEmpty(policy) ? (
40 <div className="my-10 flex items-center justify-center space-x-2 opacity-50">
41 <p className="text-base text-foreground-light">
42 There are no changes made to this policy
43 </p>
44 </div>
45 ) : (
46 <div className="space-y-2">
47 <span>{policy.description}</span>
48 <div className="h-40">
49 <SqlEditor readOnly defaultValue={formattedSQLStatement} />
50 </div>
51 </div>
52 )}
53 </div>
54 </div>
55 </Modal.Content>
56 <div className="flex w-full items-center justify-end gap-2 border-t px-6 py-4 border-default">
57 <Button type="default" onClick={onSelectBack}>
58 Back to edit
59 </Button>
60 <Button type="primary" disabled={isEmpty(policy)} onClick={onSavePolicy} loading={isSaving}>
61 Save policy
62 </Button>
63 </div>
64 </>
65 )
66}