react 16 upgrade

Issue-ID: SDC-1762
Change-Id: I7701f12fc63bb09f8c985c7c893b984701dcbfab
Signed-off-by: Einav Keidar <einavw@amdocs.com>

1 files changed, 345 insertions, 344 deletions

diff --git a/openecomp-ui/resources/scss/modules/_versionsPage.scss b/openecomp-ui/resources/scss/modules/_versionsPage.scss
index 5651c89032..c29230198a 100644
--- a/openecomp-ui/resources/scss/modules/_versionsPage.scss
+++ b/openecomp-ui/resources/scss/modules/_versionsPage.scss
@@ -1,360 +1,361 @@
 .dox-ui-punch-out {
-  background-color: $content-background-color;
+    background-color: $content-background-color;
 }
 
 .dox-ui-punch-out.dox-ui-punch-out-full-page {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  overflow-y: auto;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    overflow-y: auto;
 }
 
 @mixin version-page-box-shadow() {
-	box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
+    box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06);
 }
 
-@mixin version-page-sub-title(){
-	color: $text-black;
-	text-transform: uppercase;
-	background-color: $white;
-	border-bottom: 1px solid $light-gray;
-	padding: 12px 0 10px 23px;
+@mixin version-page-sub-title() {
+    color: $text-black;
+    text-transform: uppercase;
+    background-color: $white;
+    border-bottom: 1px solid $light-gray;
+    padding: 12px 0 10px 23px;
 }
 
 .versions-tree-modal {
-	.modal-dialog {
-		width: 800px;
-	}
-
-	.tree-view {
-		display: flex;
-    align-items: center;
-	}
+    .tree-view {
+        display: flex;
+        align-items: center;
+    }
 }
 
 .versions-page-view {
-	height: 100%;
-	background-color: $background-gray;
-	overflow: auto;
-	padding: 35px 50px 20px 50px;
-
-	.svg-icon-wrapper {
-		justify-content: flex-start;
-	}
-	.version-page-header {
-		display: flex;
-		justify-content: space-between;
-		.versions-page-title {
-			@extend .heading-1;
-			text-transform: uppercase;
-			margin-bottom: 29px;
-			color: $blue;
-			display: flex;
-			.archived-title {
-				@extend .body-3;
-				color: $white;
-				background-color: $dark-purple;
-				margin-left: 20px;
-				border-radius: 3px;
-				padding: 1px 10px;
-				align-self: center;
-				text-transform: none;
-			}
-		}
-		.deprecate-btn-wrapper {
-			display: flex;
-			justify-content: flex-end;
-			margin-bottom: 10px;
-			align-self: center;
-			.svg-icon-wrapper {
-				&:hover {
-					fill: $light-blue;
-				}
-				.svg-icon {
-					width: 24px;
-					height: 24px;
-				}
-			}
-		}
-	}		
-	.versions-page-permissions-view-wrapper {
-		@extend .body-1-semibold;
-		@include version-page-box-shadow();
-
-		.permissions-view-wrapper-title {
-			@include version-page-sub-title();
-		}
-
-		.svg-icon-wrapper.user-view {
-			fill: transparent;
-			stroke: $blue;
-			.svg-icon {
-				height: 18px;
-				width: 16px;
-				margin: 0 7px;
-			}
-			&.current-user {
-				.svg-icon {
-					background-color: $blue;
-					stroke: $white;
-					padding-top: 5px;
-					padding-bottom: 3px;
-					height: 29px;
-					width: 29px;
-					border-radius: 20px;
-					border: 1px solid $blue;
-					box-shadow: inset 0px 0px 0px 2px $white;
-					margin: 0;
-				}
-				.svg-icon-label {
-					margin-left: 7px;
-				}
-			}
-			.svg-icon-label {
-				@extend .body-2;
-				color: $dark-gray;
-				margin-left: 6px;
-			}
-		}
-
-		.permissions-view-content {
-			padding: 20px 40px 20px 25px;
-			background-color: $white;
-
-			height: 120px;
-			display: flex;
-		}
-
-		.permissions-view {
-			display: flex;
-			flex: 1;
-			flex-direction: column;
-			justify-content: space-around;
-
-			.permissions-view-title {
-				text-transform: uppercase;
-				color: $dark-gray;
-			}
-
-			.contributors-view, .owner-view {
-				display: flex;
-				height: 16px;
-				@extend .body-1-semibold;
-
-				.permissions-view-title {
-					width: 130px;
-					line-height: 16px;
-				}
-
-				.extra-contributors {
-					border-radius: 30px;
-					background-color: $gray;
-					width: 26px;
-					height: 26px;
-					padding-right: 2px;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					color: $white;
-					cursor: default;
-					&:hover {
-						background-color: $dark-gray;
-					}
-				}
-
-				.user-view {
-					margin-right: 38px;
-				}
-
-				.manage-permissions {
-					color: $blue;
-					margin-left: auto;
-					cursor: pointer;
-
-					&:hover {
-						color: $dark-blue;
-					}
-				}
-			}
-		}
-	}
-
-	.versions-page-list-and-tree {
-		display: flex;
-		margin-top: 20px;
-
-		.version-tree-wrapper {
-			display: flex;
-			flex-direction: column;
-			margin-right:10px;
-			transition: all 1s ease;
-			@include version-page-box-shadow();
-
-			.version-tree-title-container {
-				display: flex;
-				align-items: center;
-				height: 40px;
-				@include version-page-sub-title();
-				padding-right: 10px;
-
-				.version-tree-full-screen {
-					margin-left: auto;
-				}
-			}
-
-			.tree-view {
-				background-color: $white;
-				flex: 1;
-
-				.node:not(.selectedNode):hover {
-					.outer-circle, .inner-circle {
-						transform: scale(1.1);
-					}
-				}
-			}
-		}
-	}
-
-	.version-list {
-		flex: 1;
-		@extend .body-1-semibold;
-		color: $text-black;
-		display: flex;
-		flex-direction: column;
-
-		.version-list-items {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-
-			.version-item-row {
-				border-bottom: 1px solid $tlv-light-gray;
-
-				&:last-child {
-					border-bottom: none;
-				}
-			}
-		}
-
-		.version-item-row {
-			$row-hover-color: lighten($blue, 54%);
-			$row-active-color: lighten($blue, 51%);
-
-			display: flex;
-			align-items: center;
-			padding: 15px 30px;
-			@include version-page-box-shadow();
-			background-color: $white;
-			height: 70px;
-
-			&:hover {
-				background-color: $row-hover-color;
-			}
-
-			&.selected {
-				box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 $blue;
-				background-color: $row-active-color;
-
-				&:hover {
-					box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06), inset 5px 0 0 0 lighten($blue, 35%);
-				}
-			}
-
-			&.header-row {
-				height: 40px;
-
-				@extend .body-1-semibold;
-				@include version-page-sub-title();
-				padding: 15px 27px;
-
-				&:hover {
-					background-color: $white;
-					pointer-events: none;
-					&:active {
-						background-color: $white;
-						@include version-page-box-shadow();
-					}
-				}
-				.header-field.actions {
-					margin-right: 57px;
-				}
-			}
-
-			.version-item-field {
-				flex: 1;
-				display: flex;
-				margin-right: 10px;
-
-				&.item-version, &.item-status {
-					flex: 0 1 10%;
-					@extend .body-1-semibold;
-					color: $text-black;
-				}
-
-				&.item-description, &.item-last-edited {
-					@extend .body-1;
-					color: $dark-gray;
-				}
-
-				&.item-description, &.header-description {
-					flex: 2 1 0;
-				}
-
-				&.item-description > .description-text {
-					margin-right: 10px;
-					@include ellipsis($max-width: 300px);
-					width: initial;
-				}
-
-				&.item-actions {
-					display: flex;
-					flex: 1 1 3%;
-					justify-content: space-between;
-				}
-
-				&.item-select, &.item-create {
-					@extend .body-1;
-					flex: 0 1 auto;
-					margin-right: 0;
-
-					.svg-icon-wrapper {
-						fill: $blue;
-						color: $blue;
-
-						&[disabled] {
-							cursor: default;
-						}
-
-						.svg-icon {
-							width: 16px;
-							height: 16px;
-						}
-
-						&:hover:not([disabled]) {
-							fill: $dark-blue;
-							color: $dark-blue;
-						}
-					}
-				}
-
-			}
-
-			/* To keep ellipsis hider's background the same color as row background */
-			&:not(.selected):hover .item-description > .description-text:after {
-				background: $row-hover-color;
-			}
-
-			&:hover:active .item-description > .description-text:after {
-				background: $row-active-color;
-			}
-
-		}
-
-	}
-
-	&.clickable {
-		cursor: pointer;
-	}
+    height: 100%;
+    background-color: $background-gray;
+    overflow: auto;
+    padding: 35px 50px 20px 50px;
+
+    .svg-icon-wrapper {
+        justify-content: flex-start;
+    }
+    .version-page-header {
+        display: flex;
+        justify-content: space-between;
+        .versions-page-title {
+            @extend .heading-1;
+            text-transform: uppercase;
+            margin-bottom: 29px;
+            color: $blue;
+            display: flex;
+            .archived-title {
+                @extend .body-3;
+                color: $white;
+                background-color: $dark-purple;
+                margin-left: 20px;
+                border-radius: 3px;
+                padding: 1px 10px;
+                align-self: center;
+                text-transform: none;
+            }
+        }
+        .deprecate-btn-wrapper {
+            display: flex;
+            justify-content: flex-end;
+            margin-bottom: 10px;
+            align-self: center;
+            .svg-icon-wrapper {
+                &:hover {
+                    fill: $light-blue;
+                }
+                .svg-icon {
+                    width: 24px;
+                    height: 24px;
+                }
+            }
+        }
+    }
+    .versions-page-permissions-view-wrapper {
+        @extend .body-1-semibold;
+        @include version-page-box-shadow();
+
+        .permissions-view-wrapper-title {
+            @include version-page-sub-title();
+        }
+
+        .svg-icon-wrapper.user-view {
+            fill: transparent;
+            stroke: $blue;
+            .svg-icon {
+                height: 18px;
+                width: 16px;
+                margin: 0 7px;
+            }
+            &.current-user {
+                .svg-icon {
+                    background-color: $blue;
+                    stroke: $white;
+                    padding-top: 5px;
+                    padding-bottom: 3px;
+                    height: 29px;
+                    width: 29px;
+                    border-radius: 20px;
+                    border: 1px solid $blue;
+                    box-shadow: inset 0px 0px 0px 2px $white;
+                    margin: 0;
+                }
+                .svg-icon-label {
+                    margin-left: 7px;
+                }
+            }
+            .svg-icon-label {
+                @extend .body-2;
+                color: $dark-gray;
+                margin-left: 6px;
+            }
+        }
+
+        .permissions-view-content {
+            padding: 20px 40px 20px 25px;
+            background-color: $white;
+
+            height: 120px;
+            display: flex;
+        }
+
+        .permissions-view {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .permissions-view-title {
+                text-transform: uppercase;
+                color: $dark-gray;
+            }
+
+            .contributors-view,
+            .owner-view {
+                display: flex;
+                height: 16px;
+                @extend .body-1-semibold;
+
+                .permissions-view-title {
+                    width: 130px;
+                    line-height: 16px;
+                }
+
+                .extra-contributors {
+                    border-radius: 30px;
+                    background-color: $gray;
+                    width: 26px;
+                    height: 26px;
+                    padding-right: 2px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: $white;
+                    cursor: default;
+                    &:hover {
+                        background-color: $dark-gray;
+                    }
+                }
+
+                .user-view {
+                    margin-right: 38px;
+                }
+
+                .manage-permissions {
+                    color: $blue;
+                    margin-left: auto;
+                    cursor: pointer;
+
+                    &:hover {
+                        color: $dark-blue;
+                    }
+                }
+            }
+        }
+    }
+
+    .versions-page-list-and-tree {
+        display: flex;
+        margin-top: 20px;
+
+        .version-tree-wrapper {
+            display: flex;
+            flex-direction: column;
+            margin-right: 10px;
+            transition: all 1s ease;
+            @include version-page-box-shadow();
+
+            .version-tree-title-container {
+                display: flex;
+                align-items: center;
+                height: 40px;
+                @include version-page-sub-title();
+                padding-right: 10px;
+
+                .version-tree-full-screen {
+                    margin-left: auto;
+                }
+            }
+
+            .tree-view {
+                background-color: $white;
+                flex: 1;
+
+                .node:not(.selectedNode):hover {
+                    .outer-circle,
+                    .inner-circle {
+                        transform: scale(1.1);
+                    }
+                }
+            }
+        }
+    }
+
+    .version-list {
+        flex: 1;
+        @extend .body-1-semibold;
+        color: $text-black;
+        display: flex;
+        flex-direction: column;
+
+        .version-list-items {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+
+            .version-item-row {
+                border-bottom: 1px solid $tlv-light-gray;
+
+                &:last-child {
+                    border-bottom: none;
+                }
+            }
+        }
+
+        .version-item-row {
+            $row-hover-color: lighten($blue, 54%);
+            $row-active-color: lighten($blue, 51%);
+
+            display: flex;
+            align-items: center;
+            padding: 15px 30px;
+            @include version-page-box-shadow();
+            background-color: $white;
+            height: 70px;
+
+            &:hover {
+                background-color: $row-hover-color;
+            }
+
+            &.selected {
+                box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+                    inset 5px 0 0 0 $blue;
+                background-color: $row-active-color;
+
+                &:hover {
+                    box-shadow: 0 1px 4px 0 rgba(24, 24, 24, 0.06),
+                        inset 5px 0 0 0 lighten($blue, 35%);
+                }
+            }
+
+            &.header-row {
+                height: 40px;
+
+                @extend .body-1-semibold;
+                @include version-page-sub-title();
+                padding: 15px 27px;
+
+                &:hover {
+                    background-color: $white;
+                    pointer-events: none;
+                    &:active {
+                        background-color: $white;
+                        @include version-page-box-shadow();
+                    }
+                }
+                .header-field.actions {
+                    margin-right: 57px;
+                }
+            }
+
+            .version-item-field {
+                flex: 1;
+                display: flex;
+                margin-right: 10px;
+
+                &.item-version,
+                &.item-status {
+                    flex: 0 1 10%;
+                    @extend .body-1-semibold;
+                    color: $text-black;
+                }
+
+                &.item-description,
+                &.item-last-edited {
+                    @extend .body-1;
+                    color: $dark-gray;
+                }
+
+                &.item-description,
+                &.header-description {
+                    flex: 2 1 0;
+                }
+
+                &.item-description > .description-text {
+                    margin-right: 10px;
+                    @include ellipsis($max-width: 300px);
+                    width: initial;
+                }
+
+                &.item-actions {
+                    display: flex;
+                    flex: 1 1 3%;
+                    justify-content: space-between;
+                }
+
+                &.item-select,
+                &.item-create {
+                    @extend .body-1;
+                    flex: 0 1 auto;
+                    margin-right: 0;
+
+                    .svg-icon-wrapper {
+                        fill: $blue;
+                        color: $blue;
+
+                        &[disabled] {
+                            cursor: default;
+                        }
+
+                        .svg-icon {
+                            width: 16px;
+                            height: 16px;
+                        }
+
+                        &:hover:not([disabled]) {
+                            fill: $dark-blue;
+                            color: $dark-blue;
+                        }
+                    }
+                }
+            }
+
+            /* To keep ellipsis hider's background the same color as row background */
+            &:not(.selected):hover .item-description > .description-text:after {
+                background: $row-hover-color;
+            }
+
+            &:hover:active .item-description > .description-text:after {
+                background: $row-active-color;
+            }
+        }
+    }
+
+    &.clickable {
+        cursor: pointer;
+    }
 }