Merge pull request #1772 from rocket-admin/ddl-ai

Ddl ai

Author: lyubov-voloshko

frontend/src/app/app-routing.module.ts

@@ -160,6 +160,15 @@ const routes: Routes = [
 		loadComponent: () => import('./components/connect-db/connect-db.component').then((m) => m.ConnectDBComponent),
 		canActivate: [AuthGuard],
 	},
+	{
+		path: 'edit-database-schema/:connection-id',
+		loadComponent: () =>
+			import('./components/edit-database-schema/edit-database-schema.component').then(
+				(m) => m.EditDatabaseSchemaComponent,
+			),
+		canActivate: [AuthGuard],
+		title: 'Edit Database Schema | Rocketadmin',
+	},
 	{
 		path: 'connection-settings/:connection-id',
 		loadComponent: () =>

frontend/src/app/components/connections-list/own-connections/own-connections.component.css

@@ -320,6 +320,8 @@
 .connectionInfo {
 	display: flex;
 	flex-direction: column;
+	min-width: 0;
+	flex: 1;
 }
 
 .connectionInfo .connectionInfo__connectionTitle {
@@ -331,6 +333,18 @@
 	width: 100%;
 }
 
+/* ── Schema button inside card ── */
+
+.connectionSchemaButton {
+	margin-left: auto;
+	flex-shrink: 0;
+	color: rgba(255, 255, 255, 0.7);
+}
+
+.connectionSchemaButton:hover {
+	color: #fff;
+}
+
 /* ── Show more / less ── */
 
 .showAllButton {

frontend/src/app/components/connections-list/own-connections/own-connections.component.html

@@ -30,6 +30,15 @@ <h1 class="mat-display-1">Create your first connection</h1>
                             <h2 class="connectionInfo__connectionTitle">{{ $any(connectionItem).displayTitle }}</h2>
                             <span class="mat-body-2">{{ supportedDatabasesTitles[connectionItem.connection.type] }}</span>
                         </div>
+                        @if (connectionItem.accessLevel === 'edit') {
+                            <a mat-icon-button
+                                class="connectionSchemaButton"
+                                routerLink="/edit-database-schema/{{connectionItem.connection.id}}"
+                                matTooltip="Edit schema"
+                                (click)="$event.stopPropagation()">
+                                <mat-icon>schema</mat-icon>
+                            </a>
+                        }
                     </div>
                 </a>
             </li>

frontend/src/app/components/connections-list/own-connections/own-connections.component.ts

@@ -3,6 +3,7 @@ import { Component, Input, OnChanges, OnInit, SimpleChanges, signal } from '@ang
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import { Router, RouterModule } from '@angular/router';
 import posthog from 'posthog-js';
 import { firstValueFrom } from 'rxjs';
@@ -33,7 +34,7 @@ import {
 
 @Component({
 	selector: 'app-own-connections',
-	imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule],
+	imports: [CommonModule, RouterModule, MatIconModule, MatButtonModule, MatTooltipModule],
 	templateUrl: './own-connections.component.html',
 	styleUrl: './own-connections.component.css',
 })
@@ -240,11 +241,15 @@ export class OwnConnectionsComponent implements OnInit, OnChanges {
 	}
 
 	private _openRenameDialog(data: HostedDatabaseRenameDialogData): void {
-		this._dialog.open(HostedDatabaseRenameDialogComponent, {
+		const dialogRef = this._dialog.open(HostedDatabaseRenameDialogComponent, {
 			width: '28em',
 			maxWidth: '95vw',
 			data,
 		});
+
+		dialogRef.afterClosed().subscribe(() => {
+			this._router.navigate(['/dashboard', data.connectionId]);
+		});
 	}
 
 	private _getErrorMessage(error: unknown): string {

frontend/src/app/components/dashboard/dashboard.component.css

@@ -315,31 +315,3 @@
 	display: none !important;
 }
 
-.schema-editor-panel {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 0;
-	background: var(--mat-sidenav-content-background-color);
-	border-top: 1px solid rgba(0, 0, 0, 0.12);
-	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
-	overflow: hidden;
-	transition: height 0.3s ease;
-	z-index: 100;
-}
-
-.schema-editor-panel--open {
-	height: 380px;
-}
-
-.table-preview-content--panel-open {
-	padding-bottom: 380px;
-}
-
-@media (prefers-color-scheme: dark) {
-	.schema-editor-panel {
-		border-top-color: rgba(255, 255, 255, 0.12);
-		box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
-	}
-}

frontend/src/app/components/dashboard/dashboard.component.html

@@ -21,12 +21,12 @@
     </div>
 </app-banner>
 
-<app-db-generate-schema
+<app-edit-database-schema
     *ngIf="noTablesError"
     [connectionID]="connectionID"
     (schemaApplied)="onSchemaApplied()"
     data-testid="no-tables-generate-schema">
-</app-db-generate-schema>
+</app-edit-database-schema>
 
 <ng-container *ngIf="!loading && !isServerError && !noTablesError">
 
@@ -87,12 +87,11 @@
                 [connectionID]="connectionID"
                 [selectedTable]="selectedTableName"
                 [uiSettings]="uiSettings"
-                (expandSidebar)="toggleSideBar()"
-                (editStructure)="onEditStructure()">
+                (expandSidebar)="toggleSideBar()">
             </app-db-tables-list>
         </mat-sidenav>
         <mat-sidenav-content class="table-preview">
-            <div class="table-preview-content" [class.table-preview-content--panel-open]="showSchemaEditor">
+            <div class="table-preview-content">
                 <div class="alerts">
                     <app-alert></app-alert>
                     <div *ngIf="dataSource.alert_settingsInfo && canEditConnection() && !isConfiguring" class="ai-config-alert">
@@ -129,24 +128,14 @@
                     (applyFilter)="applyFilter($event)">
                 </app-db-table-view>
             </div>
-            <app-db-table-row-view *ngIf="selectedRow && !showSchemaEditor"
+            <app-db-table-row-view *ngIf="selectedRow"
                 [activeFilters]="filters"
             ></app-db-table-row-view>
-            <app-db-table-ai-panel *ngIf="isAIpanelOpened && !showSchemaEditor"
+            <app-db-table-ai-panel *ngIf="isAIpanelOpened"
                 [displayName]="selectedTableDisplayName"
                 [tableColumns]="dataSource?.dataColumns || []"
                 [sidebarExpanded]="shownTableTitles"
             ></app-db-table-ai-panel>
-            <div class="schema-editor-panel" [class.schema-editor-panel--open]="showSchemaEditor">
-                <app-db-generate-schema
-                    *ngIf="showSchemaEditor"
-                    [connectionID]="connectionID"
-                    [showClose]="true"
-                    (schemaApplied)="onSchemaApplied()"
-                    (closeEditor)="showSchemaEditor = false"
-                    data-testid="edit-structure-generate-schema">
-                </app-db-generate-schema>
-            </div>
         </mat-sidenav-content>
     </mat-sidenav-container>
 </ng-container>

frontend/src/app/components/dashboard/dashboard.component.ts

@@ -37,7 +37,7 @@ import { DbTableFiltersDialogComponent } from './db-table-view/db-table-filters-
 import { DbTableRowViewComponent } from './db-table-view/db-table-row-view/db-table-row-view.component';
 import { DbTableViewComponent } from './db-table-view/db-table-view.component';
 import { TablesDataSource } from './db-tables-data-source';
-import { DbGenerateSchemaComponent } from './db-generate-schema/db-generate-schema.component';
+import { EditDatabaseSchemaComponent } from '../edit-database-schema/edit-database-schema.component';
 import { DbTablesListComponent } from './db-tables-list/db-tables-list.component';
 
 interface DataToActivateActions {
@@ -56,7 +56,7 @@ interface DataToActivateActions {
 		MatIconModule,
 		MatDialogModule,
 		MatSidenavModule,
-		DbGenerateSchemaComponent,
+		EditDatabaseSchemaComponent,
 		DbTablesListComponent,
 		DbTableViewComponent,
 		DbTableAiPanelComponent,
@@ -103,7 +103,6 @@ export class DashboardComponent implements OnInit, OnDestroy {
 	public uiSettings: ConnectionSettingsUI;
 	public tableFolders: any[] = [];
 	public isConfiguring: boolean = false;
-	public showSchemaEditor: boolean = false;
 
 	constructor(
 		private _connections: ConnectionsService,
@@ -451,14 +450,9 @@ export class DashboardComponent implements OnInit, OnDestroy {
 		this._uiSettings.updateConnectionSetting(this.connectionID, 'shownTableTitles', this.shownTableTitles);
 	}
 
-	onEditStructure() {
-		this.showSchemaEditor = true;
-	}
-
 	onSchemaApplied() {
 		setTimeout(() => {
 			this.noTablesError = false;
-			this.showSchemaEditor = false;
 			this.loading = true;
 			this.getData();
 		}, 1500);

frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.css

@@ -445,7 +445,7 @@
 .expanded-container.has-custom-folders .add-folder-button-container {
 	order: 4; /* After folders section */
 	position: sticky;
-	bottom: 40px;
+	bottom: 0;
 	background-color: #ffffff;
 	padding: 8px 16px;
 	z-index: 10;
@@ -459,50 +459,6 @@
 	}
 }
 
-/* Edit structure button container */
-.edit-structure-button-container {
-	order: 5; /* Always at the very bottom */
-	position: sticky;
-	bottom: 0;
-	background-color: #ffffff;
-	padding: 8px 16px;
-	z-index: 10;
-	margin-left: 16px;
-	margin-right: 16px;
-	margin-top: 4px;
-	margin-bottom: 8px;
-	width: calc(100% - 32px);
-	box-sizing: border-box;
-}
-
-.expanded-container.has-custom-folders .edit-structure-button-container {
-	padding: 0 16px 8px;
-	margin-top: 0;
-	margin-left: 0;
-	margin-right: 0;
-	width: 100%;
-}
-
-.edit-structure-button {
-	width: 100%;
-}
-
-.edit-structure-button mat-icon {
-	font-size: 18px;
-	width: 18px;
-	height: 18px;
-}
-
-@media (prefers-color-scheme: dark) {
-	.edit-structure-button-container {
-		background-color: #303030;
-	}
-
-	.expanded-container.has-custom-folders .edit-structure-button-container {
-		background-color: #303030;
-	}
-}
-
 .search-input ::ng-deep * {
 	background-color: transparent !important;
 }

frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.html

@@ -61,13 +61,6 @@
 
             <!-- Bottom section with add folder button (fixed at bottom) -->
             <div class="collapsed-bottom-section" *ngIf="canEditConnection()">
-                <!-- Edit structure button -->
-                <div class="collapsed-add-button"
-                    (click)="editStructure.emit()"
-                    matTooltip="Edit structure"
-                    matTooltipPosition="right">
-                    <mat-icon class="collapsed-action-icon">construction</mat-icon>
-                </div>
                 <!-- Add folder button -->
                 <div class="collapsed-add-button"
                     (click)="onAddFolder()"
@@ -97,14 +90,6 @@
                 </button>
             </div>
 
-            <!-- Edit structure button -->
-            <div *ngIf="canEditConnection()" class="edit-structure-button-container">
-                <button type="button" mat-stroked-button color="primary" class="edit-structure-button" (click)="editStructure.emit()">
-                    <mat-icon>construction</mat-icon>
-                    Edit structure
-                </button>
-            </div>
-
             <!-- Collections Section -->
             <div *ngIf="folders && folders.length > 0" class="folders-section">
                     <ng-container *ngFor="let folder of folders; trackBy: trackByFolderId">

frontend/src/app/components/dashboard/db-tables-list/db-tables-list.component.ts

@@ -75,7 +75,6 @@ export class DbTablesListComponent implements OnInit, OnChanges {
 	@Input() uiSettings: any;
 
 	@Output() expandSidebar = new EventEmitter<void>();
-	@Output() editStructure = new EventEmitter<void>();
 
 	private _connections = inject(ConnectionsService);
 	protected canEditConnection = () => this._connections.canEditConnection();