From: elinuxhenrik <henrik.b.andersson@est.tech>
Date: Thu, 18 Mar 2021 16:41:19 +0000 (+0100)
Subject: Clean up and format
X-Git-Tag: 2.2.0~56^2
X-Git-Url: https://gerrit.o-ran-sc.org/r/gitweb?a=commitdiff_plain;h=a2a4491f5e44b5979f0d84a3065bcf76f3b01b93;p=portal%2Fnonrtric-controlpanel.git

Clean up and format

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

diff --git a/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.spec.ts b/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.spec.ts
index 7fb64c4..c87a656 100644
--- a/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.spec.ts
+++ b/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.spec.ts
@@ -22,7 +22,6 @@ import { HarnessLoader } from "@angular/cdk/testing";
 import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
 import { Component, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
-import { FormBuilder, FormGroup } from "@angular/forms";
 import { MatButtonModule } from "@angular/material/button";
 import { MatButtonHarness } from "@angular/material/button/testing";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -34,7 +33,6 @@ import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { NoTypePolicyEditorComponent } from "./no-type-policy-editor.component";
 
 describe("NoTypePolicyEditorComponent", () => {
-  let formGroup: FormGroup = new FormGroup({});
 
   let component: TestNoTypePolicyEditorComponentHostComponent;
   let fixture: ComponentFixture<TestNoTypePolicyEditorComponentHostComponent>;
@@ -54,7 +52,6 @@ describe("NoTypePolicyEditorComponent", () => {
         NoTypePolicyEditorComponent,
         TestNoTypePolicyEditorComponentHostComponent,
       ],
-      providers: [FormBuilder],
     }).compileComponents();
 
     fixture = TestBed.createComponent(
@@ -82,7 +79,9 @@ describe("NoTypePolicyEditorComponent", () => {
   });
 
   it("Format button should be disabled when json not valid", async () => {
-    const ele = component.noTypePolicyEditorComponent.instanceForm.get("policyJsonTextArea");
+    const ele = component.noTypePolicyEditorComponent.instanceForm.get(
+      "policyJsonTextArea"
+    );
     ele.setValue("{");
 
     let formatButton: MatButtonHarness = await loader.getHarness(
@@ -92,7 +91,9 @@ describe("NoTypePolicyEditorComponent", () => {
   });
 
   it("should format unformatted json", async () => {
-    const textArea = component.noTypePolicyEditorComponent.instanceForm.get("policyJsonTextArea");
+    const textArea = component.noTypePolicyEditorComponent.instanceForm.get(
+      "policyJsonTextArea"
+    );
     textArea.setValue('{"A":"A"}');
     component.noTypePolicyEditorComponent.formatJsonInput();
     expect(component.noTypePolicyEditorComponent.policyJson).toEqual(
diff --git a/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.ts b/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.ts
index 5fa92d9..d231b00 100644
--- a/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.ts
+++ b/webapp-frontend/src/app/policy/no-type-policy-editor/no-type-policy-editor.component.ts
@@ -18,15 +18,25 @@
 //   ========================LICENSE_END===================================
 //  /
 
-import { Component, Input, OnInit, Output } from '@angular/core';
-import { AbstractControl, ControlContainer, FormBuilder, FormControl, FormGroup, FormGroupDirective, ValidatorFn, Validators } from '@angular/forms';
-import { EventEmitter } from '@angular/core';
+import { Component, Input, OnInit, Output } from "@angular/core";
+import {
+  AbstractControl,
+  ControlContainer,
+  FormControl,
+  FormGroup,
+  FormGroupDirective,
+  ValidatorFn,
+  Validators,
+} from "@angular/forms";
+import { EventEmitter } from "@angular/core";
 
 @Component({
-  selector: 'nrcp-no-type-policy-editor',
-  templateUrl: './no-type-policy-editor.component.html',
-  styleUrls: ['./no-type-policy-editor.component.scss'],
-  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
+  selector: "nrcp-no-type-policy-editor",
+  templateUrl: "./no-type-policy-editor.component.html",
+  styleUrls: ["./no-type-policy-editor.component.scss"],
+  viewProviders: [
+    { provide: ControlContainer, useExisting: FormGroupDirective },
+  ],
 })
 export class NoTypePolicyEditorComponent implements OnInit {
   @Input() policyJson: string = null;
@@ -34,31 +44,35 @@ export class NoTypePolicyEditorComponent implements OnInit {
 
   instanceForm: FormGroup = new FormGroup({});
 
-  constructor(
-    private formBuilder: FormBuilder) { }
+  constructor() {}
 
-    ngOnInit(): void {
-      this.instanceForm.addControl(
-        'policyJsonTextArea', new FormControl(this.policyJson, [
-          Validators.required,
-          this.jsonValidator()
-        ])
-      )
-    }
+  ngOnInit(): void {
+    this.instanceForm.addControl(
+      "policyJsonTextArea",
+      new FormControl(this.policyJson, [
+        Validators.required,
+        this.jsonValidator(),
+      ])
+    );
+  }
 
-    get policyJsonTextArea(): AbstractControl {
-    return this.instanceForm ? this.instanceForm.get('policyJsonTextArea') : null;
+  get policyJsonTextArea(): AbstractControl {
+    return this.instanceForm
+      ? this.instanceForm.get("policyJsonTextArea")
+      : null;
   }
 
   formatJsonInput(): void {
-    this.policyJson = formatJsonString(JSON.parse(this.policyJsonTextArea.value));
+    this.policyJson = formatJsonString(
+      JSON.parse(this.policyJsonTextArea.value)
+    );
   }
 
   jsonValidator(): ValidatorFn {
     return (control: AbstractControl): { [key: string]: any } | null => {
       const notValid = !this.isJsonValid(control.value);
       this.handleJsonChangeEvent(notValid, control.value);
-      return notValid ? { 'invalidJson': { value: control.value } } : null;
+      return notValid ? { invalidJson: { value: control.value } } : null;
     };
   }
 
diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.html b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.html
index a3654b4..2d1187f 100644
--- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.html
+++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.html
@@ -19,7 +19,8 @@
   -->
 
 <div class="text-muted logo" fxLayout="row" fxLayoutGap="50px" fxLayoutAlign="space-around center">
-    <div id="instanceInfo" *ngIf="policyInstance.policy_id">[{{policyInstance.ric_id}}] Instance ID: {{policyInstance.policy_id}}</div>
+    <div id="instanceInfo" *ngIf="policyInstance.policy_id">[{{policyInstance.ric_id}}] Instance ID:
+        {{policyInstance.policy_id}}</div>
 </div>
 <div class="mat-elevation-z8 header row" [ngClass]="{'header-dark': darkMode}">
     <div class="logo">
@@ -41,10 +42,12 @@
     <nrcp-ric-selector *ngIf="!policyInstance.policy_id" [policyTypeName]="policyInstance.policytype_id"
         (selectedRic)="onSelectedRicChanged($event)"></nrcp-ric-selector>
 
-    <nrcp-no-type-policy-editor *ngIf="!typeHasSchema()" (validJson)="onJsonChanged($event)" [policyJson]="policyJson"></nrcp-no-type-policy-editor>
+    <nrcp-no-type-policy-editor *ngIf="!typeHasSchema()" (validJson)="onJsonChanged($event)" [policyJson]="policyJson">
+    </nrcp-no-type-policy-editor>
 
-    <nrcp-typed-policy-editor *ngIf="typeHasSchema()" (validJson)="onJsonChanged($event)" [jsonSchemaObject]="jsonSchemaObject" [jsonObject]="policyJson"
-        [darkMode]="darkMode"></nrcp-typed-policy-editor>
+    <nrcp-typed-policy-editor *ngIf="typeHasSchema()" (validJson)="onJsonChanged($event)"
+        [jsonSchemaObject]="jsonSchemaObject" [jsonObject]="policyJson" [darkMode]="darkMode">
+    </nrcp-typed-policy-editor>
 
     <div mat-dialog-actions>
         <button id="closeButton" mat-raised-button [mat-dialog-close]="false">Close</button>
diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
index ff11013..e9b4c58 100644
--- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.spec.ts
@@ -30,13 +30,7 @@ import {
 } from "@angular/material/dialog";
 import { MatSelectModule } from "@angular/material/select";
 import { MatInputModule } from "@angular/material/input";
-import {
-  AbstractControl,
-  FormControl,
-  FormGroup,
-  ReactiveFormsModule,
-  Validators,
-} from "@angular/forms";
+import { AbstractControl, ReactiveFormsModule } from "@angular/forms";
 import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
 import { ToastrModule } from "ngx-toastr";
 
@@ -127,13 +121,17 @@ describe("PolicyInstanceDialogComponent", () => {
     });
 
     it("should contain ric select with no policy type", async () => {
-      const ricSelector: RicSelectorComponent = fixture.debugElement.query(By.directive(RicSelectorComponent)).componentInstance;
+      const ricSelector: RicSelectorComponent = fixture.debugElement.query(
+        By.directive(RicSelectorComponent)
+      ).componentInstance;
       expect(ricSelector).toBeTruthy();
       expect(ricSelector.policyTypeName).toBeFalsy();
     });
 
     it("should contain json editor with empty JSON", async () => {
-      const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(By.directive(NoTypePolicyEditorComponent)).componentInstance;
+      const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(
+        By.directive(NoTypePolicyEditorComponent)
+      ).componentInstance;
       expect(noTypePolicyEditor).toBeTruthy();
       expect(noTypePolicyEditor.policyJson).toEqual("{}");
     });
@@ -182,13 +180,17 @@ describe("PolicyInstanceDialogComponent", () => {
     });
 
     it("should contain ric select with provided policy type", async () => {
-      const ricSelector: RicSelectorComponent = fixture.debugElement.query(By.directive(RicSelectorComponent)).componentInstance;
+      const ricSelector: RicSelectorComponent = fixture.debugElement.query(
+        By.directive(RicSelectorComponent)
+      ).componentInstance;
       expect(ricSelector).toBeTruthy();
       expect(ricSelector.policyTypeName).toEqual("Type 1");
     });
 
     it("should contain typed json editor with empty JSON, schema and dark mode true", async () => {
-      const typedPolicyEditor: TypedPolicyEditorComponent = fixture.debugElement.query(By.directive(TypedPolicyEditorComponent)).componentInstance;
+      const typedPolicyEditor: TypedPolicyEditorComponent = fixture.debugElement.query(
+        By.directive(TypedPolicyEditorComponent)
+      ).componentInstance;
       expect(typedPolicyEditor).toBeTruthy();
       expect(typedPolicyEditor.jsonObject).toBeFalsy();
       expect(typedPolicyEditor.jsonSchemaObject).toEqual(typedSchema);
@@ -242,14 +244,20 @@ describe("PolicyInstanceDialogComponent", () => {
     });
 
     it("should not contain ric select", async () => {
-      const ricSelector = fixture.debugElement.query(By.directive(RicSelectorComponent));
+      const ricSelector = fixture.debugElement.query(
+        By.directive(RicSelectorComponent)
+      );
       expect(ricSelector).toBeFalsy();
     });
 
     it("should contain json editor with json data", async () => {
-      const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(By.directive(NoTypePolicyEditorComponent)).componentInstance;
+      const noTypePolicyEditor: NoTypePolicyEditorComponent = fixture.debugElement.query(
+        By.directive(NoTypePolicyEditorComponent)
+      ).componentInstance;
       expect(noTypePolicyEditor).toBeTruthy();
-      expect(unescapeQuotes(noTypePolicyEditor.policyJson)).toEqual('"' + instanceJson + '"');
+      expect(unescapeQuotes(noTypePolicyEditor.policyJson)).toEqual(
+        '"' + instanceJson + '"'
+      );
     });
 
     it("should contain enabled Close and Submit buttons when all inputs are valid", async () => {
@@ -298,14 +306,20 @@ describe("PolicyInstanceDialogComponent", () => {
     });
 
     it("should not contain ric select", async () => {
-      const ricSelector = fixture.debugElement.query(By.directive(RicSelectorComponent));
+      const ricSelector = fixture.debugElement.query(
+        By.directive(RicSelectorComponent)
+      );
       expect(ricSelector).toBeFalsy();
     });
 
     it("should contain typed json editor with instance JSON, schema and dark mode true", async () => {
-      const typedPolicyEditor: TypedPolicyEditorComponent = fixture.debugElement.query(By.directive(TypedPolicyEditorComponent)).componentInstance;
+      const typedPolicyEditor: TypedPolicyEditorComponent = fixture.debugElement.query(
+        By.directive(TypedPolicyEditorComponent)
+      ).componentInstance;
       expect(typedPolicyEditor).toBeTruthy();
-      expect(unescapeQuotes(typedPolicyEditor.jsonObject)).toEqual(instanceJson);
+      expect(unescapeQuotes(typedPolicyEditor.jsonObject)).toEqual(
+        instanceJson
+      );
       expect(typedPolicyEditor.jsonSchemaObject).toEqual(typedSchema);
       expect(typedPolicyEditor.darkMode).toBeTruthy();
     });
diff --git a/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.spec.ts b/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.spec.ts
index 378279a..eece029 100644
--- a/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.spec.ts
+++ b/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.spec.ts
@@ -18,59 +18,54 @@
 //   ========================LICENSE_END===================================
 //
 
-import { HarnessLoader } from '@angular/cdk/testing';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { Component, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSelectHarness } from '@angular/material/select/testing';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { HarnessLoader } from "@angular/cdk/testing";
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+import { Component, ViewChild, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSelectHarness } from "@angular/material/select/testing";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { of } from "rxjs/observable/of";
-import { Ric } from 'src/app/interfaces/ric';
-import { PolicyService } from 'src/app/services/policy/policy.service';
+import { Ric } from "src/app/interfaces/ric";
+import { PolicyService } from "src/app/services/policy/policy.service";
 
-import { RicSelectorComponent } from './ric-selector.component';
+import { RicSelectorComponent } from "./ric-selector.component";
 
-
-describe('RicSelectorComponent', () => {
-  let formGroup: FormGroup = new FormGroup({});
+describe("RicSelectorComponent", () => {
   let component: TestRicSelectorHostComponent;
   let fixture: ComponentFixture<TestRicSelectorHostComponent>;
   let loader: HarnessLoader;
   let policyServiceSpy: jasmine.SpyObj<PolicyService>;
-  const ric1: Ric = { ric_id: 'ric1', managed_element_ids: ['me1'], policytype_ids: ['type1'], state: '' };
-  const ric2: Ric = { ric_id: 'ric2', managed_element_ids: ['me1'], policytype_ids: ['type1'], state: '' };
+  const ric1: Ric = {
+    ric_id: "ric1",
+    managed_element_ids: ["me1"],
+    policytype_ids: ["type1"],
+    state: "",
+  };
+  const ric2: Ric = {
+    ric_id: "ric2",
+    managed_element_ids: ["me1"],
+    policytype_ids: ["type1"],
+    state: "",
+  };
 
   beforeEach(async(() => {
-    policyServiceSpy = jasmine.createSpyObj('PolicyService', ['getRics']);
+    policyServiceSpy = jasmine.createSpyObj("PolicyService", ["getRics"]);
     const policyData = {
       createSchema: "{}",
       instanceId: null,
       instanceJson: '{"qosObjectives": {"priorityLevel": 3100}}',
       name: "name",
-      ric: null
+      ric: null,
     };
 
     policyServiceSpy.getRics.and.returnValue(of({ rics: [ric1, ric2] }));
     TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        MatSelectModule,
-      ],
-      schemas: [
-        CUSTOM_ELEMENTS_SCHEMA
-      ],
-      declarations: [
-        RicSelectorComponent,
-        TestRicSelectorHostComponent
-      ],
-      providers: [
-        { provide: PolicyService, useValue: policyServiceSpy },
-        FormBuilder
-      ]
-    })
-    .compileComponents();
+      imports: [BrowserAnimationsModule, MatSelectModule],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
+      declarations: [RicSelectorComponent, TestRicSelectorHostComponent],
+      providers: [{ provide: PolicyService, useValue: policyServiceSpy }],
+    }).compileComponents();
 
     fixture = TestBed.createComponent(TestRicSelectorHostComponent);
     component = fixture.componentInstance;
@@ -78,20 +73,24 @@ describe('RicSelectorComponent', () => {
     loader = TestbedHarnessEnvironment.loader(fixture);
   }));
 
-  it('should create', () => {
+  it("should create", () => {
     expect(component).toBeTruthy();
   });
 
-  it('no ric selected', async () => {
-    let ricSelector: MatSelectHarness = await loader.getHarness(MatSelectHarness.with({ selector: '#ricSelector' }));
+  it("no ric selected when no ric provided", async () => {
+    let ricSelector: MatSelectHarness = await loader.getHarness(
+      MatSelectHarness.with({ selector: "#ricSelector" })
+    );
 
     expect(await ricSelector.isEmpty()).toBeTruthy();
   });
 
-  it('options should contain rics for policy type', async () => {
-    let ricSelector: MatSelectHarness = await loader.getHarness(MatSelectHarness.with({ selector: '#ricSelector' }));
+  it("options should contain rics for policy type", async () => {
+    let ricSelector: MatSelectHarness = await loader.getHarness(
+      MatSelectHarness.with({ selector: "#ricSelector" })
+    );
 
-    expect(policyServiceSpy.getRics).toHaveBeenCalledWith('policyTypeName');
+    expect(policyServiceSpy.getRics).toHaveBeenCalledWith("policyTypeName");
     await ricSelector.open();
     const count = (await ricSelector.getOptions()).length;
     expect(count).toEqual(2);
@@ -99,12 +98,13 @@ describe('RicSelectorComponent', () => {
 
   @Component({
     selector: `ric-selector-host-component`,
-    template: `<nrcp-ric-selector [instanceForm]="instanceForm" [policyTypeName]="policyTypeName"></nrcp-ric-selector>`
+    template: `<nrcp-ric-selector
+      [policyTypeName]="policyTypeName"
+    ></nrcp-ric-selector>`,
   })
   class TestRicSelectorHostComponent {
     @ViewChild(RicSelectorComponent)
     private ricSelectorComponent: RicSelectorComponent;
-    instanceForm: FormGroup = formGroup;
-    policyTypeName: string = 'policyTypeName';
+    policyTypeName: string = "policyTypeName";
   }
 });
diff --git a/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.ts b/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.ts
index 15e1a61..b09db5d 100644
--- a/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.ts
+++ b/webapp-frontend/src/app/policy/ric-selector/ric-selector.component.ts
@@ -22,7 +22,6 @@ import { Component, Input, OnInit, Output } from "@angular/core";
 import {
   AbstractControl,
   ControlContainer,
-  FormBuilder,
   FormControl,
   FormGroup,
   FormGroupDirective,
@@ -51,10 +50,7 @@ export class RicSelectorComponent implements OnInit {
   });
   allRics: string[] = [];
 
-  constructor(
-    private dataService: PolicyService,
-    private formBuilder: FormBuilder
-  ) {}
+  constructor(private dataService: PolicyService) {}
 
   ngOnInit(): void {
     console.log("Ric:", this.ric);
diff --git a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html
index cd2c0c4..fc2279a 100644
--- a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html
+++ b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.html
@@ -25,37 +25,36 @@
     Properties *
 </h4>
 <div id="propertiesDiv" *ngIf="isVisible.form" class="json-schema-form" [@expandSection]="true">
-    <json-schema-form id="json-schema-form" [form]="jsonSchemaObject"
-        [(data)]="jsonObject" [options]="jsonFormOptions" [framework]="'material-design'" [language]="'en'"
-        (onChanges)="onChanges($event)" (isValid)="isValid($event)"
+    <json-schema-form id="json-schema-form" [form]="jsonSchemaObject" [(data)]="jsonObject" [options]="jsonFormOptions"
+        [framework]="'material-design'" [language]="'en'" (onChanges)="onChanges($event)" (isValid)="isValid($event)"
         (validationErrors)="validationErrors($event)">
     </json-schema-form>
 </div>
-<h4 id="jsonHeading" [class.text-danger]="!formIsValid && !isVisible.json" [class.default-cursor]="formIsValid || isVisible.json"
-(click)="toggleVisible('json')">
-<mat-icon id="jsonIcon" matTooltip="Json">{{isVisible.json ? 'expand_less' : 'expand_more'}}</mat-icon>
-JSON
+<h4 id="jsonHeading" [class.text-danger]="!formIsValid && !isVisible.json"
+    [class.default-cursor]="formIsValid || isVisible.json" (click)="toggleVisible('json')">
+    <mat-icon id="jsonIcon" matTooltip="Json">{{isVisible.json ? 'expand_less' : 'expand_more'}}</mat-icon>
+    JSON
 </h4>
 <div id="jsonDiv" *ngIf="isVisible.json" fxLayout="column" [@expandSection]="true">
-<div>
-    <strong *ngIf="formIsValid || prettyValidationErrors" [class.text-muted]="formIsValid"
-        [class.text-danger]="!formIsValid">
-        {{formIsValid ? 'Json' : 'Not valid'}}
-    </strong>
-    <span *ngIf="!formIsValid && !prettyValidationErrors">Invalid form</span>
-    <span *ngIf="prettyValidationErrors">— errors:</span>
-    <div *ngIf="prettyValidationErrors" class="text-danger" [innerHTML]="prettyValidationErrors"></div>
-</div>
-<div>
-    <pre [class.text__dark]="darkMode">{{prettyLiveFormData}}</pre>
-</div>
+    <div>
+        <strong *ngIf="formIsValid || prettyValidationErrors" [class.text-muted]="formIsValid"
+            [class.text-danger]="!formIsValid">
+            {{formIsValid ? 'Json' : 'Not valid'}}
+        </strong>
+        <span *ngIf="!formIsValid && !prettyValidationErrors">Invalid form</span>
+        <span *ngIf="prettyValidationErrors">— errors:</span>
+        <div *ngIf="prettyValidationErrors" class="text-danger" [innerHTML]="prettyValidationErrors"></div>
+    </div>
+    <div>
+        <pre [class.text__dark]="darkMode">{{prettyLiveFormData}}</pre>
+    </div>
 </div>
 
 <h4 id="schemaHeading" class="default-cursor" (click)="toggleVisible('schema')">
-<mat-icon id="schemaIcon" matTooltip="Json Schema">{{isVisible.schema ? 'expand_less' : 'expand_more'}}</mat-icon>
-JSON Schema
+    <mat-icon id="schemaIcon" matTooltip="Json Schema">{{isVisible.schema ? 'expand_less' : 'expand_more'}}</mat-icon>
+    JSON Schema
 </h4>
 <div id="schemaDiv" *ngIf="isVisible.schema" fxLayout="column" [@expandSection]="true">
-<strong class="text-muted">Schema</strong>
-<pre [class.text__dark]="darkMode">{{schemaAsString}}</pre>
-</div>
+    <strong class="text-muted">Schema</strong>
+    <pre [class.text__dark]="darkMode">{{schemaAsString}}</pre>
+</div>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts
index 990b882..a43be0e 100644
--- a/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts
+++ b/webapp-frontend/src/app/policy/typed-policy-editor/typed-policy-editor.component.ts
@@ -18,9 +18,15 @@
 //   ========================LICENSE_END===================================
 //
 
-import { animate, state, style, transition, trigger } from '@angular/animations';
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { JsonPointer } from 'angular6-json-schema-form';
+import {
+  animate,
+  state,
+  style,
+  transition,
+  trigger,
+} from "@angular/animations";
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { JsonPointer } from "angular6-json-schema-form";
 
 @Component({
   selector: "nrcp-typed-policy-editor",