Add Composition Page and create resource page/flow

Add UI Tests Composition Page, and create resource page and flow

Change-Id: I004a2e8123df669e7318eca7feb58f8b1210dd65
Issue-ID: SDC-3523, SDC-3524
Signed-off-by: andre.schmid <andre.schmid@est.tech>

4 files changed, 238 insertions, 62 deletions

diff --git a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
index 01329b70d1..81fc5b48ee 100644
--- a/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
+++ b/catalog-ui/src/app/ng2/components/logic/substitution-filter/substitution-filter.component.html
@@ -45,7 +45,7 @@
         <div class="w-sdc-designer-sidebar-section-substitution-filter-footer">
           <button
                   class="w-sdc-designer-sidebar-section-substitution-filter-footer-action add-rule-btn tlv-btn blue"
-                  data-tests-id="add-rule-button"
+                  data-tests-id="add-substitution-filter-button"
                   (click)="onAddSubstitutionFilter(PROPERTIES)"
                   [disabled]="readonly">
             {{'ADD_SUBSTITUTION_FILTER' | translate}}
diff --git a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
index 5511dc0ea8..61e2f5e744 100644
--- a/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
+++ b/catalog-ui/src/app/ng2/pages/composition/panel/composition-panel.component.html
@@ -12,7 +12,8 @@
             <sdc-tab *ngFor="let tab of tabs"
                      [titleIcon]="tab.titleIcon"
                      [active]="tab.isActive"
-                     [tooltipText]="tab.tooltipText">
+                     [tooltipText]="tab.tooltipText"
+                     [testId]="tab.testId">
 
                 <panel-tab [isActive]="tab.isActive"
                            [component]="selectedComponent"
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 6d96764b1c..d5c0b6093b 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
@@ -27,49 +27,113 @@ describe('composition-panel component', () => {
     let store: Store;
 
     const tabs = {
-            infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
-            policyProperties: {
-                titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'
-            },
-            policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
-            groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
-            groupProperties: {
-                titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'
-            },
-            deploymentArtifacts: {
-                titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent,
-                input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'
-            },
-            apiArtifacts: {
-                titleIcon: 'api-o', component: ArtifactsTabComponent,
-                input: { type:  ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'
-            },
-            infoArtifacts: {
-                titleIcon: 'info-square-o', component: ArtifactsTabComponent,
-                input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'
-            },
-            properties: {
-                titleIcon: 'settings-o', component: PropertiesTabComponent,
-                input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'
-            },
-            reqAndCapabilities : {
-                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'},
-            interfaceOperations: {
-                titleIcon: 'composition-o',
-                component: InterfaceOperationsComponent,
-                input: {title: 'Interface Operations'},
-                isActive: false,
-                tooltipText: 'Interface Operations'
-            }
-        };
+        infoTab: {
+            titleIcon: 'info-circle',
+            component: InfoTabComponent,
+            input: {},
+            isActive: true,
+            tooltipText: 'Information',
+            testId: 'detail-tab-information'
+        },
+        policyProperties: {
+            titleIcon: 'settings-o',
+            component: GroupOrPolicyPropertiesTab,
+            input: {type: 'policy'},
+            isActive: false,
+            tooltipText: 'Properties',
+            testId: 'detail-tab-policy-properties'
+        },
+        policyTargets: {
+            titleIcon: 'inputs-o',
+            component: PolicyTargetsTabComponent,
+            input: {},
+            isActive: false,
+            tooltipText: 'Targets',
+            testId: 'detail-tab-policy-targets'
+        },
+        groupMembers: {
+            titleIcon: 'inputs-o',
+            component: GroupMembersTabComponent,
+            input: {},
+            isActive: false,
+            tooltipText: 'Members',
+            testId: 'detail-tab-group-members'
+        },
+        groupProperties: {
+            titleIcon: 'settings-o',
+            component: GroupOrPolicyPropertiesTab,
+            input: {type: 'group'},
+            isActive: false,
+            tooltipText: 'Properties',
+            testId: 'detail-tab-group-properties'
+        },
+        deploymentArtifacts: {
+            titleIcon: 'deployment-artifacts-o',
+            component: ArtifactsTabComponent,
+            input: {type: ArtifactGroupType.DEPLOYMENT},
+            isActive: false,
+            tooltipText: 'Deployment Artifacts',
+            testId: 'detail-tab-deployment-artifacts'
+        },
+        apiArtifacts: {
+            titleIcon: 'api-o',
+            component: ArtifactsTabComponent,
+            input: {type: ArtifactGroupType.SERVICE_API},
+            isActive: false,
+            tooltipText: 'API Artifacts',
+            testId: 'detail-tab-api-artifacts'
+        },
+        infoArtifacts: {
+            titleIcon: 'info-square-o',
+            component: ArtifactsTabComponent,
+            input: {type: ArtifactGroupType.INFORMATION},
+            isActive: false,
+            tooltipText: 'Information Artifacts',
+            testId: 'detail-tab-information-artifacts'
+        },
+        properties: {
+            titleIcon: 'settings-o', component: PropertiesTabComponent,
+            input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties',
+            testId: 'detail-tab-properties-attributes'
+        },
+        reqAndCapabilities: {
+            titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {},
+            isActive: false, tooltipText: 'Requirements and Capabilities',
+            testId: 'detail-tab-requirements-capabilities'
+        },
+        substitutionFilter: {
+            titleIcon: 'composition-o',
+            component: SubstitutionFilterTabComponent,
+            input: {title: 'SUBSTITUTION FILTER'},
+            isActive: false,
+            tooltipText: 'Substitution Filter',
+            testId: 'detail-tab-substitution-filter'
+        },
+        inputs: {
+            titleIcon: 'inputs-o',
+            component: PropertiesTabComponent,
+            input: {title: 'Inputs'},
+            isActive: false,
+            tooltipText: 'Inputs',
+            testId: 'detail-tab-inputs'
+        },
+        settings: {
+            titleIcon: 'settings-o',
+            component: PropertiesTabComponent,
+            input: {},
+            isActive: false,
+            tooltipText: 'Settings',
+            testId: 'detail-tab-settings'
+        },
+        interfaceOperations: {
+            titleIcon: 'composition-o',
+            component: InterfaceOperationsComponent,
+            input: {title: 'Interface Operations'},
+            isActive: false,
+            tooltipText: 'Interface Operations',
+            testId: 'detail-tab-interface-operations'
+        }
+    };
 
     beforeEach(
         async(() => {
@@ -95,7 +159,6 @@ describe('composition-panel component', () => {
         const testInstance = new PolicyInstance();
 
         fixture.componentInstance.initTabs(testInstance);
-
         expect (fixture.componentInstance.tabs.length).toBe(3);
         expect (fixture.componentInstance.tabs[0]).toEqual(tabs.infoTab);
         expect (fixture.componentInstance.tabs[1]).toEqual(tabs.policyTargets);
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 2ef4e7c9a9..6ed73b3384 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
@@ -42,22 +42,134 @@ import {SubstitutionFilterTabComponent} from "./panel-tabs/substitution-filter-t
 import {InterfaceOperationsComponent} from "../interface-operatons/interface-operations.component";
 
 const tabs = {
-    infoTab : {titleIcon: 'info-circle', component: InfoTabComponent, input: {}, isActive: true, tooltipText: 'Information'},
-    policyProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'policy'}, isActive: false, tooltipText: 'Properties'},
-    policyTargets: {titleIcon: 'inputs-o', component: PolicyTargetsTabComponent, input: {}, isActive: false, tooltipText: 'Targets'},
-    groupMembers: {titleIcon: 'inputs-o', component: GroupMembersTabComponent, input: {}, isActive: false, tooltipText: 'Members'},
-    groupProperties: {titleIcon: 'settings-o', component: GroupOrPolicyPropertiesTab, input: {type: 'group'}, isActive: false, tooltipText: 'Properties'},
-    deploymentArtifacts: {titleIcon: 'deployment-artifacts-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.DEPLOYMENT}, isActive: false, tooltipText: 'Deployment Artifacts'},
-    apiArtifacts: {titleIcon: 'api-o', component: ArtifactsTabComponent, input: { type:  ArtifactGroupType.SERVICE_API}, isActive: false, tooltipText: 'API Artifacts'},
-    infoArtifacts: {titleIcon: 'info-square-o', component: ArtifactsTabComponent, input: { type: ArtifactGroupType.INFORMATION}, isActive: false, tooltipText: 'Information Artifacts'},
-    properties: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {title: 'Properties and Attributes'}, isActive: false, tooltipText: 'Properties'},
-    reqAndCapabilities : { titleIcon: 'req-capabilities-o', component: ReqAndCapabilitiesTabComponent, input: {}, isActive: false, tooltipText: 'Requirements and Capabilities'},
-    inputs: {titleIcon: 'inputs-o', component: PropertiesTabComponent, input: {title: 'Inputs'}, isActive: false, tooltipText: 'Inputs'},
-    settings: {titleIcon: 'settings-o', component: PropertiesTabComponent, input: {}, isActive: false, tooltipText: 'Settings'},
-    consumption: {titleIcon: 'api-o', component: ServiceConsumptionTabComponent, input: {title: 'OPERATION CONSUMPTION'}, isActive: false, tooltipText: 'Service Consumption'},
-    dependencies: {titleIcon: 'archive', component: ServiceDependenciesTabComponent, input: {title: 'DIRECTIVES AND NODE FILTER'}, isActive: false, tooltipText: 'Service Dependencies'},
-    substitutionFilter: {titleIcon: 'composition-o', component: SubstitutionFilterTabComponent, input: {title: 'SUBSTITUTION FILTER'}, isActive: false, tooltipText: 'Substitution Filter'},
-    interfaceOperations: {titleIcon: 'composition-o', component: InterfaceOperationsComponent, input: {title: 'Interface Operations'}, isActive: false, tooltipText: 'Interface Operations'}
+    infoTab: {
+        titleIcon: 'info-circle',
+        component: InfoTabComponent,
+        input: {},
+        isActive: true,
+        tooltipText: 'Information',
+        testId: 'detail-tab-information'
+    },
+    policyProperties: {
+        titleIcon: 'settings-o',
+        component: GroupOrPolicyPropertiesTab,
+        input: {type: 'policy'},
+        isActive: false,
+        tooltipText: 'Properties',
+        testId: 'detail-tab-policy-properties'
+    },
+    policyTargets: {
+        titleIcon: 'inputs-o',
+        component: PolicyTargetsTabComponent,
+        input: {},
+        isActive: false,
+        tooltipText: 'Targets',
+        testId: 'detail-tab-policy-targets'
+    },
+    groupMembers: {
+        titleIcon: 'inputs-o',
+        component: GroupMembersTabComponent,
+        input: {},
+        isActive: false,
+        tooltipText: 'Members',
+        testId: 'detail-tab-group-members'
+    },
+    groupProperties: {
+        titleIcon: 'settings-o',
+        component: GroupOrPolicyPropertiesTab,
+        input: {type: 'group'},
+        isActive: false,
+        tooltipText: 'Properties',
+        testId: 'detail-tab-group-properties'
+    },
+    deploymentArtifacts: {
+        titleIcon: 'deployment-artifacts-o',
+        component: ArtifactsTabComponent,
+        input: {type: ArtifactGroupType.DEPLOYMENT},
+        isActive: false,
+        tooltipText: 'Deployment Artifacts',
+        testId: 'detail-tab-deployment-artifacts'
+    },
+    apiArtifacts: {
+        titleIcon: 'api-o',
+        component: ArtifactsTabComponent,
+        input: {type: ArtifactGroupType.SERVICE_API},
+        isActive: false,
+        tooltipText: 'API Artifacts',
+        testId: 'detail-tab-api-artifacts'
+    },
+    infoArtifacts: {
+        titleIcon: 'info-square-o',
+        component: ArtifactsTabComponent,
+        input: {type: ArtifactGroupType.INFORMATION},
+        isActive: false,
+        tooltipText: 'Information Artifacts',
+        testId: 'detail-tab-information-artifacts'
+    },
+    properties: {
+        titleIcon: 'settings-o',
+        component: PropertiesTabComponent,
+        input: {title: 'Properties and Attributes'},
+        isActive: false,
+        tooltipText: 'Properties',
+        testId: 'detail-tab-properties-attributes'
+    },
+    reqAndCapabilities: {
+        titleIcon: 'req-capabilities-o',
+        component: ReqAndCapabilitiesTabComponent,
+        input: {},
+        isActive: false,
+        tooltipText: 'Requirements and Capabilities',
+        testId: 'detail-tab-requirements-capabilities'
+    },
+    inputs: {
+        titleIcon: 'inputs-o',
+        component: PropertiesTabComponent,
+        input: {title: 'Inputs'},
+        isActive: false,
+        tooltipText: 'Inputs',
+        testId: 'detail-tab-inputs'
+    },
+    settings: {
+        titleIcon: 'settings-o',
+        component: PropertiesTabComponent,
+        input: {},
+        isActive: false,
+        tooltipText: 'Settings',
+        testId: 'detail-tab-settings'
+    },
+    consumption: {
+        titleIcon: 'api-o',
+        component: ServiceConsumptionTabComponent,
+        input: {title: 'OPERATION CONSUMPTION'},
+        isActive: false,
+        tooltipText: 'Service Consumption',
+        testId: 'detail-tab-operation-consumption'
+    },
+    dependencies: {
+        titleIcon: 'archive',
+        component: ServiceDependenciesTabComponent,
+        input: {title: 'DIRECTIVES AND NODE FILTER'},
+        isActive: false,
+        tooltipText: 'Service Dependencies',
+        testId: 'detail-tab-directives-node-filter'
+    },
+    substitutionFilter: {
+        titleIcon: 'composition-o',
+        component: SubstitutionFilterTabComponent,
+        input: {title: 'SUBSTITUTION FILTER'},
+        isActive: false,
+        tooltipText: 'Substitution Filter',
+        testId: 'detail-tab-substitution-filter'
+    },
+    interfaceOperations: {
+        titleIcon: 'composition-o',
+        component: InterfaceOperationsComponent,
+        input: {title: 'Interface Operations'},
+        isActive: false,
+        tooltipText: 'Interface Operations',
+        testId: 'detail-tab-interface-operations'
+    }
 };
 
 @Component({