panel-edit-dialog.component.html

<form [formGroup]="form" (ngSubmit)="onSubmit()">
    <h2 mat-dialog-title>{{ isEdit ? 'Edit panel' : 'Add panel' }}</h2>

    <mat-dialog-content>
        @if (savedQueries().length > 0) {
            <div class="panel-form">
                <mat-form-field appearance="outline" class="full-width">
                    <mat-label>Saved query</mat-label>
                    <mat-select formControlName="query_id"
                        data-testid="panel-query-select">
                        @for (query of savedQueries(); track query.id) {
                            <mat-option [value]="query.id">{{ query.name }}</mat-option>
                        }
                        <mat-divider></mat-divider>
                        <mat-option (click)="navigateToCreateQuery()" class="create-option">
                            <mat-icon>add</mat-icon>
                            Create new query
                        </mat-option>
                    </mat-select>
                    <mat-hint>Select a saved query to display in this panel</mat-hint>
                    @if (form.get('query_id')?.hasError('required')) {
                        <mat-error>Please select a saved query</mat-error>
                    }
                </mat-form-field>
            </div>
        } @else {
            <div class="no-queries-message">
                <mat-icon class="no-queries-icon">code</mat-icon>
                <h3>No saved queries yet</h3>
                <p>Create a saved query first to add it as a panel on this dashboard.</p>
                <a mat-stroked-button color="primary"
                    [routerLink]="['/panels', data.connectionId, 'new']"
                    (click)="dialogRef.close()">
                    <mat-icon>add</mat-icon>
                    Create query
                </a>
            </div>
        }
    </mat-dialog-content>

    <mat-dialog-actions align="end">
        <button type="button" mat-button mat-dialog-close [disabled]="submitting()">Cancel</button>
        @if (savedQueries().length > 0) {
            <button type="submit" mat-flat-button color="primary"
                [disabled]="submitting() || form.invalid"
                data-testid="panel-save-button">
                {{ submitting() ? 'Saving...' : (isEdit ? 'Update' : 'Add') }}
            </button>
        }
    </mat-dialog-actions>
</form>