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/Settings/MediaManagement/MediaManagement.js

@@ -64,9 +64,7 @@ class MediaManagement extends Component {
 
                 {
                   advancedSettings &&
-                    <FieldSet
-                      legend="Folders"
-                    >
+                    <FieldSet legend="Folders">
                       <FormGroup
                         advancedSettings={advancedSettings}
                         isAdvanced={true}

frontend/src/Settings/MediaManagement/MediaManagementConnector.js

@@ -1,19 +1,21 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
 import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
 import { fetchMediaManagementSettings, setMediaManagementSettingsValue, saveMediaManagementSettings, saveNamingSettings } from 'Store/Actions/settingsActions';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
-import connectSection from 'Store/connectSection';
 import MediaManagement from './MediaManagement';
 
+const SECTION = 'mediaManagement';
+
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
     (state) => state.settings.naming,
-    createSettingsSectionSelector(),
+    createSettingsSectionSelector(SECTION),
     createSystemStatusSelector(),
     (advancedSettings, namingSettings, sectionSettings, systemStatus) => {
       return {
@@ -44,7 +46,7 @@ class MediaManagementConnector extends Component {
   }
 
   componentWillUnmount() {
-    this.props.clearPendingChanges({ section: this.props.section });
+    this.props.clearPendingChanges({ section: SECTION });
   }
 
   //
@@ -74,7 +76,6 @@ class MediaManagementConnector extends Component {
 }
 
 MediaManagementConnector.propTypes = {
-  section: PropTypes.string.isRequired,
   fetchMediaManagementSettings: PropTypes.func.isRequired,
   setMediaManagementSettingsValue: PropTypes.func.isRequired,
   saveMediaManagementSettings: PropTypes.func.isRequired,
@@ -82,10 +83,4 @@ MediaManagementConnector.propTypes = {
   clearPendingChanges: PropTypes.func.isRequired
 };
 
-export default connectSection(
-  createMapStateToProps,
-  mapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'settings.mediaManagement' }
-)(MediaManagementConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(MediaManagementConnector);

frontend/src/Settings/MediaManagement/Naming/Naming.js

@@ -113,9 +113,7 @@ class Naming extends Component {
     }
 
     return (
-      <FieldSet
-        legend="Track Naming"
-      >
+      <FieldSet legend="Track Naming">
         {
           isFetching &&
             <LoadingIndicator />

frontend/src/Settings/MediaManagement/Naming/NamingConnector.js

@@ -1,18 +1,20 @@
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
 import { fetchNamingSettings, setNamingSettingsValue, fetchNamingExamples } from 'Store/Actions/settingsActions';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
-import connectSection from 'Store/connectSection';
 import Naming from './Naming';
 
+const SECTION = 'naming';
+
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
     (state) => state.settings.namingExamples,
-    createSettingsSectionSelector(),
+    createSettingsSectionSelector(SECTION),
     (advancedSettings, examples, sectionSettings) => {
       return {
         advancedSettings,
@@ -48,7 +50,7 @@ class NamingConnector extends Component {
   }
 
   componentWillUnmount() {
-    this.props.clearPendingChanges({ section: this.props.section });
+    this.props.clearPendingChanges({ section: SECTION });
   }
 
   //
@@ -86,17 +88,10 @@ class NamingConnector extends Component {
 }
 
 NamingConnector.propTypes = {
-  section: PropTypes.string.isRequired,
   fetchNamingSettings: PropTypes.func.isRequired,
   setNamingSettingsValue: PropTypes.func.isRequired,
   fetchNamingExamples: PropTypes.func.isRequired,
   clearPendingChanges: PropTypes.func.isRequired
 };
 
-export default connectSection(
-  createMapStateToProps,
-  mapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'settings.naming' }
-)(NamingConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(NamingConnector);

frontend/src/Settings/MediaManagement/Naming/NamingModal.js

@@ -163,8 +163,8 @@ class NamingModal extends Component {
     ];
 
     const qualityTokens = [
-      { token: '{Quality Full}', example: 'HDTV 720p Proper' },
-      { token: '{Quality Title}', example: 'HDTV 720p' }
+      { token: '{Quality Full}', example: 'FLAC Proper' },
+      { token: '{Quality Title}', example: 'FLAC' }
     ];
 
     const mediaInfoTokens = [