Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

10 files changed, 68 insertions, 54 deletions

diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
index 6292d85422..941b10f943 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.module.ts
@@ -1,9 +1,9 @@
 import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {InterfaceOperationComponent} from "./interface-operation.page.component";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
 import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 import {TranslateModule} from "app/ng2/shared/translator/translate.module";
+import { SdcUiComponentsModule } from 'onap-ui-angular';
 
 @NgModule({
     declarations: [
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
index e32a0b60f5..cd06e18267 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.html
@@ -1,5 +1,5 @@
 <!--
-    ~ Copyright © 2016-2018 European Support Limited
+    ~ Copyright � 2016-2018 European Support Limited
     ~
     ~ Licensed under the Apache License, Version 2.0 (the "License");
     ~ you may not use this file except in compliance with the License.
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
index c2a9582ed4..9d41c375f5 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/interface-operation.page.component.ts
@@ -1,14 +1,14 @@
 import * as _ from "lodash";
-import {Component, Input, Output, ComponentRef, Inject} from '@angular/core';
-import {Component as IComponent} from 'app/models/components/component';
+import { Component, Input, Output, ComponentRef, Inject } from '@angular/core';
+import {Component as IComponent } from 'app/models/components/component';
 
-import {SdcConfigToken, ISdcConfig} from "app/ng2/config/sdc-config.config";
-import {TranslateService} from "app/ng2/shared/translator/translate.service";
+import { SdcConfigToken, ISdcConfig } from "app/ng2/config/sdc-config.config";
+import {TranslateService } from "app/ng2/shared/translator/translate.service";
 
-import {Observable} from "rxjs/Observable";
+import {Observable } from "rxjs/Observable";
 
-import {ModalComponent} from 'app/ng2/components/ui/modal/modal.component';
-import {ModalService} from 'app/ng2/services/modal.service';
+import {ModalComponent } from 'app/ng2/components/ui/modal/modal.component';
+import {ModalService } from 'app/ng2/services/modal.service';
 import {
     InputBEModel,
     OperationModel,
@@ -18,15 +18,19 @@ import {
     Capability
 } from 'app/models';
 
-import {IModalConfig, IModalButtonComponent} from "sdc-ui/lib/angular/modals/models/modal-config";
-import {SdcUiComponents} from "sdc-ui/lib/angular";
-import {ModalButtonComponent} from "sdc-ui/lib/angular/components";
+// import {SdcUiComponents } from 'sdc-ui/lib/angular';
+// import {ModalButtonComponent } from 'sdc-ui/lib/angular/components';
+// import { IModalButtonComponent, IModalConfig } from 'sdc-ui/lib/angular/modals/models/modal-config';
 
-import {ComponentServiceNg2} from 'app/ng2/services/component-services/component.service';
-import {WorkflowServiceNg2} from 'app/ng2/services/workflow.service';
-import {PluginsService} from "app/ng2/services/plugins.service";
+import {ComponentServiceNg2 } from 'app/ng2/services/component-services/component.service';
+import {PluginsService } from 'app/ng2/services/plugins.service';
+import {WorkflowServiceNg2 } from 'app/ng2/services/workflow.service';
 
-import {OperationCreatorComponent, OperationCreatorInput} from 'app/ng2/pages/interface-operation/operation-creator/operation-creator.component';
+import { OperationCreatorComponent, OperationCreatorInput } from 'app/ng2/pages/interface-operation/operation-creator/operation-creator.component';
+import { IModalButtonComponent } from 'onap-ui-angular';
+import { ModalButtonComponent } from 'onap-ui-angular';
+import { IModalConfig } from 'onap-ui-angular';
+import { SdcUiServices } from 'onap-ui-angular';
 
 export class UIOperationModel extends OperationModel {
     isCollapsed: boolean = true;
@@ -61,6 +65,7 @@ export class UIOperationModel extends OperationModel {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 class ModalTranslation {
     CREATE_TITLE: string;
     EDIT_TITLE: string;
@@ -74,7 +79,7 @@ class ModalTranslation {
     constructor(private TranslateService: TranslateService) {
         this.TranslateService.languageChangedObservable.subscribe(lang => {
             this.CREATE_TITLE = this.TranslateService.translate("INTERFACE_CREATE_TITLE");
-            this.EDIT_TITLE = this.TranslateService.translate("INTERFACE_EDIT_TITLE");
+            this.EDIT_TITLE = this.TranslateService.translate('INTERFACE_EDIT_TITLE');
             this.DELETE_TITLE = this.TranslateService.translate("INTERFACE_DELETE_TITLE");
             this.CANCEL_BUTTON = this.TranslateService.translate("INTERFACE_CANCEL_BUTTON");
             this.SAVE_BUTTON = this.TranslateService.translate("INTERFACE_SAVE_BUTTON");
@@ -85,6 +90,7 @@ class ModalTranslation {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 export class UIInterfaceModel extends InterfaceModel {
     isCollapsed: boolean = false;
 
@@ -92,7 +98,7 @@ export class UIInterfaceModel extends InterfaceModel {
         super(interf);
         this.operations = _.map(
             this.operations,
-            operation => new UIOperationModel(operation)
+            (operation) => new UIOperationModel(operation)
         );
     }
 
@@ -101,6 +107,7 @@ export class UIInterfaceModel extends InterfaceModel {
     }
 }
 
+// tslint:disable-next-line:max-classes-per-file
 @Component({
     selector: 'interface-operation',
     templateUrl: './interface-operation.page.component.html',
@@ -110,16 +117,16 @@ export class UIInterfaceModel extends InterfaceModel {
 
 export class InterfaceOperationComponent {
 
-    interfaces: Array<UIInterfaceModel>;
+    interfaces: UIInterfaceModel[];
     modalInstance: ComponentRef<ModalComponent>;
     openOperation: OperationModel;
     enableWorkflowAssociation: boolean;
-    inputs: Array<InputBEModel>;
+    inputs: InputBEModel[];
     isLoading: boolean;
-    interfaceTypes:{ [interfaceType: string]: Array<string> };
+    interfaceTypes: { [interfaceType: string]: string[] };
     modalTranslation: ModalTranslation;
     workflowIsOnline: boolean;
-    workflows: Array<any>;
+    workflows: any[];
     capabilities: CapabilitiesGroup;
 
     @Input() component: IComponent;
@@ -135,7 +142,8 @@ export class InterfaceOperationComponent {
         private ComponentServiceNg2: ComponentServiceNg2,
         private WorkflowServiceNg2: WorkflowServiceNg2,
         private ModalServiceNg2: ModalService,
-        private ModalServiceSdcUI: SdcUiComponents.ModalService
+        private ModalServiceSdcUI: SdcUiServices.ModalService
+        
     ) {
         this.enableWorkflowAssociation = sdcConfig.enableWorkflowAssociation;
         this.modalTranslation = new ModalTranslation(TranslateService);
@@ -146,11 +154,11 @@ export class InterfaceOperationComponent {
         this.workflowIsOnline = !_.isUndefined(this.PluginsService.getPluginByStateUrl('workflowDesigner'));
 
         Observable.forkJoin(
-            this.ComponentServiceNg2.getInterfaces(this.component),
+            this.ComponentServiceNg2.getInterfaceOperations(this.component),
             this.ComponentServiceNg2.getComponentInputs(this.component),
             this.ComponentServiceNg2.getInterfaceTypes(this.component),
             this.ComponentServiceNg2.getCapabilitiesAndRequirements(this.component.componentType, this.component.uniqueId)
-        ).subscribe((response: Array<any>) => {
+        ).subscribe((response: any[]) => {
             const callback = (workflows) => {
                 this.isLoading = false;
                 this.initInterfaces(response[0].interfaces);
@@ -174,36 +182,36 @@ export class InterfaceOperationComponent {
         });
     }
 
-    initInterfaces(interfaces: Array<InterfaceModel>): void {
-        this.interfaces = _.map(interfaces, interf => new UIInterfaceModel(interf));
+    initInterfaces(interfaces: InterfaceModel[]): void {
+        this.interfaces = _.map(interfaces, (interf) => new UIInterfaceModel(interf));
     }
 
     sortInterfaces(): void {
-        this.interfaces = _.filter(this.interfaces, interf => interf.operations && interf.operations.length > 0); // remove empty interfaces
+        this.interfaces = _.filter(this.interfaces, (interf) => interf.operations && interf.operations.length > 0); // remove empty interfaces
         this.interfaces.sort((a, b) => a.type.localeCompare(b.type)); // sort interfaces alphabetically
-        _.forEach(this.interfaces, interf => {
+        _.forEach(this.interfaces, (interf) => {
             interf.operations.sort((a, b) => a.name.localeCompare(b.name)); // sort operations alphabetically
         });
     }
 
     collapseAll(value: boolean = true): void {
-        _.forEach(this.interfaces, interf => {
+        _.forEach(this.interfaces, (interf) => {
             interf.isCollapsed = value;
         });
     }
 
     isAllCollapsed(): boolean {
-        return _.every(this.interfaces, interf => interf.isCollapsed);
+        return _.every(this.interfaces, (interf) => interf.isCollapsed);
     }
 
     isAllExpanded(): boolean {
-        return _.every(this.interfaces, interf => !interf.isCollapsed);
+        return _.every(this.interfaces, (interf) => !interf.isCollapsed);
     }
 
     isListEmpty(): boolean {
         return _.filter(
             this.interfaces,
-            interf => interf.operations && interf.operations.length > 0
+            (interf) => interf.operations && interf.operations.length > 0
         ).length === 0;
     }
 
@@ -291,11 +299,6 @@ export class InterfaceOperationComponent {
 
     }
 
-    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
-        let saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
-        saveButton.disabled = !shouldEnable;
-    }
-
     onRemoveOperation = (event: Event, operation: OperationModel): void => {
         event.stopPropagation();
 
@@ -303,11 +306,11 @@ export class InterfaceOperationComponent {
             this.ComponentServiceNg2
                 .deleteInterfaceOperation(this.component, operation)
                 .subscribe(() => {
-                    const curInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
-                    const index = _.findIndex(curInterf.operations, el => el.uniqueId === operation.uniqueId);
+                    const curInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType);
+                    const index = _.findIndex(curInterf.operations, (el) => el.uniqueId === operation.uniqueId);
                     curInterf.operations.splice(index, 1);
                     if (!curInterf.operations.length) {
-                        const interfIndex = _.findIndex(this.interfaces, interf => interf.type === operation.interfaceType);
+                        const interfIndex = _.findIndex(this.interfaces, (interf) => interf.type === operation.interfaceType);
                         this.interfaces.splice(interfIndex, 1);
                     }
                 });
@@ -322,13 +325,18 @@ export class InterfaceOperationComponent {
         );
     }
 
+    private enableOrDisableSaveButton = (shouldEnable: boolean): void => {
+        const saveButton: ModalButtonComponent = this.ModalServiceSdcUI.getCurrentInstance().getButtonById('saveButton');
+        saveButton.disabled = !shouldEnable;
+    }
+
     private createOperation = (operation: OperationModel): void => {
         this.ComponentServiceNg2.createInterfaceOperation(this.component, operation).subscribe((response: OperationModel) => {
             this.openOperation = null;
 
             let curInterf = _.find(
                 this.interfaces,
-                interf => interf.type === operation.interfaceType
+                (interf) => interf.type === operation.interfaceType
             );
 
             if (!curInterf) {
@@ -358,18 +366,19 @@ export class InterfaceOperationComponent {
         this.ComponentServiceNg2.updateInterfaceOperation(this.component, operation).subscribe((newOperation: OperationModel) => {
             this.openOperation = null;
 
-            let oldOpIndex, oldInterf;
-            _.forEach(this.interfaces, interf => {
-                _.forEach(interf.operations, op => {
+            let oldOpIndex;
+            let oldInterf;
+            _.forEach(this.interfaces, (interf) => {
+                _.forEach(interf.operations, (op) => {
                     if (op.uniqueId === newOperation.uniqueId) {
                         oldInterf = interf;
-                        oldOpIndex = _.findIndex(interf.operations, el => el.uniqueId === op.uniqueId);
+                        oldOpIndex = _.findIndex(interf.operations, (el) => el.uniqueId === op.uniqueId);
                     }
                 })
             });
             oldInterf.operations.splice(oldOpIndex, 1);
 
-            const newInterf = _.find(this.interfaces, interf => interf.type === operation.interfaceType);
+            const newInterf = _.find(this.interfaces, (interf) => interf.type === operation.interfaceType);
             const newOpModel = new UIOperationModel(newOperation);
             newInterf.operations.push(newOpModel);
             this.sortInterfaces();
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
index ec056ad6f2..df2a505fe8 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.html
@@ -180,6 +180,9 @@
                         <span class="bold-message">{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_1' | translate }}</span>
                         <span>{{ 'EMPTY_PARAM_TABLE_NO_SELECTED_WORKFLOW_2' | translate }}</span>
                     </div>
+                    <div *ngIf="!workflows.length">
+                        Only <span class="bold-message">certified</span> workflow versions can be assigned to an operation
+                    </div>
                 </div>
             </div>
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
index f2bd0f82af..2721d300c4 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.less
@@ -11,7 +11,7 @@
         font-size: 12px;
     }
 
-    .w-sdc-form .form-item {
+    .w-sdc-form .i-sdc-form-item {
         margin-bottom: 15px;
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
index e12905654b..12fba24e86 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.component.ts
@@ -15,9 +15,9 @@ import {
     Capability
 } from 'app/models';
 
-import {IDropDownOption} from "sdc-ui/lib/angular/form-elements/dropdown/dropdown-models";
 import {Tabs, Tab} from "app/ng2/components/ui/tabs/tabs.component";
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
+import { IDropDownOption } from 'onap-ui-angular';
 
 export class DropDownOption implements IDropDownOption {
     value: string;
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
index 0b6f8336c3..b91f3aa4e3 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/operation-creator.module.ts
@@ -3,10 +3,10 @@ import {CommonModule} from "@angular/common";
 
 import {FormsModule} from "@angular/forms";
 import {FormElementsModule} from "app/ng2/components/ui/form-components/form-elements.module";
-import {SdcUiComponentsModule} from "sdc-ui/lib/angular/index";
-import {UiElementsModule} from "app/ng2/components/ui/ui-elements.module";
 import {TranslateModule} from "app/ng2/shared/translator/translate.module";
 
+import { SdcUiComponentsModule } from 'onap-ui-angular';
+import { UiElementsModule } from '../../../components/ui/ui-elements.module';
 import {OperationCreatorComponent} from "./operation-creator.component";
 import {ParamRowComponent} from './param-row/param-row.component';
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
index 4a4782eaee..b8173eaf15 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright © 2016-2018 European Support Limited
+  ~ Copyright © 2016-2018 European Support Limited
   ~
   ~ Licensed under the Apache License, Version 2.0 (the "License");
   ~ you may not use this file except in compliance with the License.
@@ -13,7 +13,7 @@
   ~ See the License for the specific language governing permissions and
   ~ limitations under the License.
   -->
-
+ 
 <div class="cell field-name">
     <ui-element-input
         *ngIf="!isAssociateWorkflow"
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
index f6cda17777..5447fe532b 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.less
@@ -32,6 +32,7 @@
 
     input {
         height: 30px;
+        border: none;
         padding-left: 10px;
     }
 
diff --git a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
index d32edc78af..de6e703404 100644
--- a/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
+++ b/catalog-ui/src/app/ng2/pages/interface-operation/operation-creator/param-row/param-row.component.ts
@@ -1,4 +1,5 @@
 import {Component, Input} from '@angular/core';
+import {PROPERTY_DATA} from "app/utils";
 import {DataTypeService} from "app/ng2/services/data-type.service";
 import {OperationModel, OperationParameter, InputBEModel, DataTypeModel, Capability} from 'app/models';
 import {DropdownValue} from "app/ng2/components/ui/form-components/dropdown/ui-element-dropdown.component";
@@ -36,7 +37,7 @@ export class ParamRowComponent {
     filteredInputProps: Array<DropdownValue> = [];
     filteredCapabilitiesProps: Array<{capabilityName: string, properties: Array<DropdownValueType>}> = [];
 
-    constructor(private dataTypeService: DataTypeService) {}
+    constructor(private dataTypeService:DataTypeService) {}
 
     ngOnInit() {
         if (this.isInputParam) {