Don't collapse the execution's task while an execution is running CORWEB-67

Refactor execution's state update.

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -75,21 +75,18 @@ class ReplicaExecutions extends Component {
   componentWillReceiveProps(newProps) {
     if (newProps.replica && newProps.replica.executions.length) {
       let isNewExecution = newProps.replica.executions.length > (this.state.executionsCount || 0)
-      let execution = newProps.replica.executions[newProps.replica.executions.length - 1]
-      this.setState(prevState => {
-        // Don't update the component every time the last execution is updated
-        // Update the component if the last execution is the currently selected one
-        // Update the component if a new execution was just added
-        if (prevState.executionRef && prevState.executionRef.id !== execution.id && !isNewExecution) {
-          execution = prevState.executionRef
-        }
+      let lastExecution = newProps.replica.executions[newProps.replica.executions.length - 1]
 
-        return {
+      // Don't update the component every time the last execution is updated
+      // Update the component if the last execution is the currently selected one
+      // Update the component if a new execution was just added
+      if (!this.state.executionRef || this.state.executionRef.id === lastExecution.id || isNewExecution) {
+        this.setState({
           executionsCount: newProps.replica.executions.length,
-          executionRef: execution,
-          tasks: execution.tasks
-        }
-      })
+          executionRef: lastExecution,
+          tasks: lastExecution.tasks
+        })
+      }
     } else if (newProps.replica.executions.length == 0) {
       this.setState({
         executionRef: null,
@@ -219,7 +216,7 @@ class ReplicaExecutions extends Component {
                   {executionBtn}
                 </div>
               </div>
-              <Tasks tasks={this.state.tasks} />
+              <Tasks tasks={this.state.tasks} execution={this.state.executionRef} />
             </div>
             <ConfirmationDialog
               visible={this.state.deleteConfirmationDialog.visible}

src/components/Table/Table.js

@@ -25,6 +25,7 @@ class Table extends Component {
   static defaultProps = {
     headerItems: [],
     listItems: [],
+    parentId: null,
     show: true
   }
 
@@ -32,25 +33,29 @@ class Table extends Component {
     headerItems: PropTypes.array,
     listItems: PropTypes.array,
     customClassName: PropTypes.string,
-    show: PropTypes.bool
+    show: PropTypes.bool,
+    parentId: PropTypes.string
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      openState: []
+      openState: [],
+      parentId: null
     }
   }
 
   componentWillReceiveProps(newProps) {
     let openState = []
     for (let i in newProps.listItems) {
-      openState.push(newProps.listItems[i].openState)
+      // Use the previous open state if the table's parent ID is the same
+      // i.e. don't close the collapser if new props arrive
+      let prevOpenState = newProps.parentId === this.state.parentId && this.state.openState[i]
+      openState.push(newProps.listItems[i].openState || prevOpenState)
     }
-    this.setState({ openState: openState })
+    this.setState({ openState: openState, parentId: newProps.parentId })
   }
 
-
   toggleDrawer(index) {
     let newOpenState = this.state.openState
     let toggled = !newOpenState[index]

src/components/Tasks/Tasks.js

@@ -38,7 +38,8 @@ function hasProgress(msg) {
 class Tasks extends Component {
 
   static propTypes = {
-    tasks: PropTypes.array
+    tasks: PropTypes.array,
+    execution: PropTypes.object
   }
 
 
@@ -52,7 +53,8 @@ class Tasks extends Component {
     ]
 
     this.state = {
-      listItems: []
+      listItems: [],
+      execution: null
     }
   }
 
@@ -63,7 +65,7 @@ class Tasks extends Component {
   componentWillReceiveProps(newProps) {
     let listItems = []
     if (newProps.tasks) {
-      newProps.tasks.forEach((item) => {
+      newProps.tasks.forEach(item => {
         let latestMessage
         if (item.progress_updates.length && item.progress_updates[item.progress_updates.length - 1]) {
           latestMessage = item.progress_updates[item.progress_updates.length - 1].message
@@ -148,10 +150,9 @@ class Tasks extends Component {
         listItems.push(newItem)
       }, this)
     }
-    this.setState({ listItems: listItems })
+    this.setState({ listItems: listItems, execution: newProps.execution })
   }
 
-
   render() {
     return (
       <div className={s.root}>
@@ -159,6 +160,7 @@ class Tasks extends Component {
           (<div className={s.container}>
             <Table
               headerItems={this.headers}
+              parentId={this.state.execution && this.state.execution.id}
               listItems={this.state ? this.state.listItems : null}
               customClassName={s.table}
               show={this.state !== null}