add errors and align style

Issue-ID: SDC-1592
Change-Id: I2921291042ed1fe6327f6ff2e859605c153bbef5
Signed-off-by: Yarin Dekel <yarind@amdocs.com>

Issue-ID: SDC-1592
Change-Id: I4b706c3a1024bfccb412b1463ee51145dedac7ce
Signed-off-by: Yarin Dekel <yarind@amdocs.com>

18 files changed, 181 insertions, 124 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
index 2ee87387..fe8bd0cf 100644
--- a/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
+++ b/workflow-designer-ui/src/main/frontend/resources/scss/components/_customModal.scss
@@ -1,18 +1,21 @@
 .sdc-modal {
   .custom-modal-wrapper {
-    padding: 35px 60px 20px 60px;
     width: auto;
   }
 
+  .form-custom-modal {
+    padding: 30px 35px 20px 35px;
+
+    .sdc-input {
+        margin-bottom: 15px;
+    }
+  }
+
 }
 
 .modal-action-bar {
   display: flex;
   justify-content: flex-end;
-
-  button:first-child {
-    margin-right: 2em;
-  }
 }
 
 textarea.field-section.sdc-input__input {
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 bcd07ebe..fc51e812 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
@@ -9,8 +9,12 @@
     display: flex;
     flex-direction: column;
   }
+
+  .custom-textarea {
+    resize: none;
+  }
 }
 
 #root {
   height: 100%;
-}
\ No newline at end of file
+}
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 8cb6be74..67883fbb 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,5 +1,5 @@
 .overview-page {
-  @include body-1-semibold;
+  @include body-1;
   padding: 25px;
 
   .overview-content {
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx b/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx
index 080329e9..f3a2cccf 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersionView.jsx
@@ -61,20 +61,22 @@ class CreateVersionView extends Component {
         const { closeCreateVersionModal } = this.props;
         return (
             <form onSubmit={this.handleSubmitForm}>
-                <div className="new-version-page custom-modal-wrapper ">
-                    <Select
-                        dataObj={VERSION_LEVEL_LIST}
-                        selectedItem={VERSION_LEVEL_LIST[0].value}
-                        label={I18n.t('version.category')}
-                        disabled
-                    />
-                    <Description
-                        name="version-description"
-                        description={this.state.newVersion.description}
-                        dataTestId="new-version-description"
-                        onDataChange={this.versionDetailsChanged}
-                    />
-                    <div className="modal-action-bar">
+                <div className="new-version-page custom-modal-wrapper">
+                    <div className="form-custom-modal">
+                        <Select
+                            dataObj={VERSION_LEVEL_LIST}
+                            selectedItem={VERSION_LEVEL_LIST[0].value}
+                            label={I18n.t('version.category')}
+                            disabled
+                        />
+                        <Description
+                            name="version-description"
+                            description={this.state.newVersion.description}
+                            dataTestId="new-version-description"
+                            onDataChange={this.versionDetailsChanged}
+                        />
+                    </div>
+                    <div className="modal-action-bar sdc-modal__footer">
                         <Button btnType="primary">
                             {I18n.t('buttons.createBtn')}
                         </Button>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/__snapshots__/CreateVersionView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/__snapshots__/CreateVersionView_snapshot-test.js.snap
index 25c7b932..08389c6e 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/__snapshots__/CreateVersionView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/__snapshots__/CreateVersionView_snapshot-test.js.snap
@@ -5,55 +5,59 @@ exports[`Create new version snapshot renders correctly 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="new-version-page custom-modal-wrapper "
+    className="new-version-page custom-modal-wrapper"
   >
     <div
-      className="select-wrapper version-selector sdc-input"
+      className="form-custom-modal"
     >
-      <label>
-        category
-      </label>
-      <select
-        className="inputinput-selector"
-        data-test-id="vc-select-box"
-        disabled={true}
-        value={undefined}
+      <div
+        className="select-wrapper version-selector sdc-input"
       >
-        <option
-          data-test-id="vc-option"
-          value="2"
-        >
-          Major
-        </option>
-        <option
-          data-test-id="vc-option"
-          value="1"
+        <label>
+          category
+        </label>
+        <select
+          className="inputinput-selector"
+          data-test-id="vc-select-box"
+          disabled={true}
+          value={undefined}
         >
-          Minor
-        </option>
-      </select>
-    </div>
-    <div
-      className="description-part"
-    >
+          <option
+            data-test-id="vc-option"
+            value="2"
+          >
+            Major
+          </option>
+          <option
+            data-test-id="vc-option"
+            value="1"
+          >
+            Minor
+          </option>
+        </select>
+      </div>
       <div
-        className="sdc-input"
+        className="description-part"
       >
         <div
-          className="sdc-input__label"
+          className="sdc-input"
         >
-          description
+          <div
+            className="sdc-input__label"
+          >
+            description
+          </div>
+          <textarea
+            className="custom-textarea field-section sdc-input__input"
+            data-test-id="new-version-description"
+            onChange={[Function]}
+            value={undefined}
+          />
         </div>
-        <textarea
-          className="field-section sdc-input__input"
-          data-test-id="new-version-description"
-          onChange={[Function]}
-          value={undefined}
-        />
       </div>
     </div>
     <div
-      className="modal-action-bar"
+      className="modal-action-bar sdc-modal__footer"
     >
       <button
         className="sdc-button sdc-button__primary   "
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputSelectors.js
index c37c9dbc..09dcc261 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/inputOutput/inputOutputSelectors.js
@@ -15,6 +15,7 @@
 */
 
 import { createSelector } from 'reselect';
+import { isEmpty } from 'lodash';
 
 import { INPUTS } from 'features/version/inputOutput/inputOutputConstants';
 
@@ -60,3 +61,30 @@ export const getError = createSelector(
     [getInputOutput, getCurrent],
     (inputOutput, current) => inputOutput.error[current]
 );
+
+export const getErrorsInputOutput = createSelector(
+    getInputOutput,
+    ({ error }) => error
+);
+
+export const getInputErrors = createSelector(
+    getErrorsInputOutput,
+    ({ inputs }) =>
+        !isEmpty(inputs) &&
+        Boolean(inputs.alreadyExists.length || inputs.invalidCharacters.length)
+);
+
+export const getOutputErrors = createSelector(
+    getErrorsInputOutput,
+    ({ outputs }) =>
+        !isEmpty(outputs) &&
+        Boolean(
+            outputs.alreadyExists.length || outputs.invalidCharacters.length
+        )
+);
+
+export const getIOErrors = createSelector(
+    getInputErrors,
+    getOutputErrors,
+    (inputsErrors, outputsErrors) => inputsErrors || outputsErrors
+);
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js
index 0c5b5b1f..2fc71957 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/VersionController.js
@@ -30,6 +30,7 @@ import {
     certifyVersionAction
 } from 'features/version/versionController/versionControllerConstants';
 import { workflowVersionFetchRequestedAction } from '../versionConstants';
+import { getIOErrors } from 'features/version/inputOutput/inputOutputSelectors';
 
 function mapStateToProps(state) {
     return {
@@ -38,7 +39,8 @@ function mapStateToProps(state) {
         versionsList: getSortedVersions(state),
         savedParams: getSavedObjParams(state),
         currentWorkflowVersion: state.currentVersion.general,
-        versionState: state.currentVersion.general.state
+        versionState: state.currentVersion.general.state,
+        getIOErrors: getIOErrors(state)
     };
 }
 
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 88a2a7b8..20d5d73b 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
@@ -37,7 +37,8 @@ export default class VersionControllerView extends Component {
         workflowId: PropTypes.string,
         versionState: PropTypes.string,
         certifyVersion: PropTypes.func,
-        changeVersion: PropTypes.func
+        changeVersion: PropTypes.func,
+        getIOErrors: PropTypes.bool
     };
 
     constructor(props) {
@@ -83,7 +84,8 @@ export default class VersionControllerView extends Component {
             currentWorkflowVersion,
             workflowName,
             versionsList,
-            versionState
+            versionState,
+            getIOErrors
         } = this.props;
         let isCertifyDisable =
             versionState &&
@@ -99,6 +101,7 @@ export default class VersionControllerView extends Component {
                         onVersionSelectChange={this.versionChangeCallback}
                     />
                     <ActionButtons
+                        saveDisabled={isCertifyDisable || getIOErrors}
                         onSaveClick={this.sendSaveParamsToServer}
                         certifyDisabled={isCertifyDisable}
                         onCertifyClick={this.certifyVersion}
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 14da3e44..26043fcb 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
@@ -63,7 +63,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
               <div
                 className="svg-icon-wrapper     bottom"
                 data-test-id="vc-save-btn"
-                disabled={false}
+                disabled={undefined}
                 onClick={undefined}
               >
                 <test-file-stub
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerSelectors.js
index aa2ea8d0..9010ed15 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerSelectors.js
@@ -21,7 +21,6 @@ import {
 } from 'features/version/inputOutput/inputOutputSelectors';
 import { getVersionInfo } from 'features/version/general/generalSelectors';
 
-export const getVersionsList = state => state && state.workflow.versions;
 export const getSavedObjParams = createSelector(
     getOutputs,
     getInputs,
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 b4a08915..a2f03380 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
@@ -22,7 +22,13 @@ import SvgButton from 'features/version/versionController/views/SvgButton';
 const Separator = () => <div className="vc-separator" />;
 
 const ActionButtons = props => {
-    const { onSaveClick, certifyDisabled, onCertifyClick, onUndoClick } = props;
+    const {
+        onSaveClick,
+        certifyDisabled,
+        onCertifyClick,
+        onUndoClick,
+        saveDisabled
+    } = props;
     return (
         <div className="save-submit-cancel-container">
             <div className="action-buttons">
@@ -32,7 +38,7 @@ const ActionButtons = props => {
                         dataTestId="vc-save-btn"
                         name="version-controller-save"
                         tooltipText={I18n.t('buttons.saveBtn')}
-                        disabled={false}
+                        disabled={saveDisabled}
                         onClick={onSaveClick}
                     />
                     <Separator />
@@ -61,7 +67,8 @@ ActionButtons.propTypes = {
     onSaveClick: PropTypes.func,
     certifyDisabled: PropTypes.bool,
     onCertifyClick: PropTypes.func,
-    onUndoClick: PropTypes.func
+    onUndoClick: PropTypes.func,
+    saveDisabled: PropTypes.bool
 };
 
 export default ActionButtons;
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 5f6f1805..de6089d4 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
@@ -38,24 +38,26 @@ const CreateWorkflowView = props => {
     return (
         <form onSubmit={handleSubmitForm}>
             <div className="new-workflow-page custom-modal-wrapper">
-                <Input
-                    name="workflowName"
-                    value={workflowName || ''}
-                    type="text"
-                    label={I18n.t('workflow.general.name')}
-                    onChange={val =>
-                        workflowInputChange({
-                            name: val
-                        })
-                    }
-                    isRequired
-                />
-                <Description
-                    value={workflowDescription || ''}
-                    label={I18n.t('workflow.general.description')}
-                    onDataChange={workflowInputChange}
-                />
-                <div className="modal-action-bar">
+                <div className="form-custom-modal">
+                    <Input
+                        name="workflowName"
+                        value={workflowName || ''}
+                        type="text"
+                        label={I18n.t('workflow.general.name')}
+                        onChange={val =>
+                            workflowInputChange({
+                                name: val
+                            })
+                        }
+                        isRequired
+                    />
+                    <Description
+                        value={workflowDescription || ''}
+                        label={I18n.t('workflow.general.description')}
+                        onDataChange={workflowInputChange}
+                    />
+                </div>
+                <div className="modal-action-bar sdc-modal__footer">
                     <Button btnType="primary">
                         {I18n.t('buttons.createBtn')}
                     </Button>
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap
index 8a2790a9..de14dc3e 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/create/__tests__/__snapshots__/CreateWorkflowView_snapshot-test.js.snap
@@ -8,50 +8,54 @@ exports[`New Workflow View Snapshot renders correctly 1`] = `
     className="new-workflow-page custom-modal-wrapper"
   >
     <div
-      className="sdc-input "
+      className="form-custom-modal"
     >
-      <label
-        className="sdc-input__label  required"
-        htmlFor="workflowName"
+      <div
+        className="sdc-input "
       >
-        name
-      </label>
-      <input
-        className="sdc-input__input  "
-        data-test-id={undefined}
-        disabled={false}
-        id="workflowName"
-        name="workflowName"
-        onBlur={[Function]}
-        onChange={[Function]}
-        onKeyDown={[Function]}
-        placeholder={undefined}
-        readOnly={false}
-        type="text"
-        value=""
-      />
-    </div>
-    <div
-      className="description-part"
-    >
+        <label
+          className="sdc-input__label  required"
+          htmlFor="workflowName"
+        >
+          name
+        </label>
+        <input
+          className="sdc-input__input  "
+          data-test-id={undefined}
+          disabled={false}
+          id="workflowName"
+          name="workflowName"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onKeyDown={[Function]}
+          placeholder={undefined}
+          readOnly={false}
+          type="text"
+          value=""
+        />
+      </div>
       <div
-        className="sdc-input"
+        className="description-part"
       >
         <div
-          className="sdc-input__label"
+          className="sdc-input"
         >
-          description
+          <div
+            className="sdc-input__label"
+          >
+            description
+          </div>
+          <textarea
+            className="custom-textarea field-section sdc-input__input"
+            data-test-id="description"
+            onChange={[Function]}
+            value={undefined}
+          />
         </div>
-        <textarea
-          className="field-section sdc-input__input"
-          data-test-id="description"
-          onChange={[Function]}
-          value={undefined}
-        />
       </div>
     </div>
     <div
-      className="modal-action-bar"
+      className="modal-action-bar sdc-modal__footer"
     >
       <button
         className="sdc-button sdc-button__primary   "
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 c2f541b2..7b3326e5 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
@@ -57,7 +57,7 @@ exports[`OverviewView Snapshot renders correctly 1`] = `
                 description
               </div>
               <textarea
-                className="field-section sdc-input__input"
+                className="custom-textarea field-section sdc-input__input"
                 data-test-id="description"
                 onChange={[Function]}
                 value="desc 1"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/overviewReducer-test.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/overviewReducer-test.js
index 4db8f49d..87600be2 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/overviewReducer-test.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/overviewReducer-test.js
@@ -23,7 +23,7 @@ describe('Overview reducer', () => {
             total: 2,
             size: 0,
             page: 0,
-            results: [
+            items: [
                 {
                     id: '99adf5bc36764628b8018033d285b591',
                     name: '1.0',
@@ -91,6 +91,6 @@ describe('Overview reducer', () => {
 
         expect(
             overviewReducer([], versionListFetchAction(versionResponse))
-        ).toEqual([...versionResponse.results]);
+        ).toEqual([...versionResponse.items]);
     });
 });
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewReducer.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewReducer.js
index 720d410c..bab482a4 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewReducer.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewReducer.js
@@ -19,7 +19,7 @@ import { FETCH_VERSION_LIST } from 'features/workflow/overview/overviewConstanst
 export default function overviewReducer(state = [], action) {
     switch (action.type) {
         case FETCH_VERSION_LIST:
-            return [...action.payload.results];
+            return [...action.payload.items];
         default:
             return state;
     }
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/components/Description/index.js b/workflow-designer-ui/src/main/frontend/src/shared/components/Description/index.js
index 39400fd9..15a88341 100644
--- a/workflow-designer-ui/src/main/frontend/src/shared/components/Description/index.js
+++ b/workflow-designer-ui/src/main/frontend/src/shared/components/Description/index.js
@@ -29,7 +29,7 @@ const Description = ({ description, onDataChange, dataTestId }) => (
                 onChange={event => {
                     onDataChange({ description: event.target.value });
                 }}
-                className="field-section sdc-input__input"
+                className="custom-textarea field-section sdc-input__input"
             />
         </div>
     </div>
diff --git a/workflow-designer-ui/src/main/frontend/src/shared/errorResponseHandler/errorResponseHandler.js b/workflow-designer-ui/src/main/frontend/src/shared/errorResponseHandler/errorResponseHandler.js
index 960e255d..948f9f2f 100644
--- a/workflow-designer-ui/src/main/frontend/src/shared/errorResponseHandler/errorResponseHandler.js
+++ b/workflow-designer-ui/src/main/frontend/src/shared/errorResponseHandler/errorResponseHandler.js
@@ -13,14 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-//import React from 'react';
 import store from 'wfapp/store';
 import { showErrorModalAction } from 'shared/modal/modalWrapperActions';
 
 export default error => {
     const errorData = {
         title: error.statusText,
-        body: error.responseText ? error.responseText : 'GENERIC ERROR'
+        body: error.data ? error.data : 'GENERIC ERROR'
     };
     store.dispatch(
         showErrorModalAction({