Merge branch 'feature/440243-nueva-politica' into 'develop'

Rehecho crear policy.

See merge request upm-inesdata/inesdata-connector-interface!27

angular.json

@@ -41,8 +41,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "1.5mb",
-                  "maximumError": "2mb"
+                  "maximumWarning": "2.5mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",

package.json

@@ -36,6 +36,8 @@
     "@jsonforms/angular-material": "^3.2.1",
     "@jsonforms/core": "^3.2.1",
     "@think-it-labs/edc-connector-client": "0.5.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.1",
     "angular-oauth2-oidc": "^17.0.2",
     "install": "^0.13.0",
     "jexl": "^2.3.0",

src/app/pages/policies/new-policy-dialog/new-policy-dialog.component.html

@@ -1,38 +1,32 @@
 <mat-dialog-content>
+  <div class="p-10 flex flex-col">
+    <div class="form-section-title">Policy Metadata</div>
+    <!--  ID -->
+    <mat-form-field
+      *ngIf="form.group.controls.id; let ctrl"
+      id="form-field-id"
+      color="accent">
+      <mat-label>ID</mat-label>
+      <input matInput autocomplete="newvalue" [formControl]="ctrl" />
+      <mat-error *ngIf="ctrl.invalid && ctrl.errors?.pattern">{{
+        validationMessages.invalidWhitespacesOrColonsMessage
+      }}</mat-error>
+    </mat-form-field>
+
+    <div class="form-section-title">Policy Expression</div>
+
+    <policy-form-expression
+      [treeNode]="expressionFormHandler.tree.root"></policy-form-expression>
+
+
+  </div>
 
-  <!--  ID -->
-  <mat-form-field class="form-field-stretch" color="accent" id="form-field-id">
-    <mat-label>ID</mat-label>
-    <input [(ngModel)]="policyId" matInput required>
-  </mat-form-field>
-
-  <!--  Permissions -->
-  <mat-form-field class="form-field-stretch" color="accent" id="form-field-permissions">
-    <mat-label>Permissions (JSON)</mat-label>
-    <textarea [(ngModel)]="permissionsJson" rows=4 matInput></textarea>
-  </mat-form-field>
-
-  <!--  Prohibitions -->
-  <mat-form-field class="form-field-stretch" color="accent" id="form-field-prohibitions">
-    <mat-label>Prohibitions (JSON)</mat-label>
-    <textarea [(ngModel)]="prohibitionsJson" rows=4 matInput></textarea>
-  </mat-form-field>
-
-  <!--  Obligations -->
-  <mat-form-field class="form-field-stretch" color="accent" id="form-field-obligations">
-    <mat-label>Obligations (JSON)</mat-label>
-    <textarea [(ngModel)]="obligationsJson" rows=4 matInput></textarea>
-  </mat-form-field>
 
 </mat-dialog-content>
 
 <mat-dialog-actions>
-  <button (click)="onSave()" *ngIf="editMode" color="accent" mat-stroked-button >
-    <mat-icon>save</mat-icon>
-    Save
-  </button>
-
-  <button (click)="onSave()" *ngIf="!editMode" color="accent" mat-stroked-button>
+  <button (click)="onSave()" color="accent" mat-stroked-button
+  [disabled]="this.form.group.invalid">
     <mat-icon>add_circle_outline</mat-icon>
     Create
   </button>

src/app/pages/policies/new-policy-dialog/new-policy-dialog.component.scss

@@ -1,5 +1,5 @@
 mat-dialog-content {
-  width: 800px;
+  min-width: 1500px;
 }
 
 .form-field-half{
@@ -11,3 +11,7 @@ mat-dialog-content {
   box-sizing: border-box;
   width: 100%;
 }
+.mat-mdc-dialog-content {
+  max-height: 85vh;
+  min-height: 65vh;
+}

src/app/pages/policies/new-policy-dialog/new-policy-dialog.component.ts

@@ -1,69 +1,52 @@
-import { Component, OnInit } from '@angular/core';
-import { PolicyInput } from "../../../shared/models/edc-connector-entities";
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialogRef } from "@angular/material/dialog";
 import { NotificationService } from 'src/app/shared/services/notification.service';
-import { PolicyBuilder } from '@think-it-labs/edc-connector-client';
+import { PolicyDefinitionCreatePageForm } from './policy-definition-create-page-form';
+import { ExpressionFormHandler } from '../policy-editor/editor/expression-form-handler';
+import { ValidationMessages } from 'src/app/shared/validators/validation-messages';
+import { Subject } from 'rxjs';
+import { PolicyDefinitionCreateDto } from '../policy-editor/model/policy-definition-create-dto';
 
 @Component({
   selector: 'app-new-policy-dialog',
   templateUrl: './new-policy-dialog.component.html',
   styleUrls: ['./new-policy-dialog.component.scss']
 })
-export class NewPolicyDialogComponent implements OnInit {
-  editMode: boolean = false;
-  policy: PolicyInput = {
-    "@type": "Set"
-  };
+export class NewPolicyDialogComponent  implements OnInit,OnDestroy {
 
-  policyId: string = '';
-  permissionsJson: string = '';
-  prohibitionsJson: string = '';
-  obligationsJson: string = '';
 
-  constructor(private dialogRef: MatDialogRef<NewPolicyDialogComponent>,
-    private notificationService: NotificationService) {
-  }
+  constructor(
+    public form: PolicyDefinitionCreatePageForm,
+    public expressionFormHandler: ExpressionFormHandler,
+    public validationMessages: ValidationMessages,
+    private dialogRef: MatDialogRef<NewPolicyDialogComponent>,
+    private notificationService: NotificationService
+  ) {}
 
   ngOnInit(): void {
-    this.editMode = true;
+
+    this.expressionFormHandler.reset()
+    this.form.reset()
   }
 
   onSave() {
-    try {
-      this.policy.permission = this.parseAndVerifyJson(this.permissionsJson);
-      this.policy.prohibition = this.parseAndVerifyJson(this.prohibitionsJson);
-      this.policy.obligation = this.parseAndVerifyJson(this.obligationsJson);
-
-      this.dialogRef.close({
-        '@id': this.policyId,
-        policy: new PolicyBuilder()
-        .raw({
-          ...this.policy
-        })
-        .build()
-      });
-
-    } catch (error) {
-      if (error instanceof SyntaxError) {
-        this.notificationService.showError("Error parsing JSON: " + error.message);
-        console.error(error);
-      }
+    const createDto = this.buildPolicyDefinitionCreateDto();
+    if(this.form.group.valid){
+      this.dialogRef.close(createDto);
     }
   }
 
-  /**
-   * Parse and verify a JSON from the policy
-   *
-   * @param json JSON to parse and verify
-   * @returns the parsed JSON or null if it is empty
-   */
-  private parseAndVerifyJson(json: string): any {
-    if (json.trim() != '') {
-      const parsedJson = JSON.parse(json);
-      return parsedJson;
-    }
-
-    return null;
+  buildPolicyDefinitionCreateDto(): PolicyDefinitionCreateDto {
+    return {
+      policyDefinitionId: this.form.group.controls.id.value,
+      expression: this.expressionFormHandler.toUiPolicyExpression(),
+    };
   }
 
+  ngOnDestroy$ = new Subject();
+
+  ngOnDestroy(): void {
+    this.ngOnDestroy$.next(null);
+    this.ngOnDestroy$.complete();
+  }
 }

src/app/pages/policies/new-policy-dialog/policy-definition-create-page-form-model.ts

@@ -0,0 +1,9 @@
+import {FormControl, UntypedFormGroup, ɵFormGroupValue} from '@angular/forms';
+
+export type PolicyDefinitionCreatePageFormValue =
+  ɵFormGroupValue<PolicyDefinitionCreatePageFormModel>;
+
+export interface PolicyDefinitionCreatePageFormModel {
+  id: FormControl<string>;
+  treeControls: UntypedFormGroup;
+}

src/app/pages/policies/new-policy-dialog/policy-definition-create-page-form.ts

@@ -0,0 +1,40 @@
+import {Injectable} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {
+  PolicyDefinitionCreatePageFormModel,
+  PolicyDefinitionCreatePageFormValue,
+} from './policy-definition-create-page-form-model';
+import { ExpressionFormControls } from '../policy-editor/editor/expression-form-controls';
+import { noWhitespacesOrColonsValidator } from 'src/app/shared/validators/no-whitespaces-or-colons-validator';
+
+/**
+ * Handles AngularForms for NewPolicyDialog
+ */
+@Injectable()
+export class PolicyDefinitionCreatePageForm {
+  group = this.buildFormGroup();
+
+  /**
+   * Quick access to full value
+   */
+  get value(): PolicyDefinitionCreatePageFormValue {
+    return this.group.value;
+  }
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private expressionFormControls: ExpressionFormControls,
+  ) {}
+
+  buildFormGroup(): FormGroup<PolicyDefinitionCreatePageFormModel> {
+    return this.formBuilder.nonNullable.group({
+      id: ['', [Validators.required, noWhitespacesOrColonsValidator]],
+      treeControls: this.expressionFormControls.formGroup,
+    });
+  }
+
+  reset(){
+    this.expressionFormControls.reset()
+    this.group = this.buildFormGroup()
+  }
+}

src/app/pages/policies/policies.module.ts

@@ -5,16 +5,26 @@ import { PolicyRuleViewerComponent } from './policy-rule-viewer/policy-rule-view
 import { PolicyViewComponent } from './policy-view/policy-view.component';
 import { NewPolicyDialogComponent } from './new-policy-dialog/new-policy-dialog.component';
 import { SharedModule } from 'src/app/shared/shared.module';
+import { PolicyEditorModule } from './policy-editor/policy-editor.module';
+import { PolicyDefinitionCreatePageForm } from './new-policy-dialog/policy-definition-create-page-form';
+import { ExpressionFormControls } from './policy-editor/editor/expression-form-controls';
+import { ExpressionFormHandler } from './policy-editor/editor/expression-form-handler';
 
 @NgModule({
   declarations: [
     PolicyRuleViewerComponent,
     PolicyViewComponent,
     NewPolicyDialogComponent
   ],
+  providers: [
+    PolicyDefinitionCreatePageForm,
+    ExpressionFormControls,
+    ExpressionFormHandler
+  ],
   imports: [
     PoliciesRoutingModule,
-    SharedModule
+    SharedModule,
+    PolicyEditorModule
   ]
 })
 export class PoliciesModule { }

src/app/pages/policies/policy-editor/editor/controls/participant-id-select/array-utils.ts

@@ -0,0 +1,21 @@
+/**
+ * Remove item once from list.
+ *
+ * Use this over .filter(...) to remove items on user interactions
+ * to prevent one click from removing many items.
+ *
+ * Returns copy.
+ */
+export function removeOnce<T>(list: T[], item: T): T[] {
+  const index = list.indexOf(item);
+  if (index >= 0) {
+    const copy = [...list];
+    copy.splice(index, 1);
+    return copy;
+  }
+  return list;
+}
+
+export function filterNonNull<T>(array: (T | null | undefined)[]): T[] {
+  return array.filter((it) => it != null) as T[];
+}

src/app/pages/policies/policy-editor/editor/controls/participant-id-select/participant-id-select.component.html

@@ -0,0 +1,24 @@
+<mat-form-field class="grow" appearance="outline" color="accent">
+  <mat-label>Participant ID</mat-label>
+  <mat-chip-grid
+    #chipList
+    [formControl]="control">
+    <mat-chip
+      *ngFor="let participantId of control?.value ?? []"
+      (removed)="remove(participantId)">
+      {{ participantId }}
+      <button matChipRemove>
+        <mat-icon>cancel</mat-icon>
+      </button>
+    </mat-chip>
+    <input
+      [matChipInputAddOnBlur]="true"
+      [matChipInputFor]="chipList"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+      (matChipInputTokenEnd)="add($event)" />
+  </mat-chip-grid>
+  <mat-hint>
+    The Participant ID of your Connector can be
+    found on the dashboard of your Connector.
+  </mat-hint>
+</mat-form-field>