Skip to content

Auto ai settings improvements #1636

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 3 commits into from
Feb 26, 2026
Merged

Auto ai settings improvements #1636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a08ec82
update table configure alert
lyubov-voloshko Feb 26, 2026
eca76c5
auto configure: add Open tables button while configuring in background
lyubov-voloshko Feb 26, 2026
77f3c30
Merge branch 'main' into auto-ai-settings-improvements
lyubov-voloshko Feb 26, 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
13 changes: 13 additions & 0 deletions frontend/src/app/components/auto-configure/auto-configure.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,19 @@
text-align: center;
}

.auto-configure__open-btn {
margin-top: 8px;
font-size: 16px;
padding: 0 32px;
}

.auto-configure__hint {
color: var(--mat-sidenav-content-text-color);
opacity: 0.5;
margin: 0;
font-size: 13px;
}

.auto-configure__notice {
color: var(--mat-sidenav-content-text-color);
opacity: 0.7;
Expand Down
6 changes: 4 additions & 2 deletions frontend/src/app/components/auto-configure/auto-configure.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@if (loading()) {
<div class="auto-configure">
<mat-spinner diameter="48"></mat-spinner>
<h2 class="auto-configure__title">Auto-configuring your dashboard</h2>
<p class="auto-configure__text">Please wait while we analyze your database and set up the best configuration. This may take a moment.</p>
<h2 class="auto-configure__title">Setting up your dashboard</h2>
<p class="auto-configure__text">We're analyzing your database structure and applying the best configuration. This may take a while.</p>
<a mat-flat-button class="auto-configure__open-btn" [routerLink]="'/dashboard/' + connectionId()">Open tables</a>
<p class="auto-configure__hint">Setup will continue in the background</p>
Comment on lines +4 to +7

Copilot AI Feb 26, 2026

Copy link

Choose a reason for hiding this comment

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

Adding an “Open tables” navigation while loading() remains true means users can leave before _configure() resolves. The current component logic navigates to /dashboard/:id when the async call completes; without cancellation/teardown guarding, that navigation can still fire after the component is destroyed (potentially causing unexpected redirects or state resets). Also, connectionId() starts as null, so this routerLink can briefly become /dashboard/null; consider rendering/enabling the button only once connectionId() is set.

Copilot uses AI. Check for mistakes.
</div>
} @else if (errorMessage()) {
<div class="auto-configure">
Expand Down
73 changes: 73 additions & 0 deletions frontend/src/app/components/dashboard/dashboard.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,79 @@
margin: 0;
}

.ai-config-alert {
display: flex;
gap: 8px;
background-color: color-mix(in hsl, var(--color-accentedPalette-500), transparent 95%);
backdrop-filter: blur(4px);
border-top: 1px solid var(--color-accentedPalette-500);
border-right: 1px solid var(--color-accentedPalette-500);
border-bottom: 1px solid var(--color-accentedPalette-500);
border-left: 12px solid var(--color-accentedPalette-500);
border-radius: 4px;
padding: 12px 16px 12px 8px;
}
Comment on lines +107 to +118

Copilot AI Feb 26, 2026

Copy link

Choose a reason for hiding this comment

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

The new .ai-config-alert styles substantially duplicate ui-components/alert/alert.component.css. This increases drift risk (future alert style tweaks won’t apply here). Consider reusing <app-alert> with message: null and projecting custom content, or refactoring shared alert styles into a common class/stylesheet used by both components.

Copilot uses AI. Check for mistakes.

@media (prefers-color-scheme: dark) {
.ai-config-alert {
backdrop-filter: blur(2px);
}
}

@media (width <= 600px) {
.ai-config-alert {
display: grid;
grid-template-columns: auto 1fr;
}
}

.ai-config-alert__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: var(--color-accentedPalette-500);
font-size: 24px;
height: 36px;
opacity: 0.9;
width: 36px;
}

.ai-config-alert__message {
flex: 1;
display: flex;
justify-content: center;
flex-direction: column;
min-height: 36px;
margin: 0 !important;
}

.ai-config-alert__title {
color: var(--color-accentedPalette-500);
margin-bottom: 4px;
}

@media (prefers-color-scheme: dark) {
.ai-config-alert__title {
color: inherit;
}
}

.ai-config-alert__text {
margin: 0 !important;
}

.ai-config-alert__actions {
margin-left: auto;
}

@media (width <= 600px) {
.ai-config-alert__actions {
grid-column: 1 / -1;
}
}

.error-details {
margin-top: 8px;
}
Expand Down
11 changes: 10 additions & 1 deletion frontend/src/app/components/dashboard/dashboard.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,16 @@ <h3 class='mat-subheading-2'>Rocketadmin can not find any tables</h3>
<div class="table-preview-content">
<div class="alerts">
<app-alert></app-alert>
<app-alert *ngIf="dataSource.alert_settingsInfo" [alert]="dataSource.alert_settingsInfo"></app-alert>
<div *ngIf="dataSource.alert_settingsInfo" class="ai-config-alert">
<mat-icon class="ai-config-alert__icon">auto_awesome</mat-icon>
<div class="ai-config-alert__message mat-body-1">
<strong class="ai-config-alert__title">New: AI Configuration</strong>
<p class="ai-config-alert__text">Automatically configure all your tables with AI. You can adjust changes in Settings and UI widgets.</p>
</div>
<div class="ai-config-alert__actions">
<a mat-button [routerLink]="'/auto-configure/' + connectionID">Configure all</a>
</div>
</div>
Comment on lines +85 to +94

Copilot AI Feb 26, 2026

Copy link

Choose a reason for hiding this comment

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

This block is gated by dataSource.alert_settingsInfo but ignores the alert object’s message and actions, which can lead to inconsistencies (e.g., db-tables-data-source.ts still defines “Settings”/“Fields display” actions). Either render <app-alert [alert]="dataSource.alert_settingsInfo"> and customize it, or add equivalent links here (especially since the text mentions “Settings and UI widgets” but only provides “Configure all”).

Suggested change
<div *ngIf="dataSource.alert_settingsInfo" class="ai-config-alert">
<mat-icon class="ai-config-alert__icon">auto_awesome</mat-icon>
<div class="ai-config-alert__message mat-body-1">
<strong class="ai-config-alert__title">New: AI Configuration</strong>
<p class="ai-config-alert__text">Automatically configure all your tables with AI. You can adjust changes in Settings and UI widgets.</p>
</div>
<div class="ai-config-alert__actions">
<a mat-button [routerLink]="'/auto-configure/' + connectionID">Configure all</a>
</div>
</div>
<app-alert *ngIf="dataSource.alert_settingsInfo" [alert]="dataSource.alert_settingsInfo"></app-alert>

Copilot uses AI. Check for mistakes.
<app-alert *ngIf="dataSource.alert_primaryKeysInfo" [alert]="dataSource.alert_primaryKeysInfo"></app-alert>
<app-alert *ngIf="dataSource.alert_widgetsWarning" [alert]="dataSource.alert_widgetsWarning"></app-alert>
</div>
Expand Down
9 changes: 5 additions & 4 deletions frontend/src/app/components/dashboard/db-tables-data-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,10 +298,11 @@ export class TablesDataSource implements DataSource<Object> {
type: AlertType.Info,
message: 'Configure now to reveal advanced table functionality and features.',
actions: [
// {
// type: AlertActionType.Button,
// caption: 'AI generate',
// },
{
type: AlertActionType.Link,
caption: 'Configure all',
to: `/auto-configure/${connectionID}`
},
{
type: AlertActionType.Link,
caption: 'Settings',
Expand Down
Loading