Replaced old implementation at root

Old project files and directories has been moved
under 'deprecated-workflow-designer'. The old project
is not built by the CI anymore, but can be still built manually.
New modules/directories have been moved up and integrated with
the CI system.

Change-Id: I1528c792bcbcce9e50bfc294a1328a20e72c91cf
Issue-ID: SDC-1559
Signed-off-by: vempo <vitaliy.emporopulo@amdocs.com>

11 files changed, 770 insertions, 0 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
new file mode 100644
index 00000000..48cd4cff
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
@@ -0,0 +1,16 @@
+.sdc-modal {
+  .custom-modal-wrapper {
+    padding: 35px 60px 60px 60px;
+    width: auto;
+  }
+
+}
+
+.modal-action-bar {
+  display: flex;
+  justify-content: flex-end;
+
+  button:first-child {
+    margin-right: 2em;
+  }
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss
new file mode 100644
index 00000000..2484a73e
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_expandableInput.scss
@@ -0,0 +1,56 @@
+.expandable-input-top {
+	display: flex;
+	height: 22px;
+	.expandable-input-wrapper {
+		display: flex;
+		&.closed {
+			.svg-icon
+			{
+				&.__search {
+					height: 17px;
+					width: 17px;
+					transition: fill 0.5s ease-in;
+					fill: $blue;
+					cursor: pointer;
+					&:hover {
+						transition: fill 0.5s ease-in;
+						fill: $dark-blue;
+					}
+				}
+			}
+		}
+		&.opened {
+			.svg-icon-wrapper {
+				margin-left: 3px;
+			}
+			.svg-icon {
+				&.__search {
+					height: 17px;
+					width: 17px;
+					fill: $dark-blue;
+				}
+			}
+			.svg-icon {
+				&.__close {
+					margin-left: 7px;
+					opacity: 0.6;
+					fill: $dark-gray;
+					&:hover {
+						opacity: 1;
+					}
+				}
+			}
+		}
+		.expandable-input-control {
+			.form-control {
+				border: none;
+				background-color: transparent;
+				border-radius: 0;
+				border-bottom: 1px solid $gray;
+				height: 22px;
+				padding: 0 5px;
+			}
+			margin: 0;
+		}
+	}
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss
new file mode 100644
index 00000000..4f7e309a
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_inputOptions.scss
@@ -0,0 +1,48 @@
+.disabled {
+	.Select-control {
+		background-color: $silver;
+		.Select-placeholder {
+			color: $dark-gray;
+		}
+	}
+}
+
+.input-options {
+  display: flex;
+  border: 1px solid $light-gray;
+  border-radius: 2px;
+  height: 30px;
+  &:hover {
+    border-color: $gray;
+  }
+  .input-options-select {
+    float: left;
+    border: none;
+    transition-property: width;
+    transition-duration: 300ms;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+
+  }
+
+  .input-options-other{
+    float: left;
+    height: 30px;
+    border: none;
+    padding-top:0px;
+    padding-bottom: 0px;
+    height:28px;
+  }
+  .input-options-separator {
+    width: 1px;
+    height: 24px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+    border:1px solid $light-gray;
+  }
+}
+
+.input-options.has-error {
+   border-color: $red;
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
new file mode 100644
index 00000000..bcd07ebe
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -0,0 +1,16 @@
+.workflow-app {
+  height: 100%;
+  * {
+    box-sizing: border-box;
+  }
+
+  .version-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+#root {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
new file mode 100644
index 00000000..eb91d7c7
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_loader.scss
@@ -0,0 +1,160 @@
+.onboarding-loader {
+    .onboarding-loader-backdrop {
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      background-color: #E1E4E6;
+      opacity: 0.5;
+    }
+    .tlv-loader {
+      height: 63px;
+      width: 63px;
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      margin-top: -10.5px;
+      margin-left: -10.5px;
+    }
+    .tlv-loader.large {
+      transform: scale(1);
+    }
+    .tlv-loader::before {
+      background-color: $gray;
+      border-radius: 50%;
+      box-shadow: 21px 21px 0px 0px $gray, 0px 42px 0px 0px $gray, -21px 21px 0px 0px $gray;
+      content: '';
+      display: block;
+      height: 21px;
+      width: 21px;
+      position: absolute;
+      left: 50%;
+      margin-left: -10.5px;
+    }
+    .tlv-loader::after {
+      border-radius: 50%;
+      content: '';
+      display: block;
+      position: absolute;
+      height: 21px;
+      width: 21px;
+      animation: dot-move-2 4.5s infinite ease-in;
+    }
+    @keyframes dot-move {
+      0% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+      25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+      }
+      50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+      }
+      75% {
+        background-color: $light-green;
+        left: 0;
+        top: 21px;
+      }
+      100% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+    }
+    @keyframes dot-move-2 {
+      0% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+      6.25% {
+        background-color: $blue;
+        left: 42px;
+        top: 21px;
+      }
+      12.5% {
+        background-color: $blue;
+        left: 21px;
+        top: 42px;
+      }
+      18.75% {
+        background-color: $blue;
+        left: 0;
+        top: 21px;
+      }
+      25% {
+        background-color: $yellow;
+        left: 21px;
+        top: 0;
+      }
+      31.25% {
+        background-color: $yellow;
+        left: 42px;
+        top: 21px;
+      }
+      37.5% {
+        background-color: $yellow;
+        left: 21px;
+        top: 42px;
+      }
+      43.75% {
+        background-color: $yellow;
+        left: 0;
+        top: 21px;
+      }
+      50% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 0;
+      }
+      56.25% {
+        background-color: $light-purple;
+        left: 42px;
+        top: 21px;
+      }
+      62.5% {
+        background-color: $light-purple;
+        left: 21px;
+        top: 42px;
+      }
+      68.75% {
+        background-color: $light-purple;
+        left: 0;
+        top: 21px;
+      }
+      75% {
+        background-color: $light-green;
+        left: 21px;
+        top: 0;
+      }
+      81.25% {
+        background-color: $light-green;
+        left: 42px;
+        top: 21px;
+      }
+      87.5% {
+        background-color: $light-green;
+        left: 21px;
+        top: 42px;
+      }
+      93.75% {
+        background-color: $light-green;
+        left: 0;
+        top: 21px;
+      }
+      100% {
+        background-color: $blue;
+        left: 21px;
+        top: 0;
+      }
+    }
+  }
+  
+  
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
new file mode 100644
index 00000000..695dc6a5
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -0,0 +1,63 @@
+.workflow-navigation-side-bar {
+  width: 245px;
+  height: 100%;
+  background-color: $white;
+  border-right: 1px solid $light-gray;
+  @include box-shadow(1px -1px 3px 0px $silver);
+  border-bottom: 0;
+
+  .navigation-side-content {
+    overflow: hidden;
+    height: 100%;
+
+    .navigation-group {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: $light-silver;
+      .group-name {
+        @include heading-4; 
+        @include semi-bold;       
+        @include ellipsis;        
+        display: block;        
+        padding: 24px 12px 13px 40px;
+        background-color: $white;
+        border-bottom: 1px solid $silver;
+      }
+    }
+
+    .navigation-group-items {
+      padding-left: 20px;
+
+      .navigation-group-item {
+        @include body-1;
+        cursor: pointer;
+        margin: 18px 0;
+        padding-left: 20px;
+        color: $dark-gray;
+        line-height: 17px;
+        &.selected-item {
+          padding-left: 0;
+          .collapse.in {
+            padding-left: 20px;
+          }
+        }
+        .navigation-group-item-name {
+          @include ellipsis;
+          white-space: normal;
+          &.selected {
+            @include body-1;
+            @include semi-bold;
+            border-left: 4px solid $blue;
+            padding-left: 18px;
+            color: $blue;
+          }
+          &.bold-name {
+            @include body-1;
+            @include semi-bold;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
new file mode 100644
index 00000000..cc44cfbc
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_notifications.scss
@@ -0,0 +1,7 @@
+.workflow-notifications-container {
+  position: absolute;
+  &.position-top-right {
+    right: 30px;
+    top: 50px;
+  }
+}
\ No newline at end of file
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss
new file mode 100644
index 00000000..efd68496
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_searchInput.scss
@@ -0,0 +1,59 @@
+.search-input-top {
+    display: flex;
+    height: 22px;
+    .search-input-wrapper {
+        display: flex;
+        &.closed {
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    transition: fill 0.5s ease-in;
+                    fill: $blue;
+                    cursor: pointer;
+                    &:hover {
+                        transition: fill 0.5s ease-in;
+                        fill: $dark-blue;
+                    }
+                }
+            }
+        }
+        &.opened {
+            .svg-icon-wrapper {
+                margin-left: 3px;
+            }
+            .svg-icon {
+                &.__search {
+                    height: 17px;
+                    width: 17px;
+                    fill: $dark-blue;
+                }
+            }
+            .svg-icon {
+                &.__close {
+                    margin-left: 7px;
+                    opacity: 0.6;
+                    fill: $dark-gray;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+        .search-input-control {
+            .input-control {
+                border: none;
+                background-color: transparent;
+                border-radius: 0;
+                border-bottom: 1px solid $gray;
+                height: 22px;
+                padding: 0 5px;
+                outline: 0;
+                box-shadow: none;
+                transition: border-color ease-in-out 0.95s,
+                    box-shadow ease-in-out 0.95s;
+            }
+            margin: 0;
+        }
+    }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
new file mode 100644
index 00000000..1847ff30
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -0,0 +1,57 @@
+
+.tree-view {
+	overflow: hidden;
+
+	&.scrollable {
+		overflow: auto;
+	}
+
+	.node {
+		text-shadow: none;
+		stroke: none;
+
+		.outer-circle {
+			stroke: $blue;
+			stroke-width: 2px;
+			fill: $white;
+		}
+
+		.inner-circle {
+			fill: $blue;
+		}
+
+		text {
+			text-anchor: end;
+			@include body-2;
+			@include semi-bold;
+			fill: $blue;
+		}
+
+		&.clickable {
+			cursor: pointer;
+		}
+
+		&.selectedNode {
+			.outer-circle {
+				fill: $blue;
+			}
+
+			.inner-circle {
+				fill: $blue;
+			}
+
+			text {
+				fill: $blue;
+			}
+		}
+	}
+
+
+	.link {
+		fill: none;
+		stroke: $dark-gray;
+		stroke-opacity: 0.4;
+		stroke-width: 1.5px;
+	}
+
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss
new file mode 100644
index 00000000..176e5469
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_validationForm.scss
@@ -0,0 +1,117 @@
+form {
+  .validation-form-content {
+    .validation-input-wrapper {
+      position: relative;
+      flex: 1;
+    }
+    .validation-radio-wrapper {
+      position: relative;
+    }
+    .sdc-tabs {
+      position: relative;
+      .invalid-tab:not(.sdc-tab-active) {
+        color: $red;
+      }
+    }
+    .validation-error-message {
+      &.bottom {
+        .tooltip-arrow {
+          border-bottom-color: $red;
+        }
+      }
+      &.right {
+        .tooltip-arrow {
+          border-right-color: $red;
+        }
+      }
+      &.left {
+        .tooltip-arrow {
+          border-left-color: $red;
+        }
+      }
+      .tooltip-inner {
+        background-color: $red;
+      }
+    }
+    .input-row {
+      padding-bottom: 32px;
+      &:only-child {
+        padding-bottom: 0;
+      }
+      &:last-child {
+        padding-bottom: 0;
+      }
+      .form-group {
+        margin-bottom: 0;
+      }
+    }
+
+    .rows-section {
+      .row-flex-components {
+        display: flex;
+      }
+      .validation-input-wrapper {
+        flex: 1;
+      }
+      .empty-col {
+        flex: 1.2;
+        content: ' ';
+      }
+      .empty-two-col {
+        flex: 2.4;
+        content: ' ';
+      }
+
+      .two-col {
+        flex: 2.2;
+      }
+      .three-col {
+        flex: 3.4;
+      }
+      .single-col {
+        flex: 1.2;
+        display: flex;
+        &:after {
+          flex: 0.2;
+          content: ' ';
+        }
+        @media (min-width: 1389px) {
+          &.add-line-break {
+            .control-label {
+              &:after {
+                content: "\00a0";
+                display: block;
+              }
+            }
+          }
+        }
+
+      }
+    }
+  }
+
+  .validation-buttons {
+    padding: 20px 0;
+    text-align: right;
+    button:first-child {
+      margin-right: 15px;
+    }
+    .svg-icon {
+      height: 14px;
+      width: 14px;
+    }
+    .svg-icon.check {
+      fill: $white;
+    }
+    .svg-icon.close {
+      fill: $blue;
+    }
+  }
+}
+
+.modal-body {
+  .validation-buttons {
+    padding: 20px 15px;
+    background-color: $light-silver;
+  }
+}
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
new file mode 100644
index 00000000..fe397d31
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -0,0 +1,171 @@
+.version-controller-bar {
+	display: flex;
+	height: 70px;
+	border-bottom: 1px solid $silver;
+	background-color: transparent;
+
+	.group-name-wrapper {
+		width: 245px;
+		.group-name {
+			@include heading-4;
+			@include semi-bold;
+			@include ellipsis;
+			display: block;
+			padding: 24px 12px 13px 40px;
+			background-color: $white;
+		}
+	}
+
+	.vc-container {
+		display: flex;
+		flex: 1;
+		align-self: center;
+		background-color: transparent;
+		justify-content: space-between;
+		align-items: center;
+		padding-left: 16px;
+		padding-right: 40px;
+		border-left: 1px solid #eaeaea;
+
+		.vc-separator {
+			border-left: 1px solid $silver;
+			height: 37px;
+			margin-left: 5px;
+			margin-right: 5px;
+		}
+
+		.version-status-container {
+			.version-selector-more-versions {
+				color: $blue;
+				cursor: pointer;
+			}
+
+			.version-selector {
+				margin-top: 0px;
+				padding-right: 10px;
+				margin-right: 15px;
+				margin-left: 10px;
+				border-color: $light-gray;
+				border-radius: 2px;
+				width: 243px;
+				height: 30px;
+				@include body-1;
+			}
+
+			.version-section {
+				.form-group {
+					margin-right: 20px;
+
+					.input-options {
+						border: none;
+
+						.input-options-select {
+							padding-top: 4px;
+						}
+					}
+				}
+			}
+
+			.vc-status {
+				display: flex;
+				padding-left: 20px;
+				border-left: $light-gray thin solid;
+
+				.status-text {
+					align-self: center;
+					margin-top: 2px;
+					@include heading-5;
+					color: $dark-gray;
+				}
+			}
+		}
+
+		.save-submit-cancel-container {
+			display: flex;
+			align-items: center;
+			height: 100%;
+
+			.action-buttons, .select-action-buttons, .vc-save-section, .vc-submit-section {
+				display: flex;
+				align-items: center;
+				height: 100%;
+				cursor: $cursor-pointer;
+
+				.vc-submit-button {
+					border: 1px solid $dark-gray;
+					width: 94px;
+					height: 30px;
+					border-radius: 2px;
+					padding-top: 5px;
+					padding-left: 10px;
+					margin-left: 10px;
+					margin-right: 10px;
+
+					&:hover:not(.disabled) {
+						cursor: pointer;
+						background-color: $silver;
+					}
+
+					&.disabled {
+						border-color: $light-gray;
+					}
+
+					.vc-v-submit {
+						width: 11px;
+						height: 8px;
+						margin-right: 10px;
+						position: relative;
+						top: -1px;
+					}
+				}
+
+				.certifyBtn {
+					margin-left: 10px;
+				}
+
+				.version-control-buttons {
+					display: flex;
+				}
+
+				.action-button-wrapper {
+					display: flex;
+					align-items: center;
+					height: 70px;
+
+					&:hover:not(.disabled) {
+						background-color: $silver;
+					}
+
+					&:active:not(.disabled) {
+						background-color: $light-gray;
+					}
+
+					.action-buttons-svg {
+						padding-left: 10px;
+						padding-right: 10px;
+
+						.svg-icon {
+							fill: $text-black;
+							height: 20px;
+
+							&, &.__version-controller-save { width: 20px; }
+							&.__version-controller-permissions { width: 32px; }
+							&.__version-controller-undo, &.__version-controller-revert { width: 20px; }
+							&.__version-controller-sync, &.__version-controller-commit { width: 28px; }
+						}
+					}
+
+				}
+
+				.action-button-label {
+					@include body-4;
+					display: block;
+					height: 1em;
+					margin-top: 5px;
+					margin-bottom: 0;
+				}
+
+			}
+		}
+	}
+}