Skip to content

Commit e5bf324

Browse files
izadoesdevizadoesdev
committed
fix: settings page
1 parent 684ae8b commit e5bf324

File tree

3 files changed

+38
-210
lines changed

3 files changed

+38
-210
lines changed

‎apps/dashboard/app/(main)/observability/database/[id]/page.tsx‎

Lines changed: 27 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -336,46 +336,43 @@ export default function DatabasePage({ params }: DatabasePageProps) {
336336
// Show loading state while connection is loading
337337
if (isLoadingConnection) {
338338
return (
339-
<Card className="rounded">
340-
<CardContent className="flex items-center justify-center py-12">
341-
<div className="flex items-center gap-2 text-muted-foreground">
342-
<SpinnerIcon className="h-4 w-4 animate-spin" />
343-
<span>Loading database connection...</span>
344-
</div>
345-
</CardContent>
346-
</Card>
339+
<Card className="rounded">
340+
<CardContent className="flex items-center justify-center py-12">
341+
<div className="flex items-center gap-2 text-muted-foreground">
342+
<SpinnerIcon className="h-4 w-4 animate-spin" />
343+
<span>Loading database connection...</span>
344+
</div>
345+
</CardContent>
346+
</Card>
347347
);
348348
}
349349

350350
if (connectionError) {
351351
return (
352-
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
353-
<CardContent className="pt-6">
354-
<div className="flex items-center gap-3 text-red-600">
355-
<DatabaseIcon className="h-5 w-5" weight="duotone" />
356-
<p className="font-medium">Failed to load database connection</p>
357-
</div>
358-
<p className="mt-2 text-red-600/80 text-sm">
359-
{connectionError.message}
360-
</p>
361-
</CardContent>
362-
</Card>
352+
<Card className="rounded border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950">
353+
<CardContent className="pt-6">
354+
<div className="flex items-center gap-3 text-red-600">
355+
<DatabaseIcon className="h-5 w-5" weight="duotone" />
356+
<p className="font-medium">Failed to load database connection</p>
357+
</div>
358+
<p className="mt-2 text-red-600/80 text-sm">
359+
{connectionError.message}
360+
</p>
361+
</CardContent>
362+
</Card>
363363
);
364364
}
365365

366366
if (!connection) {
367367
return (
368-
<Card className="rounded">
369-
<CardContent className="pt-6">
370-
<div className="text-center text-muted-foreground">
371-
<DatabaseIcon
372-
className="mx-auto mb-4 h-12 w-12"
373-
weight="duotone"
374-
/>
375-
<p className="font-medium">Database connection not found</p>
376-
</div>
377-
</CardContent>
378-
</Card>
368+
<Card className="rounded">
369+
<CardContent className="pt-6">
370+
<div className="text-center text-muted-foreground">
371+
<DatabaseIcon className="mx-auto mb-4 h-12 w-12" weight="duotone" />
372+
<p className="font-medium">Database connection not found</p>
373+
</div>
374+
</CardContent>
375+
</Card>
379376
);
380377
}
381378

‎apps/dashboard/app/(main)/observability/database/[id]/settings/page.tsx‎

Lines changed: 10 additions & 179 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,7 @@ import {
44
CheckIcon,
55
DatabaseIcon,
66
GearIcon,
7-
KeyIcon,
87
PencilIcon,
9-
ShieldCheckIcon,
10-
ShieldWarningIcon,
118
TrashIcon,
129
WarningIcon,
1310
} from '@phosphor-icons/react';
@@ -62,7 +59,7 @@ function LoadingState() {
6259
</Card>
6360
))}
6461
</div>
65-
</div>
62+
</>
6663
);
6764
}
6865

@@ -140,88 +137,6 @@ function EditConnectionDialog({
140137
);
141138
}
142139

143-
function UpgradeConnectionDialog({
144-
open,
145-
onOpenChange,
146-
connectionId,
147-
onSuccess,
148-
}: {
149-
open: boolean;
150-
onOpenChange: (open: boolean) => void;
151-
connectionId: string;
152-
onSuccess: () => void;
153-
}) {
154-
const [adminUrl, setAdminUrl] = useState('');
155-
156-
const upgradeMutation = trpc.dbConnections.updateUrl.useMutation({
157-
onSuccess: () => {
158-
onSuccess();
159-
onOpenChange(false);
160-
setAdminUrl('');
161-
},
162-
});
163-
164-
const handleUpgrade = () => {
165-
if (!adminUrl) {
166-
return;
167-
}
168-
upgradeMutation.mutate({
169-
id: connectionId,
170-
adminUrl,
171-
permissionLevel: 'admin',
172-
});
173-
};
174-
175-
return (
176-
<Dialog onOpenChange={onOpenChange} open={open}>
177-
<DialogContent>
178-
<DialogHeader>
179-
<DialogTitle>Upgrade to Admin Access</DialogTitle>
180-
<DialogDescription>
181-
Provide an admin connection URL to enable full database management
182-
capabilities.
183-
</DialogDescription>
184-
</DialogHeader>
185-
<div className="space-y-4">
186-
<div>
187-
<Label htmlFor="admin-url">Admin Database URL</Label>
188-
<Input
189-
id="admin-url"
190-
onChange={(e) => setAdminUrl(e.target.value)}
191-
placeholder="postgresql://admin:password@host:5432/database"
192-
type="password"
193-
value={adminUrl}
194-
/>
195-
<p className="mt-1 text-muted-foreground text-xs">
196-
This will create a new admin user and replace your current
197-
connection.
198-
</p>
199-
</div>
200-
{upgradeMutation.error && (
201-
<Alert className="border-red-200 bg-red-50 dark:border-red-800 dark:bg-red-950/20">
202-
<WarningIcon className="h-4 w-4 text-red-600" />
203-
<AlertDescription className="text-red-800 dark:text-red-200">
204-
{upgradeMutation.error.message}
205-
</AlertDescription>
206-
</Alert>
207-
)}
208-
</div>
209-
<DialogFooter>
210-
<Button onClick={() => onOpenChange(false)} variant="outline">
211-
Cancel
212-
</Button>
213-
<Button
214-
disabled={!adminUrl || upgradeMutation.isPending}
215-
onClick={handleUpgrade}
216-
>
217-
{upgradeMutation.isPending ? 'Upgrading...' : 'Upgrade'}
218-
</Button>
219-
</DialogFooter>
220-
</DialogContent>
221-
</Dialog>
222-
);
223-
}
224-
225140
function DeleteConnectionDialog({
226141
open,
227142
onOpenChange,
@@ -311,7 +226,7 @@ export default function ConnectionSettingsPage({
311226
params,
312227
}: ConnectionSettingsPageProps) {
313228
const [editDialog, setEditDialog] = useState(false);
314-
const [upgradeDialog, setUpgradeDialog] = useState(false);
229+
315230
const [deleteDialog, setDeleteDialog] = useState(false);
316231
const [success, setSuccess] = useState<string | null>(null);
317232

@@ -349,8 +264,6 @@ export default function ConnectionSettingsPage({
349264
);
350265
}
351266

352-
const isAdmin = connection.permissionLevel === 'admin';
353-
354267
return (
355268
<>
356269
{/* Header */}
@@ -435,67 +348,6 @@ export default function ConnectionSettingsPage({
435348
</CardContent>
436349
</Card>
437350

438-
{/* Permission Management */}
439-
<Card>
440-
<CardHeader>
441-
<CardTitle className="flex items-center gap-2">
442-
<KeyIcon className="h-5 w-5" />
443-
Permission Level
444-
</CardTitle>
445-
<CardDescription>
446-
Manage database access permissions and capabilities
447-
</CardDescription>
448-
</CardHeader>
449-
<CardContent className="space-y-4">
450-
<div className="flex items-center justify-between">
451-
<div className="space-y-1">
452-
<div className="flex items-center gap-2">
453-
{isAdmin ? (
454-
<>
455-
<ShieldCheckIcon className="h-4 w-4 text-green-600" />
456-
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
457-
Admin Access
458-
</Badge>
459-
</>
460-
) : (
461-
<>
462-
<ShieldWarningIcon className="h-4 w-4 text-amber-600" />
463-
<Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-400">
464-
Read-Only Access
465-
</Badge>
466-
</>
467-
)}
468-
</div>
469-
<p className="text-muted-foreground text-sm">
470-
{isAdmin
471-
? 'Full database management capabilities including extension installation and configuration changes'
472-
: 'Limited to monitoring and read-only operations. Upgrade to admin for full management capabilities'}
473-
</p>
474-
</div>
475-
{!isAdmin && (
476-
<Button onClick={() => setUpgradeDialog(true)} variant="outline">
477-
Upgrade to Admin
478-
</Button>
479-
)}
480-
</div>
481-
482-
{isAdmin && (
483-
<Alert className="border-green-200 bg-green-50 dark:border-green-800 dark:bg-green-950/20">
484-
<CheckIcon className="h-4 w-4 text-green-600" />
485-
<AlertDescription className="text-green-800 dark:text-green-200">
486-
<strong>Admin capabilities enabled:</strong>
487-
<ul className="mt-2 list-inside list-disc space-y-1 text-sm">
488-
<li>Install and manage PostgreSQL extensions</li>
489-
<li>Modify database configuration</li>
490-
<li>Create and manage database users</li>
491-
<li>Full monitoring and performance analysis</li>
492-
</ul>
493-
</AlertDescription>
494-
</Alert>
495-
)}
496-
</CardContent>
497-
</Card>
498-
499351
{/* Connection Details */}
500352
<Card>
501353
<CardHeader>
@@ -545,11 +397,11 @@ export default function ConnectionSettingsPage({
545397
<Card>
546398
<CardHeader>
547399
<CardTitle className="flex items-center gap-2">
548-
<ShieldCheckIcon className="h-5 w-5" />
400+
<DatabaseIcon className="h-5 w-5" />
549401
Monitoring & Access
550402
</CardTitle>
551403
<CardDescription>
552-
Current monitoring capabilities based on your permission level
404+
Database monitoring and access capabilities
553405
</CardDescription>
554406
</CardHeader>
555407
<CardContent className="space-y-4">
@@ -584,15 +436,9 @@ export default function ConnectionSettingsPage({
584436
Install and manage PostgreSQL extensions
585437
</p>
586438
</div>
587-
{isAdmin ? (
588-
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
589-
Enabled
590-
</Badge>
591-
) : (
592-
<Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-400">
593-
Requires Admin
594-
</Badge>
595-
)}
439+
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
440+
Enabled
441+
</Badge>
596442
</div>
597443
<div className="flex items-center justify-between rounded border p-3">
598444
<div className="space-y-1">
@@ -601,15 +447,9 @@ export default function ConnectionSettingsPage({
601447
Modify database settings and parameters
602448
</p>
603449
</div>
604-
{isAdmin ? (
605-
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
606-
Enabled
607-
</Badge>
608-
) : (
609-
<Badge className="bg-amber-100 text-amber-800 dark:bg-amber-900/20 dark:text-amber-400">
610-
Requires Admin
611-
</Badge>
612-
)}
450+
<Badge className="bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400">
451+
Enabled
452+
</Badge>
613453
</div>
614454
</div>
615455
</CardContent>
@@ -659,15 +499,6 @@ export default function ConnectionSettingsPage({
659499
open={editDialog}
660500
/>
661501

662-
<UpgradeConnectionDialog
663-
connectionId={connectionId}
664-
onOpenChange={setUpgradeDialog}
665-
onSuccess={() =>
666-
handleSuccess('Connection upgraded to admin successfully')
667-
}
668-
open={upgradeDialog}
669-
/>
670-
671502
<DeleteConnectionDialog
672503
connection={connection}
673504
onOpenChange={setDeleteDialog}

‎packages/db/src/drizzle/schema.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -908,7 +908,7 @@ export const dbConnections = pgTable(
908908
url: text('url').notNull(),
909909
permissionLevel: dbPermissionLevel('permission_level')
910910
.notNull()
911-
.default('readonly'),
911+
.default('admin'),
912912
organizationId: text('organization_id'),
913913
createdAt: timestamp('created_at', { mode: 'string' })
914914
.default(sql`CURRENT_TIMESTAMP`)

0 commit comments

Comments
 (0)