Improve no type policy handling

Add button to format the JSON when it is valid.

Align the look of the dialogs for with type and without type.

Add required warning text for Ric selector in dialog with type.

Put Submit button to the right to align with the Delete Policy dialog.

Change-Id: I61402f91b3f3d9bd58c24e0680da4c8f721c43e3
Issue-ID: NONRTRIC-212
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>

diff --git a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
index b3211c0..71c63be 100644 (file)
--- a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.html
@@ -32,11 +32,13 @@
         </svg>
     </div>
 </div>
-<br/>
+<br />
 <div class="text-muted">Enter policy statements (JSON).</div>
 
-<form [formGroup]="instanceForm" novalidate autocomplete="off">
-    <div mat-dialog-content>
+<div [formGroup]="instanceForm" fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-sm="column"
+    fxLayoutAlign.lt-sm="flex-start center">
+
+    <mat-card class="card" [ngClass]="{'card-dark': darkMode}">
         <mat-form-field *ngIf="!this.policyInstanceId">
             <mat-label>Select RIC</mat-label>
             <mat-select id="ricSelector" formControlName="ricSelector" matInput required [(value)]="this.ric">
@@ -44,10 +46,12 @@
                     {{ric}}
                 </mat-option>
             </mat-select>
-            <div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)"
-                class="alert mat-error">
+            <div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)" class="alert mat-error"
+                style="width: 300px;">
                 <div *ngIf="ricSelector.errors.required">
-                    A Ric must be selected.
+                    <mat-error role="alert">
+                        A Ric must be selected.
+                    </mat-error>
                 </div>
             </div>
         </mat-form-field>
@@ -55,23 +59,29 @@
         <mat-form-field style="width: 800px;">
             <mat-label>Policy content</mat-label>
             <textarea id="policyJsonTextArea" formControlName="policyJsonTextArea" matInput cdkTextareaAutosize
-                cdkAutosizeMinRows="10" required>
+                cdkAutosizeMinRows="10" required [(value)]="this.policyJson">
             </textarea>
-            <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)"
-                class="alert mat-error">
+            <div *ngIf="policyJsonTextArea.invalid && (policyJsonTextArea.dirty || policyJsonTextArea.touched)">
                 <div *ngIf="policyJsonTextArea.errors.required">
-                    The policy body is required.
+                    <mat-error role="alert">
+                        The policy body is required.
+                    </mat-error>
                 </div>
                 <div *ngIf="policyJsonTextArea.errors.invalidJson">
-                    The policy body must be a valid JSON.
+                    <mat-error role="alert">
+                        The policy body must be a valid JSON.
+                    </mat-error>
                 </div>
             </div>
         </mat-form-field>
-    </div>
-    <div mat-dialog-actions>
-        <button mat-raised-button (click)="this.onSubmit()" class="submitBtn" [disabled]="!instanceForm.valid">
-            Submit
-        </button>
-        <button mat-raised-button class="mat-raised-button" [mat-dialog-close]="false">Close</button>
-    </div>
-</form>
\ No newline at end of file
+        <div mat-dialog-actions>
+            <button (click)="formatJsonInput();" class="mat-raised-button" [disabled]="!policyJsonTextArea.valid">
+                Format JSON
+            </button>
+            <button mat-raised-button class="mat-raised-button" [mat-dialog-close]="false">Close</button>
+            <button mat-raised-button (click)="this.onSubmit()" class="submitBtn" [disabled]="!instanceForm.valid">
+                Submit
+            </button>
+        </div>
+    </mat-card>
+</div>
\ No newline at end of file

diff --git a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.ts
index d7671a3..8c2a114 100644 (file)
--- a/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.ts
+++ b/webapp-frontend/src/app/policy-control/no-type-policy-instance-dialog.component.ts
@@ -48,7 +48,7 @@ export class NoTypePolicyInstanceDialogComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) private data,
     private ui: UiService) {
     this.policyInstanceId = data.instanceId;
-    this.policyJson = data.instanceJson ? JSON.stringify(JSON.parse(data.instanceJson), null, 2) : '';
+    this.policyJson = data.instanceJson ? this.formatJsonString(data.instanceJson) : '';
     this.ric = data.ric;
   }
 
@@ -105,6 +105,14 @@ export class NoTypePolicyInstanceDialogComponent implements OnInit {
         complete() { }
       });
   }
+
+ private formatJsonString(jsonToFormat: string) {
+   return JSON.stringify(JSON.parse(jsonToFormat), null, 2);
+ }
+
+ formatJsonInput() {
+   this.policyJson = this.formatJsonString(this.policyJsonTextArea.value);
+ }
 }
 
 export function jsonValidator(): ValidatorFn {

diff --git a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
index f0b20bb..1e4145f 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.html
@@ -49,6 +49,11 @@
                     {{ric}}
                 </mat-option>
             </mat-select>
+            <div *ngIf="ricSelector.invalid && (ricSelector.dirty || ricSelector.touched)">
+                <div *ngIf="ricSelector.errors.required">
+                    <mat-error role="alert">A Ric must be selected.</mat-error>
+                </div>
+            </div>
         </mat-form-field>
 
         <h4 class="default-cursor" (click)="toggleVisible('form')">
@@ -65,9 +70,9 @@
             </json-schema-form>
         </div>
         <hr />
+        <button mat-raised-button (click)="this.onClose()">Close</button>
         <button mat-raised-button (click)="this.onSubmit()" [disabled]="!this.formIsValid || !this.ric"
             class="submitBtn">Submit</button>
-        <button mat-raised-button (click)="this.onClose()">Close</button>
         <hr />
         <h4 [class.text-danger]="!formIsValid && !isVisible.json" [class.default-cursor]="formIsValid || isVisible.json"
             (click)="toggleVisible('json')">

diff --git a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
index 3c330e5..3dcd79a 100644 (file)
--- a/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
+++ b/webapp-frontend/src/app/policy-control/policy-instance-dialog.component.ts
@@ -136,6 +136,8 @@ export class PolicyInstanceDialogComponent implements OnInit, AfterViewInit {
     ngAfterViewInit() {
     }
 
+    get ricSelector() { return this.instanceForm.get('ricSelector'); }
+
     onSubmit() {
         if (this.policyInstanceId == null) {
             this.policyInstanceId = uuid.v4();