diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation')
9 files changed, 1183 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html new file mode 100644 index 0000000000..5181f32711 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.html @@ -0,0 +1,53 @@ +<!-- + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2021 Nordix Foundation + ~ ================================================================================ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<div class="cell field-name"> + + <div [formGroup]="formGroup"> + <input id="propertyAssignmentNameInput" class="value-input" formControlName="name"/> + </div> + <div *ngIf="formName.invalid && (formName.dirty || formName.touched)" + class="input-error"> + <div *ngIf="formName.errors.required"> + {{'OPERATION_INPUT_NAME_REQUIRED' | translate}} + </div> + </div> +</div> + +<div class="cell field-type"> + {{propertyAssignment.type}} +</div> + +<div class="cell field-property"> + <div [formGroup]="formGroup"> + <input id="propertyAssignmentValueInput" class="value-input" + formControlName="value"/> + </div> +</div> + +<div class="cell remove" *ngIf="!isReadOnly"> + <svg-icon + name="trash-o" + mode="info" + size="small" + [attr.data-tests-id]="'propertyAssignment-remove-' + (propertyAssignment.name || 'unnamed')" + (click)="onDelete(propertyAssignment)" + [clickable]="true"> + </svg-icon> +</div> diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less new file mode 100644 index 0000000000..316d49e406 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.less @@ -0,0 +1,73 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import '../../../../../../../../assets/styles/variables.less'; + +.remove { + display: flex; + align-items: center; + justify-content: center; + + svg-icon { + position: relative; + right: -3px; + + &:hover { + cursor: pointer; + } + } +} + + +.cell { + min-height: 50px; + padding: 10px; + display: flex; + align-items: center; + + > * { + flex-basis: 100%; + } + + /deep/ select { + height: 30px; + } + + input { + height: 30px; + padding-left: 10px; + text-indent: 6px; + border: solid 1px @main_color_o; + } + + select { + width: 100%; + } + + &.field-property { + &:last-child { + flex: 1; + } + + .no-properties-error { + color: @func_color_q; + font-style: italic; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts new file mode 100644 index 0000000000..cc1fd52273 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.spec.ts @@ -0,0 +1,125 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {CreateInputRowComponent} from './create-input-row.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {ReactiveFormsModule} from "@angular/forms"; +import {TranslatePipe} from "../../../../../../shared/translator/translate.pipe"; +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; + +describe('CreateInputRowComponent', () => { + let component: CreateInputRowComponent; + let fixture: ComponentFixture<CreateInputRowComponent>; + const nameField = 'name'; + const valueField = 'value'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CreateInputRowComponent, TranslatePipe ], + imports: [ SdcUiComponentsModule, ReactiveFormsModule ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateInputRowComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('form is invalid when empty', () => { + expect(component.formGroup.valid).toBeFalsy(); + }); + + it('name field validity', () => { + expect(component.formGroup.valid).toBe(false); + expect(component.formGroup.contains(nameField)).toBe(true); + const nameFormControl = component.formGroup.get(nameField); + expect(nameFormControl.valid).toBeFalsy(); + let validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue(''); + validationErrors = nameFormControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + + nameFormControl.setValue('a'); + expect(nameFormControl.valid).toBeTruthy(); + }); + + it('value field validity', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.formGroup.contains(valueField)).toBeTruthy(); + const valueFormControl = component.formGroup.get(valueField); + expect(valueFormControl.valid).toBeTruthy(); + }); + + it('test set value when form valid', () => { + expect(component.formGroup.valid).toBeFalsy(); + expect(component.propertyAssignment.name).toBeFalsy(); + expect(component.propertyAssignment.value).toBeFalsy(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('aName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('aValue'); + expect(component.formGroup.valid).toBeTruthy(); + expect(component.propertyAssignment.name).toBe('aName'); + expect(component.propertyAssignment.value).toBe('aValue'); + }); + + it('test propertyAssignment initialization', () => { + const propertyAssignment = new PropertyAssignment(); + propertyAssignment.name = 'aName'; + propertyAssignment.value = 'aValue'; + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + expect(component.formGroup.valid).toBeTruthy(); + const nameFormCtrl = component.formGroup.get(nameField); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + const valueFormCtrl = component.formGroup.get(valueField); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test propertyAssignment form binding', () => { + const propertyAssignment = new PropertyAssignment(); + component.propertyAssignment = propertyAssignment; + component.ngOnInit(); + const nameFormCtrl = component.formGroup.get(nameField); + nameFormCtrl.setValue('anotherName'); + const valueFormCtrl = component.formGroup.get(valueField); + valueFormCtrl.setValue('anotherValue'); + expect(nameFormCtrl.value).toBe(propertyAssignment.name); + expect(valueFormCtrl.value).toBe(propertyAssignment.value); + }); + + it('test input deletion', () => { + const expectedPropertyAssignment = new PropertyAssignment(); + let actualPropertyAssignment = null; + component.onDeleteEvent.subscribe((value) => actualPropertyAssignment = value); + component.onDelete(expectedPropertyAssignment); + expect(actualPropertyAssignment).toBe(expectedPropertyAssignment); + }); + +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts new file mode 100644 index 0000000000..629c5f3e49 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-input-row/create-input-row.component.ts @@ -0,0 +1,72 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; +import {FormControl, FormGroup, Validators} from "@angular/forms"; +import {filter} from "rxjs/operators"; + +@Component({ + selector: 'app-create-input-row', + templateUrl: './create-input-row.component.html', + styleUrls: ['./create-input-row.component.less'] +}) +export class CreateInputRowComponent implements OnInit { + + @Input() propertyAssignment: PropertyAssignment; + @Input() isReadOnly: boolean; + @Output('onDelete') onDeleteEvent: EventEmitter<PropertyAssignment> = new EventEmitter(); + formGroup: FormGroup; + + constructor() { } + + ngOnInit() { + if (!this.propertyAssignment) { + this.propertyAssignment = new PropertyAssignment(); + } + this.formGroup = new FormGroup({ + name: new FormControl(this.propertyAssignment.name, [ + Validators.required + ]), + value: new FormControl(this.propertyAssignment.value) + }); + + this.formGroup.statusChanges + .pipe( + filter(() => this.formGroup.valid)) + .subscribe(() => this.onFormValid()); + } + + onDelete(propertyAssignment: PropertyAssignment) { + this.onDeleteEvent.emit(propertyAssignment); + } + + get formName() { + return this.formGroup.get('name'); + } + + get formValue() { + return this.formGroup.get('value'); + } + + private onFormValid() { + this.propertyAssignment.name = this.formName.value; + this.propertyAssignment.value = this.formValue.value; + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html new file mode 100644 index 0000000000..a53135c6a9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.html @@ -0,0 +1,141 @@ +<!-- + ~ ============LICENSE_START======================================================= + ~ Copyright (C) 2021 Nordix Foundation + ~ ================================================================================ + ~ Licensed under the Apache License, Version 2.0 (the "License"); + ~ you may not use this file except in compliance with the License. + ~ You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + ~ SPDX-License-Identifier: Apache-2.0 + ~ ============LICENSE_END========================================================= + --> + +<div class="operation-creator"> + <loader [display]="isLoading" [size]="'large'" [relative]="true"></loader> + <form [formGroup]="form"> + <div class="w-sdc-form"> + + <div class="side-by-side"> + <div class="form-item"> + <sdc-dropdown + label="{{ 'OPERATION_INTERFACE_TYPE' | translate }}" + [required]="true" + testId="interface-name" + [selectedOption]="selectedInterfaceType" + placeHolder="Select..." + [disabled]="isReadOnly" + (changed)="onSelectInterfaceType($event)" + [options]="interfaceTypeOptions"> + </sdc-dropdown> + <div *ngIf="interfaceTypeFormCtrl.invalid && (interfaceTypeFormCtrl.dirty || interfaceTypeFormCtrl.touched)" + class="input-error"> + <div *ngIf="interfaceTypeFormCtrl.errors.required"> + {{'OPERATION_INTERFACE_REQUIRED_ERROR' | translate}} + </div> + </div> + </div> + + <div class="form-item"> + <sdc-dropdown + #operationDropdown + label="{{ 'OPERATION_NAME' | translate }}" + [required]="true" + testId="operation-name" + [selectedOption]="selectedOperation" + placeHolder="Select..." + [disabled]="isReadOnly" + (changed)="onSelectOperation($event)" + [options]="operationOptions"> + </sdc-dropdown> + <div *ngIf="operationTypeFormCtrl.invalid && (operationTypeFormCtrl.dirty || operationTypeFormCtrl.touched)" + class="input-error"> + <div *ngIf="operationTypeFormCtrl.errors.required"> + {{'OPERATION_OPERATION_REQUIRED_ERROR' | translate}} + </div> + </div> + </div> + </div> + + <div class="i-sdc-form-item sdc-input"> + <label for="implementationInput" class="sdc-label__label required">{{ 'OPERATION_IMPLEMENTATION' | translate }}</label> + <div class="sdc-input-wrapper"> + <input id="implementationInput" formControlName="implementation" required="required" class="sdc-input__input"/> + </div> + <div *ngIf="implementationFormCtrl.invalid && (implementationFormCtrl.dirty || implementationFormCtrl.touched)" + class="input-error"> + <div *ngIf="implementationFormCtrl.errors.required"> + {{'OPERATION_IMPLEMENTATION_REQUIRED_ERROR' | translate}} + </div> + <div *ngIf="implementationFormCtrl.errors.minLength"> + minLength + </div> + </div> + </div> + + <div class="separator-buttons"> + <tabs tabStyle="round-tabs" [hideIndicationOnTabChange]="true"> + <tab tabTitle="Inputs"></tab> + </tabs> + <a + class="add-param-link add-btn" + *ngIf="!isReadOnly" + data-tests-id="addInputParameter" + [ngClass]="{'disabled':isReadOnly}" + (click)="addInput()">{{ 'OPERATION_ADD_INPUT' | translate }}</a> + </div> + + <div class="generic-table"> + <div class="header-row table-row"> + <span class="cell header-cell field-name">{{ 'OPERATION_PARAM_NAME' | translate }}</span> + <span class="cell header-cell field-type">{{ 'OPERATION_PARAM_TYPE' | translate }}</span> + <span class="cell header-cell field-property"> + {{ 'OPERATION_PARAM_VALUE' | translate }} + </span> + <span class="cell header-cell remove" *ngIf="!isReadOnly">●●●</span> + </div> + <div *ngIf="!validateInputs()" + class="input-error"> + <div *ngIf="inputErrorMap.get('duplicatedName')"> + {{ 'OPERATION_INPUT_NAME_UNIQUE_ERROR' | translate }} + </div> + <div *ngIf="inputErrorMap.get('invalidName')"> + {{ 'OPERATION_INPUT_NAME_ERROR' | translate }} + </div> + </div> + + <app-create-input-row + *ngFor="let input of inputs$ | async" + class="data-row" + [formGroup]="" + [propertyAssignment]="input" + (onDelete)="onDeleteInput($event)" + [isReadOnly]="isReadOnly"> + </app-create-input-row> + </div> + <div class="create-interface-operation-footer"> + <sdc-button class="create-operation-btn" + testId="addBtn" + [type]="'primary'" + [size]="'small'" + [text]="'OPERATION_ADD' | translate" + [disabled]="form.invalid" + (click)="createOperation()"> + </sdc-button> + <sdc-button class="cancel-operation-btn" + testId="cancelBtn" + [type]="'secondary'" + [size]="'small'" + [text]="'OPERATION_CANCEL' | translate" + (click)="onClickCancel()"> + </sdc-button> + </div> + </div> + </form> +</div>
\ No newline at end of file diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less new file mode 100644 index 0000000000..4c7f8aba48 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.less @@ -0,0 +1,211 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +@import '../../../../../../../assets/styles/variables.less'; +@import '../../../../../../../assets/styles/override.less'; + +.operation-creator { + font-family: @font-opensans-regular; + user-select: none; + padding-top: 12px; + padding-bottom: 20px; + + .i-sdc-form-label { + font-size: 12px; + } + + .w-sdc-form .i-sdc-form-item { + margin-bottom: 15px; + } + + textarea { + min-height: 74px; + margin-bottom: 18px; + } + + /deep/ .sdc-dropdown__component-container { + .sdc-dropdown__header { + height: 38px; + line-height: 35px; + + svg-icon { + margin: 13px 6px; + } + } + } + + /deep/ .sdc-input { + margin-bottom: 0; + + .sdc-input__input { + height: 38px; + } + } + + .side-by-side { + display: flex; + + .form-item { + flex: 1; + + &:first-child { + margin-right: 14px; + flex-basis: 37%; + flex-grow: 0; + flex-shrink: 0; + } + + &:nth-child(3) { + margin-left: 14px; + flex: 0.4; + } + + .i-sdc-form-file-upload { + height: 37px; + margin-bottom: 0; + + .i-sdc-form-file-name { + padding: 8px 10px; + } + + .i-sdc-form-file-upload-x-btn { + top: 13px; + } + + .file-upload-browse-btn { + height: 100%; + padding: 7px 6px; + z-index: 1; + } + } + + } + } + + .archive-warning { + font-family: @font-opensans-bold; + color: @main_color_i; + } + + .no-workflow-warning { + font-family: @font-opensans-bold; + color: @sdcui_color_red; + float: right; + } + + .input-param-title { + font-size: 16px; + text-transform: uppercase; + } + + .separator-buttons { + display: flex; + justify-content: space-between; + margin-top: 10px; + + .add-param-link { + &:not(.disabled):hover { + cursor: pointer; + } + } + + .tab { + width: 84px; + text-align: center; + } + } + + .generic-table { + max-height: 244px; + min-height: 91px; + background: @main_color_p; + + .header-row .header-cell { + .info-icon { + float: right; + position: relative; + top: 2px; + } + /deep/ .tooltip-inner { + padding: 2px; + max-width: 270px; + font-size: 11px; + } + &.remove { + padding: 10px; + font-size: 10px; + } + } + + .data-row { + &.empty-msg { + .bold-message { + font-family: @font-opensans-bold; + } + + :first-child { + &:not(:only-child) { + margin: 6px 0; + } + } + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding: 14px; + } + } + + /deep/ .cell { + &.field-name, &.field-type { + flex: 1; + } + + &.field-property { + &, &:last-child { + flex: 1; + } + } + + &.field-mandatory { + flex: 0.5; + text-align: center; + } + + &.remove { + min-width: 40px; + max-width: 40px; + } + } + + } + + .create-interface-operation-footer { + border-top: solid 1px #eaeaea; + padding: 10px; + margin: 10px; + display: flex; + justify-content: flex-end; + align-items: center; + sdc-button { + margin: 0 5px; + } + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts new file mode 100644 index 0000000000..8b830e0e62 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.spec.ts @@ -0,0 +1,234 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; + +import {CreateInterfaceOperationComponent} from './create-interface-operation.component'; +import {SdcUiComponentsModule} from "onap-ui-angular/dist"; +import {CreateInputRowComponent} from "./create-input-row/create-input-row.component"; +import {FormControl, ReactiveFormsModule} from "@angular/forms"; +import {TabModule} from "../../../../../components/ui/tabs/tabs.module"; +import {UiElementsModule} from "../../../../../components/ui/ui-elements.module"; +import {TranslateService} from "../../../../../shared/translator/translate.service"; +import {TranslatePipe} from "../../../../../shared/translator/translate.pipe"; +import {Operation} from "./model/operation"; +import {PropertyAssignment} from "../../../../../../models/properties-inputs/property-assignment"; + +describe('CreateInterfaceOperationComponent', () => { + let component: CreateInterfaceOperationComponent; + let fixture: ComponentFixture<CreateInterfaceOperationComponent>; + const interfaceTypeFormName = 'interfaceType'; + const operationTypeFormName = 'operationType'; + const implementationFormName = 'implementation'; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [CreateInterfaceOperationComponent, CreateInputRowComponent, TranslatePipe], + imports: [SdcUiComponentsModule, ReactiveFormsModule, TabModule, + UiElementsModule], + providers: [ + {provide: TranslateService, useValue: {}} + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CreateInterfaceOperationComponent); + component = fixture.componentInstance; + component.interfaceTypeMap = new Map<string, Array<string>>(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('form is invalid when empty', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + }); + + it('interface type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(interfaceTypeFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.interfaceTypeFormCtrl, 'anInterfaceType'); + }); + + it('operation type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(operationTypeFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.operationTypeFormCtrl, 'anOperationType'); + }); + + it('implementation type field validity', () => { + component.ngOnInit(); + expect(component.form.valid).toBeFalsy(); + expect(component.form.contains(implementationFormName)).toBeTruthy(); + assertRequiredFormCtrl(component.implementationFormCtrl, 'just/an/implementation.sh'); + }); + + it('test loadInterfaceOptions on init', () => { + const interfaceTypeMap = new Map<string, Array<string>>(); + interfaceTypeMap.set('interface3', new Array<string>()); + interfaceTypeMap.set('interface4', new Array<string>()); + interfaceTypeMap.set('interface2', new Array<string>()); + interfaceTypeMap.set('interface1', new Array<string>()); + component.interfaceTypeMap = interfaceTypeMap; + component.ngOnInit(); + expect(component.interfaceTypeOptions.length).toBe(4); + expect(component.interfaceTypeOptions[0].label).toBe('interface1'); + expect(component.interfaceTypeOptions[0].value).toBe('interface1'); + expect(component.interfaceTypeOptions[1].label).toBe('interface2'); + expect(component.interfaceTypeOptions[1].value).toBe('interface2'); + expect(component.interfaceTypeOptions[2].label).toBe('interface3'); + expect(component.interfaceTypeOptions[2].value).toBe('interface3'); + expect(component.interfaceTypeOptions[3].label).toBe('interface4'); + expect(component.interfaceTypeOptions[3].value).toBe('interface4'); + }); + + it('test loadOperationOptions on init', () => { + const interfaceTypeMap = new Map<string, Array<string>>(); + const interface1Operations = new Array<string>('interface1Operation3', + 'interface1Operation1', 'interface1Operation2', 'interface1Operation4'); + interfaceTypeMap.set('interface1', interface1Operations); + component.interfaceTypeMap = interfaceTypeMap; + component.selectedInterfaceType = { + value: 'interface1', + type: null, + label: 'interface1', + } + component.ngOnInit(); + expect(component.operationOptions.length).toBe(4); + expect(component.operationOptions[0].label).toBe('interface1Operation1'); + expect(component.operationOptions[0].value).toBe('interface1Operation1'); + expect(component.operationOptions[1].label).toBe('interface1Operation2'); + expect(component.operationOptions[1].value).toBe('interface1Operation2'); + expect(component.operationOptions[2].label).toBe('interface1Operation3'); + expect(component.operationOptions[2].value).toBe('interface1Operation3'); + expect(component.operationOptions[3].label).toBe('interface1Operation4'); + expect(component.operationOptions[3].value).toBe('interface1Operation4'); + }); + + it('test onSelectInterfaceType', () => { + const interfaceTypeMap = new Map<string, Array<string>>(); + interfaceTypeMap.set('interface1', new Array<string>('', '', '', '')); + interfaceTypeMap.set('interface2', new Array<string>()); + component.interfaceTypeMap = interfaceTypeMap; + component.ngOnInit(); + const selectedInterfaceType = { + value: 'interface1', + type: null, + label: 'interface1', + } + component.onSelectInterfaceType(selectedInterfaceType); + expect(component.selectedInterfaceType).toBe(selectedInterfaceType); + expect(component.interfaceTypeFormCtrl.value).toBe(selectedInterfaceType.value); + expect(component.operationOptions.length).toBe(4); + }); + + it('test onSelectOperation', () => { + component.ngOnInit(); + + const selectedOperationType = { + value: 'operation1', + type: null, + label: 'operation1', + } + component.onSelectOperation(selectedOperationType); + expect(component.selectedOperation).toBe(selectedOperationType); + expect(component.operationTypeFormCtrl.value).toBe(selectedOperationType.value); + }); + + it('test onChangeImplementation', () => { + component.ngOnInit(); + let implementation = null; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(implementation); + implementation = ''; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(null); + implementation = ' '; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(''); + implementation = 'implementation'; + component.onChangeImplementation(implementation); + expect(component.implementation).toBe(implementation); + }); + + it('test createOperation with valid operation', () => { + component.ngOnInit(); + const interfaceType = 'interfaceType'; + const operationType = 'operationType'; + const implementation = 'implementation'; + component.interfaceTypeFormCtrl.setValue(interfaceType); + component.operationTypeFormCtrl.setValue(operationType); + component.implementationFormCtrl.setValue(implementation); + const inputs = new Array<PropertyAssignment>(); + const input1 = new PropertyAssignment('string'); + input1.name = 'input1'; + input1.value = 'input1Value'; + inputs.push(input1) + component.inputs = inputs; + let operation: Operation = null; + component.addOperation.subscribe((operation1) => { + operation = operation1; + }); + component.createOperation(); + expect(operation).toBeTruthy(); + expect(operation.interfaceType).toBe(interfaceType); + expect(operation.operationType).toBe(operationType); + expect(operation.implementation).toBe(implementation); + expect(operation.inputs).toBe(inputs); + }); + + it('test createOperation with invalid operation', () => { + component.ngOnInit(); + let operation: Operation = null; + component.addOperation.subscribe((operation1) => { + operation = operation1; + }); + component.createOperation(); + expect(operation).toBe(null); + }); + + it('test onDeleteInput with not found input', () => { + component.ngOnInit(); + const input1 = new PropertyAssignment('string'); + const input2 = new PropertyAssignment('string'); + input2.name = 'input2'; + const input3 = new PropertyAssignment('string'); + input3.name = 'input3'; + component.inputs = new Array<PropertyAssignment>(input1, input2, input3); + component.onDeleteInput(input2); + expect(component.inputs.length).toBe(2); + expect(component.inputs.find(input => input.name === input2.name)).toBeFalsy(); + }); + + function assertRequiredFormCtrl(formControl: FormControl, valueToSet: any): void { + expect(formControl.valid).toBeFalsy(); + let validationErrors = formControl.errors || {}; + expect(validationErrors['required']).toBeTruthy(); + formControl.setValue(''); + expect(validationErrors['required']).toBeTruthy(); + formControl.setValue(valueToSet); + expect(formControl.valid).toBeTruthy(); + } +}); diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts new file mode 100644 index 0000000000..9990ac8484 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/create-interface-operation.component.ts @@ -0,0 +1,235 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core'; +import {IDropDownOption} from "onap-ui-angular/dist/form-elements/dropdown/dropdown-models"; +import {DropDownComponent} from "onap-ui-angular/dist/components"; +import {PropertyAssignment} from "../../../../../../models/properties-inputs/property-assignment"; +import {Observable} from "rxjs"; +import {Operation} from "./model/operation"; +import {FormControl, FormGroup, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-create-interface-operation', + templateUrl: './create-interface-operation.component.html', + styleUrls: ['./create-interface-operation.component.less'] +}) +export class CreateInterfaceOperationComponent implements OnInit { + @Input('interfaceTypeMap') interfaceTypeMap: Map<string, Array<string>>; + @Input('operation') private operation: Operation; + @Output('addOperation') addOperation: EventEmitter<Operation> = new EventEmitter<Operation>(); + @ViewChild('operationDropdown') operationDropdown: DropDownComponent; + + form: FormGroup; + isLoading: boolean; + isReadOnly: boolean; + currentInOutTab: string; + interfaceTypeOptions: Array<TypedDropDownOption>; + operationOptions: Array<TypedDropDownOption>; + selectedInterfaceType: TypedDropDownOption; + selectedOperation: TypedDropDownOption; + implementation: string; + inputs$: Observable<Array<PropertyAssignment>>; + inputs: Array<PropertyAssignment>; + inputErrorMap: Map<string, boolean>; + validationMessageList: Array<string>; + interfaceTypeFormCtrl: FormControl; + operationTypeFormCtrl: FormControl; + implementationFormCtrl: FormControl; + + TYPE_INPUT = 'Inputs'; + TYPE_OUTPUT = 'Outputs'; + + + constructor() { + this.currentInOutTab = this.TYPE_INPUT; + this.inputErrorMap = new Map<string, boolean>(); + } + + ngOnInit() { + if (!this.operation) { + this.operation = new Operation(); + } + + this.interfaceTypeFormCtrl = new FormControl(this.operation.interfaceType, [ + Validators.required + ]); + this.operationTypeFormCtrl = new FormControl(this.operation.operationType, [ + Validators.required + ]); + this.implementationFormCtrl = new FormControl(this.operation.implementation, [ + Validators.required + ]); + this.form = new FormGroup({ + interfaceType: this.interfaceTypeFormCtrl, + operationType: this.operationTypeFormCtrl, + implementation: this.implementationFormCtrl + }); + + this.isLoading = true; + this.isReadOnly = false; + this.loadInterfaceOptions(); + this.loadOperationOptions(); + this.loadOperationInputs(); + this.isLoading = false; + } + + private loadInterfaceOptions() { + this.interfaceTypeOptions = new Array<TypedDropDownOption>(); + const interfaceTypeList = Array.from(this.interfaceTypeMap.keys()); + interfaceTypeList.sort(); + interfaceTypeList.forEach(interfaceType => { + this.interfaceTypeOptions.push(this.createInterfaceDropdownOption(interfaceType)); + }); + } + + private loadOperationOptions() { + this.operationOptions = new Array<TypedDropDownOption>(); + if (!this.selectedInterfaceType) { + return; + } + + const operationArray: Array<string> = this.interfaceTypeMap.get(this.selectedInterfaceType.value); + operationArray.sort(); + operationArray.forEach(operationName => + this.operationOptions.push(new TypedDropDownOption(operationName, operationName)) + ); + this.operationDropdown.allOptions = <IDropDownOption[]> this.operationOptions; + } + + private loadOperationInputs() { + this.inputs = new Array<PropertyAssignment>(); + this.inputs$ = Observable.of(this.inputs); + } + + descriptionValue(): string { + return this.operation.description; + } + + addInput() { + this.inputs.push(new PropertyAssignment('string')); + } + + onSelectInterfaceType(selectedOption: IDropDownOption) { + this.selectedInterfaceType = <TypedDropDownOption> selectedOption; + this.operation.interfaceType = selectedOption.value; + this.interfaceTypeFormCtrl.setValue(this.operation.interfaceType); + this.loadOperationOptions(); + } + + private createInterfaceDropdownOption(type: string) { + let label = type; + const lastDot = label.lastIndexOf('.'); + if (lastDot > -1) { + label = label.substr(lastDot + 1); + } + return new TypedDropDownOption(type, label); + } + + onSelectOperation(selectedOption: IDropDownOption) { + this.selectedOperation = <TypedDropDownOption> selectedOption; + this.operation.operationType = selectedOption.value; + this.operationTypeFormCtrl.setValue(this.operation.operationType); + } + + onChangeImplementation(implementation: string) { + this.implementation = implementation ? implementation.trim() : null; + this.operation.implementation = this.implementation; + } + + onDeleteInput(input: PropertyAssignment): void { + const index = this.inputs.indexOf(input); + this.inputs.splice(index, 1); + } + + createOperation() { + this.form.updateValueAndValidity(); + if (this.isValid()) { + this.operation.interfaceType = this.interfaceTypeFormCtrl.value; + this.operation.operationType = this.operationTypeFormCtrl.value; + this.operation.implementation = this.implementationFormCtrl.value; + if (this.inputs) { + this.operation.inputs = this.inputs; + } + this.addOperation.emit(this.operation); + } + } + + onClickCancel() { + this.addOperation.emit(null); + } + + private isValid(): boolean { + if (this.form.invalid) { + return false; + } + + return this.validateInputs(); + } + + validateInputs(): boolean { + this.inputErrorMap = new Map<string, boolean>(); + if (!this.inputs) { + return true; + } + + const inputNameSet = new Set<string>(); + this.inputs.forEach(value => { + if (value.name) { + value.name = value.name.trim(); + if (!value.name) { + this.inputErrorMap.set('invalidName', true); + } + } else { + this.inputErrorMap.set('invalidName', true); + } + if (value.value) { + value.value = value.value.trim(); + } + //for later check of duplicate input name + inputNameSet.add(value.name); + }); + + if (inputNameSet.size != this.inputs.length) { + this.inputErrorMap.set('duplicatedName', true); + } + + return this.inputErrorMap.size == 0; + } + +} + +class DropDownOption implements IDropDownOption { + value: string; + label: string; + + constructor(value: string, label?: string) { + this.value = value; + this.label = label || value; + } +} + +class TypedDropDownOption extends DropDownOption { + type: string; + + constructor(value: string, label?: string, type?: string) { + super(value, label); + this.type = type; + } +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts new file mode 100644 index 0000000000..d44481dbf9 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/create-interface-operation/model/operation.ts @@ -0,0 +1,39 @@ +/* + * ============LICENSE_START======================================================= + * Copyright (C) 2021 Nordix Foundation + * ================================================================================ + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + * SPDX-License-Identifier: Apache-2.0 + * ============LICENSE_END========================================================= + */ + +import {PropertyAssignment} from "../../../../../../../models/properties-inputs/property-assignment"; + +export class Operation { + interfaceType: string; + operationType: string; + implementation: string; + description: string; + inputs: Array<PropertyAssignment>; + + + constructor(operation?:Operation) { + if (operation) { + this.interfaceType = operation.interfaceType; + this.operationType = operation.operationType; + this.implementation = operation.implementation; + this.description = operation.description; + this.inputs = operation.inputs; + } + } +} |