Fix PolicyInstanceComponent and add test coverage

Fix so that the instance table is correctly loaded.

Change so that the table is not reloaded when the PolicyInstanceDialog
is closed without submitting the policy.

Change-Id: I883f0a0b42294b18ba0f4d1228c07d78609932ad
Issue-ID: NONRTRIC-472
Signed-off-by: elinuxhenrik <henrik.b.andersson@est.tech>
diff --git a/webapp-frontend/src/app/mock/policy-instance-2.json b/webapp-frontend/src/app/mock/policy-instance-2.json
index 69ab3a4..c268625 100644
--- a/webapp-frontend/src/app/mock/policy-instance-2.json
+++ b/webapp-frontend/src/app/mock/policy-instance-2.json
@@ -11,7 +11,7 @@
       "priorityLevel": 3100
     }
   },
-  "service_id": "service1",
+  "service_id": "service2",
   "transient": false,
   "status_notification_uri": ""
 }
\ No newline at end of file
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 d2b1a61..8881b64 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
@@ -39,7 +39,6 @@
 import { MockComponent } from "ng-mocks";
 
 import { PolicyService } from "@services/policy/policy.service";
-import { ErrorDialogService } from "@services/ui/error-dialog.service";
 import { UiService } from "@services/ui/ui.service";
 import { PolicyInstanceDialogComponent } from "./policy-instance-dialog.component";
 import { TypedPolicyEditorComponent } from "@policy/typed-policy-editor/typed-policy-editor.component";
@@ -48,26 +47,24 @@
 import { CreatePolicyInstance } from "@interfaces/policy.types";
 import { NotificationService } from "@services/ui/notification.service";
 import * as uuid from "uuid";
+import { HttpErrorResponse } from "@angular/common/http";
 
 describe("PolicyInstanceDialogComponent", () => {
   const untypedSchema = JSON.parse("{}");
-  const typedSchema =
-    JSON.parse('{ "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "priorityLevel": "number" }}');
+  const typedSchema = JSON.parse(
+    '{ "description": "Type 1 policy type", "title": "1", "type": "object", "properties": { "priorityLevel": "number" }}'
+  );
 
   let component: PolicyInstanceDialogComponent;
   let fixture: ComponentFixture<PolicyInstanceDialogComponent>;
   let loader: HarnessLoader;
   let dialogRefSpy: MatDialogRef<PolicyInstanceDialogComponent>;
   let policyServiceSpy: jasmine.SpyObj<PolicyService>;
-  let errDialogServiceSpy: jasmine.SpyObj<ErrorDialogService>;
   let notificationServiceSpy: NotificationService;
 
   beforeEach(async () => {
     dialogRefSpy = jasmine.createSpyObj("MatDialogRef", ["close"]);
     policyServiceSpy = jasmine.createSpyObj("PolicyService", ["putPolicy"]);
-    errDialogServiceSpy = jasmine.createSpyObj("ErrorDialogService", [
-      "displayError",
-    ]);
     notificationServiceSpy = jasmine.createSpyObj("NotificationService", [
       "success",
     ]);
@@ -93,7 +90,6 @@
         ChangeDetectorRef,
         { provide: MatDialogRef, useValue: dialogRefSpy },
         { provide: PolicyService, useValue: policyServiceSpy },
-        { provide: ErrorDialogService, useValue: errDialogServiceSpy },
         { provide: NotificationService, useValue: notificationServiceSpy },
         { provide: MAT_DIALOG_DATA, useValue: true },
         UiService,
@@ -199,7 +195,7 @@
       expect(await submitButton.isDisabled()).toBeFalsy();
     });
 
-    it("should generate policy ID when submitting new policy", async () => {
+    it("should generate policy ID when submitting new policy and close dialog", async () => {
       const ricSelector: RicSelectorComponent = fixture.debugElement.query(
         By.directive(RicSelectorComponent)
       ).componentInstance;
@@ -213,6 +209,9 @@
       spyOn(uuid, "v4").and.returnValue("1234567890");
       ricSelector.selectedRic.emit("ric1");
       noTypePolicyEditor.validJson.emit("{}");
+
+      policyServiceSpy.putPolicy.and.returnValue(of("Success"));
+
       await submitButton.click();
 
       const policyInstance = {} as CreatePolicyInstance;
@@ -222,6 +221,26 @@
       policyInstance.ric_id = "ric1";
       policyInstance.service_id = "controlpanel";
       expect(policyServiceSpy.putPolicy).toHaveBeenCalledWith(policyInstance);
+
+      expect(dialogRefSpy.close).toHaveBeenCalledWith("ok");
+    });
+
+    it("should not close dialog when error from server", async () => {
+      let submitButton: MatButtonHarness = await loader.getHarness(
+        MatButtonHarness.with({ selector: "#submitButton" })
+      );
+
+      const errorResponse = {
+        status: 400,
+        statusText: "Bad Request",
+      } as HttpErrorResponse;
+      policyServiceSpy.putPolicy.and.returnValue(errorResponse);
+
+      await submitButton.click();
+
+      expect(policyServiceSpy.putPolicy).toHaveBeenCalled();
+
+      expect(dialogRefSpy.close).not.toHaveBeenCalled();
     });
   });
 
@@ -308,7 +327,9 @@
   });
 
   describe("content when editing policy without type", () => {
-    const instanceJson = JSON.parse('{"qosObjectives": {"priorityLevel": 3100}}');
+    const instanceJson = JSON.parse(
+      '{"qosObjectives": {"priorityLevel": 3100}}'
+    );
     beforeEach(async () => {
       const policyData = {
         createSchema: untypedSchema,
@@ -349,9 +370,7 @@
         By.directive(NoTypePolicyEditorComponent)
       ).componentInstance;
       expect(noTypePolicyEditor).toBeTruthy();
-      expect(noTypePolicyEditor.policyJson).toEqual(
-        instanceJson
-      );
+      expect(noTypePolicyEditor.policyJson).toEqual(instanceJson);
     });
 
     it("should contain enabled Close and Submit buttons when all inputs are valid", async () => {
@@ -481,7 +500,8 @@
     return (
       typeof policy1.policy_data === "object" &&
       typeof policy2.policy_data === "object" &&
-      JSON.stringify(policy1.policy_data) === JSON.stringify(policy2.policy_data) &&
+      JSON.stringify(policy1.policy_data) ===
+        JSON.stringify(policy2.policy_data) &&
       policy1.policy_id === policy2.policy_id &&
       policy1.policytype_id === policy2.policytype_id &&
       policy1.ric_id === policy2.ric_id &&
diff --git a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
index 05604e3..8750d42 100644
--- a/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
+++ b/webapp-frontend/src/app/policy/policy-instance-dialog/policy-instance-dialog.component.ts
@@ -32,8 +32,6 @@
 import { PolicyService } from "@services/policy/policy.service";
 import { NotificationService } from "@services/ui/notification.service";
 import { UiService } from "@services/ui/ui.service";
-import { HttpErrorResponse } from "@angular/common/http";
-import { ErrorDialogService } from "@services/ui/error-dialog.service";
 import * as uuid from "uuid";
 import {
   CreatePolicyInstance,
@@ -57,7 +55,6 @@
     private cdr: ChangeDetectorRef,
     public dialogRef: MatDialogRef<PolicyInstanceDialogComponent>,
     private policySvc: PolicyService,
-    private errorService: ErrorDialogService,
     private notificationService: NotificationService,
     @Inject(MAT_DIALOG_DATA) private data,
     private ui: UiService
@@ -100,10 +97,7 @@
         self.notificationService.success(
           "Policy " + self.policyInstance.policy_id + " submitted"
         );
-        self.dialogRef.close();
-      },
-      error(error: HttpErrorResponse) {
-        self.errorService.displayError("Submit failed: " + error.error);
+        self.dialogRef.close("ok");
       },
       complete() {},
     });
@@ -131,7 +125,7 @@
   const instanceJson = instance ? instance.policy_data : null;
   const name = policyTypeSchema.name;
   const ric = instance ? instance.ric_id : null;
-  return {
+  const data = {
     maxWidth: "1200px",
     maxHeight: "900px",
     width: "900px",
@@ -145,5 +139,6 @@
       name,
       ric,
     },
-  };
+  } as MatDialogConfig;
+  return data;
 }
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
index e6d483f..29f0579 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.html
@@ -18,21 +18,21 @@
   ========================LICENSE_END===================================
   -->
 <div>
-    Number of instances: {{this.nbInstances()}}
-    <button mat-icon-button (click)="createPolicyInstance(policyTypeSchema)">
-        <mat-icon matTooltip="Create instance">add_box</mat-icon>
+    Number of instances: {{noInstances()}}
+    <button id="createButton" mat-icon-button (click)="createPolicyInstance(policyTypeSchema)">
+        <mat-icon id="createIcon" matTooltip="Create instance">add_box</mat-icon>
     </button>
-    <button mat-icon-button color="primary" (click)="refreshTable()">
-        <mat-icon>refresh</mat-icon>
+    <button id="refreshButton" mat-icon-button color="primary" (click)="refreshTable()">
+        <mat-icon id="refreshIcon">refresh</mat-icon>
     </button>
 </div>
 
-<table #table mat-table class="instances-table mat-elevation-z8" [ngClass]="{'table-dark': darkMode}" matSort (matSortChange)="getSortedData($event)"
-    multiTemplateDataRows [dataSource]="instanceDataSource">
+<mat-table class="instances-table mat-elevation-z8" id="policiesTable" [dataSource]="instanceDataSource" matSort
+    (matSortChange)="getSortedData($event)" matSortDisableClear multiTemplateDataRows>
 
     <ng-container matColumnDef="instanceId">
         <mat-header-cell mat-sort-header *matHeaderCellDef matTooltip="The ID of the policy instance">
-            <div (click)="stopSort($event)">
+            <div id="idSortStop" (click)="stopSort($event)">
                 <form style="display: flex" [formGroup]="policyInstanceForm">
                     <mat-form-field>
                         <input id="policyInstanceIdFilter" matInput formControlName="id">
@@ -41,14 +41,14 @@
                 </form>
             </div>
         </mat-header-cell>
-        <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.policy_id}}
+        <mat-cell *matCellDef="let instance" (click)="modifyInstance(instance)">{{instance.policy_id}}
         </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="ric">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="Element where the policy instance resides, e.g. a gNodeB or Near-RT RIC">
-            <div (click)="stopSort($event)">
+            <div id="targetSortStop" (click)="stopSort($event)">
                 <form style="display: flex" [formGroup]="policyInstanceForm">
                     <mat-form-field>
                         <input id="policyInstanceTargetFilter" matInput formControlName="target">
@@ -57,14 +57,14 @@
                 </form>
             </div>
         </mat-header-cell>
-        <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.ric_id}}
+        <mat-cell *matCellDef="let instance" (click)="modifyInstance(instance)">{{instance.ric_id}}
         </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="service">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="The service that created the policy instance, and is responsible for its lifecycle">
-            <div (click)="stopSort($event)">
+            <div id="ownerSortStop" (click)="stopSort($event)">
                 <form style="display: flex" [formGroup]="policyInstanceForm">
                     <mat-form-field>
                         <input id="policyInstanceOwnerFilter" matInput formControlName="owner">
@@ -73,14 +73,14 @@
                 </form>
             </div>
         </mat-header-cell>
-        <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{element.service_id}}
+        <mat-cell *matCellDef="let instance" (click)="modifyInstance(instance)">{{instance.service_id}}
         </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="lastModified">
         <mat-header-cell mat-sort-header *matHeaderCellDef
             matTooltip="The time of the last modification of the policy instance">
-            <div (click)="stopSort($event)">
+            <div id="lastModifiedSortStop" (click)="stopSort($event)">
                 <form style="display: flex" [formGroup]="policyInstanceForm">
                     <mat-form-field>
                         <input id="policyInstanceLastModifiedFilter" matInput formControlName="lastModified">
@@ -89,17 +89,17 @@
                 </form>
             </div>
         </mat-header-cell>
-        <mat-cell *matCellDef="let element" (click)="modifyInstance(element)">{{toLocalTime(element.lastModified)}}
+        <mat-cell *matCellDef="let instance" (click)="modifyInstance(instance)">{{toLocalTime(instance.lastModified)}}
         </mat-cell>
     </ng-container>
 
     <ng-container matColumnDef="action">
         <mat-header-cell class="action-cell" *matHeaderCellDef>Action</mat-header-cell>
         <mat-cell class="action-cell" *matCellDef="let instance">
-            <button mat-icon-button (click)="modifyInstance(instance)" matTooltip="Edit the policy instance">
+            <button mat-icon-button id="{{instance.policy_id + 'EditButton'}}" (click)="modifyInstance(instance)" matTooltip="Edit the policy instance">
                 <mat-icon>edit</mat-icon>
             </button>
-            <button mat-icon-button color="warn" (click)="deleteInstance(instance)"
+            <button mat-icon-button id="{{instance.policy_id + 'DeleteButton'}}" color="warn" (click)="deleteInstance(instance)"
                 matTooltip="Delete the policy instance">
                 <mat-icon>delete</mat-icon>
             </button>
@@ -113,4 +113,4 @@
     <mat-header-row *matHeaderRowDef="['instanceId', 'ric', 'service', 'lastModified', 'action']">
     </mat-header-row>
     <mat-row *matRowDef="let instance; columns: ['instanceId', 'ric', 'service', 'lastModified', 'action'];"></mat-row>
-</table>
\ No newline at end of file
+</mat-table>
\ No newline at end of file
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.scss b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.scss
index 7f0ba47..c96ecfc 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.scss
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.scss
@@ -26,14 +26,42 @@
   width: 100%;
   margin-top: 10px;
   margin-bottom: 10px;
-  background-color: grayscale($color: #eeeaea);
+  background-color: transparent;
 }
 
 .mat-column-instanceId {
   word-wrap: break-word;
   white-space: unset;
-  flex: 0 0 28%;
-  width: 28%;
+  flex: 0 0 22%;
+  width: 22%;
+}
+
+.mat-column-ric {
+  word-wrap: break-word;
+  white-space: unset;
+  flex: 0 0 22%;
+  width: 22%;
+}
+
+.mat-column-service {
+  word-wrap: break-word;
+  white-space: unset;
+  flex: 0 0 22%;
+  width: 22%;
+}
+
+.mat-column-lastModified {
+  word-wrap: break-word;
+  white-space: unset;
+  flex: 0 0 22%;
+  width: 22%;
+}
+
+.mat-column-action {
+  word-wrap: break-word;
+  white-space: unset;
+  flex: 0 0 12%;
+  width: 12%;
 }
 
 
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
index 1260464..8f29d42 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.spec.ts
@@ -18,9 +18,22 @@
  * ========================LICENSE_END===================================
  */
 
-import { Component, ViewChild } from "@angular/core";
-import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+import { HarnessLoader } from "@angular/cdk/testing";
+import { TestbedHarnessEnvironment } from "@angular/cdk/testing/testbed";
+import { HttpResponse } from "@angular/common/http";
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { MatButtonHarness } from "@angular/material/button/testing";
 import { MatDialog } from "@angular/material/dialog";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputHarness } from "@angular/material/input/testing";
+import { MatSortModule } from "@angular/material/sort";
+import { MatSortHarness } from "@angular/material/sort/testing";
+import { MatTableModule } from "@angular/material/table";
+import { MatTableHarness } from "@angular/material/table/testing";
+import { By } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import {
   PolicyInstance,
   PolicyInstances,
@@ -29,18 +42,59 @@
 } from "@app/interfaces/policy.types";
 import { PolicyService } from "@app/services/policy/policy.service";
 import { ConfirmDialogService } from "@app/services/ui/confirm-dialog.service";
-import { ErrorDialogService } from "@app/services/ui/error-dialog.service";
 import { NotificationService } from "@app/services/ui/notification.service";
 import { UiService } from "@app/services/ui/ui.service";
 import { ToastrModule } from "ngx-toastr";
-import { of } from "rxjs";
+import { Observable, of } from "rxjs";
+import { PolicyInstanceDialogComponent } from "../policy-instance-dialog/policy-instance-dialog.component";
 import { PolicyInstanceComponent } from "./policy-instance.component";
 
+const lastModifiedTime = "2021-01-26T13:15:11.895297Z";
 describe("PolicyInstanceComponent", () => {
   let hostComponent: PolicyInstanceComponentHostComponent;
+  let componentUnderTest: PolicyInstanceComponent;
   let hostFixture: ComponentFixture<PolicyInstanceComponentHostComponent>;
+  let loader: HarnessLoader;
   let policyServiceSpy: jasmine.SpyObj<PolicyService>;
   let dialogSpy: jasmine.SpyObj<MatDialog>;
+  let notificationServiceSpy: jasmine.SpyObj<NotificationService>;
+  let confirmServiceSpy: jasmine.SpyObj<ConfirmDialogService>;
+
+  const policyInstances = {
+    policy_ids: ["policy1", "policy2"],
+  } as PolicyInstances;
+  const policyTypeSchema = JSON.parse(
+    '{"title": "1", "description": "Type 1 policy type"}'
+  );
+  const policy1 = {
+    policy_id: "policy1",
+    policy_data: "{}",
+    ric_id: "1",
+    service_id: "service",
+    lastModified: "Now",
+  } as PolicyInstance;
+  const policy2 = {
+    policy_id: "policy2",
+    policy_data: "{}",
+    ric_id: "2",
+    service_id: "service",
+    lastModified: "Now",
+  } as PolicyInstance;
+  const policy1Status = {
+    last_modified: lastModifiedTime,
+  } as PolicyStatus;
+  const policy2Status = {
+    last_modified: lastModifiedTime,
+  } as PolicyStatus;
+
+  const policyIdToInstanceMap = {
+    policy1: policy1,
+    policy2: policy2,
+  };
+  const policyIdToStatusMap = {
+    policy1: policy1Status,
+    policy2: policy2Status,
+  };
 
   @Component({
     selector: "policy-instance-compnent-host-component",
@@ -48,57 +102,52 @@
       "<nrcp-policy-instance [policyTypeSchema]=policyType></nrcp-policy-instance>",
   })
   class PolicyInstanceComponentHostComponent {
-    @ViewChild(PolicyInstanceComponent)
-    componentUnderTest: PolicyInstanceComponent;
-    policyTypeSchema = JSON.parse(
-      '{"title": "1", "description": "Type 1 policy type"}'
-    );
     policyType = {
       id: "type1",
       name: "1",
-      schemaObject: this.policyTypeSchema,
+      schemaObject: policyTypeSchema,
     } as PolicyTypeSchema;
   }
 
-  beforeEach(async(() => {
+  beforeEach(async () => {
     policyServiceSpy = jasmine.createSpyObj("PolicyService", [
       "getPolicyInstancesByType",
       "getPolicyInstance",
       "getPolicyStatus",
+      "deletePolicy",
     ]);
-    let policyInstances = { policy_ids: ["policy1", "policy2"] } as PolicyInstances;
     policyServiceSpy.getPolicyInstancesByType.and.returnValue(
       of(policyInstances)
     );
-    let policy1 = {
-      policy_id: "policy1",
-      policy_data: "{}",
-      ric_id: "1",
-      service_id: "service",
-      lastModified: "Now",
-    } as PolicyInstance;
-    let policy2 = {
-      policy_id: "policy2",
-      policy_data: "{}",
-      ric_id: "2",
-      service_id: "service",
-      lastModified: "Now",
-    } as PolicyInstance;
-    policyServiceSpy.getPolicyInstance.and.returnValues(
-      of(policy1),
-      of(policy2)
-    );
-    let policy1Status = { last_modified: "Just now" } as PolicyStatus;
-    let policy2Status = { last_modified: "Before" } as PolicyStatus;
-    policyServiceSpy.getPolicyStatus.and.returnValues(
-      of(policy1Status),
-      of(policy2Status)
-    );
+    policyServiceSpy.getPolicyInstance.and.callFake(function (
+      policyId: string
+    ) {
+      return of(policyIdToInstanceMap[policyId]);
+    });
+    policyServiceSpy.getPolicyStatus.and.callFake(function (policyId: string) {
+      return of(policyIdToStatusMap[policyId]);
+    });
 
     dialogSpy = jasmine.createSpyObj("MatDialog", ["open"]);
+    notificationServiceSpy = jasmine.createSpyObj("NotificationService", [
+      "success",
+      "warn",
+    ]);
+    confirmServiceSpy = jasmine.createSpyObj("ConfirmDialogService", [
+      "openConfirmDialog",
+    ]);
 
-    TestBed.configureTestingModule({
-      imports: [ToastrModule.forRoot()],
+    await TestBed.configureTestingModule({
+      imports: [
+        BrowserAnimationsModule,
+        FormsModule,
+        MatIconModule,
+        MatSortModule,
+        MatTableModule,
+        ReactiveFormsModule,
+        ToastrModule.forRoot(),
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [
         PolicyInstanceComponent,
         PolicyInstanceComponentHostComponent,
@@ -106,21 +155,438 @@
       providers: [
         { provide: PolicyService, useValue: policyServiceSpy },
         { provide: MatDialog, useValue: dialogSpy },
-        ErrorDialogService,
-        NotificationService,
-        ConfirmDialogService,
+        { provide: NotificationService, useValue: notificationServiceSpy },
+        { provide: ConfirmDialogService, useValue: confirmServiceSpy },
         UiService,
       ],
     }).compileComponents();
-  }));
 
-  beforeEach(() => {
     hostFixture = TestBed.createComponent(PolicyInstanceComponentHostComponent);
     hostComponent = hostFixture.componentInstance;
+    componentUnderTest = hostFixture.debugElement.query(
+      By.directive(PolicyInstanceComponent)
+    ).componentInstance;
     hostFixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(hostFixture);
   });
 
   it("should create", () => {
     expect(hostComponent).toBeTruthy();
+
+    expect(componentUnderTest).toBeTruthy();
+  });
+
+  it("should set correct dark mode from UIService", () => {
+    const uiService: UiService = TestBed.inject(UiService);
+    expect(componentUnderTest.darkMode).toBeTruthy();
+
+    uiService.darkModeState.next(false);
+    hostFixture.detectChanges();
+    expect(componentUnderTest.darkMode).toBeFalsy();
+  });
+
+  it("should contain number of instances heading and value, create and refresh buttons, and policies table", async () => {
+    const instancesHeading = hostFixture.debugElement.nativeElement.querySelector(
+      "div"
+    );
+    expect(instancesHeading.innerText).toContain("Number of instances: 2");
+
+    const createButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#createButton" })
+    );
+    expect(createButton).toBeTruthy();
+    const createIcon = hostFixture.debugElement.nativeElement.querySelector(
+      "#createIcon"
+    );
+    expect(createIcon.innerText).toContain("add_box");
+
+    const refreshButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#refreshButton" })
+    );
+    expect(refreshButton).toBeTruthy();
+    const refreshIcon = hostFixture.debugElement.nativeElement.querySelector(
+      "#refreshIcon"
+    );
+    expect(refreshIcon.innerText).toContain("refresh");
+
+    const policiesTable = await loader.getHarness(
+      MatTableHarness.with({ selector: "#policiesTable" })
+    );
+    expect(policiesTable).toBeTruthy();
+  });
+
+  it("should open dialog to create policy and refresh policies after successful creation", async () => {
+    const dialogRefSpy = setupDialogRefSpy();
+    dialogSpy.open.and.returnValue(dialogRefSpy);
+
+    spyOn(componentUnderTest, "getPolicyInstances");
+
+    const createButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#createButton" })
+    );
+    await createButton.click();
+
+    expect(dialogSpy.open).toHaveBeenCalledWith(PolicyInstanceDialogComponent, {
+      maxWidth: "1200px",
+      maxHeight: "900px",
+      width: "900px",
+      role: "dialog",
+      disableClose: false,
+      panelClass: "dark-theme",
+      data: {
+        createSchema: policyTypeSchema,
+        instanceId: null,
+        instanceJson: null,
+        name: "1",
+        ric: null,
+      },
+    });
+    expect(componentUnderTest.getPolicyInstances).toHaveBeenCalled();
+  });
+
+  it("should open dialog to edit policy and refresh policies after successful update", async () => {
+    const dialogRefSpy = setupDialogRefSpy();
+    dialogSpy.open.and.returnValue(dialogRefSpy);
+
+    spyOn(componentUnderTest, "getPolicyInstances");
+
+    const editButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#policy1EditButton" })
+    );
+    await editButton.click();
+
+    expect(dialogSpy.open).toHaveBeenCalledWith(PolicyInstanceDialogComponent, {
+      maxWidth: "1200px",
+      maxHeight: "900px",
+      width: "900px",
+      role: "dialog",
+      disableClose: false,
+      panelClass: "dark-theme",
+      data: {
+        createSchema: policyTypeSchema,
+        instanceId: "policy1",
+        instanceJson: "{}",
+        name: "1",
+        ric: "1",
+      },
+    });
+    expect(componentUnderTest.getPolicyInstances).toHaveBeenCalled();
+  });
+
+  it("should open dialog to edit policy and not refresh policies when dialog closed wihtout submit", async () => {
+    const dialogRefSpy = setupDialogRefSpy(false);
+    dialogSpy.open.and.returnValue(dialogRefSpy);
+
+    spyOn(componentUnderTest, "getPolicyInstances");
+
+    const editButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#policy1EditButton" })
+    );
+    await editButton.click();
+
+    expect(componentUnderTest.getPolicyInstances).not.toHaveBeenCalled();
+  });
+
+  it("should open instance dialog when clicking in any policy cell in table", async () => {
+    spyOn(componentUnderTest, "modifyInstance");
+
+    const policiesTable = await loader.getHarness(
+      MatTableHarness.with({ selector: "#policiesTable" })
+    );
+    const firstRow = (await policiesTable.getRows())[0];
+    const idCell = (await firstRow.getCells())[0];
+    (await idCell.host()).click();
+    const ownerCell = (await firstRow.getCells())[1];
+    (await ownerCell.host()).click();
+    const serviceCell = (await firstRow.getCells())[2];
+    (await serviceCell.host()).click();
+    const lastModifiedCell = (await firstRow.getCells())[3];
+    (await lastModifiedCell.host()).click();
+
+    // Totally unnecessary call just to make the bloody framework count the number of calls to the spy correctly!
+    await policiesTable.getRows();
+
+    expect(componentUnderTest.modifyInstance).toHaveBeenCalledTimes(4);
+  });
+
+  it("should open dialog asking for delete and delete when ok response and refresh table afterwards", async () => {
+    const dialogRefSpy = setupDialogRefSpy();
+    confirmServiceSpy.openConfirmDialog.and.returnValue(dialogRefSpy);
+    const createResponse = { status: 204 } as HttpResponse<Object>;
+    policyServiceSpy.deletePolicy.and.returnValue(of(createResponse));
+
+    spyOn(componentUnderTest, "getPolicyInstances");
+    const deleteButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#policy1DeleteButton" })
+    );
+    await deleteButton.click();
+
+    expect(confirmServiceSpy.openConfirmDialog).toHaveBeenCalledWith(
+      "Are you sure you want to delete this policy instance?"
+    );
+    expect(policyServiceSpy.deletePolicy).toHaveBeenCalledWith("policy1");
+    expect(notificationServiceSpy.success).toHaveBeenCalledWith(
+      "Delete succeeded!"
+    );
+    expect(componentUnderTest.getPolicyInstances).toHaveBeenCalled();
+  });
+
+  it("should open dialog asking for delete and not delete whith Cancel as response", async () => {
+    const dialogRefSpy = setupDialogRefSpy(false);
+    confirmServiceSpy.openConfirmDialog.and.returnValue(dialogRefSpy);
+
+    const deleteButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#policy1DeleteButton" })
+    );
+    await deleteButton.click();
+
+    expect(policyServiceSpy.deletePolicy).not.toHaveBeenCalled();
+  });
+
+  it("should refresh table", async () => {
+    spyOn(componentUnderTest, "getPolicyInstances");
+
+    const refreshButton: MatButtonHarness = await loader.getHarness(
+      MatButtonHarness.with({ selector: "#refreshButton" })
+    );
+    await refreshButton.click();
+
+    expect(componentUnderTest.getPolicyInstances).toHaveBeenCalled();
+  });
+
+  describe("#policiesTable", () => {
+    const expectedPolicy1Row = {
+      instanceId: "policy1",
+      ric: "1",
+      service: "service",
+      lastModified: toLocalTime(lastModifiedTime),
+      action: "editdelete",
+    };
+
+    it("should contain correct headings", async () => {
+      const policiesTable = await loader.getHarness(
+        MatTableHarness.with({ selector: "#policiesTable" })
+      );
+      const headerRow = (await policiesTable.getHeaderRows())[0];
+      const headers = await headerRow.getCellTextByColumnName();
+
+      expect(headers).toEqual({
+        instanceId: "Instance",
+        ric: "Target",
+        service: "Owner",
+        lastModified: "Last modified",
+        action: "Action",
+      });
+    });
+
+    it("should contain data after initialization", async () => {
+      const expectedJobRows = [
+        expectedPolicy1Row,
+        {
+          instanceId: "policy2",
+          ric: "2",
+          service: "service",
+          lastModified: toLocalTime(lastModifiedTime),
+          action: "editdelete",
+        },
+      ];
+      const policiesTable = await loader.getHarness(
+        MatTableHarness.with({ selector: "#policiesTable" })
+      );
+      const policyRows = await policiesTable.getRows();
+      expect(policyRows.length).toEqual(2);
+      policyRows.forEach((row) => {
+        row.getCellTextByColumnName().then((values) => {
+          expect(expectedJobRows).toContain(jasmine.objectContaining(values));
+        });
+      });
+    });
+
+    it("should have filtering for all four policy data headings", async () => {
+      const policiesTable = await loader.getHarness(
+        MatTableHarness.with({ selector: "#policiesTable" })
+      );
+
+      const idFilterInput = await loader.getHarness(
+        MatInputHarness.with({ selector: "#policyInstanceIdFilter" })
+      );
+      await idFilterInput.setValue("1");
+      const policyRows = await policiesTable.getRows();
+      expect(policyRows.length).toEqual(1);
+      expect(await policyRows[0].getCellTextByColumnName()).toEqual(
+        expectedPolicy1Row
+      );
+
+      const targetFilterInput = await loader.getHarness(
+        MatInputHarness.with({ selector: "#policyInstanceTargetFilter" })
+      );
+      expect(targetFilterInput).toBeTruthy();
+
+      const ownerFilterInput = await loader.getHarness(
+        MatInputHarness.with({ selector: "#policyInstanceOwnerFilter" })
+      );
+      expect(ownerFilterInput).toBeTruthy();
+
+      const lastModifiedFilterInput = await loader.getHarness(
+        MatInputHarness.with({ selector: "#policyInstanceLastModifiedFilter" })
+      );
+      expect(lastModifiedFilterInput).toBeTruthy();
+    });
+
+    it("should not sort when click in filter inputs", async () => {
+      spyOn(componentUnderTest, "stopSort").and.callThrough();
+
+      const idFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector(
+        "#idSortStop"
+      );
+      idFilterInputDiv.click();
+
+      const targetFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector(
+        "#targetSortStop"
+      );
+      targetFilterInputDiv.click();
+
+      const ownerFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector(
+        "#ownerSortStop"
+      );
+      ownerFilterInputDiv.click();
+
+      const lastModifiedFilterInputDiv = hostFixture.debugElement.nativeElement.querySelector(
+        "#lastModifiedSortStop"
+      );
+      lastModifiedFilterInputDiv.click();
+
+      expect(componentUnderTest.stopSort).toHaveBeenCalledTimes(4);
+
+      const eventSpy = jasmine.createSpyObj("any", ["stopPropagation"]);
+      componentUnderTest.stopSort(eventSpy);
+      expect(eventSpy.stopPropagation).toHaveBeenCalled();
+    });
+
+    describe("#sorting", () => {
+      it("should verify sort functionality on the table", async () => {
+        const sort = await loader.getHarness(MatSortHarness);
+        const headers = await sort.getSortHeaders({ sortDirection: "" });
+        expect(headers.length).toBe(4);
+
+        await headers[0].click();
+        expect(await headers[0].isActive()).toBe(true);
+        expect(await headers[0].getSortDirection()).toBe("asc");
+
+        await headers[0].click();
+        expect(await headers[0].getSortDirection()).toBe("desc");
+      });
+
+      it("should sort table asc and desc by first header", async () => {
+        const sort = await loader.getHarness(MatSortHarness);
+        const policyTable = await loader.getHarness(
+          MatTableHarness.with({ selector: "#policiesTable" })
+        );
+        const firstHeader = (await sort.getSortHeaders())[0];
+        expect(await firstHeader.getSortDirection()).toBe("");
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("asc");
+        let policyRows = await policyTable.getRows();
+        expect(await policyRows[0].getCellTextByColumnName()).toEqual(
+          expectedPolicy1Row
+        );
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("desc");
+        policyRows = await policyTable.getRows();
+        expect(
+          await policyRows[policyRows.length - 1].getCellTextByColumnName()
+        ).toEqual(expectedPolicy1Row);
+      });
+
+      it("should sort table asc and desc by second header", async () => {
+        const sort = await loader.getHarness(MatSortHarness);
+        const jobsTable = await loader.getHarness(
+          MatTableHarness.with({ selector: "#policiesTable" })
+        );
+        const firstHeader = (await sort.getSortHeaders())[1];
+        expect(await firstHeader.getSortDirection()).toBe("");
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("asc");
+        let policyRows = await jobsTable.getRows();
+        policyRows = await jobsTable.getRows();
+        expect(await policyRows[0].getCellTextByColumnName()).toEqual(
+          expectedPolicy1Row
+        );
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("desc");
+        policyRows = await jobsTable.getRows();
+        expect(
+          await policyRows[policyRows.length - 1].getCellTextByColumnName()
+        ).toEqual(expectedPolicy1Row);
+      });
+
+      it("should sort table asc and desc by third header", async () => {
+        const sort = await loader.getHarness(MatSortHarness);
+        const jobsTable = await loader.getHarness(
+          MatTableHarness.with({ selector: "#policiesTable" })
+        );
+        const firstHeader = (await sort.getSortHeaders())[2];
+        expect(await firstHeader.getSortDirection()).toBe("");
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("asc");
+        let policyRows = await jobsTable.getRows();
+        policyRows = await jobsTable.getRows();
+        expect(await policyRows[0].getCellTextByColumnName()).toEqual(
+          expectedPolicy1Row
+        );
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("desc");
+        policyRows = await jobsTable.getRows();
+        expect(
+          await policyRows[policyRows.length - 1].getCellTextByColumnName()
+        ).toEqual(expectedPolicy1Row);
+      });
+
+      it("should sort table asc and desc by fourth header", async () => {
+        const sort = await loader.getHarness(MatSortHarness);
+        const jobsTable = await loader.getHarness(
+          MatTableHarness.with({ selector: "#policiesTable" })
+        );
+        const firstHeader = (await sort.getSortHeaders())[3];
+        expect(await firstHeader.getSortDirection()).toBe("");
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("asc");
+        let policyRows = await jobsTable.getRows();
+        policyRows = await jobsTable.getRows();
+        expect(await policyRows[0].getCellTextByColumnName()).toEqual(
+          expectedPolicy1Row
+        );
+
+        await firstHeader.click();
+        expect(await firstHeader.getSortDirection()).toBe("desc");
+        policyRows = await jobsTable.getRows();
+        expect(
+          await policyRows[policyRows.length - 1].getCellTextByColumnName()
+        ).toEqual(expectedPolicy1Row);
+      });
+    });
   });
 });
+
+function setupDialogRefSpy(returnValue: boolean = true) {
+  const afterClosedObservable = new Observable((observer) => {
+    observer.next(returnValue);
+  });
+
+  const dialogRefSpy = jasmine.createSpyObj("MatDialogRef", ["afterClosed"]);
+  dialogRefSpy.afterClosed.and.returnValue(afterClosedObservable);
+  return dialogRefSpy;
+}
+
+function toLocalTime(utcTime: string): string {
+  const date = new Date(utcTime);
+  const toutc = date.toUTCString();
+  return new Date(toutc + " UTC").toLocaleString();
+}
diff --git a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
index aafc08e..6441e56 100644
--- a/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
+++ b/webapp-frontend/src/app/policy/policy-instance/policy-instance.component.ts
@@ -22,24 +22,18 @@
 import { Component, OnInit, Input } from "@angular/core";
 import { MatDialog } from "@angular/material/dialog";
 import { PolicyTypeSchema } from "@interfaces/policy.types";
-import { ErrorDialogService } from "@services/ui/error-dialog.service";
 import { NotificationService } from "@services/ui/notification.service";
 import { PolicyService } from "@services/policy/policy.service";
 import { ConfirmDialogService } from "@services/ui/confirm-dialog.service";
 import { PolicyInstance } from "@interfaces/policy.types";
 import { PolicyInstanceDialogComponent } from "../policy-instance-dialog/policy-instance-dialog.component";
 import { getPolicyDialogProperties } from "../policy-instance-dialog/policy-instance-dialog.component";
-import { HttpErrorResponse, HttpResponse } from "@angular/common/http";
-import { BehaviorSubject } from "rxjs";
+import { HttpResponse } from "@angular/common/http";
+import { BehaviorSubject, forkJoin } from "rxjs";
 import { UiService } from "@services/ui/ui.service";
 import { FormControl, FormGroup } from "@angular/forms";
 import { MatTableDataSource } from "@angular/material/table";
-
-class PolicyTypeInfo {
-  constructor(public type: PolicyTypeSchema) {}
-
-  isExpanded: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-}
+import { mergeMap } from "rxjs/operators";
 
 @Component({
   selector: "nrcp-policy-instance",
@@ -48,17 +42,15 @@
 })
 export class PolicyInstanceComponent implements OnInit {
   @Input() policyTypeSchema: PolicyTypeSchema;
-  policyInstances: PolicyInstance[] = [];
-  private policyInstanceSubject = new BehaviorSubject<PolicyInstance[]>([]);
-  policyTypeInfo = new Map<string, PolicyTypeInfo>();
-  instanceDataSource: MatTableDataSource<PolicyInstance> = new MatTableDataSource<PolicyInstance>();
-  policyInstanceForm: FormGroup;
   darkMode: boolean;
+  instanceDataSource: MatTableDataSource<PolicyInstance>;
+  policyInstanceForm: FormGroup;
+  private policyInstanceSubject = new BehaviorSubject<PolicyInstance[]>([]);
+  policyInstances: PolicyInstance[] = [];
 
   constructor(
     private policySvc: PolicyService,
     private dialog: MatDialog,
-    private errorDialogService: ErrorDialogService,
     private notificationService: NotificationService,
     private confirmDialogService: ConfirmDialogService,
     private ui: UiService
@@ -74,26 +66,29 @@
   ngOnInit() {
     this.getPolicyInstances();
     this.policyInstanceSubject.subscribe((data) => {
-      this.instanceDataSource.data = data;
+      this.instanceDataSource = new MatTableDataSource<PolicyInstance>(data);
+
+      this.instanceDataSource.filterPredicate = ((
+        data: PolicyInstance,
+        filter
+      ) => {
+        return (
+          this.isDataIncluding(data.policy_id, filter.id) &&
+          this.isDataIncluding(data.ric_id, filter.target) &&
+          this.isDataIncluding(data.service_id, filter.owner) &&
+          this.isDataIncluding(data.lastModified, filter.lastModified)
+        );
+      }) as (data: PolicyInstance, filter: any) => boolean;
     });
 
     this.policyInstanceForm.valueChanges.subscribe((value) => {
-      const filter = { ...value, id: value.id.trim().toLowerCase() } as string;
+      const filter = {
+        ...value,
+        id: value.id.trim().toLowerCase(),
+      } as string;
       this.instanceDataSource.filter = filter;
     });
 
-    this.instanceDataSource.filterPredicate = ((
-      data: PolicyInstance,
-      filter
-    ) => {
-      return (
-        this.isDataIncluding(data.policy_id, filter.id) &&
-        this.isDataIncluding(data.ric_id, filter.target) &&
-        this.isDataIncluding(data.service_id, filter.owner) &&
-        this.isDataIncluding(data.lastModified, filter.lastModified)
-      );
-    }) as (data: PolicyInstance, filter: any) => boolean;
-
     this.ui.darkModeState.subscribe((isDark) => {
       this.darkMode = isDark;
     });
@@ -102,29 +97,33 @@
   getPolicyInstances() {
     this.policyInstances = [] as PolicyInstance[];
     this.policySvc
-    .getPolicyInstancesByType(this.policyTypeSchema.id)
-    .subscribe((policies) => {
-      if (policies.policy_ids.length != 0) {
-        policies.policy_ids.forEach((policyId) => {
-          this.policySvc
-          .getPolicyInstance(policyId)
-          .subscribe((policyInstance) => {
-            this.policySvc
-                  .getPolicyStatus(policyId)
-                  .subscribe((policyStatus) => {
-                    policyInstance.lastModified = policyStatus.last_modified;
-                  });
-                this.policyInstances.push(policyInstance);
-              });
-            this.policyInstanceSubject.next(this.policyInstances);
-          });
-        }
+      .getPolicyInstancesByType(this.policyTypeSchema.id)
+      .pipe(
+        mergeMap((policyIds) =>
+          forkJoin(
+            policyIds.policy_ids.map((id) => {
+              return forkJoin([
+                this.policySvc.getPolicyInstance(id),
+                this.policySvc.getPolicyStatus(id),
+              ]);
+            })
+          )
+        )
+      )
+      .subscribe((res) => {
+        this.policyInstances = res.map((policy) => {
+          let policyInstance = <PolicyInstance>{};
+          policyInstance = policy[0];
+          policyInstance.lastModified = policy[1].last_modified;
+          return policyInstance;
+        });
+        this.policyInstanceSubject.next(this.policyInstances);
       });
   }
 
   getSortedData(sort: Sort) {
     const data = this.instanceDataSource.data;
-    data.sort((a, b) => {
+    data.sort((a: PolicyInstance, b: PolicyInstance) => {
       const isAsc = sort.direction === "asc";
       switch (sort.active) {
         case "instanceId":
@@ -150,43 +149,37 @@
     return !filter || data.toLowerCase().includes(filter);
   }
 
-  private onExpand(isExpanded: boolean) {
-    if (isExpanded) {
-      this.getPolicyInstances();
-    }
-  }
-
-  private isSchemaEmpty(): boolean {
-    return this.policyTypeSchema.schemaObject === "{}";
+  createPolicyInstance(policyTypeSchema: PolicyTypeSchema): void {
+    this.openInstanceDialog(null);
   }
 
   modifyInstance(instance: PolicyInstance): void {
-    this.policySvc.getPolicyInstance(instance.policy_id).subscribe(
-      (refreshedJson: any) => {
-        instance = refreshedJson;
-        this.dialog
-          .open(
-            PolicyInstanceDialogComponent,
-            getPolicyDialogProperties(
-              this.policyTypeSchema,
-              instance,
-              this.darkMode
-            )
-          )
-          .afterClosed()
-          .subscribe((_: any) => {
-            this.getPolicyInstances();
-          });
-      },
-      (httpError: HttpErrorResponse) => {
-        this.notificationService.error(
-          "Could not refresh instance. Please try again." + httpError.message
-        );
-      }
-    );
+    let refreshedInstance: PolicyInstance;
+    this.policySvc
+      .getPolicyInstance(instance.policy_id)
+      .subscribe((refreshedJson: any) => {
+        refreshedInstance = refreshedJson;
+      });
+
+    this.openInstanceDialog(refreshedInstance);
   }
 
-  nbInstances(): number {
+  private openInstanceDialog(policy: PolicyInstance) {
+    const dialogData = getPolicyDialogProperties(
+      this.policyTypeSchema,
+      policy,
+      this.darkMode
+    );
+    const dialogRef = this.dialog.open(
+      PolicyInstanceDialogComponent,
+      dialogData
+    );
+    dialogRef.afterClosed().subscribe((ok: any) => {
+      if (ok) this.getPolicyInstances();
+    });
+  }
+
+  noInstances(): number {
     return this.policyInstances.length;
   }
 
@@ -196,17 +189,6 @@
     return new Date(toutc + " UTC").toLocaleString();
   }
 
-  createPolicyInstance(policyTypeSchema: PolicyTypeSchema): void {
-    let dialogRef = this.dialog.open(
-      PolicyInstanceDialogComponent,
-      getPolicyDialogProperties(policyTypeSchema, null, this.darkMode)
-    );
-    const info: PolicyTypeInfo = this.getPolicyTypeInfo(policyTypeSchema);
-    dialogRef.afterClosed().subscribe((_) => {
-      info.isExpanded.next(info.isExpanded.getValue());
-    });
-  }
-
   deleteInstance(instance: PolicyInstance): void {
     this.confirmDialogService
       .openConfirmDialog(
@@ -215,38 +197,18 @@
       .afterClosed()
       .subscribe((res: any) => {
         if (res) {
-          this.policySvc.deletePolicy(instance.policy_id).subscribe(
-            (response: HttpResponse<Object>) => {
-              switch (response.status) {
-                case 204:
-                  this.notificationService.success("Delete succeeded!");
-                  this.getPolicyInstances();
-                  break;
-                default:
-                  this.notificationService.warn(
-                    "Delete failed " + response.status + " " + response.body
-                  );
+          this.policySvc
+            .deletePolicy(instance.policy_id)
+            .subscribe((response: HttpResponse<Object>) => {
+              if (response.status === 204) {
+                this.notificationService.success("Delete succeeded!");
+                this.getPolicyInstances();
               }
-            },
-            (error: HttpErrorResponse) => {
-              this.errorDialogService.displayError(
-                error.statusText + ", " + error.error
-              );
-            }
-          );
+            });
         }
       });
   }
 
-  getPolicyTypeInfo(policyTypeSchema: PolicyTypeSchema): PolicyTypeInfo {
-    let info: PolicyTypeInfo = this.policyTypeInfo.get(policyTypeSchema.name);
-    if (!info) {
-      info = new PolicyTypeInfo(policyTypeSchema);
-      this.policyTypeInfo.set(policyTypeSchema.name, info);
-    }
-    return info;
-  }
-
   refreshTable() {
     this.getPolicyInstances();
   }
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 6b502c6..fec3d8a 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
@@ -66,14 +66,12 @@
 
   private fetchRics() {
     if (!this.policyTypeName) this.policyTypeName = "";
-    console.log("fetchRics ", this.policyTypeName);
     const self: RicSelectorComponent = this;
     this.dataService.getRics(this.policyTypeName).subscribe({
       next(value: Rics) {
         value.rics.forEach((ric) => {
           self.allRics.push(ric.ric_id);
         });
-        console.log(value);
       },
     });
   }