New: UI Updates, Tag manager, More custom filters (#437)

* New: UI Updates, Tag manager, More custom filters

* fixup! Fix ScanFixture Unit Tests

* Fixed: Sentry Errors from UI don't have release, branch, environment

* Changed: Bump Mobile Detect for New Device Detection

* Fixed: Build on changes to package.json

* fixup! Add MetadataProfile filter option

* fixup! Tag Note, Blacklist, Manual Import

* fixup: Remove connectSection

* fixup: root folder comment

frontend/src/InteractiveImport/Interactive/InteractiveImportModalContentConnector.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import connectSection from 'Store/connectSection';
 import { fetchInteractiveImportItems, setInteractiveImportSort, clearInteractiveImport, setInteractiveImportMode } from 'Store/Actions/interactiveImportActions';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import { executeCommand } from 'Store/Actions/commandActions';
@@ -11,7 +11,7 @@ import InteractiveImportModalContent from './InteractiveImportModalContent';
 
 function createMapStateToProps() {
   return createSelector(
-    createClientSideCollectionSelector(),
+    createClientSideCollectionSelector('interactiveImport'),
     (interactiveImport) => {
       return interactiveImport;
     }
@@ -125,8 +125,19 @@ class InteractiveImportModalContentConnector extends Component {
           return false;
         }
 
+        if (!quality) {
+          this.setState({ interactiveImportErrorMessage: 'Quality must be chosen for each selected file' });
+          return false;
+        }
+
+        if (!language) {
+          this.setState({ interactiveImportErrorMessage: 'Language must be chosen for each selected file' });
+          return false;
+        }
+
         files.push({
           path: item.path,
+          folderName: item.folderName,
           artistId: artist.id,
           albumId: album.id,
           trackIds: _.map(tracks, 'id'),
@@ -190,10 +201,4 @@ InteractiveImportModalContentConnector.defaultProps = {
   filterExistingFiles: true
 };
 
-export default connectSection(
-  createMapStateToProps,
-  mapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'interactiveImport' }
-)(InteractiveImportModalContentConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(InteractiveImportModalContentConnector);

frontend/src/InteractiveImport/Interactive/InteractiveImportRow.js

@@ -191,6 +191,8 @@ class InteractiveImportRow extends Component {
     const showArtistPlaceholder = isSelected && !artist;
     const showAlbumNumberPlaceholder = isSelected && !!artist && !album;
     const showTrackNumbersPlaceholder = isSelected && !!album && !tracks.length;
+    const showQualityPlaceholder = isSelected && !quality;
+    const showLanguagePlaceholder = isSelected && !language;
 
     return (
       <TableRow>
@@ -237,20 +239,36 @@ class InteractiveImportRow extends Component {
           className={styles.quality}
           onPress={this.onSelectQualityPress}
         >
-          <EpisodeQuality
-            className={styles.label}
-            quality={quality}
-          />
+          {
+            showQualityPlaceholder &&
+              <InteractiveImportRowCellPlaceholder />
+          }
+
+          {
+            !showQualityPlaceholder && !!quality &&
+              <EpisodeQuality
+                className={styles.label}
+                quality={quality}
+              />
+          }
         </TableRowCellButton>
 
         <TableRowCellButton
           className={styles.language}
           onPress={this.onSelectLanguagePress}
         >
-          <EpisodeLanguage
-            className={styles.label}
-            language={language}
-          />
+          {
+            showLanguagePlaceholder &&
+              <InteractiveImportRowCellPlaceholder />
+          }
+
+          {
+            !showLanguagePlaceholder && !!language &&
+              <EpisodeLanguage
+                className={styles.label}
+                language={language}
+              />
+          }
         </TableRowCellButton>
 
         <TableRowCell>
@@ -310,16 +328,16 @@ class InteractiveImportRow extends Component {
         <SelectQualityModal
           isOpen={isSelectQualityModalOpen}
           id={id}
-          qualityId={quality.quality.id}
-          proper={quality.revision.version > 1}
-          real={quality.revision.real > 0}
+          qualityId={quality ? quality.quality.id : 0}
+          proper={quality ? quality.revision.version > 1 : false}
+          real={quality ? quality.revision.real > 0 : false}
           onModalClose={this.onSelectQualityModalClose}
         />
 
         <SelectLanguageModal
           isOpen={isSelectLanguageModalOpen}
           id={id}
-          languageId={language.id}
+          languageId={language ? language.id : 0}
           onModalClose={this.onSelectLanguageModalClose}
         />
       </TableRow>