konnosDashboard
LockedQuerySection.tsx126 lines · main
1import type { PGPolicy } from '@supabase/pg-meta'
2import { Lock } from 'lucide-react'
3
4interface LockedCreateQuerySection {
5 schema: string
6 selectedPolicy?: PGPolicy
7 isRenamingPolicy: boolean
8 formFields: { name: string; table: string; behavior: string; command: string; roles: string }
9}
10
11export const LockedCreateQuerySection = ({
12 schema,
13 isRenamingPolicy,
14 selectedPolicy,
15 formFields,
16}: LockedCreateQuerySection) => {
17 const isEditing = selectedPolicy !== undefined
18 const { name, table, behavior, command, roles } = formFields
19
20 return (
21 <div className="bg-surface-300 pt-2 pb-1">
22 <div className="flex items-center justify-between px-5 mb-1">
23 <div className="flex items-center">
24 <div className="pl-0.5 pr-5 flex items-center justify-center">
25 <Lock size={14} className="text-foreground-lighter" />
26 </div>
27 <p className="text-xs text-foreground-lighter font-mono uppercase">
28 Use options above to edit
29 </p>
30 </div>
31 </div>
32 <div className="flex items-start" style={{ fontSize: '14px' }}>
33 <p className="px-6 font-mono text-sm text-foreground-light select-none">1</p>
34 <p className="font-mono tracking-tighter">
35 <span className="text-[#569cd6]">{isEditing ? 'alter' : 'create'}</span> policy "
36 {isRenamingPolicy ? selectedPolicy?.name : name.length === 0 ? 'policy_name' : name}"
37 </p>
38 </div>
39 <div className="flex items-start" style={{ fontSize: '14px' }}>
40 <p className="px-6 font-mono text-sm text-foreground-light select-none">2</p>
41 <p className="font-mono tracking-tighter">
42 <span className="text-[#569cd6]">on</span> "{schema}"."
43 {table}"
44 </p>
45 </div>
46 {!isEditing && (
47 <>
48 <div className="flex items-start" style={{ fontSize: '14px' }}>
49 <p className="px-6 font-mono text-sm text-foreground-light select-none">3</p>
50 <p className="font-mono tracking-tighter">
51 <span className="text-[#569cd6]">as</span> {behavior.toLocaleUpperCase()}
52 </p>
53 </div>
54 <div className="flex items-start" style={{ fontSize: '14px' }}>
55 <p className="px-6 font-mono text-sm text-foreground-light select-none">4</p>
56 <p className="font-mono tracking-tighter">
57 <span className="text-[#569cd6]">for</span> {command.toLocaleUpperCase()}
58 </p>
59 </div>
60 </>
61 )}
62 <div className="flex items-start" style={{ fontSize: '14px' }}>
63 <p className="px-6 font-mono text-sm text-foreground-light select-none">5</p>
64 <p className="font-mono tracking-tighter">
65 <span className="text-[#569cd6]">to</span> {roles.length === 0 ? 'public' : roles}
66 </p>
67 </div>
68 <div className="flex items-start" style={{ fontSize: '14px' }}>
69 <p className="px-6 font-mono text-sm text-foreground-light select-none">6</p>
70 <p className="font-mono tracking-tighter">
71 <span className="text-[#569cd6]">{command === 'insert' ? 'with check' : 'using'}</span>{' '}
72 <span className="text-[#ffd700]">(</span>
73 </p>
74 </div>
75 </div>
76 )
77}
78
79export const LockedRenameQuerySection = ({
80 oldName,
81 newName,
82 schema,
83 table,
84 lineNumber,
85}: {
86 oldName: string
87 newName: string
88 schema: string
89 table: string
90 lineNumber: number
91}) => {
92 return (
93 <div className="bg-surface-300 py-1">
94 <div className="flex items-center" style={{ fontSize: '14px' }}>
95 <div className="w-[57px]">
96 <p className="w-[31px] flex justify-end font-mono text-sm text-foreground-light select-none">
97 {lineNumber}
98 </p>
99 </div>
100 <p className="font-mono tracking-tighter">
101 <span className="text-[#569cd6]">alter</span> policy "{oldName}"
102 </p>
103 </div>
104 <div className="flex items-center" style={{ fontSize: '14px' }}>
105 <div className="w-[57px]">
106 <p className="w-[31px] flex justify-end font-mono text-sm text-foreground-light select-none">
107 {lineNumber + 1}
108 </p>
109 </div>
110 <p className="font-mono tracking-tighter">
111 <span className="text-[#569cd6]">on</span> "{schema}"."{table}"
112 </p>
113 </div>
114 <div className="flex items-center" style={{ fontSize: '14px' }}>
115 <div className="w-[57px]">
116 <p className="w-[31px] flex justify-end font-mono text-sm text-foreground-light select-none">
117 {lineNumber + 2}
118 </p>
119 </div>
120 <p className="font-mono tracking-tighter">
121 <span className="text-[#569cd6]">rename</span> to "{newName}";
122 </p>
123 </div>
124 </div>
125 )
126}