Fixed: Queue refresh closing manual import from queue if items change

Closes #4221

frontend/src/Activity/Queue/Queue.js

@@ -31,6 +31,8 @@ class Queue extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._shouldBlockRefresh = false;
+
     this.state = {
       allSelected: false,
       allUnselected: false,
@@ -42,6 +44,18 @@ class Queue extends Component {
     };
   }
 
+  shouldComponentUpdate(nextProps) {
+    if (!this._shouldBlockRefresh) {
+      return true;
+    }
+
+    if (hasDifferentItems(this.props.items, nextProps.items)) {
+      return false;
+    }
+
+    return true;
+  }
+
   componentDidUpdate(prevProps) {
     const {
       items,
@@ -82,6 +96,10 @@ class Queue extends Component {
   //
   // Listeners
 
+  onQueueRowModalOpenOrClose = (isOpen) => {
+    this._shouldBlockRefresh = isOpen;
+  }
+
   onSelectAllChange = ({ value }) => {
     this.setState(selectAll(this.state.selectedState, value));
   }
@@ -97,16 +115,19 @@ class Queue extends Component {
   }
 
   onRemoveSelectedPress = () => {
+    this._shouldBlockRefresh = true;
     this.setState({ isConfirmRemoveModalOpen: true });
   }
 
   onRemoveSelectedConfirmed = (payload) => {
     this.props.onRemoveSelectedPress({ ids: this.getSelectedIds(), ...payload });
     this.setState({ isConfirmRemoveModalOpen: false });
+    this._shouldBlockRefresh = false;
   }
 
   onConfirmRemoveModalClose = () => {
     this.setState({ isConfirmRemoveModalOpen: false });
+    this._shouldBlockRefresh = false;
   }
 
   //
@@ -205,7 +226,7 @@ class Queue extends Component {
           }
 
           {
-            isPopulated && !hasError && !items.length &&
+            isAllPopulated && !hasError && !items.length &&
               <div>
                 Queue is empty
               </div>
@@ -234,6 +255,7 @@ class Queue extends Component {
                             columns={columns}
                             {...item}
                             onSelectedChange={this.onSelectedChange}
+                            onQueueRowModalOpenOrClose={this.onQueueRowModalOpenOrClose}
                           />
                         );
                       })

frontend/src/Activity/Queue/QueueRow.js

@@ -42,19 +42,32 @@ class QueueRow extends Component {
   }
 
   onRemoveQueueItemModalConfirmed = (blacklist) => {
-    this.props.onRemoveQueueItemPress(blacklist);
+    const {
+      onRemoveQueueItemPress,
+      onQueueRowModalOpenOrClose
+    } = this.props;
+
+    onQueueRowModalOpenOrClose(false);
+    onRemoveQueueItemPress(blacklist);
+
     this.setState({ isRemoveQueueItemModalOpen: false });
   }
 
   onRemoveQueueItemModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
     this.setState({ isRemoveQueueItemModalOpen: false });
   }
 
   onInteractiveImportPress = () => {
+    this.props.onQueueRowModalOpenOrClose(true);
+
     this.setState({ isInteractiveImportModalOpen: true });
   }
 
   onInteractiveImportModalClose = () => {
+    this.props.onQueueRowModalOpenOrClose(false);
+
     this.setState({ isInteractiveImportModalOpen: false });
   }
 
@@ -397,7 +410,8 @@ QueueRow.propTypes = {
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   onSelectedChange: PropTypes.func.isRequired,
   onGrabPress: PropTypes.func.isRequired,
-  onRemoveQueueItemPress: PropTypes.func.isRequired
+  onRemoveQueueItemPress: PropTypes.func.isRequired,
+  onQueueRowModalOpenOrClose: PropTypes.func.isRequired
 };
 
 QueueRow.defaultProps = {