New: Manual import improvements (#683)

* New: Manual import improvements

 - Detect and merge import with files already in library.
 - Allow selection of album release from Manual Import modal.
 - Loading indicator while fetching updated decisions

* Disable release switching if user manually overrode release

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -3,7 +3,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchInteractiveImportItems, setInteractiveImportSort, clearInteractiveImport, setInteractiveImportMode, updateInteractiveImportItem } from 'Store/Actions/interactiveImportActions';
+import {
+  fetchInteractiveImportItems,
+  setInteractiveImportSort,
+  clearInteractiveImport,
+  setInteractiveImportMode,
+  updateInteractiveImportItem,
+  saveInteractiveImportItem
+} from 'Store/Actions/interactiveImportActions';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { executeCommand } from 'Store/Actions/commandActions';
 import * as commandNames from 'Commands/commandNames';
@@ -24,6 +31,7 @@ const mapDispatchToProps = {
   setInteractiveImportMode,
   clearInteractiveImport,
   updateInteractiveImportItem,
+  saveInteractiveImportItem,
   executeCommand
 };
 
@@ -37,7 +45,8 @@ class InteractiveImportModalContentConnector extends Component {
 
     this.state = {
       interactiveImportErrorMessage: null,
-      filterExistingFiles: true
+      filterExistingFiles: props.filterExistingFiles,
+      replaceExistingFiles: props.replaceExistingFiles
     };
   }
 
@@ -48,22 +57,26 @@ class InteractiveImportModalContentConnector extends Component {
     } = this.props;
 
     const {
-      filterExistingFiles
+      filterExistingFiles,
+      replaceExistingFiles
     } = this.state;
 
     this.props.fetchInteractiveImportItems({
       downloadId,
       folder,
-      filterExistingFiles
+      filterExistingFiles,
+      replaceExistingFiles
     });
   }
 
   componentDidUpdate(prevProps, prevState) {
     const {
-      filterExistingFiles
+      filterExistingFiles,
+      replaceExistingFiles
     } = this.state;
 
-    if (prevState.filterExistingFiles !== filterExistingFiles) {
+    if (prevState.filterExistingFiles !== filterExistingFiles ||
+        prevState.replaceExistingFiles !== replaceExistingFiles) {
       const {
         downloadId,
         folder
@@ -72,7 +85,8 @@ class InteractiveImportModalContentConnector extends Component {
       this.props.fetchInteractiveImportItems({
         downloadId,
         folder,
-        filterExistingFiles
+        filterExistingFiles,
+        replaceExistingFiles
       });
     }
   }
@@ -92,6 +106,10 @@ class InteractiveImportModalContentConnector extends Component {
     this.setState({ filterExistingFiles });
   }
 
+  onReplaceExistingFilesChange = (replaceExistingFiles) => {
+    this.setState({ replaceExistingFiles });
+  }
+
   onImportModeChange = (importMode) => {
     this.props.setInteractiveImportMode({ importMode });
   }
@@ -109,7 +127,8 @@ class InteractiveImportModalContentConnector extends Component {
           albumReleaseId,
           tracks,
           quality,
-          language
+          language,
+          disableReleaseSwitching
         } = item;
 
         if (!artist) {
@@ -146,7 +165,8 @@ class InteractiveImportModalContentConnector extends Component {
           trackIds: _.map(tracks, 'id'),
           quality,
           language,
-          downloadId: this.props.downloadId
+          downloadId: this.props.downloadId,
+          disableReleaseSwitching
         });
       }
     });
@@ -158,7 +178,8 @@ class InteractiveImportModalContentConnector extends Component {
     this.props.executeCommand({
       name: commandNames.INTERACTIVE_IMPORT,
       files,
-      importMode
+      importMode,
+      replaceExistingFiles: this.state.replaceExistingFiles
     });
 
     this.props.onModalClose();
@@ -170,7 +191,8 @@ class InteractiveImportModalContentConnector extends Component {
   render() {
     const {
       interactiveImportErrorMessage,
-      filterExistingFiles
+      filterExistingFiles,
+      replaceExistingFiles
     } = this.state;
 
     return (
@@ -178,8 +200,10 @@ class InteractiveImportModalContentConnector extends Component {
         {...this.props}
         interactiveImportErrorMessage={interactiveImportErrorMessage}
         filterExistingFiles={filterExistingFiles}
+        replaceExistingFiles={replaceExistingFiles}
         onSortPress={this.onSortPress}
         onFilterExistingFilesChange={this.onFilterExistingFilesChange}
+        onReplaceExistingFilesChange={this.onReplaceExistingFilesChange}
         onImportModeChange={this.onImportModeChange}
         onImportSelectedPress={this.onImportSelectedPress}
       />
@@ -191,6 +215,7 @@ InteractiveImportModalContentConnector.propTypes = {
   downloadId: PropTypes.string,
   folder: PropTypes.string,
   filterExistingFiles: PropTypes.bool.isRequired,
+  replaceExistingFiles: PropTypes.bool.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   fetchInteractiveImportItems: PropTypes.func.isRequired,
   setInteractiveImportSort: PropTypes.func.isRequired,
@@ -202,7 +227,8 @@ InteractiveImportModalContentConnector.propTypes = {
 };
 
 InteractiveImportModalContentConnector.defaultProps = {
-  filterExistingFiles: true
+  filterExistingFiles: true,
+  replaceExistingFiles: false
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(InteractiveImportModalContentConnector);