[SDC] OnBoard with enabled tests and features

Change-Id: I4c1bbf6e1c854cf97a3561c736f83da44b58b7c0
Signed-off-by: az2497 <avi.ziv@amdocs.com>

[SDC] OnBoard with enabled tests and features.

Change-Id: Icd52f039aee4dd393a1404d530bb9fdd0b20e604
Signed-off-by: az2497 <avi.ziv@amdocs.com>

10 files changed, 195 insertions, 211 deletions

diff --git a/openecomp-ui/resources/scss/modules/_featureGroup.scss b/openecomp-ui/resources/scss/modules/_featureGroup.scss
index 9d395f98c8..5f98ed2c05 100644
--- a/openecomp-ui/resources/scss/modules/_featureGroup.scss
+++ b/openecomp-ui/resources/scss/modules/_featureGroup.scss
@@ -1,23 +1,37 @@
 .feature-groups-list-editor {
-  .list-editor-view-list {
-    .list-editor-item-view {
-      min-height: 110px;
-      height: 110px;
-    }
-    .list-editor-item-view-field {
-      .feature-groups-count-field {
-        display: inline-block;
-        &:first-child {
-          margin-right: 95px;
-        }
-      }
-      .feature-groups-count-ep {
-        @extend .heading-1;
-        color: $light-blue;
+  .list-editor-view{
+    .list-editor-view-list {
+      .list-editor-item-view {
+        min-height: 110px;
+        height: 110px;
       }
-      .feature-groups-count-lk {
-        @extend .heading-1;
-        color: $light-green;
+      .list-editor-item-view-content {
+        .list-editor-item-view-field {
+          &.smaller-field {
+            flex: 0.35;
+          }
+          .feature-groups-count-field {
+            display: inline-block;
+            &:first-child {
+              margin-right: 95px;
+            }
+          }
+          .feature-groups-count-ep {
+            @extend .heading-1;
+            color: $light-blue;
+          }
+          .feature-groups-mrn-ep {
+            @extend .body-1;
+            color: $light-blue;
+          }
+          .feature-groups-count-lk {
+            @extend .heading-1;
+            color: $light-green;
+          }
+          .title-no-wrap {
+            white-space: nowrap;
+          }
+        }
       }
     }
   }
@@ -39,7 +53,7 @@
 		.nav.nav-tabs {
 			padding-left: 50px;
 		}
-		
+
     .tab-content {
       padding: 50px;
       .field-section {
diff --git a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
index 1c133a1dce..15bb9a7033 100644
--- a/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
+++ b/openecomp-ui/resources/scss/modules/_licenseModelOverview.scss
@@ -61,26 +61,34 @@ $lkg-ep-color: $light-blue;
 
         &:not(.read-only) .vendor-description {
           border: 1px solid transparent;
+          width: 100%;
           padding: 2px 0 2px 6px;
           margin-top: 10px;
-
+          position: relative;
+          .svg-icon-wrapper {
+            position: absolute;;
+            right:0;
+            top:0;
+            opacity: 0;
+          }
           $hover-padding-right: 16px;
           @include percent-plus-value($property: width, $percent: 100%, $value: -$hover-padding-right); // compensate for padding added on hover
           &:hover {
             padding-right: $hover-padding-right;
-            width: 100%;
             border: 1px solid $light-gray;
             cursor: pointer;
 
-            background-position: calc(100% - 4px) 4px;
-            background-size: 14px;
-            background-image: url($pencil-icon);
-            background-repeat: no-repeat;
-            background-color: white;
-
+            background-color: $white;
+            .svg-icon-wrapper {
+              opacity: 1;
+              z-index: 10;
+            }
             .description-data:after {
               background: white;
             }
+            .description-data {
+              width: 100%;
+            }
           }
         }
 
@@ -167,20 +175,23 @@ $lkg-ep-color: $light-blue;
             flex-grow: 2;
             margin-left: 5px;
           }
-          .add-button {
-            cursor: pointer;
-            font-size: larger;
-            background-image: url($vlm-summary-plus);
-            background-size: 20px;
-            background-repeat: no-repeat;
-            width:20px;
-            height:20px;
-            margin-top: 3px;
-            margin-left: auto;
-            &:hover {
-              cursor: pointer;
-              background-image: url($vlm-summary-plus-blue);
-            }
+          .summary-name-and-count {
+            width: 100%;
+          }
+          .svg-icon-wrapper {
+
+            .svg-icon {
+              &.__plusCircle {
+                width: 20px;
+                height: 20px;
+                margin-top: 3px;
+                margin-left: auto;
+                fill: $dark-gray;
+                &:hover {
+                  fill: $blue;
+                }
+              }
+          }
           }
 
           .summary-name-and-count {
@@ -205,7 +216,7 @@ $lkg-ep-color: $light-blue;
     }
   }
   .vlm-list-tab-panel {
-		
+
 		@extend .flex;
 		margin-bottom: 7px;
     .section-title {
@@ -221,6 +232,7 @@ $lkg-ep-color: $light-blue;
         margin-left:10px;
         cursor: pointer;
       }
+      /**
       .vlm-list-icon {
         background-size: 32px;
         background-repeat: no-repeat;
@@ -237,7 +249,7 @@ $lkg-ep-color: $light-blue;
           background-image: url($vlm-summary-orphans-blue);
         }
       }
-
+      **/
     }
   }
 
@@ -260,7 +272,7 @@ $lkg-ep-color: $light-blue;
           .vlm-list-item.orphan-list-item {
 						@include overview-tile-shadow();
 						margin-left: 0;
-						
+
 						.vlm-list-item-title {
 
 							.item-name {
@@ -304,7 +316,7 @@ $lkg-ep-color: $light-blue;
           .clickable {
 						cursor: pointer;
 					}
-          
+
           .list-item-section {
 						.count-value {
 							@extend .body-3;
@@ -365,7 +377,7 @@ $lkg-ep-color: $light-blue;
           }
           .arrow-icon {
 						align-self: center;
-						
+
           }
           .vlm-item-info {
             flex: 1;
@@ -424,7 +436,7 @@ $lkg-ep-color: $light-blue;
               @include create-circle($circle-icon-size,$fg-color,'FG');
               color: $white;
 						}
-						
+
 						.vlm-list-item-title {
 							.item-name {
 								color: $fg-color;
@@ -465,7 +477,7 @@ $lkg-ep-color: $light-blue;
 								margin-left: 52px;
 							}
             }
-						
+
           }
           &.vlm-list-item-lkg {
             margin-top: 10px;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
index bab2872691..0e092dd8bb 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductAttachmentPage.scss
@@ -22,20 +22,7 @@
     right: 40px;
     top: 15px;
 		display: flex;
-		.icon-label {
-			color: $dark-gray;
-		}
 
-		.go-to-overview-icon {
-			.icon-label {
-				color: $blue;
-			}
-			&.disabled {
-				.icon-label {
-					color: $gray;
-				}
-			}
-		}
 
     .icon-component {
       margin-right: 30px;
@@ -104,6 +91,11 @@
       z-index: 1;
       padding-right: 20px;
       .counter {
+        .svg-icon {
+          &.__exclamationTriangleLine {
+            fill :$orange;
+          }
+        }
         display: flex;
         &:first-child {
           margin-right: 20px;
@@ -145,8 +137,8 @@
           justify-content: space-between;
           height: 40px;
           align-items: center;
-          .svg-icon-wrapper.chevronDown, .svg-icon-wrapper.chevronUp {
-            .svg-icon {
+          .svg-icon {
+            &.__chevronUp, &.__chevronDown {
               height: 10px;
               width: 10px;
             }
@@ -224,6 +216,13 @@
     .error-item {
       display: flex;
       margin: 10px 0;
+      .large {
+        .svg-icon {
+          width: 20px;
+          height: 20px;
+          fill: $orange;
+        }
+      }
       .error-item-file-type {
         margin-left: 15px;
       }
@@ -231,6 +230,9 @@
         @extend .body-1-semibold;
         margin-right: 5px;
       }
+
+
+
     }
 
   }
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
index 068404fcb6..dad837f356 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductComponentImage.scss
@@ -16,6 +16,12 @@
   }
 }
 
+.vsp-components-image-editor {
+  .note-text {
+    color: $red;
+  }
+}
+
 .image-modal-edit, .image-modal-new {
   .modal-body {
     padding: 0;
diff --git a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
index 56860101b2..9b0375d24a 100644
--- a/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareProductLandingPage.scss
@@ -28,21 +28,19 @@
     .missing-license {
       display: flex;
       align-items: baseline;
-      .svg-icon-wrapper.exclamationTriangleFull .svg-icon{
-        fill: $orange;
+      .svg-icon{
+        margin-right: 7px;
+        margin-left: 3px;
+        &.__exclamationTriangleFull {
+          fill: $orange;
+            width: 17px;
+            height: 17px;
+        }
       }
       .warning-text {
         position: relative;
         top: -2px;
       }
-      .svg-icon-wrapper {
-        margin-right: 7px;
-        margin-left: 3px;
-        .svg-icon {
-          height: 17px;
-          width: 17px;
-        }
-      }
     }
   }
   .name {
diff --git a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
index ceae4a00de..d1f3f488bd 100644
--- a/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
+++ b/openecomp-ui/resources/scss/modules/_softwareproductComponentLoadBalancing.scss
@@ -1,13 +1,7 @@
 .vsp-components-load-balancing {
   .svg-icon-wrapper {
 	position: relative;
-	top: -3px;
-	&.chevronUp, &.chevronDown {
-	  .svg-icon {
-		width: 10px;
-		height: 10px;
-	  }
-	}
+	top: -4px;
   }
 
   .halb-data {
diff --git a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
index 4bcf7940eb..bda8512f36 100644
--- a/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
+++ b/openecomp-ui/resources/scss/modules/_vspComponentMonitoring.scss
@@ -1,6 +1,6 @@
 
 .vsp-component-monitoring {
-  .snmp-dropzone {
+  .dropzone {
     .section-title {
       padding-bottom: 20px;
     }
@@ -22,7 +22,7 @@
       }
       .drag-text {
         color: $blue;
-        @extend .body-1-semibold;
+        @extend .body-1-semibold
       }
       .or-text {
         margin-top: 10px;
@@ -30,6 +30,20 @@
       }
     }
 
+    .monitoring-file {
+      display: flex;
+      .filename {
+        opacity: 1;
+        width: auto;
+        border-right-style: none;
+      }
+      .delete {
+        display: flex;
+        width: 30px;
+        justify-content: center;
+        align-items: center;
+      }
+    }
   }
 
   .delete-button {
diff --git a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
index 75d96b4c85..bd216c794b 100644
--- a/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
+++ b/openecomp-ui/resources/scss/modules/_vspHeatSetup.scss
@@ -24,10 +24,12 @@
 		  position: relative;
 		  top: -2px;
 		}
+
 		.modules-list-wrapper {
-			padding-bottom: 20px;
-			margin-bottom: 20px;
-			border-bottom: 1px solid $tlv-light-gray;
+			&.modules-list-wrapper-divider {
+				border-bottom: 1px solid $tlv-light-gray;
+			}
+
 			ul {
 				.undefined-dragging {
 					opacity: 0.5;
@@ -36,7 +38,7 @@
 					display: flex;
 					justify-content: space-between;
 					flex-wrap: wrap;
-
+					padding-bottom: 3px;
 					.Select-value-label {
 						@include ellipsis(85%);
 					}
@@ -55,24 +57,6 @@
 				}
 			}
 
-			.modules-list-controllers {
-				text-align: right;
-				.btn-link {
-					&[disabled] {
-						color: $gray;
-					}
-					@extend .body-1;
-					color: $blue;
-					&:last-child {
-						padding-right: 0;
-					}
-					&:hover {
-						color: $dark-blue;
-						text-decoration: none;
-					}
-				}
-			}
-
 			.modules-list-item-controllers {
 				display: flex;
 				justify-content: space-between;
@@ -82,16 +66,15 @@
 					min-width: 0;
 				}
 
-				.svg-icon-wrapper.trashO {
-				  .svg-icon {
-					fill: $dark-gray;
-					height: 18px;
-					width: 18px;
-					&:hover {
-					  fill: $black;
+				.svg-icon {
+					&.__trashO {
+						fill: $dark-gray;
+						&:hover {
+							fill: $black;
+						}
 					}
-				  }
 				}
+
 				.module-title-by-type {
 					@extend .heading-5-semibold;
 					margin-right: 3px;
@@ -100,15 +83,15 @@
 					display: flex;
 					align-items: center;
 
-					.svg-icon-wrapper.pencil {
-						.svg-icon {
-						  height: 15px;
-						  width: 15px;
+					.svg-icon {
+						&.__pencil {
+							margin-left: 3px;
+							opacity: 0;
 						}
-						margin-left: 3px;
-						opacity: 0;
 					}
 
+
+
 					.filename-text {
 						@extend .heading-5-semibold;
 
@@ -144,14 +127,16 @@
 								border-color: transparent;
 							}
 						}
-						.svg-icon-wrapper.pencil {
-							margin-left: 10px;
-							opacity: 1;
-							.svg-icon {
-							  stroke: $dark-gray;
-							  &:hover {
-							   stroke: $black;
-							  }
+						.svg-icon {
+							&.__pencil {
+								margin-left: 10px;
+								opacity: 1;
+								.svg-icon {
+									stroke: $dark-gray;
+									&:hover {
+										stroke: $black;
+									}
+								}
 							}
 						}
 					}
@@ -173,23 +158,8 @@
 					}
 				}
 				.add-or-delete-volumes {
-					.svg-icon-wrapper {
-						margin-right: 8px;
-						.svg-icon {
-							height: 10px;
-							width: 10px;
-							fill: $blue;
-						}
-					}
-					cursor: pointer;
-					color: $blue;
+					margin-right: 8px;
 					margin-bottom: 11px;
-					&:hover {
-						color: $dark-blue;
-						.svg-icon {
-							fill: $dark-blue;
-						}
-					}
 				}
 				&:before {
 					content: "\00B7\00B7\00B7\00B7\00B7\00B7";
@@ -208,7 +178,9 @@
 
 		.artifact-files {
 			@include modules-and-artifacts-list-items;
-			margin-top: 20px;
+			&.with-list-items {
+				margin-top: 10px;
+			}
 
 			&.nested {
 				.nested-list {
@@ -238,21 +210,20 @@
 					display: flex;
 				}
 
-				.add-all-unassigned {
-					@extend .body-1;
-					margin-bottom: 0;
-					color: $blue;
-					cursor: pointer;
-					&:hover {
-						color: $dark-blue;
-					}
-				}
 			}
 		}
 	}
 
+	.modules-list-header {
+		height: 30px;
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		justify-content: flex-end;
+		align-items: baseline;
+	}
+
 	.unassigned-files {
-		margin-top: 30px;
 		border: 1px solid $light-gray;
 		background-color: $white;
 		height: 250px;
@@ -283,26 +254,12 @@
 					@extend .heading-4;
 					margin-bottom: 10px;
 				}
-				.link {
-					color: $blue;
-					cursor: pointer;
-					display: flex;
-					align-items: center;
+				.svg-icon-wrapper {
 					margin-bottom: 10px;
-					.svg-icon-wrapper.angleRight {
-					  .svg-icon {
-						height: 10px;
-						width: 10px;
-						margin-left: 7px;
-						fill: $blue;
-					  }
-					}
-					&:hover {
-						color: $dark-blue;
-						.svg-icon-wrapper.angleRight {
-						  .svg-icon {
-							fill: $dark-blue;
-						  }
+					.svg-icon {
+						&.__angleRight {
+							width: 10px;
+							height: 10px;
 						}
 					}
 				}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
index 87a852f755..612ec495cd 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_catalogTile.scss
@@ -79,36 +79,22 @@
 	  width: 58px;
 	  margin-left: 122px;
 	  background-repeat: no-repeat;
-	  .svg-icon-wrapper {
-		&.vendor {
-		  .svg-icon {
+	  .svg-icon {
+		&.__vendor {
 			fill: $dark-gray;
-			width: 53px;
-			height: 47px;
 			&:hover {
 			  fill: $dark-gray;
 			}
-		  }
 		  margin-top: 22px;
-
 		}
-		&.vsp {
-		  .svg-icon {
+		&.__vsp {
 			fill: $light-blue;
-			width: 60px;
-			height: 40px;
 		  }
 		  margin-top: 18px;
 		  margin-left: 3px;
-		}
-		&.vlm {
+		&.__vlm {
 		  margin-top: 18px;
-		  .svg-icon {
 			fill: $purple;
-
-			width: 45px;
-			height: 53px;
-		  }
 		}
 	  }
 	}
@@ -121,13 +107,11 @@
 	margin-top: 2px;
 	padding-bottom: 3px;
 	@extend .body-2-semibold;
-	.svg-icon-wrapper {
-	  &.plus {
-		.svg-icon {
-		  height: 9px;
-		  width: 9px;
+	.svg-icon {
+	  &.__plus {
+		  width: 20px;
+		  height: 20px;
 		  fill: $blue;
-		}
 	  }
 	}
 	.catalog-tile-item-details {
@@ -136,6 +120,13 @@
 
 	.catalog-tile-add-new-vsp {
 	  color: $blue;
+		.svg-icon {
+			&.__plus {
+				width: 20px;
+				height: 20px;
+
+			}
+		}
 	  margin-left: 40px;
 	}
 	.catalog-tile-locking-user-name {
@@ -143,18 +134,12 @@
 	  @include ellipsis(auto, inline-block, 180px);
 	}
 	.catalog-tile-check-in-status {
-	  .svg-icon-wrapper {
-		&.locked {
-		  .svg-icon {
-			width: 11px;
+	  .svg-icon {
+		&.__locked {
 			fill: $gray;
-		  }
 		}
-		&.unlocked {
-		  .svg-icon {
-			width: 11px;
+		&.__unlocked {
 			fill: $gray;
-		  }
 		}
 	  }
 	}
diff --git a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
index aa3cf04c4f..d17dcdd685 100644
--- a/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
+++ b/openecomp-ui/resources/scss/modules/onboardingCatalog/_createItemTile.scss
@@ -37,12 +37,14 @@
 	  }
 	}
 	.create-item-plus-icon{
-	  width: 19px;
-	  height: 19px;
-	  margin: -5px 12px 0 0;
-			.svg-icon.plus {
-			height: 19px;
-			width: 19px;
+		margin: -5px 12px 0 0;
+		height: 19px;
+		width: 19px;
+		.svg-icon {
+			&.__plus {
+				width: 19px;
+				height: 19px;
+			}
 		}
 	}
 	&.vlm-type {