add api integration and add review comments

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

25 files changed, 542 insertions, 126 deletions

diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js b/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js
index e659bb6b..d78f3bc7 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/create/CreateVersion.js
@@ -30,7 +30,7 @@ import {
 function mapStateToProps(state) {
     return {
         workflowId: getWorkflowId(state),
-        versionBaseId: getLatestBaseId(state)
+        baseVersionId: getLatestBaseId(state)
     };
 }
 
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 555dbf9e..080329e9 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
@@ -48,7 +48,7 @@ class CreateVersionView extends Component {
         submitNewVersion({
             description: this.state.newVersion.description,
             workflowId: workflowId,
-            baseVersionId: baseVersionId || null,
+            baseId: baseVersionId || null,
             history: history
         });
     };
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/CreateVersionView_snapshot-test.js b/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/CreateVersionView_snapshot-test.js
new file mode 100644
index 00000000..13faac14
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/CreateVersionView_snapshot-test.js
@@ -0,0 +1,28 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* 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
+* 
+* 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 renderer from 'react-test-renderer';
+
+import CreateVersionView from '../CreateVersionView';
+
+describe('Create new version snapshot', () => {
+    it('renders correctly', () => {
+        const tree = renderer.create(<CreateVersionView />).toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+});
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
new file mode 100644
index 00000000..25c7b932
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/create/__tests__/__snapshots__/CreateVersionView_snapshot-test.js.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Create new version snapshot renders correctly 1`] = `
+<form
+  onSubmit={[Function]}
+>
+  <div
+    className="new-version-page custom-modal-wrapper "
+  >
+    <div
+      className="select-wrapper version-selector sdc-input"
+    >
+      <label>
+        category
+      </label>
+      <select
+        className="inputinput-selector"
+        data-test-id="vc-select-box"
+        disabled={true}
+        value={undefined}
+      >
+        <option
+          data-test-id="vc-option"
+          value="2"
+        >
+          Major
+        </option>
+        <option
+          data-test-id="vc-option"
+          value="1"
+        >
+          Minor
+        </option>
+      </select>
+    </div>
+    <div
+      className="description-part"
+    >
+      <div
+        className="sdc-input"
+      >
+        <div
+          className="sdc-input__label"
+        >
+          description
+        </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"
+    >
+      <button
+        className="sdc-button sdc-button__primary   "
+        disabled={false}
+        onClick={undefined}
+      >
+        createBtn
+      </button>
+      <button
+        className="sdc-button sdc-button__secondary   "
+        disabled={false}
+        onClick={undefined}
+      >
+        closeBtn
+      </button>
+    </div>
+  </div>
+</form>
+`;
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/general/General.js b/workflow-designer-ui/src/main/frontend/src/features/version/general/General.js
index d6eb9a38..37fc0ef2 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/general/General.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/general/General.js
@@ -20,7 +20,7 @@ import GeneralView from 'features/version/general/GeneralView';
 import {
     getGeneralDescription,
     getCreationTime,
-    getMofificationTime
+    getModificationTime
 } from 'features/version/general/generalSelectors';
 import { workflowVersionDetailsChangedAction } from 'features/version/versionConstants';
 
@@ -28,7 +28,7 @@ export function mapStateToProps(state) {
     return {
         description: getGeneralDescription(state),
         created: getCreationTime(state),
-        modified: getMofificationTime(state)
+        modified: getModificationTime(state)
     };
 }
 
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 b5a6410c..930c6071 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,10 +16,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Translate } from 'react-redux-i18n';
+import { I18n, Localize, Translate } from 'react-redux-i18n';
 
 import Description from 'shared/components/Description';
-import { VersionInfo } from 'shared/components/VersionInfo';
+import { VersionInfo, LabeledValue } from 'shared/components/VersionInfo';
 
 const GeneralView = ({ onDataChange, description, created, modified }) => (
     <div className="general-page">
@@ -31,7 +31,18 @@ const GeneralView = ({ onDataChange, description, created, modified }) => (
                 description={description}
                 onDataChange={onDataChange}
             />
-            <VersionInfo modified={modified} created={created} />
+            <VersionInfo>
+                <LabeledValue
+                    title={I18n.t('workflow.general.modified')}
+                    value={
+                        <Localize value={modified} dateFormat="date.short" />
+                    }
+                />
+                <LabeledValue
+                    title={I18n.t('workflow.general.created')}
+                    value={<Localize value={created} dateFormat="date.short" />}
+                />
+            </VersionInfo>
         </div>
     </div>
 );
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/general/generalSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/version/general/generalSelectors.js
index 83377c0c..5d8924c2 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/general/generalSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/general/generalSelectors.js
@@ -19,21 +19,12 @@ export const getGeneralDescription = state =>
     state && state.currentVersion.general.description;
 export const getVersionInfo = state => state && state.currentVersion.general;
 
-export const getVersionsState = createSelector(
-    state => state && state.currentVersion.general.state
-);
-
 export const getCreationTime = state =>
     state && state.currentVersion.general.creationTime;
 
-export const getMofificationTime = state =>
+export const getModificationTime = state =>
     state && state.currentVersion.general.modificationTime;
 
-export const generalParamsSelector = createSelector(
-    getGeneralDescription,
-    description => {
-        return {
-            description
-        };
-    }
+export const getVersionsState = createSelector(
+    state => state && state.currentVersion.general.state
 );
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js
index 8f6895eb..7848b1f0 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionApi.js
@@ -27,15 +27,15 @@ const Api = {
     fetchVersion: ({ workflowId, versionId }) => {
         return RestfulAPIUtil.fetch(`${baseUrl(workflowId)}/${versionId}`);
     },
-    createNewVersion: ({ workflowId, baseVersionId, description }) => {
-        return RestfulAPIUtil.post(baseUrl(workflowId), {
-            baseVersionId,
+    createNewVersion: ({ workflowId, baseId, description }) => {
+        const urlParams = baseId ? `?baseVersionId=${baseId}` : ``;
+        return RestfulAPIUtil.post(`${baseUrl(workflowId)}${urlParams}`, {
             description
         });
     },
     updateVersion: ({ workflowId, ...payload }) => {
         return RestfulAPIUtil.put(
-            `${baseUrl(workflowId)}${payload.params.id}`,
+            `${baseUrl(workflowId)}/${payload.params.id}`,
             {
                 ...payload.params
             }
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 c14f4fc1..0c5b5b1f 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
@@ -15,12 +15,12 @@
 */
 
 import { connect } from 'react-redux';
-import {
-    getVersionsList,
-    getSavedObjParams
-} from 'features/version/versionController/versionControllerSelectors';
+import { getSavedObjParams } from 'features/version/versionController/versionControllerSelectors';
 import VersionControllerView from 'features/version/versionController/VersionControllerView';
-import { getVersions } from 'features/workflow/overview/overviewSelectors';
+import {
+    getVersions,
+    getSortedVersions
+} from 'features/workflow/overview/overviewSelectors';
 import {
     getWorkflowId,
     getWorkflowName
@@ -29,25 +29,26 @@ import {
     saveParamsAction,
     certifyVersionAction
 } from 'features/version/versionController/versionControllerConstants';
+import { workflowVersionFetchRequestedAction } from '../versionConstants';
 
 function mapStateToProps(state) {
     return {
         workflowName: getWorkflowName(state),
         workflowId: getWorkflowId(state),
-        versionsList: getVersionsList(state),
+        versionsList: getSortedVersions(state),
         savedParams: getSavedObjParams(state),
-        currentWorkflowVersion: state.currentVersion.general.id,
+        currentWorkflowVersion: state.currentVersion.general,
         versionState: state.currentVersion.general.state
     };
 }
 
 function mapDispatchToProps(dispatch) {
     return {
-        callForAction: (action, payload) =>
-            dispatch({ type: action, payload: payload }),
         getVersions: () => dispatch(getVersions),
         saveParamsToServer: params => dispatch(saveParamsAction(params)),
-        certifyVersion: payload => dispatch(certifyVersionAction(payload))
+        certifyVersion: payload => dispatch(certifyVersionAction(payload)),
+        changeVersion: payload =>
+            dispatch(workflowVersionFetchRequestedAction(payload))
     };
 }
 
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 27260e60..a147c0d2 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
@@ -25,9 +25,8 @@ export default class VersionControllerView extends Component {
     static propTypes = {
         location: PropTypes.object,
         workflowName: PropTypes.string,
-        currentWorkflowVersion: PropTypes.string,
+        currentWorkflowVersion: PropTypes.object,
         viewableVersions: PropTypes.arrayOf(Object),
-        callForAction: PropTypes.func,
         getVersions: PropTypes.func,
         versionsList: PropTypes.array,
         history: PropTypes.object,
@@ -37,23 +36,14 @@ export default class VersionControllerView extends Component {
         saveParamsToServer: PropTypes.func,
         workflowId: PropTypes.string,
         versionState: PropTypes.string,
-        certifyVersion: PropTypes.func
+        certifyVersion: PropTypes.func,
+        changeVersion: PropTypes.func
     };
 
     constructor(props) {
         super(props);
     }
 
-    dynamicDispatcher = (action, payload) => {
-        const { history, callForAction } = this.props;
-        const actionName =
-            typeof action === 'object'
-                ? action.target.attributes.actionType.value
-                : action;
-        let pageName = history.location.pathname.split('/').pop();
-        callForAction(pageName + '/' + actionName, payload);
-    };
-
     routeToOverview = () => {
         const { history, match } = this.props;
         const workflowId = match.params.workflowId;
@@ -71,7 +61,12 @@ export default class VersionControllerView extends Component {
             workflowId,
             currentWorkflowVersion
         } = this.props;
-        certifyVersion({ workflowId, versionId: currentWorkflowVersion });
+        certifyVersion({ workflowId, versionId: currentWorkflowVersion.id });
+    };
+
+    versionChangeCallback = versionId => {
+        const { changeVersion, workflowId } = this.props;
+        changeVersion({ versionId, workflowId });
     };
 
     render() {
@@ -92,6 +87,7 @@ export default class VersionControllerView extends Component {
                         currentWorkflowVersion={currentWorkflowVersion}
                         viewableVersions={versionsList}
                         onOverviewClick={this.routeToOverview}
+                        onVersionSelectChange={this.versionChangeCallback}
                     />
                     <ActionButtons
                         onSaveClick={this.sendSaveParamsToServer}
@@ -105,6 +101,5 @@ export default class VersionControllerView extends Component {
 }
 
 VersionControllerView.defaultProps = {
-    getVersions: () => {},
-    callForAction: () => {}
+    getVersions: () => {}
 };
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js
index b3adc721..5dfb5737 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/__tests__/VersionControllerView_snapshot-test.js
@@ -44,7 +44,12 @@ describe('Version Controller View Snapshot', () => {
             }
         ];
         const tree = renderer
-            .create(<VersionControllerView viewableVersions={versionList} />)
+            .create(
+                <VersionControllerView
+                    viewableVersions={versionList}
+                    currentWorkflowVersion={versionList[0]}
+                />
+            )
             .toJSON();
 
         expect(tree).toMatchSnapshot();
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 1ad910c6..14da3e44 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
@@ -30,7 +30,7 @@ exports[`Version Controller View Snapshot renders correctly 1`] = `
           className="version-selector"
           data-test-id="vc-versions-select-box"
           onChange={[Function]}
-          value={undefined}
+          value="7b5f6b086613470985082df2c0f6c713"
         />
         <span
           className="version-selector-more-versions"
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerConstants.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerConstants.js
index f7a412c2..57aef602 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerConstants.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/versionControllerConstants.js
@@ -17,8 +17,7 @@
 import { createAction } from 'redux-actions';
 export const SAVE_ACTION = 'versionController/SAVE';
 export const CERTIFY_ACTION = 'versionController/CERTIFY';
-export const SET_VERSIONS_LIST = 'versionController/SET_VERSIONS_LIST';
-export const UNDO_ACTION = 'UNDO';
+export const UNDO_ACTION = 'versionController/UNDO';
 export const CERTIFY_JSON = {
     name: 'CERTIFIED'
 };
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionSelect.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionSelect.js
index 9ffc46c1..2c67946b 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionSelect.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionController/views/VersionSelect.js
@@ -22,7 +22,7 @@ const VersionSelect = props => {
     const {
         currentWorkflowVersion,
         viewableVersions,
-        dynamicDispatcher
+        onVersionSelectChange
     } = props;
 
     function onChangeHandler(ev) {
@@ -30,25 +30,29 @@ const VersionSelect = props => {
             key => viewableVersions[key].id === ev.target.value
         );
         const currentVersion = viewableVersions[versionIndex].id;
-        dynamicDispatcher('CHANGE_VERSION', currentVersion);
-        return currentVersion;
+        onVersionSelectChange(currentVersion);
     }
 
     return (
         <select
             className="version-selector"
             key={'selector'}
-            value={currentWorkflowVersion}
+            value={currentWorkflowVersion.id}
             onChange={onChangeHandler}
             data-test-id="vc-versions-select-box">
             {!isEmpty(viewableVersions) &&
                 viewableVersions.map(item => {
+                    const displayedName = `${item.name} ${
+                        currentWorkflowVersion.id === item.id
+                            ? currentWorkflowVersion.state.toUpperCase()
+                            : item.state
+                    }`;
                     return (
                         <option
                             key={'versionSelect' + item.id}
                             value={item.id}
                             data-test-id="vc-version-option">
-                            {item.displayed || item.name}
+                            {displayedName}
                         </option>
                     );
                 })}
@@ -57,9 +61,9 @@ const VersionSelect = props => {
 };
 
 VersionSelect.propTypes = {
-    currentWorkflowVersion: PropTypes.string,
+    currentWorkflowVersion: PropTypes.object,
     viewableVersions: PropTypes.arrayOf(Object),
-    dynamicDispatcher: PropTypes.func
+    onVersionSelectChange: PropTypes.func
 };
 
 export default VersionSelect;
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 47f08073..13266954 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
@@ -17,34 +17,22 @@ import React from 'react';
 import VersionSelect from 'features/version/versionController/views/VersionSelect';
 import { I18n } from 'react-redux-i18n';
 import PropTypes from 'prop-types';
-import { isEmpty } from 'lodash';
 
 const VersionContainer = props => {
     let {
         currentWorkflowVersion,
         viewableVersions,
-        dynamicDispatcher,
-        onOverviewClick
+        onOverviewClick,
+        onVersionSelectChange
     } = props;
 
-    function createDisplayedVersionName() {
-        if (isEmpty(viewableVersions)) return;
-        Object.keys(viewableVersions).map((val, key) => {
-            viewableVersions[key].displayed =
-                viewableVersions[key].name + ' ' + viewableVersions[key].state;
-        });
-        return viewableVersions;
-    }
-
-    const versionList = createDisplayedVersionName();
-
     return (
         <div className="version-section-wrapper">
             <div className="version-status-container">
                 <VersionSelect
-                    dynamicDispatcher={dynamicDispatcher}
                     currentWorkflowVersion={currentWorkflowVersion}
-                    viewableVersions={versionList}
+                    viewableVersions={viewableVersions}
+                    onVersionSelectChange={onVersionSelectChange}
                 />
                 <span
                     className="version-selector-more-versions"
@@ -58,10 +46,10 @@ const VersionContainer = props => {
 };
 
 VersionContainer.propTypes = {
-    currentWorkflowVersion: PropTypes.string,
+    currentWorkflowVersion: PropTypes.object,
     viewableVersions: PropTypes.arrayOf(Object),
-    dynamicDispatcher: PropTypes.func,
-    onOverviewClick: PropTypes.func
+    onOverviewClick: PropTypes.func,
+    onVersionSelectChange: PropTypes.func
 };
 
 export default VersionContainer;
diff --git a/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js b/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js
index 49d4d32f..244f3da9 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/version/versionSaga.js
@@ -30,6 +30,8 @@ import {
 import versionApi from 'features/version/versionApi';
 import { notificationActions } from 'shared/notifications/notificationsActions';
 import { versionState } from 'features/version/versionConstants';
+import overviewApi from '../workflow/overview/overviewApi';
+import { versionListFetchAction } from '../workflow/overview/overviewConstansts';
 
 function* fetchVersion(action) {
     try {
@@ -49,8 +51,11 @@ function* watchSubmitVersion(action) {
     try {
         const { workflowId, history } = action.payload;
         const data = yield call(versionApi.createNewVersion, action.payload);
-        yield call(history.push('/workflow/' + workflowId + '/version/'));
-        console.log(data);
+        const versions = yield call(overviewApi.getVersions, workflowId);
+        yield put(versionListFetchAction(versions));
+        yield call(
+            history.push('/workflow/' + workflowId + '/version/' + data.id)
+        );
     } catch (error) {
         yield put(genericNetworkErrorAction(error));
     }
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 f308b75e..a36e7efc 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
@@ -15,7 +15,7 @@
 */
 
 export const NEW_VERSION = {
-    baseVersionId: null,
+    baseId: null,
     description: null
 };
 export const WORKFLOW_INPUT_CHANGE = 'createWorkflow/INPUT_CHANGE';
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/Overview.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/Overview.js
index aebdead1..b2598334 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/Overview.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/Overview.js
@@ -16,7 +16,7 @@
 import { connect } from 'react-redux';
 import OverviewView from 'features/workflow/overview/OverviewView';
 import {
-    getVersions,
+    getSortedVersions,
     getSelectedVersionId,
     getWorkflowData,
     getAllIsVersionsCertifies
@@ -32,7 +32,7 @@ import { inputChangeAction } from 'features/workflow/create/createWorkflowConsta
 
 function mapStateToProps(state) {
     return {
-        versions: getVersions(state),
+        versions: getSortedVersions(state),
         selectedVersion: getSelectedVersionId(state),
         workflow: getWorkflowData(state),
         isVersionsCertifies: getAllIsVersionsCertifies(state)
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 14e3cce5..f02b40b0 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
@@ -22,16 +22,33 @@ import WorkflowVersions from 'features/workflow/overview/views/WorkflowVersions'
 import WorkflowHeader from 'features/workflow/overview/views/WorkflowHeader';
 
 class OverviewView extends Component {
-    static propTypes = {};
+    static propTypes = {
+        getOverview: PropTypes.func,
+        versions: PropTypes.array,
+        onSelectVersion: PropTypes.func,
+        onCreateVersion: PropTypes.func,
+        selectedVersion: PropTypes.string,
+        workflow: PropTypes.object,
+        history: PropTypes.object,
+        showNewVersionModal: PropTypes.func,
+        isVersionsCertifies: PropTypes.bool,
+        location: PropTypes.object,
+        match: PropTypes.object,
+        updateWorkflow: PropTypes.func
+    };
 
     constructor(props) {
         super(props);
     }
 
-    componentDidMount() {
+    getOverviewFromRouter = () => {
         const { match } = this.props;
         const workflowId = match.params.workflowId;
         this.props.getOverview(workflowId);
+    };
+
+    componentDidMount() {
+        this.getOverviewFromRouter();
     }
 
     onSelectVersionFromTable = data => {
@@ -91,26 +108,10 @@ class OverviewView extends Component {
     }
 }
 
-OverviewView.propTypes = {
-    getOverview: PropTypes.func,
-    versions: PropTypes.array,
-    onSelectVersion: PropTypes.func,
-    onCreateVersion: PropTypes.func,
-    selectedVersion: PropTypes.string,
-    workflow: PropTypes.object,
-    history: PropTypes.object,
-    showNewVersionModal: PropTypes.func,
-    isVersionsCertifies: PropTypes.bool,
-    location: PropTypes.object,
-    match: PropTypes.object,
-    updateWorkflow: PropTypes.func
-};
-
 OverviewView.defaultProps = {
     versions: [],
     getOverview: () => {},
     onSelectVersion: () => {},
-    onCreateVersion: () => {},
     selectedVersion: ''
 };
 
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/OverviewView_snapshot-test.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/OverviewView_snapshot-test.js
new file mode 100644
index 00000000..5897a91f
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/OverviewView_snapshot-test.js
@@ -0,0 +1,39 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* 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
+*
+ * 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 renderer from 'react-test-renderer';
+
+import OverviewView from 'features/workflow/overview/OverviewView';
+
+describe('OverviewView Snapshot', () => {
+    it('renders correctly', () => {
+        const workflow = {
+            name: 'wf1',
+            description: 'desc 1',
+            id: 'id1'
+        };
+        const match = {
+            params: {
+                workflowId: 'id1'
+            }
+        };
+        const tree = renderer
+            .create(<OverviewView workflow={workflow} match={match} />)
+            .toJSON();
+
+        expect(tree).toMatchSnapshot();
+    });
+});
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
new file mode 100644
index 00000000..c2f541b2
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/__snapshots__/OverviewView_snapshot-test.js.snap
@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverviewView Snapshot renders correctly 1`] = `
+<div>
+  <div
+    className="overview-page"
+  >
+    <div
+      className="overview-header"
+    >
+      wf1
+       - 
+      title
+    </div>
+    <div
+      className="overview-content"
+    >
+      <div
+        className="workflow-details"
+      >
+        <form
+          onSubmit={[Function]}
+        >
+          <div
+            className="sdc-input "
+          >
+            <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>
+          <div
+            className="description-part"
+          >
+            <div
+              className="sdc-input"
+            >
+              <div
+                className="sdc-input__label"
+              >
+                description
+              </div>
+              <textarea
+                className="field-section sdc-input__input"
+                data-test-id="description"
+                onChange={[Function]}
+                value="desc 1"
+              />
+            </div>
+          </div>
+          <div
+            className="save-description"
+          >
+            <button
+              className="sdc-button sdc-button__primary   "
+              disabled={false}
+              onClick={undefined}
+            >
+              saveBtn
+            </button>
+          </div>
+        </form>
+        <div
+          className="version-info-part"
+        >
+          
+          <div
+            className="label"
+          >
+            Invariant UUID
+          </div>
+          <div
+            className="value"
+          >
+            id1
+          </div>
+        </div>
+      </div>
+      <div
+        className="workflow-versions"
+      >
+        <div
+          className="versions-page-view"
+        >
+          <div
+            className="create-new-version newVersionDisabled"
+          >
+            <div
+              className="create-item-plus-icon"
+              onClick={[Function]}
+            >
+              <div
+                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="version-tree-title"
+                >
+                  Version Tree
+                </div>
+              </div>
+              <div
+                className="tree-view versions-tree-container "
+              >
+                <svg
+                  className="versions-tree"
+                  width={200}
+                />
+              </div>
+            </div>
+            <div
+              className="version-list"
+            >
+              <div
+                className="version-item-row header-row "
+                data-test-id="version-item-row"
+                onClick={[Function]}
+              >
+                <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}
+                  >
+                    lastEdited
+                  </span>
+                </div>
+                <div
+                  className="version-item-field header-field"
+                >
+                  <div
+                    className="description-text"
+                  >
+                    Description
+                  </div>
+                </div>
+              </div>
+              <div
+                className="version-list-items"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
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
new file mode 100644
index 00000000..4db8f49d
--- /dev/null
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/__tests__/overviewReducer-test.js
@@ -0,0 +1,96 @@
+/*
+* Copyright © 2018 European Support Limited
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* 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
+* 
+* 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 overviewReducer from '../overviewReducer';
+import { versionListFetchAction } from '../overviewConstansts';
+
+describe('Overview reducer', () => {
+    it('check fetch versions', () => {
+        const versionResponse = {
+            total: 2,
+            size: 0,
+            page: 0,
+            results: [
+                {
+                    id: '99adf5bc36764628b8018033d285b591',
+                    name: '1.0',
+                    description: 'Initial versionewewe',
+                    baseId: '',
+                    state: 'CERTIFIED',
+                    inputs: [
+                        {
+                            id: '08274a71d7e34d4e96878aa5fb1ed9bd',
+                            name: 'wewe',
+                            type: 'INTEGER',
+                            mandatory: true
+                        },
+                        {
+                            id: '7a0b9e33ea0244c2a05c03b96207f1c8',
+                            name: 'eee',
+                            type: 'BOOLEAN',
+                            mandatory: false
+                        }
+                    ],
+                    outputs: [
+                        {
+                            id: 'a5314bbd67ff4e6091385aaa82ebb266',
+                            name: 'e',
+                            type: 'FLOAT',
+                            mandatory: false
+                        }
+                    ],
+                    creationTime: '2018-07-25T07:36:10.112+0000',
+                    modificationTime: '2018-07-25T07:36:48.663+0000'
+                },
+                {
+                    id: 'cd8156bfb250475dac1e2681a9f2a74f',
+                    name: '2.0',
+                    description: 'versio2neee',
+                    baseId: '99adf5bc36764628b8018033d285b591',
+                    state: 'CERTIFIED',
+                    inputs: [
+                        {
+                            id: '08274a71d7e34d4e96878aa5fb1ed9bd',
+                            name: 'wewe',
+                            type: 'INTEGER',
+                            mandatory: true
+                        },
+                        {
+                            id: '7a0b9e33ea0244c2a05c03b96207f1c8',
+                            name: 'eee',
+                            type: 'BOOLEAN',
+                            mandatory: false
+                        }
+                    ],
+                    outputs: [
+                        {
+                            id: 'a5314bbd67ff4e6091385aaa82ebb266',
+                            name: 'e',
+                            type: 'FLOAT',
+                            mandatory: false
+                        }
+                    ],
+                    creationTime: '2018-07-25T07:36:58.978+0000',
+                    modificationTime: '2018-07-25T07:37:09.041+0000'
+                }
+            ]
+        };
+
+        expect(
+            overviewReducer([], versionListFetchAction(versionResponse))
+        ).toEqual([...versionResponse.results]);
+    });
+});
diff --git a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSelectors.js b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSelectors.js
index 45007fea..cc1f7ff5 100644
--- a/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSelectors.js
+++ b/workflow-designer-ui/src/main/frontend/src/features/workflow/overview/overviewSelectors.js
@@ -19,6 +19,10 @@ import { getWorkflowParams } from 'features/workflow/create/createWorkflowSelect
 import { versionState } from 'features/version/versionConstants';
 
 export const getVersions = state => state && state.workflow.versions;
+export const getSortedVersions = createSelector(
+    getVersions,
+    versions => versions && versions.sort((a, b) => a.name - b.name)
+);
 export const getSelectedVersionId = state =>
     state && state.currentVersion.general.id;
 export const getWorkflowCreationTime = state =>
@@ -30,7 +34,7 @@ export const getWorkflowModificationTime = state =>
 export const getWorkflowId = state => state && state.workflow.data.id;
 
 export const getAllIsVersionsCertifies = createSelector(
-    getVersions,
+    getSortedVersions,
     versions =>
         versions &&
         versions.filter(
@@ -54,6 +58,6 @@ export const getWorkflowData = createSelector(
 );
 
 export const getLatestBaseId = createSelector(
-    getVersions,
-    versions => versions.length && versions[versions.length - 1].baseId
+    getSortedVersions,
+    versions => versions.length && versions[versions.length - 1].id
 );
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 e89d9aa1..ea2752a5 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
@@ -15,8 +15,6 @@
 */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { I18n } from 'react-redux-i18n';
-import { Localize } from 'react-redux-i18n';
 export const LabeledValue = ({ title, value }) => (
     <React.Fragment>
         <div className="label">{title}</div>
@@ -29,22 +27,8 @@ LabeledValue.propTypes = {
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 
-export const VersionInfo = ({ created, modified, children }) => (
-    <div className="version-info-part">
-        {created && (
-            <LabeledValue
-                title={I18n.t('workflow.general.created')}
-                value={<Localize value={created} dateFormat="date.short" />}
-            />
-        )}
-        {modified && (
-            <LabeledValue
-                title={I18n.t('workflow.general.modified')}
-                value={<Localize value={modified} dateFormat="date.short" />}
-            />
-        )}
-        {children}
-    </div>
+export const VersionInfo = ({ children }) => (
+    <div className="version-info-part">{children}</div>
 );
 
 VersionInfo.defaultProps = {
diff --git a/workflow-designer-ui/src/main/frontend/webpack.config.js b/workflow-designer-ui/src/main/frontend/webpack.config.js
index c281bbab..70f41ed6 100644
--- a/workflow-designer-ui/src/main/frontend/webpack.config.js
+++ b/workflow-designer-ui/src/main/frontend/webpack.config.js
@@ -22,8 +22,6 @@ const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 const { DefinePlugin } = require('webpack');
 const ModuleRedirectPlugin = require('./tools/ModuleRedirectPlugin');
 const devConfig = require('./tools/getDevConfig');
-//TODO: check for better solution
-//const DEV = process.argv[1].indexOf('webpack-dev-server') >= 0;
 const apiMocker = require('webpack-api-mocker');
 const proxyServer = require('./tools/proxy-server');
 
@@ -144,7 +142,6 @@ module.exports = (env, argv) => {
             port: devConfig.port,
             historyApiFallback: true,
             publicPath: `http://localhost:${devConfig.port}`,
-            //todo: need to check if array is mandatory
             contentBase: [path.join(__dirname, 'dist')],
             inline: true,
             hot: true,