Merge "bugRelease1 after changes"

28 files changed, 313 insertions, 323 deletions

diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
index cd5e6db5..edde536f 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/_common.scss
@@ -1,4 +1,5 @@
+@import '../../node_modules/sdc-ui/lib/style/scss/common/typography.scss';
 @import '../../node_modules/sdc-ui/lib/style/scss/common/variables.scss';
-@import 'common/customVariables';
 @import 'common/fonts';
 @import 'common/utils';
+@import 'common/customVariables';
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
index 9472fe68..1a532c88 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_customVariables.scss
@@ -1,90 +1,16 @@
 $cursor-disabled: not-allowed !default;
 $cursor-pointer: pointer;
 
-$heading-font-1: 28px;
-$heading-font-2: 24px;
-$heading-font-3: 20px;
-$heading-font-4: 16px;
-$heading-font-5: 14px;
-
-$body-font-1: 14px;
-$body-font-2: 13px;
-$body-font-3: 12px;
-$body-font-4: 10px;
-
-@mixin regular-font() {
-    font-family: OpenSans-Regular, Arial, sans-serif;
-    font-style: normal;
-    font-weight: 400;
-}
-
-@mixin italic-font() {
-    font-family: OpenSans-Italic, OpenSans-Regular, Arial, sans-serif;
-    font-style: italic;
-    font-weight: 400;
-}
-
-@mixin semibold-font() {
-    font-family: OpenSans-Semibold, Arial, sans-serif;
-    font-style: normal;
-    font-weight: 600;
-}
-
-@mixin body-1() {
-    @include regular-font;
-    font-size: $body-font-1;
-}
-
-@mixin body-1-semibold() {
-    @include semibold-font;
+@mixin body-1-emphasis() {
+    @include base-font-semibold;
     font-size: $body-font-1;
 }
 
-@mixin body-2() {
-    @include regular-font;
-    font-size: $body-font-2;
-}
-
-@mixin body-2-semibold() {
-    @include semibold-font;
-    font-size: $body-font-2;
-}
-
-@mixin body-3() {
-    @include regular-font;
-    font-size: $body-font-3;
-}
-
-@mixin body-4() {
-    @include regular-font;
-    font-size: $body-font-4;
-}
-
-@mixin heading-1() {
-    @include regular-font;
-    font-size: $heading-font-1;
-}
-
-@mixin heading-1-semibold() {
-    @include semibold-font;
+@mixin heading-1-emphasis() {
+    @include base-font-semibold;
     font-size: $heading-font-1;
 }
 
-@mixin heading-4() {
-    @include regular-font;
-    font-size: $heading-font-4;
-}
-
-@mixin heading-4-semibold() {
-    @include semibold-font;
-    font-size: $heading-font-4;
-}
-
-@mixin heading-5() {
-    @include regular-font;
-    font-size: $heading-font-5;
-}
-
 .flex {
     display: flex;
     flex: 1;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
index 3cf90bc9..7a35b38c 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/common/_utils.scss
@@ -74,6 +74,11 @@ $browserPrefixes: webkit moz o ms;
   @include prefix(box-shadow, $value, $box-shadow-radius-prefix);
 }
 
+@mixin sticky($value) {
+  position: sticky;
+  top: $value;
+}
+
 @mixin text-shadow($value) {
   @include prefix(text-shadow, $value, $text-shadow-radius-prefix);
 }
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
index c0cc1091..6862d554 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_layout.scss
@@ -23,4 +23,12 @@
         pointer-events: none;
         opacity: 0.4;
     }
+
+    .selectable {
+        user-select: text;
+    }
+
+    .separator {
+        border-left: 1px solid $silver;
+    }
 }
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
index 6cff0561..c830c028 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_navigationSideBar.scss
@@ -16,7 +16,7 @@
       flex-direction: column;
       background-color: $light-silver;
       .group-name {
-        @include heading-4-semibold;
+        @include heading-4-emphasis;
         @include ellipsis;
         display: block;
         padding: 24px 12px 13px 40px;
@@ -45,13 +45,13 @@
           @include ellipsis;
           white-space: normal;
           &.selected {
-            @include body-1-semibold;
+            @include body-1-emphasis;
             border-left: 4px solid $blue;
             padding-left: 18px;
             color: $blue;
           }
           &.bold-name {
-            @include body-1-semibold;
+            @include body-1-emphasis;
           }
         }
       }
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
index 6e1e9795..58f1f995 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_tree.scss
@@ -22,7 +22,7 @@
 
 		text {
 			text-anchor: end;
-			@include body-2-semibold;
+			@include body-2-emphasis;
 			fill: $blue;
 		}
 
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
index 45985a65..4fa8d841 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_versionController.scss
@@ -7,10 +7,10 @@
 	.group-name-wrapper {
 		width: 245px;
 		.group-name {
-			@include heading-4-semibold;
+			@include heading-4-emphasis;
 			@include ellipsis;
 			display: block;
-			padding: 24px 12px 13px 40px;
+			padding: 24px 12px 13px 20px;
 			background-color: $white;
 		}
 	}
@@ -25,6 +25,7 @@
 		padding-left: 16px;
 		padding-right: 100px;
 		border-left: 1px solid #eaeaea;
+		height: 45px;
 
 		.vc-separator {
 			border-left: 1px solid $silver;
@@ -33,12 +34,13 @@
 
 		.version-status-container {
 			.version-selector-more-versions {
+				@include body-1-emphasis;
 				color: $blue;
 				cursor: pointer;
 			}
 
 			.version-selector {
-				margin-top: 0px;
+				margin-top: 0;
 				padding-right: 10px;
 				margin-right: 15px;
 				margin-left: 10px;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
index 76f3f658..ea5bba28 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_catalog.scss
@@ -80,7 +80,7 @@
             }
             &__label {
                 text-transform: uppercase;
-                @include body-1-semibold;
+                @include body-1-emphasis;
             }
             &:hover {
                 color: $blue;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
index 6e8b3522..f11c2c0a 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_general.scss
@@ -1,19 +1,19 @@
 .general-page {
     @include body-1;
-    padding: 0 131px 20px 100px;
+    padding: 35px 90px 0 50px;
     background-color: #fff;
 
     .general-page-title {
         height: 110px;
         line-height: 110px;
-        @include heading-1-semibold;
+        @include heading-1-emphasis;
         color: $dark-gray;
     }
 
     .general-page-content {
         display: grid;
-        grid-template-columns: 50% 50%;
-        grid-gap: 30px;
+        grid-template-columns: 60% 40%;
+        grid-gap: 40px;
         color: #444;
 
         .description-part textarea {
@@ -24,7 +24,7 @@
         .version-info-part {
             background-color: $light-silver;
             height: 200px;
-            margin-top: 25px;
+            margin-top: 22px;
             padding: 20px;
             box-sizing: border-box;
             .label {
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
index 8625403f..bc12a150 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_inputOutput.scss
@@ -10,7 +10,7 @@
     &__title {
         height: 110px;
         line-height: 110px;
-        @include heading-1-semibold;
+        @include heading-1-emphasis;
         color: $dark-gray;
     }
 
@@ -26,7 +26,7 @@
 
     &__tab {
         padding: 12px;
-        @include body-1-semibold;
+        @include body-1-emphasis;
         @include border(1px, 1px, 0, 1px);
         background-color: $light-silver;
         color: $gray;
@@ -50,7 +50,7 @@
         overflow-y: auto;
         &__thead {
             background-color: $silver;
-            @include body-1-semibold;
+            @include body-1-emphasis;
             position: -webkit-sticky;
             position: sticky;
             top: 0px;
diff --git a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
index 67883fbb..24f632db 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/features/_overview.scss
@@ -1,19 +1,32 @@
 .overview-page {
   @include body-1;
-  padding: 25px;
+  color: $dark-gray;
+  overflow-y: auto;
+  height: 100vh;
 
   .overview-content {
     display: flex;
     flex-wrap: wrap;
+    min-height: 775px;
+
+    .overview-separator {
+      border-left: 1px solid $silver;
+    }
 
     .workflow-details {
       @extend .flex;
-      padding: 20px 0 0 60px;
+      @media (min-width: 1076px) {
+        @include sticky(30px);
+      }
+      max-height: 600px;
+      padding: 0 45px 0 56px;
       flex-direction: column;
 
-      .description-part textarea{
-        height: 200px;
-        padding-top: 5px;
+      .description-part {
+        padding-top: 20px;
+        textarea{
+          height: 200px;
+        }
       }
 
       .save-description {
@@ -31,7 +44,10 @@
           margin-bottom: 5px;
         }
         .value {
-          margin-bottom: 10px;
+          margin-bottom: 20px;
+          &:last-child {
+            margin-bottom: 0;
+          }
         }
       }
     }
@@ -45,7 +61,7 @@
   .overview-header {
     @include heading-1;
     text-transform: uppercase;
-    margin: 35px 0 35px 60px;
+    margin: 63px 0 35px 56px;
     color: $blue;
   }
 
@@ -56,24 +72,16 @@
   @mixin version-page-sub-title(){
     color: $text-black;
     text-transform: uppercase;
-    //background-color: $white;
     border-bottom: 1px solid $light-gray;
     padding: 12px 0 10px 45px;
   }
 
   .versions-page-view {
-    height: 100%;
-    overflow: auto;
-    padding: 0 35px 0 90px;
+    padding: 0 56px 0 45px;
     display: flex;
     flex: 2;
     flex-direction: column;
 
-    .svg-icon-wrapper {
-      justify-content: flex-start;
-      margin: 5px;
-    }
-
     .create-new-version {
       @extend .text-uppercase;
       display: flex;
@@ -104,7 +112,7 @@
 
     .versions-page-list-and-tree {
       display: flex;
-      margin-top: 20px;
+      margin-top: 10px;
 
       .version-tree-wrapper {
         display: flex;
@@ -113,7 +121,10 @@
         @include version-page-box-shadow();
 
         .version-tree-title-container {
-          @include body-1-semibold();
+          @include body-1-emphasis();
+          @media (min-width: 1076px) {
+            @include sticky(1px);
+          }
           background-color: $light-silver;
           display: flex;
           align-items: center;
@@ -143,7 +154,6 @@
 
     .version-list {
       @extend .flex;
-      color: $text-black;
       flex-direction: column;
 
       .version-list-items {
@@ -170,6 +180,7 @@
         padding: 15px 30px;
         @include version-page-box-shadow();
         height: 70px;
+        max-height: 70px;
 
         &:hover {
           background-color: $row-hover-color;
@@ -187,8 +198,10 @@
         &.header-row {
           height: 40px;
           background-color: $light-silver;
-
-          @include body-1-semibold();
+          @media (min-width: 1076px) {
+            @include sticky(1px);
+          }
+          @include body-1-emphasis();
           @include version-page-sub-title();
           padding: 15px 27px;
 
@@ -214,11 +227,10 @@
 
           &.item-description, &.item-last-edited {
             @include body-1;
-            color: $dark-gray;
           }
 
           &.item-description, &.header-description {
-            flex: 2 1 0;
+            flex: 1 1 0;
           }
 
           &.item-description > .description-text {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
index 71d5d7d8..9b020b5a 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/general/GeneralView.js
@@ -16,7 +16,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n, Translate } from 'react-redux-i18n';
+import { I18n } from 'react-redux-i18n';
 
 import Description from 'shared/components/Description';
 import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo';
@@ -31,9 +31,6 @@ const GeneralView = ({ onDataChange, versionInfo, isCertified }) => {
 
     return (
         <div className="general-page">
-            <div className="general-page-title">
-                <Translate value="workflow.general.headerTitle" />
-            </div>
             <div className="general-page-content">
                 <Description
                     description={versionInfo.description}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
index 2ef9ef7f..82b02c6c 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/InputOutputView.jsx
@@ -91,7 +91,7 @@ class InputOutputView extends React.Component {
 
         if (name.replace(/\s+/g, '')) {
             const title = I18n.t('workflow.inputOutput.DELETE');
-            const body = I18n.t('workflow.inputOutput.confirmDlete', {
+            const body = I18n.t('workflow.inputOutput.confirmDelete', {
                 name: name.replace(/s+$/g, '')
             });
             const closeButtonText = I18n.t('workflow.inputOutput.CANCEL');
@@ -126,11 +126,13 @@ class InputOutputView extends React.Component {
                 error.invalidCharacters &&
                 error.invalidCharacters.includes(i)
             ) {
-                errorMessage = I18n.t('workflow.inputOutput.invalidCharacters');
+                errorMessage = I18n.t(
+                    'workflow.errorMessages.invalidCharacters'
+                );
             } else if (error.alreadyExists && error.alreadyExists.includes(i)) {
-                errorMessage = I18n.t('workflow.inputOutput.alreadyExists');
+                errorMessage = I18n.t('workflow.errorMessages.alreadyExists');
             } else if (error.emptyName && error.emptyName.includes(i)) {
-                errorMessage = I18n.t('workflow.inputOutput.emptyName');
+                errorMessage = I18n.t('workflow.errorMessages.emptyName');
             }
 
             return (
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
index 38321c31..d0188875 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionControllerView.jsx
@@ -104,7 +104,7 @@ export default class VersionControllerView extends Component {
                     <ActionButtons
                         saveDisabled={isCertifyDisable || getIOErrors}
                         onSaveClick={this.sendSaveParamsToServer}
-                        certifyDisabled={isCertifyDisable}
+                        certifyDisabled={isCertifyDisable || getIOErrors}
                         onCertifyClick={this.certifyVersion}
                         onUndoClick={this.undoClickCallback}
                     />
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
index f0263773..ce3cd37c 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/__snapshots__/VersionControllerView_snapshot-test.js.snap
@@ -26,6 +26,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
       <div
         className="version-status-container"
       >
+        version
         <select
           className="version-selector"
           data-test-id="vc-versions-select-box"
@@ -51,7 +52,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
           className="select-action-buttons"
         >
           <div
-            className="vc-separator"
+            className="separator vc-separator"
           />
           <div
             className="action-button-wrapper clickable"
@@ -78,7 +79,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
             </div>
           </div>
           <div
-            className="vc-separator"
+            className="separator vc-separator"
           />
           <div
             className="action-button-wrapper clickable"
@@ -105,7 +106,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
             </div>
           </div>
           <div
-            className="vc-separator"
+            className="separator vc-separator"
           />
           <button
             className="sdc-button sdc-button__primary  certifyBtn "
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
index 224b249a..71f41406 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/ActionButtons.js
@@ -5,22 +5,21 @@
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
- *      http://www.apache.org/licenses/LICENSE-2.0
+*      http://www.apache.org/licenses/LICENSE-2.0
 *
- * Unless required by applicable law or agreed to in writing, software
+* Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 import React from 'react';
 import { I18n } from 'react-redux-i18n';
 import { Button } from 'sdc-ui/lib/react';
 import PropTypes from 'prop-types';
 import SvgButton from 'features/version/versionController/views/SvgButton';
 
-const Separator = () => <div className="vc-separator" />;
-
 const ActionButtons = props => {
     const {
         onSaveClick,
@@ -33,7 +32,7 @@ const ActionButtons = props => {
         <div className="save-submit-cancel-container">
             <div className="action-buttons">
                 <div className="select-action-buttons">
-                    <Separator />
+                    <div className={'separator vc-separator'} />
                     <SvgButton
                         dataTestId="vc-save-btn"
                         name="version-controller-save"
@@ -41,7 +40,7 @@ const ActionButtons = props => {
                         disabled={saveDisabled}
                         onClick={onSaveClick}
                     />
-                    <Separator />
+                    <div className={'separator vc-separator'} />
                     <SvgButton
                         dataTestId="vc-undo-btn"
                         name="version-controller-undo"
@@ -49,7 +48,7 @@ const ActionButtons = props => {
                         disabled={certifyDisabled}
                         onClick={onUndoClick}
                     />
-                    <Separator />
+                    <div className={'separator vc-separator'} />
                     <Button
                         className="certifyBtn"
                         btnType="primary"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
index 13266954..374e565a 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionsContainer.js
@@ -29,6 +29,7 @@ const VersionContainer = props => {
     return (
         <div className="version-section-wrapper">
             <div className="version-status-container">
+                {I18n.t('workflow.version')}
                 <VersionSelect
                     currentWorkflowVersion={currentWorkflowVersion}
                     viewableVersions={viewableVersions}
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
index ece4e5e1..e7b3c325 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflow.js
@@ -26,7 +26,8 @@ import {
 } from 'features/workflow/workflowSelectors';
 import {
     inputChangeAction,
-    submitWorkflowAction
+    submitWorkflowAction,
+    putNameError
 } from 'features/workflow/create/createWorkflowConstants';
 
 function mapStateToProps(state) {
@@ -34,7 +35,8 @@ function mapStateToProps(state) {
         translation: i18nSelector(state),
         workflowDescription: getWorkflowDescription(state),
         workflowName: getWorkflowName(state),
-        workflowParams: getWorkflowParams(state)
+        workflowParams: getWorkflowParams(state),
+        errorMessage: state.workflow.data.error
     };
 }
 
@@ -45,6 +47,7 @@ function mapDispatchToProps(dispatch) {
             dispatch(hideModalAction());
         },
         closeCreateWorkflowModal: () => dispatch(hideModalAction()),
+        putNameError: () => dispatch(putNameError()),
         workflowInputChange: payload => dispatch(inputChangeAction(payload))
     };
 }
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
index de6089d4..5b091322 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/CreateWorkflowView.jsx
@@ -27,12 +27,18 @@ const CreateWorkflowView = props => {
         submitWorkflow,
         closeCreateWorkflowModal,
         workflowParams,
-        history
+        history,
+        errorMessage,
+        putNameError
     } = props;
 
     function handleSubmitForm(e) {
         e.preventDefault();
-        submitWorkflow({ ...workflowParams, history });
+        if (workflowParams.name) {
+            submitWorkflow({ ...workflowParams, history });
+        } else {
+            putNameError();
+        }
     }
 
     return (
@@ -49,6 +55,7 @@ const CreateWorkflowView = props => {
                                 name: val
                             })
                         }
+                        errorMessage={errorMessage}
                         isRequired
                     />
                     <Description
@@ -79,7 +86,9 @@ CreateWorkflowView.propTypes = {
     workflowName: PropTypes.string,
     closeCreateWorkflowModal: PropTypes.func,
     workflowParams: PropTypes.object,
-    history: PropTypes.object
+    history: PropTypes.object,
+    errorMessage: PropTypes.string,
+    putNameError: PropTypes.func
 };
 
 CreateWorkflowView.defaultProps = {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
index a36e7efc..fc67605f 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowConstants.js
@@ -20,6 +20,7 @@ export const NEW_VERSION = {
 };
 export const WORKFLOW_INPUT_CHANGE = 'createWorkflow/INPUT_CHANGE';
 export const SUBMIT_WORKFLOW = 'createWorkflow/SUBMIT_WORKFLOW';
+export const EMPTY_NAME_ERROR = 'createWorkflow/EMPTY_NAME_ERROR';
 
 export const inputChangeAction = payload => ({
     type: WORKFLOW_INPUT_CHANGE,
@@ -30,3 +31,7 @@ export const submitWorkflowAction = payload => ({
     type: SUBMIT_WORKFLOW,
     payload
 });
+
+export const putNameError = () => ({
+    type: EMPTY_NAME_ERROR
+});
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
index ee947f8d..01f52fc6 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/createWorkflowSelector.js
@@ -15,12 +15,12 @@
 */
 import { createSelector } from 'reselect';
 import {
-    getWorkflowName,
+    getTrimWorkflowName,
     getWorkflowDescription
 } from 'features/workflow/workflowSelectors';
 
 export const getWorkflowParams = createSelector(
-    getWorkflowName,
+    getTrimWorkflowName,
     getWorkflowDescription,
     (name, description) => {
         return {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
index f02b40b0..d0bbdef5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/OverviewView.jsx
@@ -34,7 +34,8 @@ class OverviewView extends Component {
         isVersionsCertifies: PropTypes.bool,
         location: PropTypes.object,
         match: PropTypes.object,
-        updateWorkflow: PropTypes.func
+        updateWorkflow: PropTypes.func,
+        workflowInputChange: PropTypes.func
     };
 
     constructor(props) {
@@ -67,6 +68,11 @@ class OverviewView extends Component {
         updateWorkflow({ ...workflow, ...payload });
     };
 
+    workflowDetailsChanged = payload => {
+        const { workflowInputChange } = this.props;
+        workflowInputChange({ ...payload });
+    };
+
     render() {
         const {
             versions,
@@ -80,28 +86,29 @@ class OverviewView extends Component {
             parent: version.baseId || ''
         }));
         return (
-            <div>
-                <div className="overview-page">
-                    <WorkflowHeader name={workflow.name} />
-                    <div className="overview-content">
-                        <WorkflowDetails
-                            name={workflow.name}
-                            description={workflow.description}
-                            modified={workflow.modified}
-                            created={workflow.created}
-                            workflowId={workflow.id}
-                            versionId={selectedVersion}
-                            updateWorkflow={this.onUpdateWorkflow}
-                        />
-                        <WorkflowVersions
-                            nodeVersions={nodeVersions}
-                            versions={versions}
-                            onCreateVersion={this.onCreateNewVersionFromTable}
-                            onSelectVersion={this.onSelectVersionFromTable}
-                            selectedVersion={selectedVersion}
-                            isVersionsCertifies={isVersionsCertifies}
-                        />
-                    </div>
+            <div className="overview-page">
+                <WorkflowHeader name={workflow.name} />
+                <div className="overview-content">
+                    <WorkflowDetails
+                        name={workflow.name}
+                        description={workflow.description}
+                        modified={workflow.modified}
+                        created={workflow.created}
+                        workflowId={workflow.id}
+                        versionId={selectedVersion}
+                        workflowDetailsChanged={this.workflowDetailsChanged}
+                        updateWorkflow={this.onUpdateWorkflow}
+                    />
+
+                    <div className={'separator overview-separator'} />
+                    <WorkflowVersions
+                        nodeVersions={nodeVersions}
+                        versions={versions}
+                        onCreateVersion={this.onCreateNewVersionFromTable}
+                        onSelectVersion={this.onSelectVersionFromTable}
+                        selectedVersion={selectedVersion}
+                        isVersionsCertifies={isVersionsCertifies}
+                    />
                 </div>
             </div>
         );
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
index 1014e4b6..dea9c1c5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
@@ -1,190 +1,191 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`OverviewView Snapshot renders correctly 1`] = `
-<div>
+<div
+  className="overview-page"
+>
   <div
-    className="overview-page"
+    className="overview-header"
+  >
+    wf1
+     - 
+    title
+  </div>
+  <div
+    className="overview-content"
   >
     <div
-      className="overview-header"
-    >
-      wf1
-       - 
-      title
-    </div>
-    <div
-      className="overview-content"
+      className="workflow-details"
     >
-      <div
-        className="workflow-details"
+      <form
+        onSubmit={[Function]}
       >
-        <form
-          onSubmit={[Function]}
+        <div
+          className="sdc-input "
         >
-          <div
-            className="sdc-input "
+          <label
+            className="sdc-input__label  required"
+            htmlFor="workflowName"
           >
-            <label
-              className="sdc-input__label  required"
-              htmlFor="workflowName"
-            >
-              name
-            </label>
-            <input
-              className="sdc-input__input  "
-              data-test-id={undefined}
-              disabled={true}
-              id="workflowName"
-              name="workflowName"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onKeyDown={[Function]}
-              placeholder={undefined}
-              readOnly={false}
-              type="text"
-              value="wf1"
-            />
-          </div>
+            name
+          </label>
+          <input
+            className="sdc-input__input  "
+            data-test-id={undefined}
+            disabled={true}
+            id="workflowName"
+            name="workflowName"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onKeyDown={[Function]}
+            placeholder={undefined}
+            readOnly={false}
+            type="text"
+            value="wf1"
+          />
+        </div>
+        <div
+          className="description-part"
+        >
           <div
-            className="description-part"
+            className="sdc-input"
           >
             <div
-              className="sdc-input"
+              className="sdc-input__label"
             >
-              <div
-                className="sdc-input__label"
-              >
-                description
-              </div>
-              <textarea
-                className="custom-textarea field-section sdc-input__input"
-                data-test-id="description"
-                disabled={false}
-                onChange={[Function]}
-                value="desc 1"
-              />
+              description
             </div>
-          </div>
-          <div
-            className="save-description"
-          >
-            <button
-              className="sdc-button sdc-button__primary   "
+            <textarea
+              className="custom-textarea field-section sdc-input__input"
+              data-test-id="description"
               disabled={false}
-              onClick={undefined}
-            >
-              saveBtn
-            </button>
+              onChange={[Function]}
+              value="desc 1"
+            />
           </div>
-        </form>
+        </div>
         <div
-          className="version-info-part"
+          className="save-description"
         >
-          
-          <div
-            className="label"
-          >
-            Invariant UUID
-          </div>
-          <div
-            className="value"
+          <button
+            className="sdc-button sdc-button__primary   "
+            disabled={false}
+            onClick={undefined}
           >
-            id1
-          </div>
+            saveBtn
+          </button>
+        </div>
+      </form>
+      <div
+        className="version-info-part"
+      >
+        
+        <div
+          className="label"
+        >
+          Invariant UUID
+        </div>
+        <div
+          className="value selectable"
+        >
+          id1
         </div>
       </div>
+    </div>
+    <div
+      className="separator overview-separator"
+    />
+    <div
+      className="workflow-versions"
+    >
       <div
-        className="workflow-versions"
+        className="versions-page-view"
       >
         <div
-          className="versions-page-view"
+          className="create-new-version newVersionDisabled"
         >
           <div
-            className="create-new-version newVersionDisabled"
+            className="create-item-plus-icon"
+            onClick={[Function]}
           >
             <div
-              className="create-item-plus-icon"
-              onClick={[Function]}
+              className="svg-icon-wrapper   __secondary  bottom"
+              disabled={undefined}
+              onClick={undefined}
+            >
+              <test-file-stub
+                className="svg-icon __plus"
+              />
+              
+            </div>
+            newVersion
+          </div>
+        </div>
+        <div
+          className="versions-page-list-and-tree"
+        >
+          <div
+            className="version-tree-wrapper"
+          >
+            <div
+              className="version-tree-title-container"
             >
               <div
-                className="svg-icon-wrapper   __secondary  bottom"
-                disabled={undefined}
-                onClick={undefined}
+                className="version-tree-title"
               >
-                <test-file-stub
-                  className="svg-icon __plus"
-                />
-                
+                Version Tree
               </div>
-              newVersion
+            </div>
+            <div
+              className="tree-view versions-tree-container "
+            >
+              <svg
+                className="versions-tree"
+                width={200}
+              />
             </div>
           </div>
           <div
-            className="versions-page-list-and-tree"
+            className="version-list"
           >
             <div
-              className="version-tree-wrapper"
+              className="version-item-row header-row "
+              data-test-id="version-item-row"
+              onClick={[Function]}
             >
               <div
-                className="version-tree-title-container"
+                className="version-item-field header-field item-version"
               >
-                <div
-                  className="version-tree-title"
-                >
-                  Version Tree
-                </div>
+                Version
               </div>
               <div
-                className="tree-view versions-tree-container "
+                className="version-item-field header-field item-status"
               >
-                <svg
-                  className="versions-tree"
-                  width={200}
-                />
+                Status
               </div>
-            </div>
-            <div
-              className="version-list"
-            >
               <div
-                className="version-item-row header-row "
-                data-test-id="version-item-row"
-                onClick={[Function]}
+                className="version-item-field header-field"
               >
-                <div
-                  className="version-item-field header-field item-version"
-                >
-                  Version
-                </div>
-                <div
-                  className="version-item-field header-field item-status"
-                >
-                  Status
-                </div>
-                <div
-                  className="version-item-field header-field"
+                <span
+                  className={undefined}
+                  style={undefined}
                 >
-                  <span
-                    className={undefined}
-                    style={undefined}
-                  >
-                    lastEdited
-                  </span>
-                </div>
+                  lastEdited
+                </span>
+              </div>
+              <div
+                className="version-item-field header-field"
+              >
                 <div
-                  className="version-item-field header-field"
+                  className="description-text"
                 >
-                  <div
-                    className="description-text"
-                  >
-                    Description
-                  </div>
+                  Description
                 </div>
               </div>
-              <div
-                className="version-list-items"
-              />
             </div>
+            <div
+              className="version-list-items"
+            />
           </div>
         </div>
       </div>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
index 493ad650..f98368ca 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/views/WorkflowDetails.jsx
@@ -22,24 +22,20 @@ import Description from 'shared/components/Description';
 import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo';
 
 class WorkflowDetails extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            editWorkflow: ''
-        };
-    }
-
-    workflowDetailsChanged = val => {
-        this.setState({ editWorkflow: val });
-    };
-
     handleSubmitForm = e => {
         e.preventDefault();
-        this.props.updateWorkflow(this.state.editWorkflow);
+        const { description } = this.props;
+        this.props.updateWorkflow(description);
     };
 
     render() {
-        const { name, description, workflowId, versionId } = this.props;
+        const {
+            name,
+            workflowId,
+            versionId,
+            description,
+            workflowDetailsChanged
+        } = this.props;
         return (
             <div className="workflow-details">
                 <form onSubmit={this.handleSubmitForm}>
@@ -52,10 +48,8 @@ class WorkflowDetails extends Component {
                         disabled
                     />
                     <Description
-                        description={
-                            this.state.editWorkflow.description || description
-                        }
-                        onDataChange={this.workflowDetailsChanged}
+                        description={description}
+                        onDataChange={workflowDetailsChanged}
                     />
                     <div className="save-description">
                         <Button btnType="primary">
@@ -79,9 +73,11 @@ WorkflowDetails.propTypes = {
     created: PropTypes.string,
     modified: PropTypes.string,
     description: PropTypes.string,
+    defaultDescription: PropTypes.string,
     workflowId: PropTypes.string,
     versionId: PropTypes.string,
-    updateWorkflow: PropTypes.func
+    updateWorkflow: PropTypes.func,
+    workflowDetailsChanged: PropTypes.func
 };
 
 export default WorkflowDetails;
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
index 09e0b499..3b7e17b4 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowReducer.js
@@ -13,7 +13,12 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { WORKFLOW_INPUT_CHANGE } from 'features/workflow/create/createWorkflowConstants';
+
+import { I18n } from 'react-redux-i18n';
+import {
+    WORKFLOW_INPUT_CHANGE,
+    EMPTY_NAME_ERROR
+} from 'features/workflow/create/createWorkflowConstants';
 import {
     SET_WORKFLOW,
     CLEAR_WORKFLOW_DATA
@@ -32,6 +37,11 @@ function workflowReducer(state = {}, action) {
             return {
                 ...action.payload
             };
+        case EMPTY_NAME_ERROR:
+            return {
+                ...state,
+                error: I18n.t('workflow.errorMessages.emptyName')
+            };
         default:
             return state;
     }
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
index 140599b8..bef67c2f 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/workflowSelectors.js
@@ -15,6 +15,8 @@
 */
 
 export const getWorkflowName = state =>
+    state && state.workflow.data.name && state.workflow.data.name;
+export const getTrimWorkflowName = state =>
     state && state.workflow.data.name && state.workflow.data.name.trim();
 export const getWorkflowId = state => state && state.workflow.data.id;
 export const getWorkflowDescription = state =>
diff --git a/workflow-designer-ui/src/main/frontend/src/i18n/languages.json b/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
index 7aabadae..96e64ae6 100644
--- a/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
+++ b/workflow-designer-ui/src/main/frontend/src/i18n/languages.json
@@ -33,6 +33,7 @@
                 "created": "Created",
                 "modified": "Modified"
             },
+            "version": "Version",
             "sideBar": {
                 "general": "General",
                 "inputOutput": "Input / Output",
@@ -56,10 +57,12 @@
                 "outputs": "Outputs",
                 "DELETE": "DELETE",
                 "CANCEL": "CANCEL",
-                "confirmDlete": "Are you sure you want to delete \"%{name}\"?",
+                "confirmDelete": "Are you sure you want to delete \"%{name}\"?"
+            },
+            "errorMessages": {
                 "alreadyExists": "Already exists",
                 "invalidCharacters": "Alphanumeric and underscore only",
-                "emptyName": "Empty Name"
+                "emptyName": "Field is required"
             },
             "composition": {
                 "bpmnError" : "BPMN.IO Error"
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js b/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
index ea2752a5..2c6bba24 100644
--- a/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
+++ b/workflow-designer-ui/src/main/frontend/src/shared/components/VersionInfo/index.js
@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 export const LabeledValue = ({ title, value }) => (
     <React.Fragment>
         <div className="label">{title}</div>
-        <div className="value">{value}</div>
+        <div className="value selectable">{value}</div>
     </React.Fragment>
 );