Skip to content

Add hosted databases management page with delete and reset password d… #1684

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lyubov-voloshko merged 2 commits into from
Mar 25, 2026
Merged

Add hosted databases management page with delete and reset password d… #1684

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
af6ab5a
Add hosted databases management page with delete and reset password d…
gugu Mar 23, 2026
b4fb10a
Merge branch 'main' into manage-hosted-dbs
lyubov-voloshko Mar 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions frontend/src/app/app-routing.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,14 @@ const routes: Routes = [
path: 'change-password',
loadChildren: () => import('./routes/password-change.routes').then((m) => m.PASSWORD_CHANGE_ROUTES),
},
{
path: 'hosted-databases',
pathMatch: 'full',
loadComponent: () =>
import('./components/hosted-databases/hosted-databases.component').then((m) => m.HostedDatabasesComponent),
canActivate: [AuthGuard],
title: 'Hosted Databases | Rocketadmin',
},
{
path: 'upgrade',
loadComponent: () => import('./components/upgrade/upgrade.component').then((m) => m.UpgradeComponent),
Expand Down
3 changes: 3 additions & 0 deletions ...osted-databases/hosted-database-delete-dialog/hosted-database-delete-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.mat-mdc-dialog-content {
margin-bottom: -20px;
}
15 changes: 15 additions & 0 deletions ...sted-databases/hosted-database-delete-dialog/hosted-database-delete-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<h1 mat-dialog-title>Delete <strong>{{ data.databaseName }}</strong></h1>
<mat-dialog-content>
<p class="mat-body">
This will permanently delete the hosted database and all its data.
This action cannot be undone.
</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
<button type="button" mat-flat-button color="warn"
[disabled]="submitting()"
(click)="deleteDatabase()">
{{ submitting() ? 'Deleting...' : 'Delete' }}
</button>
</mat-dialog-actions>
38 changes: 38 additions & 0 deletions ...hosted-databases/hosted-database-delete-dialog/hosted-database-delete-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { Component, inject, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import posthog from 'posthog-js';
import { FoundHostedDatabase } from 'src/app/models/hosted-database';
import { HostedDatabaseService } from 'src/app/services/hosted-database.service';
import { NotificationsService } from 'src/app/services/notifications.service';

@Component({
selector: 'app-hosted-database-delete-dialog',
templateUrl: './hosted-database-delete-dialog.component.html',
styleUrls: ['./hosted-database-delete-dialog.component.css'],
imports: [MatDialogModule, MatButtonModule],
})
export class HostedDatabaseDeleteDialogComponent {
private _hostedDatabaseService = inject(HostedDatabaseService);
private _notifications = inject(NotificationsService);
private _dialogRef = inject(MatDialogRef<HostedDatabaseDeleteDialogComponent>);

protected data: FoundHostedDatabase = inject(MAT_DIALOG_DATA);
protected submitting = signal(false);

async deleteDatabase(): Promise<void> {
this.submitting.set(true);

try {
const result = await this._hostedDatabaseService.deleteHostedDatabase(this.data.companyId, this.data.id);

if (result?.success) {
posthog.capture('Hosted Databases: database deleted', { databaseName: this.data.databaseName });
this._notifications.showSuccessSnackbar('Hosted database deleted successfully.');
this._dialogRef.close('delete');
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HostedDatabaseDeleteDialogComponent only closes the dialog when result?.success is truthy; if the API returns { success: false } (a valid response per the method’s return type), the dialog stays open with no feedback to the user. Consider handling the non-success case explicitly (e.g., show an error snackbar/alert and keep the dialog actionable, or close with a failure result).

Suggested change
this._dialogRef.close('delete');
this._dialogRef.close('delete');
} else {
this._notifications.showErrorSnackbar('Failed to delete hosted database. Please try again.');

Copilot uses AI. Check for mistakes.
}
} finally {
this.submitting.set(false);
}
}
Comment on lines +23 to +37
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing error feedback when deletion fails.

If result?.success is falsy (e.g., API returns { success: false } or an error occurs), the user receives no feedback and the dialog remains open with submitting reset to false. Consider showing an error notification.

🛡️ Proposed fix to add error handling 
 async deleteDatabase(): Promise<void> {
 	this.submitting.set(true);

 	try {
 		const result = await this._hostedDatabaseService.deleteHostedDatabase(this.data.companyId, this.data.id);

 		if (result?.success) {
 			posthog.capture('Hosted Databases: database deleted', { databaseName: this.data.databaseName });
 			this._notifications.showSuccessSnackbar('Hosted database deleted successfully.');
 			this._dialogRef.close('delete');
+		} else {
+			this._notifications.showErrorSnackbar('Failed to delete database. Please try again.');
 		}
+	} catch {
+		this._notifications.showErrorSnackbar('Failed to delete database. Please try again.');
 	} finally {
 		this.submitting.set(false);
 	}
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
async deleteDatabase(): Promise<void> {
this.submitting.set(true);
try {
const result = await this._hostedDatabaseService.deleteHostedDatabase(this.data.companyId, this.data.id);
if (result?.success) {
posthog.capture('Hosted Databases: database deleted', { databaseName: this.data.databaseName });
this._notifications.showSuccessSnackbar('Hosted database deleted successfully.');
this._dialogRef.close('delete');
}
} finally {
this.submitting.set(false);
}
}
async deleteDatabase(): Promise<void> {
this.submitting.set(true);
try {
const result = await this._hostedDatabaseService.deleteHostedDatabase(this.data.companyId, this.data.id);
if (result?.success) {
posthog.capture('Hosted Databases: database deleted', { databaseName: this.data.databaseName });
this._notifications.showSuccessSnackbar('Hosted database deleted successfully.');
this._dialogRef.close('delete');
} else {
this._notifications.showErrorSnackbar('Failed to delete database. Please try again.');
}
} catch {
this._notifications.showErrorSnackbar('Failed to delete database. Please try again.');
} finally {
this.submitting.set(false);
}
}
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/app/components/hosted-databases/hosted-database-delete-dialog/hosted-database-delete-dialog.component.ts`
around lines 23 - 37, The deleteDatabase() handler currently only acts when
result?.success is truthy, leaving users without feedback on failure; update
deleteDatabase() to handle falsy or error responses from
_hostedDatabaseService.deleteHostedDatabase(this.data.companyId, this.data.id)
by catching errors and/or checking result?.success and calling
_notifications.showErrorSnackbar with a concise message (include result?.message
if available), ensure posthog.capture still fires for success only, and only
close the dialog via _dialogRef.close('delete') on success while always
resetting submitting.set(false) in the finally block.

}
73 changes: 73 additions & 0 deletions ...hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
.reset-dialog__content {
display: flex;
flex-direction: column;
gap: 16px;
min-width: min(100%, 34rem);
}

.reset-dialog__credentials {
display: grid;
gap: 10px;
border: 1px solid var(--color-accentedPalette-100);
border-radius: 12px;
padding: 14px;
}

.reset-dialog__row {
display: grid;
grid-template-columns: minmax(96px, 120px) minmax(0, 1fr);
align-items: start;
gap: 12px;
}

.reset-dialog__label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.reset-dialog__credentials code {
background: var(--color-accentedPalette-50);
border-radius: 8px;
font-family: "IBM Plex Mono", monospace;
padding: 8px 10px;
overflow-wrap: anywhere;
}

.reset-dialog__hint {
color: rgba(0, 0, 0, 0.64);
font-size: 13px;
margin: 0;
}

.reset-dialog__actions {
gap: 8px;
padding-top: 8px;
}

@media (prefers-color-scheme: dark) {
.reset-dialog__credentials {
background: transparent;
border-color: var(--color-accentedPalette-400);
}

.reset-dialog__credentials code {
background: var(--color-accentedPalette-600);
}

.reset-dialog__hint {
color: rgba(255, 255, 255, 0.64);
}
}

@media (width <= 600px) {
.reset-dialog__content {
min-width: auto;
}

.reset-dialog__row {
grid-template-columns: 1fr;
gap: 6px;
}
}
50 changes: 50 additions & 0 deletions ...osted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@if (phase() === 'confirm') {
<h1 mat-dialog-title>Reset password for <strong>{{ data.databaseName }}</strong></h1>
<mat-dialog-content>
<p class="mat-body">
This will generate a new password for the database.
Any existing connections using the current password will stop working.
</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
<button type="button" mat-flat-button color="warn"
[disabled]="submitting()"
(click)="resetPassword()">
{{ submitting() ? 'Resetting...' : 'Reset Password' }}
</button>
</mat-dialog-actions>
} @else {
<h1 mat-dialog-title>New password for <strong>{{ result()!.databaseName }}</strong></h1>
<mat-dialog-content class="reset-dialog__content">
<div class="reset-dialog__credentials">
<div class="reset-dialog__row">
<span class="reset-dialog__label">Host</span>
<code>{{ result()!.hostname }}</code>
</div>
<div class="reset-dialog__row">
<span class="reset-dialog__label">Port</span>
<code>{{ result()!.port }}</code>
</div>
<div class="reset-dialog__row">
<span class="reset-dialog__label">Username</span>
<code>{{ result()!.username }}</code>
</div>
<div class="reset-dialog__row">
<span class="reset-dialog__label">Password</span>
<code>{{ result()!.password }}</code>
</div>
</div>
<p class="reset-dialog__hint">
Save the new password now. It cannot be recovered from this screen later.
</p>
</mat-dialog-content>
<mat-dialog-actions align="end" class="reset-dialog__actions">
<button type="button" mat-stroked-button mat-dialog-close>Close</button>
<button type="button" mat-flat-button color="accent"
[cdkCopyToClipboard]="credentialsText"
(cdkCopyToClipboardCopied)="handleCredentialsCopied()">
Copy credentials
</button>
</mat-dialog-actions>
}
49 changes: 49 additions & 0 deletions .../hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
import { Component, computed, inject, signal } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import posthog from 'posthog-js';
import { CreatedHostedDatabase, FoundHostedDatabase } from 'src/app/models/hosted-database';
import { HostedDatabaseService } from 'src/app/services/hosted-database.service';
import { NotificationsService } from 'src/app/services/notifications.service';

@Component({
selector: 'app-hosted-database-reset-password-dialog',
templateUrl: './hosted-database-reset-password-dialog.component.html',
styleUrls: ['./hosted-database-reset-password-dialog.component.css'],
imports: [MatDialogModule, MatButtonModule, CdkCopyToClipboard],
})
export class HostedDatabaseResetPasswordDialogComponent {
private _hostedDatabaseService = inject(HostedDatabaseService);
private _notifications = inject(NotificationsService);

protected data: FoundHostedDatabase = inject(MAT_DIALOG_DATA);
protected submitting = signal(false);
protected result = signal<CreatedHostedDatabase | null>(null);
protected phase = computed(() => (this.result() ? 'result' : 'confirm'));

get credentialsText(): string {
const r = this.result();
if (!r) return '';
return `postgres://${r.username}:${r.password}@${r.hostname}:${r.port}/${r.databaseName}`;
Copy link

Copilot AI Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

credentialsText interpolates username and password directly into a postgres:// URI. If either contains reserved URI characters (e.g. @, :, /, #), the copied connection string becomes invalid. Consider percent-encoding the username/password portion (or copying a structured set of fields instead of a URI).

Suggested change
return `postgres://${r.username}:${r.password}@${r.hostname}:${r.port}/${r.databaseName}`;
const username = encodeURIComponent(r.username);
const password = encodeURIComponent(r.password);
return `postgres://${username}:${password}@${r.hostname}:${r.port}/${r.databaseName}`;

Copilot uses AI. Check for mistakes.
}

async resetPassword(): Promise<void> {
this.submitting.set(true);

try {
const res = await this._hostedDatabaseService.resetHostedDatabasePassword(this.data.companyId, this.data.id);

if (res) {
posthog.capture('Hosted Databases: password reset', { databaseName: this.data.databaseName });
this.result.set(res);
}
} finally {
this.submitting.set(false);
}
}
Comment on lines +31 to +44
Copy link
Copy Markdown

@coderabbitai coderabbitai bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Missing error feedback when password reset fails.

Similar to the delete dialog, if res is falsy (API failure or error), the user receives no feedback. Consider adding error notification.

🛡️ Proposed fix to add error handling 
 async resetPassword(): Promise<void> {
 	this.submitting.set(true);

 	try {
 		const res = await this._hostedDatabaseService.resetHostedDatabasePassword(this.data.companyId, this.data.id);

 		if (res) {
 			posthog.capture('Hosted Databases: password reset', { databaseName: this.data.databaseName });
 			this.result.set(res);
+		} else {
+			this._notifications.showErrorSnackbar('Failed to reset password. Please try again.');
 		}
+	} catch {
+		this._notifications.showErrorSnackbar('Failed to reset password. Please try again.');
 	} finally {
 		this.submitting.set(false);
 	}
 }
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In
`@frontend/src/app/components/hosted-databases/hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component.ts`
around lines 31 - 44, The resetPassword() method lacks user feedback when the
API returns a falsy response; update resetPassword() (and the branch around
_hostedDatabaseService.resetHostedDatabasePassword) to handle the else case:
when res is falsy, call the same UI notification mechanism used elsewhere (e.g.,
the delete dialog's error notifier) to show an error message to the user,
optionally capture a failure event with posthog.capture, and ensure this.result
is not set on failure; keep the existing submitting.set(false) in the finally
block.


handleCredentialsCopied(): void {
this._notifications.showSuccessSnackbar('New credentials were copied to clipboard.');
}
}
Loading
Loading