Allow substitution_filter for a VF

Issue-ID: SDC-3365
Signed-off-by: KrupaNagabhushan <krupa.nagabhushan@est.tech>
Change-Id: I5894bffbc8e605de26832d03c6f988f17413393b

3 files changed, 18 insertions, 2 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
index beaa72f4fb..2c96e92c7e 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/__snapshots__/composition-panel.component.spec.ts.snap
@@ -8,6 +8,7 @@ exports[`composition-panel component should match current snapshot of compositio
   isComponentInstanceSelected={[Function Function]}
   isConfiguration={[Function Function]}
   isPNF={[Function Function]}
+  isVF={[Function Function]}
   selectedComponentIsServiceProxyInstance={[Function Function]}
   selectedComponentIsServiceSubstitutionInstance={[Function Function]}
   selectedComponentIsVfcInstance={[Function Function]}
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 75fab9abe7..1761bfdd03 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
@@ -18,6 +18,7 @@ import { InfoTabComponent } from './panel-tabs/info-tab/info-tab.component';
 import { PolicyTargetsTabComponent } from './panel-tabs/policy-targets-tab/policy-targets-tab.component';
 import { PropertiesTabComponent } from './panel-tabs/properties-tab/properties-tab.component';
 import { ReqAndCapabilitiesTabComponent } from './panel-tabs/req-capabilities-tab/req-capabilities-tab.component';
+import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-tab/substitution-filter-tab.component";
 
 describe('composition-panel component', () => {
 
@@ -54,8 +55,13 @@ describe('composition-panel component', () => {
                 titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {},
                 isActive: false, tooltipText: 'Requirements and Capabilities'
             },
+            substitutionFilter: {
+                titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'},
+                isActive: false, tooltipText: 'Substitution Filter'
+            },
             inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
             settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
+
         };
 
     beforeEach(
@@ -114,6 +120,7 @@ describe('composition-panel component', () => {
         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);
 
     });
 
@@ -157,7 +164,7 @@ describe('composition-panel component', () => {
         fixture.componentInstance.ngOnInit();
 
         // Expect that
-        expect (fixture.componentInstance.tabs.length).toBe(5);
+        expect (fixture.componentInstance.tabs.length).toBe(6);
         expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
         expect (fixture.componentInstance.tabs[1]).toEqual(tabs.properties);
         expect (fixture.componentInstance.tabs[2]).toEqual(tabs.reqAndCapabilities);
@@ -180,7 +187,7 @@ describe('composition-panel component', () => {
         fixture.componentInstance.ngOnInit();
 
         // Expect that
-        expect (fixture.componentInstance.tabs.length).toBe(5);
+        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.properties);
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 53c569be11..4feaac8272 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
@@ -142,8 +142,12 @@ export class CompositionPanelComponent {
 
         if (component.isService() && !this.selectedComponentIsServiceProxyInstance() && !this.selectedComponentIsServiceSubstitutionInstance()) {
             this.tabs.push(tabs.apiArtifacts);
+        }
+
+        if((component.isService() || this.isVF()) && !this.isComponentInstanceSelected()){
             this.tabs.push(tabs.substitutionFilter);
         }
+
         if (component.isService() && (this.selectedComponentIsServiceProxyInstance() || this.selectedComponentIsServiceSubstitutionInstance())) {
             this.tabs.push(tabs.consumption);
             this.tabs.push(tabs.dependencies);
@@ -162,6 +166,10 @@ export class CompositionPanelComponent {
         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.PNF;
     }
 
+    private isVF = (): boolean => {
+        return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.VF;
+    }
+
     private isConfiguration = (): boolean => {
         return this.topologyTemplate.isResource() && (this.topologyTemplate as Resource).resourceType === ResourceType.CONFIGURATION;
     }