Make Service base type optional

Issue-ID: SDC-3759
Change-Id: I8adf112966ee9303fc965a74cec7203274acd735
Signed-off-by: andre.schmid <andre.schmid@est.tech>

9 files changed, 128 insertions, 60 deletions

diff --git a/catalog-ui/src/app/models/base-types.ts b/catalog-ui/src/app/models/base-types.ts
index ac5f8428f3..526355e0f8 100644
--- a/catalog-ui/src/app/models/base-types.ts
+++ b/catalog-ui/src/app/models/base-types.ts
@@ -20,9 +20,10 @@
 
 interface ListBaseTypesResponse {
   baseTypes: BaseTypeResponse[];
+  required: boolean;
 }
 
 interface BaseTypeResponse {
-	toscaResourceName:string;
-    versions:string[];
+  toscaResourceName: string;
+  versions: string[];
 }
diff --git a/catalog-ui/src/app/models/components/service.ts b/catalog-ui/src/app/models/components/service.ts
index d11a06abdf..1c7c6b60b4 100644
--- a/catalog-ui/src/app/models/components/service.ts
+++ b/catalog-ui/src/app/models/components/service.ts
@@ -220,6 +220,10 @@ export class Service extends Component {
         this.iconSprite = "sprite-services-icons";
     }
 
+    public isSubstituteCandidate(): boolean {
+        return !!this.derivedFromGenericType;
+    }
+
     public toJSON = ():any => {
         let temp = angular.copy(this);
         temp.componentService = undefined;
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
index d5c0b6093b..2f27f468b6 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.spec.ts
@@ -169,28 +169,49 @@ describe('composition-panel component', () => {
         expect(fixture).toMatchSnapshot();
     });
 
-    it('When Topology Template is Service and no instance is selected Expect (info, deployment, inputs, info and api)', () => {
-
+    it('When Topology Template is Service and no instance is selected Expect tabs info, deployment, inputs, info, api, substitution filter', () => {
         const selectedComponent: Service = new Service(null, null);
         selectedComponent.isResource = jest.fn(() => false);
-        selectedComponent.isService = jest.fn(() => true );
+        selectedComponent.isService = jest.fn(() => true);
+        selectedComponent.isSubstituteCandidate = jest.fn(() => true);
+        fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
+
+        fixture.componentInstance.topologyTemplate = selectedComponent;
+
+        // Call ngOnInit
+        fixture.componentInstance.ngOnInit();
+
+        // Expect that
+        expect(fixture.componentInstance.tabs.length).toBe(6);
+        expect(fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect(fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect(fixture.componentInstance.tabs[2]).toEqual(tabs.inputs);
+        expect(fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect(fixture.componentInstance.tabs[4]).toEqual(tabs.apiArtifacts);
+        expect(fixture.componentInstance.tabs[5]).toEqual(tabs.substitutionFilter);
 
+    });
+
+    it('When Topology Template is Service without base type, and no instance is selected. Expect tabs info, deployment, inputs, info and api', () => {
+
+        const selectedComponent: Service = new Service(null, null);
+        selectedComponent.isResource = jest.fn(() => false);
+        selectedComponent.isService = jest.fn(() => true);
+        selectedComponent.isSubstituteCandidate = jest.fn(() => false);
         fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
 
-        // const pnfMock = Mock.of<Service>({ isResource : () => false });
         fixture.componentInstance.topologyTemplate = selectedComponent;
 
         // Call ngOnInit
         fixture.componentInstance.ngOnInit();
 
         // Expect that
-        expect (fixture.componentInstance.tabs.length).toBe(6);
-        expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
-        expect (fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
-        expect (fixture.componentInstance.tabs[2]).toEqual(tabs.inputs);
-        expect (fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
-        expect (fixture.componentInstance.tabs[4]).toEqual(tabs.apiArtifacts);
-        expect (fixture.componentInstance.tabs[5]).toEqual(tabs.substitutionFilter);
+        expect(fixture.componentInstance.tabs.length).toBe(5);
+        expect(fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
+        expect(fixture.componentInstance.tabs[1]).toEqual(tabs.deploymentArtifacts);
+        expect(fixture.componentInstance.tabs[2]).toEqual(tabs.inputs);
+        expect(fixture.componentInstance.tabs[3]).toEqual(tabs.infoArtifacts);
+        expect(fixture.componentInstance.tabs[4]).toEqual(tabs.apiArtifacts);
 
     });
 
@@ -223,6 +244,7 @@ describe('composition-panel component', () => {
         const selectedComponent: Service = new Service(null, null);
         selectedComponent.isResource = jest.fn(() => false);
         selectedComponent.isService = jest.fn(() => true );
+        selectedComponent.isSubstituteCandidate = jest.fn(() => true );
 
         fixture.componentInstance.store.select = jest.fn(() => Observable.of(selectedComponent));
         fixture.componentInstance.selectedComponentIsServiceProxyInstance = jest.fn(() => true);
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
index 6ed73b3384..3422cc142d 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.ts
@@ -264,7 +264,7 @@ export class CompositionPanelComponent {
             this.tabs.push(tabs.apiArtifacts);
         }
 
-        if((component.isService() || this.isVF()) && !this.isComponentInstanceSelected()){
+        if (this.showSubstitutionFilterTab(component)) {
             this.tabs.push(tabs.substitutionFilter);
         }
 
@@ -279,6 +279,17 @@ export class CompositionPanelComponent {
 
     }
 
+    private showSubstitutionFilterTab(component): boolean {
+        if ((component.isService() || this.isVF()) && !this.isComponentInstanceSelected()) {
+            if (component.isService()) {
+                return (<Service>component).isSubstituteCandidate();
+            }
+            return true;
+        }
+
+        return false;
+    }
+
     private toggleSidebarDisplay = () => {
         // this.withSidebar = !this.withSidebar;
         this.store.dispatch(new OnSidebarOpenOrCloseAction());
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
index b54cbc97c2..747624a03f 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.html
@@ -87,7 +87,7 @@
         </div>
         <div class="right-column">
             <div *ngIf="!isReadonly && !isInputsTabSelected" class="add-btn"
-                 (click)="addProperty(component.model)" data-tests-id="properties-add-button" [ngClass]="{'disabled': !isSelf()}">Add Property</div>
+                 (click)="addProperty(component.model)" data-tests-id="properties-add-button" [ngClass]="{'disabled': !showAddProperties()}">Add Property</div>
             <div *ngIf="!isReadonly && isInputsTabSelected" class="add-btn"
                  (click)="addInput()" [ngClass]="{'disabled': !isSelf()}">Add Input</div>
             <tabs #hierarchyNavTabs tabStyle="simple-tabs" class="gray-border">
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
index 09fd888755..e0a1cbf8ff 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.ts
@@ -38,6 +38,7 @@ import {
     PropertyBEModel,
     PropertyFEModel,
     PropertyInputDetail,
+    Service,
     SimpleFlatProperty
 } from "app/models";
 import {ResourceType} from "app/utils";
@@ -67,7 +68,6 @@ import {ToscaPresentationData} from "../../../models/tosca-presentation";
 import {Observable} from "rxjs";
 import {ToscaGetFunctionType} from "../../../models/tosca-get-function-type.enum";
 import {TranslateService} from "../../shared/translator/translate.service";
-import {Model} from '../../../models/model';
 
 const SERVICE_SELF_TITLE = "SELF";
 @Component({
@@ -250,6 +250,13 @@ export class PropertiesAssignmentComponent {
         return this.selectedInstanceData && this.selectedInstanceData.uniqueId == this.component.uniqueId;
     }
 
+    showAddProperties = (): boolean => {
+        if (this.component.isService() && !(<Service>this.component).isSubstituteCandidate()) {
+            return false;
+        }
+        return this.isSelf();
+    }
+
     getServiceProperties() {
         this.loadingProperties = true;
         this.topologyTemplateService
diff --git a/catalog-ui/src/app/ng2/services/element.service.ts b/catalog-ui/src/app/ng2/services/element.service.ts
index b3cf8c38f4..dc0218fcc3 100644
--- a/catalog-ui/src/app/ng2/services/element.service.ts
+++ b/catalog-ui/src/app/ng2/services/element.service.ts
@@ -33,10 +33,9 @@ export class ElementService {
         this.baseUrl = sdcConfig.api.root;
     }
 
-    getCategoryBasetypes(categoryName:string, modelName:string):Observable<BaseTypeResponse[]> {
+    getCategoryBaseTypes(categoryName: string, modelName: string): Observable<ListBaseTypesResponse> {
 	    let modelQueryParam: string = modelName ? '?model=' + modelName : '';
-        return this.http.get<ListBaseTypesResponse>(this.baseUrl + "/v1/category/services/" + categoryName + "/baseTypes" + modelQueryParam)
-            .pipe(map(response => response.baseTypes));
+        return this.http.get<ListBaseTypesResponse>(this.baseUrl + "/v1/category/services/" + categoryName + "/baseTypes" + modelQueryParam);
     }
 
 }
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
index c423028467..9c103b4c4a 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view-model.ts
@@ -248,7 +248,6 @@ export class GeneralViewModel {
         this.$scope.componentCategories = new componentCategories();
         this.$scope.componentCategories.selectedCategory = this.$scope.component.selectedCategory;
 
-
         // Init UIModel
         this.$scope.component.tags = _.without(this.$scope.component.tags, this.$scope.component.name);
 
@@ -454,15 +453,24 @@ export class GeneralViewModel {
 
         this.$scope.initBaseTypes = ():void => {
             if (this.$scope.componentType === ComponentType.SERVICE && this.$scope.component && this.$scope.component.categories) {
+                if (!this.$scope.component.derivedFromGenericType) {
+                    this.$scope.component.derivedFromGenericVersion = undefined;
+                    this.$scope.showBaseTypeVersions = false;
+                    return;
+                }
                 let modelName = this.$scope.component.model ? this.$scope.component.model : null;
-                this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
+                const categoryName = this.$scope.component.categories[0].name;
+                this.elementService.getCategoryBaseTypes(categoryName, modelName).subscribe((data: ListBaseTypesResponse) => {
                     this.$scope.baseTypes = []
                     this.$scope.baseTypeVersions = []
-                    data.forEach(baseType => {
-                        this.$scope.baseTypes.push(baseType.toscaResourceName)
-                        if (baseType.toscaResourceName === this.$scope.component.derivedFromGenericType){
+                    this.$scope.isBaseTypeRequired = data.required;
+                    data.baseTypes.forEach(baseType => {
+                        this.$scope.baseTypes.push(baseType.toscaResourceName);
+                        if (baseType.toscaResourceName === this.$scope.component.derivedFromGenericType) {
                             baseType.versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
-                        }});
+                        }
+                    });
+                    this.$scope.showBaseTypeVersions = true;
                 })
             }
         };
@@ -734,16 +742,18 @@ export class GeneralViewModel {
                     }
                 }
                 if (this.$scope.componentType === ComponentType.SERVICE && this.$scope.component.categories[0]) {
-                    let modelName : string = this.$scope.component.model ? this.$scope.component.model : null;
-                    this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
-
-                        if(this.$scope.isCreateMode()){
+                    const modelName : string = this.$scope.component.model ? this.$scope.component.model : null;
+                    this.elementService.getCategoryBaseTypes(this.$scope.component.categories[0].name, modelName)
+                    .subscribe((data: ListBaseTypesResponse) => {
+                        if (this.$scope.isCreateMode()) {
                             this.loadBaseTypes(data);
                         } else {
-                            var isValidForBaseType:boolean = false;
-                            data.forEach(baseType => {if (!this.$scope.component.derivedFromGenericType || baseType.toscaResourceName === this.$scope.component.derivedFromGenericType){
-                                isValidForBaseType = true;
-                            };});
+                            let isValidForBaseType:boolean = false;
+                            data.baseTypes.forEach(baseType => {
+                                if (!this.$scope.component.derivedFromGenericType || baseType.toscaResourceName === this.$scope.component.derivedFromGenericType) {
+                                    isValidForBaseType = true;
+                                }
+                            });
                             this.$scope.editForm['category'].$setValidity('validForBaseType', isValidForBaseType);
                         }
                     });
@@ -760,16 +770,24 @@ export class GeneralViewModel {
         };
 
         this.$scope.onBaseTypeChange = (): void => {
-            let modelName : string = this.$scope.component.model ? this.$scope.component.model : null;
-            this.elementService.getCategoryBasetypes(this.$scope.component.categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
+            if (!this.$scope.component.derivedFromGenericType) {
+                this.$scope.component.derivedFromGenericVersion = undefined;
+                this.$scope.showBaseTypeVersions = false;
+                return;
+            }
+
+            const modelName : string = this.$scope.component.model ? this.$scope.component.model : null;
+            const categoryName = this.$scope.component.categories[0].name;
+            this.elementService.getCategoryBaseTypes(categoryName, modelName).subscribe((baseTypeResponseList: ListBaseTypesResponse) => {
                 this.$scope.baseTypeVersions = []
-                data.forEach(baseType => {
-                    if(baseType.toscaResourceName === this.$scope.component.derivedFromGenericType) {
+                baseTypeResponseList.baseTypes.forEach(baseType => {
+                    if (baseType.toscaResourceName === this.$scope.component.derivedFromGenericType) {
                         baseType.versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
                         this.$scope.component.derivedFromGenericVersion = baseType.versions[0];
-                    };
+                    }
                 });
-            })
+                this.$scope.showBaseTypeVersions = true;
+            });
         };
 
         this.$scope.onModelChange = (): void => {
@@ -785,8 +803,8 @@ export class GeneralViewModel {
                 this.$scope.component.icon = DEFAULT_ICON;
             }
         };
-        this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
 
+        this.EventListenerService.registerObserverCallback(EVENTS.ON_LIFECYCLE_CHANGE, this.$scope.reload);
 
         this.$scope.isMetadataKeyMandatory = (key: string): boolean => {
             let metadataKey = this.getMetadataKey(this.$scope.component.categories, key);
@@ -837,22 +855,28 @@ export class GeneralViewModel {
     private filterBaseTypesByModelAndCategory(modelName:string) {
         let categories = this.$scope.component.categories;
         if (categories) {
-            this.elementService.getCategoryBasetypes(categories[0].name, modelName).subscribe((data: BaseTypeResponse[]) => {
+            this.elementService.getCategoryBaseTypes(categories[0].name, modelName).subscribe((data: ListBaseTypesResponse) => {
                 this.loadBaseTypes(data);
             });
         }
     }
 
-    private loadBaseTypes(data:BaseTypeResponse[]) {
+    private loadBaseTypes(baseTypeResponseList: ListBaseTypesResponse) {
+        this.$scope.isBaseTypeRequired = baseTypeResponseList.required;
         this.$scope.baseTypes = [];
         this.$scope.baseTypeVersions = [];
-        data.forEach(baseType => this.$scope.baseTypes.push(baseType.toscaResourceName));
-        let baseType = data[0];
-        if (baseType) {
+        baseTypeResponseList.baseTypes.forEach(baseType => this.$scope.baseTypes.push(baseType.toscaResourceName));
+        if (this.$scope.isBaseTypeRequired) {
+            const baseType = baseTypeResponseList.baseTypes[0];
             baseType.versions.reverse().forEach(version => this.$scope.baseTypeVersions.push(version));
             this.$scope.component.derivedFromGenericType = baseType.toscaResourceName;
-            this.$scope.component.derivedFromGenericVersion = baseType.versions[0];
+            this.$scope.component.derivedFromGenericVersion = this.$scope.baseTypeVersions[0];
+            this.$scope.showBaseTypeVersions = true;
+            return
         }
+        this.$scope.component.derivedFromGenericType = undefined;
+        this.$scope.component.derivedFromGenericVersion = undefined;
+        this.$scope.showBaseTypeVersions = false;
     }
 
     private setUnsavedChanges = (hasChanges: boolean): void => {
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
index e7ce00b176..bb0cceb173 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
+++ b/catalog-ui/src/app/view-models/workspace/tabs/general/general-view.html
@@ -591,25 +591,25 @@
                     <!--------------------- Instantiation Type -------------------->
 
                     <!--------------------- Base Type -------------------->
-
                     <div class="w-sdc-form-columns-wrapper">
                         <div class="w-sdc-form-column">
-		                    <div class="i-sdc-form-item" data-ng-if="component.isService()">
-		                        <label class="i-sdc-form-label">Base Type</label>
-		                        <select class="i-sdc-form-select"
-		                                name="baseType"
-		                                data-ng-class="{'view-mode': isViewMode()}"
-		                                data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
-		                                data-ng-model="component.derivedFromGenericType"
-		                                data-ng-change="onBaseTypeChange()"
-		                                data-tests-id="selectBaseType">
-		                            <option ng-repeat="type in baseTypes">{{type}}</option>
-		                        </select>
+		                    <div class="i-sdc-form-item" ng-if="component.isService() && baseTypes && baseTypes.length > 0">
+		                        <label class="i-sdc-form-label">Substitution Node Type</label>
+                            <select class="i-sdc-form-select"
+                                    name="baseType"
+                                    data-ng-class="{'view-mode': isViewMode()}"
+                                    data-ng-disabled="component.isCsarComponent() || !isCreateMode()"
+                                    data-ng-model="component.derivedFromGenericType"
+                                    data-ng-change="onBaseTypeChange()"
+                                    data-tests-id="selectBaseType"
+                                    data-ng-options="type for type in baseTypes track by type">
+                                <option value="" data-ng-if="!isBaseTypeRequired">None</option>
+                            </select>
 		                    </div>
                 		</div>
                 		<div class="w-sdc-form-column">
-		                    <div class="i-sdc-form-item" data-ng-if="component.isService()">
-		                        <label class="i-sdc-form-label">Base Type Version</label>
+		                    <div class="i-sdc-form-item" data-ng-if="component.isService() && showBaseTypeVersions">
+		                        <label class="i-sdc-form-label">Substitution Node Type Version</label>
 		                        <select class="i-sdc-form-select"
 		                                name="baseTypeVersion"
 		                                data-ng-class="{'view-mode': isViewMode()}"