feat: add dashboard permissions to policy form and improve editor UX

- Add dashboard permission actions (read, create, edit, delete) to
  the policy form with dashboard selector
- Remove "Cedar" from dialog title, now just "Policy — {group}"
- Add Cedar format hint with link in the code editor tab
- Parse dashboard items from cedar policy text for code→form conversion

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: gugu

frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.css

@@ -5,6 +5,17 @@
 	margin-bottom: 12px;
 }
 
+.cedar-hint {
+	margin: 0 0 8px;
+	font-size: 12px;
+	color: var(--mdc-theme-text-secondary-on-background, rgba(0, 0, 0, 0.54));
+}
+
+.cedar-hint a {
+	color: inherit;
+	text-decoration: underline;
+}
+
 .code-editor-box {
 	height: 300px;
 	border: 1px solid var(--mdc-outlined-text-field-outline-color, rgba(0, 0, 0, 0.38));

frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Cedar policy — {{ data.groupTitle }}</h1>
+<h1 mat-dialog-title>Policy — {{ data.groupTitle }}</h1>
 <mat-dialog-content>
     <div class="editor-mode-toggle">
         <mat-button-toggle-group [value]="editorMode" (change)="onEditorModeChange($event.value)">
@@ -11,18 +11,22 @@ <h1 mat-dialog-title>Cedar policy — {{ data.groupTitle }}</h1>
         <app-cedar-policy-list
             [policies]="policyItems"
             [availableTables]="availableTables"
-            [loading]="tablesLoading"
+            [availableDashboards]="availableDashboards"
+            [loading]="loading"
             (policiesChange)="onPolicyItemsChange($event)">
         </app-cedar-policy-list>
     </div>
 
-    <div *ngIf="editorMode === 'code'" class="code-editor-box">
-        <ngs-code-editor
-            [theme]="codeEditorTheme"
-            [codeModel]="cedarPolicyModel"
-            [options]="codeEditorOptions"
-            (valueChanged)="onCedarPolicyChange($event)">
-        </ngs-code-editor>
+    <div *ngIf="editorMode === 'code'">
+        <p class="cedar-hint">Edit policy in <a href="https://www.cedarpolicy.com/en" target="_blank" rel="noopener">Cedar</a> format</p>
+        <div class="code-editor-box">
+            <ngs-code-editor
+                [theme]="codeEditorTheme"
+                [codeModel]="cedarPolicyModel"
+                [options]="codeEditorOptions"
+                (valueChanged)="onCedarPolicyChange($event)">
+            </ngs-code-editor>
+        </div>
     </div>
 </mat-dialog-content>
 <mat-dialog-actions align="end">

frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.spec.ts

@@ -1,5 +1,5 @@
 import { provideHttpClient } from '@angular/common/http';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, signal } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
@@ -8,6 +8,7 @@ import { provideRouter } from '@angular/router';
 import { CodeEditorModule } from '@ngstack/code-editor';
 import { Angulartics2Module } from 'angulartics2';
 import { of } from 'rxjs';
+import { DashboardsService } from 'src/app/services/dashboards.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { MockCodeEditorComponent } from 'src/app/testing/code-editor.mock';
 import { CedarPolicyEditorDialogComponent } from './cedar-policy-editor-dialog.component';
@@ -16,6 +17,7 @@ describe('CedarPolicyEditorDialogComponent', () => {
 	let component: CedarPolicyEditorDialogComponent;
 	let fixture: ComponentFixture<CedarPolicyEditorDialogComponent>;
 	let tablesService: TablesService;
+	let dashboardsService: Partial<DashboardsService>;
 
 	const mockDialogRef = {
 		close: () => {},
@@ -43,6 +45,13 @@ describe('CedarPolicyEditorDialogComponent', () => {
 	].join('\n');
 
 	beforeEach(() => {
+		dashboardsService = {
+			dashboards: signal([
+				{ id: 'dash-1', name: 'Sales', description: null, connection_id: 'conn-123', created_at: '', updated_at: '' },
+			]).asReadonly(),
+			setActiveConnection: vi.fn(),
+		};
+
 		TestBed.configureTestingModule({
 			imports: [
 				MatDialogModule,
@@ -59,6 +68,7 @@ describe('CedarPolicyEditorDialogComponent', () => {
 					useValue: { groupId: 'group-123', groupTitle: 'Test Group', cedarPolicy: cedarPolicyWithConnection },
 				},
 				{ provide: MatDialogRef, useValue: mockDialogRef },
+				{ provide: DashboardsService, useValue: dashboardsService },
 			],
 		})
 			.overrideComponent(CedarPolicyEditorDialogComponent, {
@@ -83,7 +93,7 @@ describe('CedarPolicyEditorDialogComponent', () => {
 		expect(tablesService.fetchTables).toHaveBeenCalled();
 		expect(component.allTables.length).toBe(2);
 		expect(component.availableTables.length).toBe(2);
-		expect(component.tablesLoading).toBe(false);
+		expect(component.loading).toBe(false);
 	});
 
 	it('should pre-populate policy items from existing cedar policy', () => {

frontend/src/app/components/users/cedar-policy-editor-dialog/cedar-policy-editor-dialog.component.ts

@@ -4,16 +4,23 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { CodeEditorModule, CodeEditorService } from '@ngstack/code-editor';
+import { forkJoin } from 'rxjs';
 import { registerCedarLanguage } from 'src/app/lib/cedar-monaco-language';
 import { CedarPolicyItem, permissionsToPolicyItems, policyItemsToCedarPolicy } from 'src/app/lib/cedar-policy-items';
-import { parseCedarPolicy } from 'src/app/lib/cedar-policy-parser';
+import { parseCedarDashboardItems, parseCedarPolicy } from 'src/app/lib/cedar-policy-parser';
 import { normalizeTableName } from 'src/app/lib/normalize';
+import { Dashboard } from 'src/app/models/dashboard';
 import { TablePermission } from 'src/app/models/user';
 import { ConnectionsService } from 'src/app/services/connections.service';
+import { DashboardsService } from 'src/app/services/dashboards.service';
 import { TablesService } from 'src/app/services/tables.service';
 import { UiSettingsService } from 'src/app/services/ui-settings.service';
 import { UsersService } from 'src/app/services/users.service';
-import { AvailableTable, CedarPolicyListComponent } from '../cedar-policy-list/cedar-policy-list.component';
+import {
+	AvailableDashboard,
+	AvailableTable,
+	CedarPolicyListComponent,
+} from '../cedar-policy-list/cedar-policy-list.component';
 import { CedarPolicyEditorDialogComponent as Self } from './cedar-policy-editor-dialog.component';
 
 export interface CedarPolicyEditorDialogData {
@@ -36,8 +43,9 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 	public editorMode: 'form' | 'code' = 'form';
 	public policyItems: CedarPolicyItem[] = [];
 	public availableTables: AvailableTable[] = [];
+	public availableDashboards: AvailableDashboard[] = [];
 	public allTables: TablePermission[] = [];
-	public tablesLoading: boolean = true;
+	public loading: boolean = true;
 
 	public cedarPolicyModel: object;
 	public codeEditorOptions = {
@@ -55,6 +63,7 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 		private _usersService: UsersService,
 		private _uiSettings: UiSettingsService,
 		private _tablesService: TablesService,
+		private _dashboardsService: DashboardsService,
 		private _editorService: CodeEditorService,
 	) {
 		this.codeEditorTheme = this._uiSettings.isDarkMode ? 'vs-dark' : 'vs';
@@ -70,7 +79,9 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 			value: this.cedarPolicy,
 		};
 
-		this._tablesService.fetchTables(this.connectionID).subscribe((tables) => {
+		this._dashboardsService.setActiveConnection(this.connectionID);
+
+		forkJoin([this._tablesService.fetchTables(this.connectionID)]).subscribe(([tables]) => {
 			this.allTables = tables.map((t) => ({
 				tableName: t.table,
 				display_name: t.display_name || normalizeTableName(t.table),
@@ -86,11 +97,18 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 				tableName: t.table,
 				displayName: t.display_name || normalizeTableName(t.table),
 			}));
-			this.tablesLoading = false;
+
+			this.availableDashboards = this._dashboardsService.dashboards().map((d: Dashboard) => ({
+				id: d.id,
+				name: d.name,
+			}));
+
+			this.loading = false;
 
 			if (this.cedarPolicy) {
 				const parsed = parseCedarPolicy(this.cedarPolicy, this.connectionID, this.data.groupId, this.allTables);
-				this.policyItems = permissionsToPolicyItems(parsed);
+				const dashboardItems = parseCedarDashboardItems(this.cedarPolicy, this.connectionID);
+				this.policyItems = [...permissionsToPolicyItems(parsed), ...dashboardItems];
 			}
 		});
 	}
@@ -115,7 +133,8 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 			};
 		} else {
 			const parsed = parseCedarPolicy(this.cedarPolicy, this.connectionID, this.data.groupId, this.allTables);
-			this.policyItems = permissionsToPolicyItems(parsed);
+			const dashboardItems = parseCedarDashboardItems(this.cedarPolicy, this.connectionID);
+			this.policyItems = [...permissionsToPolicyItems(parsed), ...dashboardItems];
 		}
 
 		this.editorMode = mode;

frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.html

@@ -14,6 +14,9 @@
                 <span *ngIf="policy.tableName" class="policy-item__table">
                     — {{ getTableDisplayName(policy.tableName) }}
                 </span>
+                <span *ngIf="policy.dashboardId" class="policy-item__table">
+                    — {{ getDashboardDisplayName(policy.dashboardId) }}
+                </span>
             </div>
             <div class="policy-item__actions">
                 <button mat-icon-button type="button" (click)="startEdit(i)" matTooltip="Edit">
@@ -49,9 +52,19 @@
                     </mat-select>
                 </mat-form-field>
 
+                <mat-form-field *ngIf="editNeedsDashboard" appearance="outline" class="policy-field">
+                    <mat-label>Dashboard</mat-label>
+                    <mat-select [(ngModel)]="editDashboardId" [ngModelOptions]="{standalone: true}">
+                        <mat-option value="__new__">New dashboards</mat-option>
+                        <mat-option *ngFor="let dashboard of availableDashboards" [value]="dashboard.id">
+                            {{ dashboard.name }}
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+
                 <div class="policy-item__edit-actions">
                     <button mat-button color="primary" type="button" (click)="saveEdit(i)"
-                        [disabled]="!editAction || (editNeedsTable && !editTableName)">
+                        [disabled]="!editAction || (editNeedsTable && !editTableName) || (editNeedsDashboard && !editDashboardId)">
                         Save
                     </button>
                     <button mat-button type="button" (click)="cancelEdit()">Cancel</button>
@@ -84,9 +97,19 @@
                 </mat-select>
             </mat-form-field>
 
+            <mat-form-field *ngIf="needsDashboard" appearance="outline" class="policy-field">
+                <mat-label>Dashboard</mat-label>
+                <mat-select [(ngModel)]="newDashboardId" [ngModelOptions]="{standalone: true}">
+                    <mat-option value="__new__">New dashboards</mat-option>
+                    <mat-option *ngFor="let dashboard of availableDashboards" [value]="dashboard.id">
+                        {{ dashboard.name }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+
             <div class="policy-item__edit-actions">
                 <button mat-button color="primary" type="button" (click)="addPolicy()"
-                    [disabled]="!newAction || (needsTable && !newTableName)">
+                    [disabled]="!newAction || (needsTable && !newTableName) || (needsDashboard && !newDashboardId)">
                     Add
                 </button>
                 <button mat-button type="button" (click)="resetAddForm()">Cancel</button>

frontend/src/app/components/users/cedar-policy-list/cedar-policy-list.component.spec.ts

@@ -12,6 +12,11 @@ describe('CedarPolicyListComponent', () => {
 		{ tableName: 'orders', displayName: 'Orders' },
 	];
 
+	const fakeDashboards = [
+		{ id: 'dash-1', name: 'Sales Dashboard' },
+		{ id: 'dash-2', name: 'Analytics' },
+	];
+
 	beforeEach(async () => {
 		await TestBed.configureTestingModule({
 			imports: [CedarPolicyListComponent, FormsModule, BrowserAnimationsModule],
@@ -20,6 +25,7 @@ describe('CedarPolicyListComponent', () => {
 		fixture = TestBed.createComponent(CedarPolicyListComponent);
 		component = fixture.componentInstance;
 		component.availableTables = fakeTables;
+		component.availableDashboards = fakeDashboards;
 		fixture.detectChanges();
 	});
 
@@ -149,4 +155,38 @@ describe('CedarPolicyListComponent', () => {
 		expect(component.newAction).toBe('');
 		expect(component.newTableName).toBe('');
 	});
+
+	it('should add a dashboard policy with dashboardId', () => {
+		component.showAddForm = true;
+		component.newAction = 'dashboard:read';
+		component.newDashboardId = 'dash-1';
+		component.addPolicy();
+
+		expect(component.policies.length).toBe(1);
+		expect(component.policies[0].action).toBe('dashboard:read');
+		expect(component.policies[0].dashboardId).toBe('dash-1');
+	});
+
+	it('should not add dashboard policy without dashboard id', () => {
+		component.showAddForm = true;
+		component.newAction = 'dashboard:edit';
+		component.newDashboardId = '';
+		component.addPolicy();
+
+		expect(component.policies.length).toBe(0);
+	});
+
+	it('should detect needsDashboard correctly', () => {
+		component.newAction = 'connection:read';
+		expect(component.needsDashboard).toBe(false);
+
+		component.newAction = 'dashboard:read';
+		expect(component.needsDashboard).toBe(true);
+	});
+
+	it('should return correct dashboard display names', () => {
+		expect(component.getDashboardDisplayName('dash-1')).toBe('Sales Dashboard');
+		expect(component.getDashboardDisplayName('unknown')).toBe('unknown');
+		expect(component.getDashboardDisplayName('__new__')).toBe('New dashboards');
+	});
 });