permissions: move Add policy to the actions footer and scroll dialog to the button on Add policy click

Author: lyubov-voloshko

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

@@ -33,6 +33,10 @@
 	flex-shrink: 0;
 }
 
+.dialog-actions-spacer {
+	flex: 1;
+}
+
 .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,6 +1,6 @@
 <h1 mat-dialog-title>Policy — {{ data.groupTitle }}</h1>
 <form (ngSubmit)="savePolicy()">
-    <mat-dialog-content>
+    <mat-dialog-content #dialogContent>
         <div class="editor-mode-toggle">
             <mat-button-toggle-group [value]="editorMode" (change)="onEditorModeChange($event.value)">
                 <mat-button-toggle value="form">Form</mat-button-toggle>
@@ -35,7 +35,13 @@ <h1 mat-dialog-title>Policy — {{ data.groupTitle }}</h1>
             </div>
         </div>
     </mat-dialog-content>
-    <mat-dialog-actions align="end">
+    <mat-dialog-actions>
+        <button *ngIf="editorMode === 'form' && !formParseError && !loading && !policyList?.showAddForm"
+            type="button" mat-button color="primary"
+            (click)="onAddPolicyClick()">
+            <mat-icon>add</mat-icon> Add policy
+        </button>
+        <span class="dialog-actions-spacer"></span>
         <button type="button" mat-flat-button (click)="confirmClose()">Cancel</button>
         <button type="submit" mat-flat-button color="primary"
             [disabled]="submitting">

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

@@ -1,5 +1,5 @@
 import { NgIf } from '@angular/common';
-import { Component, DestroyRef, Inject, inject, OnInit, ViewChild } from '@angular/core';
+import { Component, DestroyRef, ElementRef, Inject, inject, OnInit, ViewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -60,6 +60,7 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 	public formParseError: boolean = false;
 
 	@ViewChild(CedarPolicyListComponent) policyList?: CedarPolicyListComponent;
+	@ViewChild('dialogContent', { read: ElementRef }) dialogContent?: ElementRef<HTMLElement>;
 
 	public cedarPolicyModel: object;
 	public codeEditorOptions = {
@@ -211,6 +212,17 @@ export class CedarPolicyEditorDialogComponent implements OnInit {
 			});
 	}
 
+	onAddPolicyClick() {
+		if (!this.policyList) return;
+		this.policyList.showAddForm = true;
+		setTimeout(() => {
+			const el = this.dialogContent?.nativeElement;
+			if (el) {
+				el.scrollTop = el.scrollHeight;
+			}
+		});
+	}
+
 	private _parseCedarToPolicyItems(): CedarPolicyItem[] {
 		const parsed = parseCedarPolicy(this.cedarPolicy, this.connectionID, this.data.groupId, this.allTables);
 		const dashboardItems = parseCedarDashboardItems(this.cedarPolicy, this.connectionID);

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

@@ -138,8 +138,4 @@
         </div>
     </div>
 
-    <button *ngIf="!showAddForm && !loading" mat-button color="primary" type="button"
-        (click)="showAddForm = true" class="add-policy-button">
-        <mat-icon>add</mat-icon> Add policy
-    </button>
 </div>