ZNTA-1865 display progress properly

server/zanata-frontend/src/frontend/app/actions/version-action-types.js

@@ -13,3 +13,5 @@ export const VERSION_TM_MERGE_FAILURE = 'VERSION_TM_MERGE_FAILURE'
 export const QUERY_TM_MERGE_PROGRESS_REQUEST = 'QUERY_TM_MERGE_PROGRESS_REQUEST'
 export const QUERY_TM_MERGE_PROGRESS_SUCCESS = 'QUERY_TM_MERGE_PROGRESS_SUCCESS'
 export const QUERY_TM_MERGE_PROGRESS_FAILURE = 'QUERY_TM_MERGE_PROGRESS_FAILURE'
+
+export const TM_MERGE_PROCESS_FINISHED = 'TM_MERGE_PROCESS_FINISHED'

server/zanata-frontend/src/frontend/app/actions/version-actions.js

@@ -19,7 +19,8 @@ import {
   VERSION_TM_MERGE_FAILURE,
   QUERY_TM_MERGE_PROGRESS_REQUEST,
   QUERY_TM_MERGE_PROGRESS_SUCCESS,
-  QUERY_TM_MERGE_PROGRESS_FAILURE
+  QUERY_TM_MERGE_PROGRESS_FAILURE,
+  TM_MERGE_PROCESS_FINISHED
 } from './version-action-types'
 
 /** Open or close the TM Merge modal  */
@@ -129,3 +130,6 @@ export function queryTMMergeProgress (url) {
     [CALL_API]: buildAPIRequest(url, 'GET', getJsonHeaders(), types)
   }
 }
+
+export const currentTMMergeProcessFinished =
+  createAction(TM_MERGE_PROCESS_FINISHED)

server/zanata-frontend/src/frontend/app/components/ProgressBar/CancellableProgressBar.js

@@ -3,9 +3,8 @@ import PropTypes from 'prop-types'
 import {
   Button, ProgressBar
 } from 'react-bootstrap'
-import {
-  processStatusPropType, isProcessEnded
-} from '../../utils/prop-types-util'
+import { processStatusPropType } from '../../utils/prop-types-util'
+import { isProcessEnded } from '../../utils/EnumValueUtils'
 
 /**
  * This component can be used to show progress of a background task running on
@@ -27,7 +26,7 @@ class CancellableProgressBar extends Component {
   constructor (props) {
     super(props)
     this.state = {
-      // TODO pahuang helper state to stop the loop in dev mode
+      // helper state to stop the loop in dev mode (with chrome react add-on)
       stopTimer: false
     }
   }

server/zanata-frontend/src/frontend/app/containers/ProjectVersion/ProjectVersionPanels.js

@@ -5,12 +5,13 @@ import {
 } from 'react-bootstrap'
 import {Icon} from '../../components'
 import {ProjectType, FromProjectVersionType,
-  versionDtoPropType} from '../../utils/prop-types-util.js'
+  versionDtoPropType} from '../../utils/prop-types-util'
+import {isEntityStatusReadOnly} from '../../utils/EnumValueUtils'
 
 const tooltipReadOnly = <Tooltip id='tooltipreadonly'>Read only</Tooltip>
 
 const LockIcon = (props) => {
-  return props.status === 'READONLY'
+  return isEntityStatusReadOnly(props.status)
     ? (
     <OverlayTrigger placement='top' overlay={tooltipReadOnly}>
       <Icon name='locked' className='s0 icon-locked' />

server/zanata-frontend/src/frontend/app/containers/ProjectVersion/TMMergeModal.js

@@ -17,11 +17,13 @@ import {
   fetchProjectPage,
   toggleTMMergeModal,
   mergeVersionFromTM,
-  queryTMMergeProgress
+  queryTMMergeProgress,
+  currentTMMergeProcessFinished
 } from '../../actions/version-actions'
 import {
   ProjectType, LocaleType, processStatusPropType, FromProjectVersionType
 } from '../../utils/prop-types-util.js'
+import {isProcessEnded} from '../../utils/EnumValueUtils'
 
 /*
  * Component to display TM merge progress
@@ -220,7 +222,8 @@ class TMMergeModal extends Component {
       percentageComplete: PropTypes.number.isRequired,
       statusCode: processStatusPropType.isRequired
     }),
-    queryTMMergeProgress: PropTypes.func.isRequired
+    queryTMMergeProgress: PropTypes.func.isRequired,
+    mergeProcessFinished: PropTypes.func.isRequired
   }
   constructor (props) {
     super(props)
@@ -251,6 +254,14 @@ class TMMergeModal extends Component {
         selectedLanguage: locales.length === 0 ? undefined : locales[0]
       }))
     }
+    const currentProcessStatus = this.props.processStatus
+    if (!isProcessEnded(currentProcessStatus) &&
+      isProcessEnded(nextProps.processStatus)) {
+      // process just finished, we want to re-display the merge option form.
+      // but we want to delay it a bit so that the user can see the progress
+      // bar animation finishes
+      setTimeout(this.props.mergeProcessFinished, 1000)
+    }
   }
   queryTMMergeProgress = () => {
     this.props.queryTMMergeProgress(this.props.processStatus.url)
@@ -469,6 +480,9 @@ const mapDispatchToProps = (dispatch) => {
     onCancelTMMerge: () => {
       // TODO pahuang implement cancel operation
       console.warn('boom!!!')
+    },
+    mergeProcessFinished: () => {
+      dispatch(currentTMMergeProcessFinished())
     }
   }
 }

server/zanata-frontend/src/frontend/app/reducers/version-reducer.js

@@ -13,7 +13,8 @@ import {
   VERSION_TM_MERGE_SUCCESS,
   VERSION_TM_MERGE_FAILURE,
   QUERY_TM_MERGE_PROGRESS_SUCCESS,
-  QUERY_TM_MERGE_PROGRESS_FAILURE
+  QUERY_TM_MERGE_PROGRESS_FAILURE,
+  TM_MERGE_PROCESS_FINISHED
 } from '../actions/version-action-types'
 
 const version = handleActions({
@@ -146,6 +147,11 @@ const version = handleActions({
     console.error(
       `failed getting process status for version TM merge ${action.error}`)
     return state
+  },
+  [TM_MERGE_PROCESS_FINISHED]: (state, action) => {
+    const newState = cloneDeep(state)
+    newState.TMMerge.processStatus = undefined
+    return newState
   }},
 // default state
   {

server/zanata-frontend/src/frontend/app/utils/EnumValueUtils.js

@@ -0,0 +1,20 @@
+
+export const processStatusCodes = [
+  'NotAccepted', 'Waiting', 'Running', 'Finished', 'Cancelled', 'Failed']
+
+const isStatusCodeEnded = statusCode => {
+  return statusCode === 'Finished' || statusCode === 'Cancelled' ||
+    statusCode === 'Failed'
+}
+/**
+ * @param {{statusCode: string}} processStatus
+ * @returns {boolean} whether a process status represents an ended process
+ */
+export function isProcessEnded (processStatus) {
+  return processStatus && isStatusCodeEnded(processStatus.statusCode)
+}
+
+export const entityStatuses = ['READONLY', 'ACTIVE', 'OBSOLETE']
+export function isEntityStatusReadOnly (status) {
+  return status === 'READONLY'
+}

server/zanata-frontend/src/frontend/app/utils/prop-types-util.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types'
+import {processStatusCodes, entityStatuses} from './EnumValueUtils'
 
-export const entityStatusPropType = PropTypes.oneOf(['READONLY', 'ACTIVE'])
+export const entityStatusPropType = PropTypes.oneOf(entityStatuses)
 
 export const versionDtoPropType = PropTypes.shape({
   id: PropTypes.string.isRequired,
@@ -25,17 +26,4 @@ export const FromProjectVersionType = PropTypes.shape({
   version: versionDtoPropType.isRequired
 })
 
-export const processStatusPropType = PropTypes.oneOf([
-  'NotAccepted', 'Waiting', 'Running', 'Finished', 'Cancelled', 'Failed'])
-
-const isStatusCodeEnded = statusCode => {
-  return statusCode === 'Finished' || statusCode === 'Cancelled' ||
-    statusCode === 'Failed'
-}
-/**
- * @param {{statusCode: string}} processStatus
- * @returns {boolean} whether a process status represents an ended process
- */
-export function isProcessEnded (processStatus) {
-  return processStatus && isStatusCodeEnded(processStatus.statusCode)
-}
+export const processStatusPropType = PropTypes.oneOf(processStatusCodes)