Skip to content

Commit f3b07e8

Browse files
lyubov-voloshkolyubov-voloshko
authored
Merge pull request #1705 from rocket-admin/rename-rahosted-db
hosted databases: add Change title
2 parents ce7071e + b655835 commit f3b07e8

7 files changed

Lines changed: 100 additions & 3 deletions

File tree

‎frontend/src/app/components/connect-db/connect-db.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h1 class="mat-h1 connectForm__fullLine">
99
</h1>
1010

1111
<mat-form-field appearance="outline" class="connectForm__title">
12-
<mat-label>Connection name</mat-label>
12+
<mat-label>Connection title</mat-label>
1313
<input matInput name="title" #title="ngModel"
1414
data-testid="connection-title-input"
1515
angulartics2On="change"

‎frontend/src/app/components/connections-list/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<h1 mat-dialog-title>Name your connection</h1>
22

33
<mat-dialog-content class="rename-dialog__content">
4-
<p class="rename-dialog__description">Give your hosted database a friendly name so you can find it easily.</p>
4+
<p class="rename-dialog__description">Give your hosted database a friendly title so you can find it easily.</p>
55
<mat-form-field appearance="outline" class="rename-dialog__field">
6-
<mat-label>Connection name</mat-label>
6+
<mat-label>Connection title</mat-label>
77
<input matInput [(ngModel)]="title" placeholder="e.g. Production DB, Staging, My App" (keyup.enter)="save()" cdkFocusInitial>
88
</mat-form-field>
99
</mat-dialog-content>

‎frontend/src/app/components/hosted-databases/hosted-database-rename-dialog/hosted-database-rename-dialog.component.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.rename-dialog__field {
2+
margin-top: 12px;
3+
margin-bottom: -12px;
4+
width: 100%;
5+
}

‎frontend/src/app/components/hosted-databases/hosted-database-rename-dialog/hosted-database-rename-dialog.component.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<h1 mat-dialog-title>Rename <strong>{{ data.databaseName }}</strong></h1>
2+
<mat-dialog-content>
3+
<mat-form-field appearance="outline" class="rename-dialog__field">
4+
<mat-label>Connection name</mat-label>
5+
<input matInput [(ngModel)]="title" placeholder="e.g. Production DB, Staging, My App"
6+
(keyup.enter)="save()" cdkFocusInitial>
7+
</mat-form-field>
8+
</mat-dialog-content>
9+
<mat-dialog-actions align="end">
10+
<button type="button" mat-flat-button mat-dialog-close>Cancel</button>
11+
<button type="button" mat-flat-button color="accent"
12+
[disabled]="!title.trim() || submitting()"
13+
(click)="save()">
14+
{{ submitting() ? 'Saving...' : 'Save' }}
15+
</button>
16+
</mat-dialog-actions>

‎frontend/src/app/components/hosted-databases/hosted-database-rename-dialog/hosted-database-rename-dialog.component.ts‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { Component, inject, signal } from '@angular/core';
2+
import { FormsModule } from '@angular/forms';
3+
import { MatButtonModule } from '@angular/material/button';
4+
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
5+
import { MatFormFieldModule } from '@angular/material/form-field';
6+
import { MatInputModule } from '@angular/material/input';
7+
import { firstValueFrom } from 'rxjs';
8+
import posthog from 'posthog-js';
9+
import { FoundHostedDatabase } from 'src/app/models/hosted-database';
10+
import { ConnectionsService } from 'src/app/services/connections.service';
11+
import { NotificationsService } from 'src/app/services/notifications.service';
12+
13+
@Component({
14+
selector: 'app-hosted-databases-rename-dialog',
15+
templateUrl: './hosted-database-rename-dialog.component.html',
16+
styleUrls: ['./hosted-database-rename-dialog.component.css'],
17+
imports: [MatDialogModule, MatButtonModule, MatFormFieldModule, MatInputModule, FormsModule],
18+
})
19+
export class HostedDatabasesRenameDialogComponent {
20+
private _connectionsService = inject(ConnectionsService);
21+
private _notifications = inject(NotificationsService);
22+
private _dialogRef = inject(MatDialogRef<HostedDatabasesRenameDialogComponent>);
23+
24+
protected data: FoundHostedDatabase = inject(MAT_DIALOG_DATA);
25+
protected title = this.data.title || this.data.databaseName || '';
26+
protected submitting = signal(false);
27+
28+
async save(): Promise<void> {
29+
const title = this.title.trim();
30+
if (!title || this.submitting()) return;
31+
32+
this.submitting.set(true);
33+
34+
try {
35+
const connections = await firstValueFrom(this._connectionsService.fetchConnections());
36+
const match = connections?.find(
37+
(item) =>
38+
item.connection.host === this.data.hostname &&
39+
item.connection.database === this.data.databaseName,
40+
);
41+
42+
if (!match) {
43+
this._notifications.showErrorSnackbar('Matching connection not found.');
44+
this.submitting.set(false);
45+
return;
46+
}
47+
48+
await firstValueFrom(this._connectionsService.updateConnectionTitle(match.connection.id, title));
49+
posthog.capture('Hosted Databases: database renamed', { databaseName: this.data.databaseName });
50+
this._connectionsService.fetchConnections().subscribe();
51+
this._dialogRef.close(title);
52+
} finally {
53+
this.submitting.set(false);
54+
}
55+
}
56+
}

‎frontend/src/app/components/hosted-databases/hosted-databases.component.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ <h1 class="mat-h1">Hosted Databases</h1>
4747
</div>
4848
</div>
4949
<div class="db-card__actions">
50+
<button type="button" mat-icon-button
51+
matTooltip="Change connection title"
52+
(click)="renameDatabase(db)">
53+
<mat-icon>edit</mat-icon>
54+
</button>
5055
<button type="button" mat-icon-button
5156
matTooltip="Reset password"
5257
(click)="resetPassword(db)">

‎frontend/src/app/components/hosted-databases/hosted-databases.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { UserService } from 'src/app/services/user.service';
1515
import { ProfileSidebarComponent } from '../profile/profile-sidebar/profile-sidebar.component';
1616
import { AlertComponent } from '../ui-components/alert/alert.component';
1717
import { HostedDatabaseDeleteDialogComponent } from './hosted-database-delete-dialog/hosted-database-delete-dialog.component';
18+
import { HostedDatabasesRenameDialogComponent } from './hosted-database-rename-dialog/hosted-database-rename-dialog.component';
1819
import { HostedDatabaseResetPasswordDialogComponent } from './hosted-database-reset-password-dialog/hosted-database-reset-password-dialog.component';
1920

2021
@Component({
@@ -64,6 +65,20 @@ export class HostedDatabasesComponent implements OnInit {
6465
});
6566
}
6667

68+
renameDatabase(db: FoundHostedDatabase): void {
69+
const dialogRef = this._dialog.open(HostedDatabasesRenameDialogComponent, {
70+
width: '28em',
71+
maxWidth: '95vw',
72+
data: db,
73+
});
74+
75+
dialogRef.afterClosed().subscribe(async (newTitle) => {
76+
if (newTitle) {
77+
await this._loadDatabases();
78+
}
79+
});
80+
}
81+
6782
resetPassword(db: FoundHostedDatabase): void {
6883
this._dialog.open(HostedDatabaseResetPasswordDialogComponent, {
6984
width: '32em',

0 commit comments

Comments
 (0)