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/Indexers/Indexers/EditIndexerModal.js

@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { sizes } from 'Helpers/Props';
 import Modal from 'Components/Modal/Modal';
 import EditIndexerModalContentConnector from './EditIndexerModalContentConnector';
 
 function EditIndexerModal({ isOpen, onModalClose, ...otherProps }) {
   return (
     <Modal
+      size={sizes.MEDIUM}
       isOpen={isOpen}
       onModalClose={onModalClose}
     >

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContent.js

@@ -96,7 +96,7 @@ function EditIndexerModalContent(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="enableAutomaticSearch"
-                  helpText={supportsSearch.value && 'Will be used when automatic searches are performed via the UI or by Lidarr'}
+                  helpText={supportsSearch.value ? 'Will be used when automatic searches are performed via the UI or by Lidarr' : undefined}
                   helpTextWarning={supportsSearch.value ? undefined : 'Search is not supported with this indexer'}
                   isDisabled={!supportsSearch.value}
                   {...enableAutomaticSearch}
@@ -110,7 +110,7 @@ function EditIndexerModalContent(props) {
                 <FormInputGroup
                   type={inputTypes.CHECK}
                   name="enableInteractiveSearch"
-                  helpText={supportsSearch.value && 'Will be used when interactive search is used'}
+                  helpText={supportsSearch.value ? 'Will be used when interactive search is used' : undefined}
                   helpTextWarning={supportsSearch.value ? undefined : 'Search is not supported with this indexer'}
                   isDisabled={!supportsSearch.value}
                   {...enableInteractiveSearch}

frontend/src/Settings/Indexers/Indexers/EditIndexerModalContentConnector.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
 import { setIndexerValue, setIndexerFieldValue, saveIndexer, testIndexer } from 'Store/Actions/settingsActions';
-import connectSection from 'Store/connectSection';
 import EditIndexerModalContent from './EditIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
-    createProviderSettingsSelector(),
+    createProviderSettingsSelector('indexers'),
     (advancedSettings, indexer) => {
       return {
         advancedSettings,
@@ -85,10 +85,4 @@ EditIndexerModalContentConnector.propTypes = {
   onModalClose: PropTypes.func.isRequired
 };
 
-export default connectSection(
-  createMapStateToProps,
-  mapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'indexers' }
-)(EditIndexerModalContentConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerModalContentConnector);

frontend/src/Settings/Indexers/Indexers/Indexers.js

@@ -59,9 +59,7 @@ class Indexers extends Component {
     } = this.state;
 
     return (
-      <FieldSet
-        legend="Indexers"
-      >
+      <FieldSet legend="Indexers">
         <PageSectionContent
           errorMessage="Unable to load Indexers"
           {...otherProps}

frontend/src/Settings/Indexers/Options/IndexerOptions.js

@@ -19,9 +19,7 @@ function IndexerOptions(props) {
   } = props;
 
   return (
-    <FieldSet
-      legend="Options"
-    >
+    <FieldSet legend="Options">
       {
         isFetching &&
           <LoadingIndicator />
@@ -42,6 +40,7 @@ function IndexerOptions(props) {
                 type={inputTypes.NUMBER}
                 name="minimumAge"
                 min={0}
+                unit="minutes"
                 helpText="Usenet only: Minimum age in minutes of NZBs before they are grabbed. Use this to give new releases time to propagate to your usenet provider."
                 onChange={onInputChange}
                 {...settings.minimumAge}
@@ -55,6 +54,7 @@ function IndexerOptions(props) {
                 type={inputTypes.NUMBER}
                 name="maximumSize"
                 min={0}
+                unit="MB"
                 helpText="Maximum size for a release to be grabbed in MB. Set to zero to set to unlimited."
                 onChange={onInputChange}
                 {...settings.maximumSize}
@@ -68,6 +68,7 @@ function IndexerOptions(props) {
                 type={inputTypes.NUMBER}
                 name="retention"
                 min={0}
+                unit="days"
                 helpText="Usenet only: Set to zero to set for unlimited retention"
                 onChange={onInputChange}
                 {...settings.retention}
@@ -84,6 +85,7 @@ function IndexerOptions(props) {
                 type={inputTypes.NUMBER}
                 name="rssSyncInterval"
                 min={0}
+                unit="minutes"
                 helpText="Interval in minutes. Set to zero to disable (this will stop all automatic release grabbing)"
                 helpTextWarning="This will apply to all indexers, please follow the rules set forth by them"
                 helpLink="https://github.com/Lidarr/Lidarr/wiki/RSS-Sync"

frontend/src/Settings/Indexers/Options/IndexerOptionsConnector.js

@@ -1,16 +1,18 @@
 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 { fetchIndexerOptions, setIndexerOptionsValue, saveIndexerOptions } from 'Store/Actions/settingsActions';
 import { clearPendingChanges } from 'Store/Actions/baseActions';
-import connectSection from 'Store/connectSection';
 import IndexerOptions from './IndexerOptions';
 
+const SECTION = 'indexerOptions';
+
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
-    createSettingsSectionSelector(),
+    createSettingsSectionSelector(SECTION),
     (advancedSettings, sectionSettings) => {
       return {
         advancedSettings,
@@ -62,7 +64,7 @@ class IndexerOptionsConnector extends Component {
   }
 
   componentWillUnmount() {
-    this.props.dispatchClearPendingChanges({ section: this.props.section });
+    this.props.dispatchClearPendingChanges({ section: SECTION });
   }
 
   //
@@ -86,7 +88,6 @@ class IndexerOptionsConnector extends Component {
 }
 
 IndexerOptionsConnector.propTypes = {
-  section: PropTypes.string.isRequired,
   isSaving: PropTypes.bool.isRequired,
   hasPendingChanges: PropTypes.bool.isRequired,
   dispatchFetchIndexerOptions: PropTypes.func.isRequired,
@@ -97,10 +98,4 @@ IndexerOptionsConnector.propTypes = {
   onChildStateChange: PropTypes.func.isRequired
 };
 
-export default connectSection(
-  createMapStateToProps,
-  mapDispatchToProps,
-  undefined,
-  undefined,
-  { section: 'settings.indexerOptions' }
-)(IndexerOptionsConnector);
+export default connect(createMapStateToProps, mapDispatchToProps)(IndexerOptionsConnector);

frontend/src/Settings/Indexers/Restrictions/EditRestrictionModal.js

@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import { sizes } from 'Helpers/Props';
 import Modal from 'Components/Modal/Modal';
 import EditRestrictionModalContentConnector from './EditRestrictionModalContentConnector';
 
 function EditRestrictionModal({ isOpen, onModalClose, ...otherProps }) {
   return (
     <Modal
+      size={sizes.MEDIUM}
       isOpen={isOpen}
       onModalClose={onModalClose}
     >

frontend/src/Settings/Indexers/Restrictions/Restrictions.js

@@ -45,9 +45,7 @@ class Restrictions extends Component {
     } = this.props;
 
     return (
-      <FieldSet
-        legend="Restrictions"
-      >
+      <FieldSet legend="Restrictions">
         <PageSectionContent
           errorMessage="Unable to load Restrictions"
           {...otherProps}