fix: show warning instead of form when cedar policy uses unsupported syntax

Detects forbid statements, when/unless clauses, and unknown actions.
Falls back to code editor with a warning message.

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

@@ -16,6 +16,22 @@
 	text-decoration: underline;
 }
 
+.form-parse-warning {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px;
+	margin-bottom: 12px;
+	border-radius: 4px;
+	background: var(--mdc-theme-warning-container, #fff3e0);
+	color: var(--mdc-theme-on-warning-container, #e65100);
+	font-size: 13px;
+}
+
+.form-parse-warning mat-icon {
+	flex-shrink: 0;
+}
+
 .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

@@ -7,7 +7,12 @@ <h1 mat-dialog-title>Policy — {{ data.groupTitle }}</h1>
         </mat-button-toggle-group>
     </div>
 
-    <div *ngIf="editorMode === 'form'">
+    <div *ngIf="formParseError" class="form-parse-warning">
+        <mat-icon>warning</mat-icon>
+        <span>This policy uses advanced Cedar syntax that cannot be represented in form mode. Please use the code editor.</span>
+    </div>
+
+    <div *ngIf="editorMode === 'form' && !formParseError">
         <app-cedar-policy-list
             [policies]="policyItems"
             [availableTables]="availableTables"

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

@@ -4,11 +4,12 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
 import { CodeEditorModule, CodeEditorService } from '@ngstack/code-editor';
 import { take } from 'rxjs';
 import { registerCedarLanguage } from 'src/app/lib/cedar-monaco-language';
 import { CedarPolicyItem, permissionsToPolicyItems, policyItemsToCedarPolicy } from 'src/app/lib/cedar-policy-items';
-import { parseCedarDashboardItems, parseCedarPolicy } from 'src/app/lib/cedar-policy-parser';
+import { canRepresentAsForm, parseCedarDashboardItems, parseCedarPolicy } from 'src/app/lib/cedar-policy-parser';
 import { normalizeTableName } from 'src/app/lib/normalize';
 import { TablePermission } from 'src/app/models/user';
 import { ConnectionsService } from 'src/app/services/connections.service';
@@ -33,7 +34,15 @@ export interface CedarPolicyEditorDialogData {
 	selector: 'app-cedar-policy-editor-dialog',
 	templateUrl: './cedar-policy-editor-dialog.component.html',
 	styleUrls: ['./cedar-policy-editor-dialog.component.css'],
-	imports: [NgIf, MatDialogModule, MatButtonModule, MatButtonToggleModule, CodeEditorModule, CedarPolicyListComponent],
+	imports: [
+		NgIf,
+		MatDialogModule,
+		MatButtonModule,
+		MatButtonToggleModule,
+		MatIconModule,
+		CodeEditorModule,
+		CedarPolicyListComponent,
+	],
 })
 export class CedarPolicyEditorDialogComponent implements OnInit {
 	public connectionID: string;
@@ -46,6 +55,7 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 	public availableDashboards: AvailableDashboard[] = [];
 	public allTables: TablePermission[] = [];
 	public loading: boolean = true;
+	public formParseError: boolean = false;
 
 	public cedarPolicyModel: object;
 	public codeEditorOptions = {
@@ -107,7 +117,12 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 				this.loading = false;
 
 				if (this.cedarPolicy) {
-					this.policyItems = this._parseCedarToPolicyItems();
+					this.formParseError = !canRepresentAsForm(this.cedarPolicy);
+					if (this.formParseError) {
+						this.editorMode = 'code';
+					} else {
+						this.policyItems = this._parseCedarToPolicyItems();
+					}
 				}
 			});
 	}
@@ -130,7 +145,10 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 				uri: `cedar-policy-${this.data.groupId}-${Date.now()}.cedar`,
 				value: this.cedarPolicy,
 			};
+			this.formParseError = false;
 		} else {
+			this.formParseError = !canRepresentAsForm(this.cedarPolicy);
+			if (this.formParseError) return;
 			this.policyItems = this._parseCedarToPolicyItems();
 		}
 

frontend/src/app/lib/cedar-policy-parser.ts

@@ -134,6 +134,44 @@ export function parseCedarDashboardItems(policyText: string, connectionId: strin
 	return items;
 }
 
+export function canRepresentAsForm(policyText: string): boolean {
+	if (!policyText?.trim()) return true;
+
+	// Forbid statements are not supported in form mode
+	if (/\bforbid\s*\(/.test(policyText)) return false;
+
+	// when/unless clauses are not supported in form mode
+	if (/\bwhen\s*\{/.test(policyText)) return false;
+	if (/\bunless\s*\{/.test(policyText)) return false;
+
+	const permits = extractPermitStatements(policyText);
+	if (permits.length === 0) return false;
+
+	const knownActions = new Set([
+		'connection:read',
+		'connection:edit',
+		'group:read',
+		'group:edit',
+		'table:*',
+		'table:read',
+		'table:add',
+		'table:edit',
+		'table:delete',
+		'dashboard:*',
+		'dashboard:read',
+		'dashboard:create',
+		'dashboard:edit',
+		'dashboard:delete',
+	]);
+
+	for (const permit of permits) {
+		if (permit.isWildcard) continue;
+		if (!permit.action || !knownActions.has(permit.action)) return false;
+	}
+
+	return true;
+}
+
 function extractPermitStatements(policyText: string): ParsedPermitStatement[] {
 	const results: ParsedPermitStatement[] = [];
 	const permitKeyword = 'permit';