Various UI Fixes and Updates

Closes #188
Closes #185
Closes #187

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -14,7 +14,10 @@ class IndexerSettings extends Component {
   constructor(props, context) {
     super(props, context);
 
+    this._saveCallback = null;
+
     this.state = {
+      isSaving: false,
       hasPendingChanges: false
     };
   }
@@ -22,28 +25,34 @@ class IndexerSettings extends Component {
   //
   // Listeners
 
-  setIndexerOptionsRef = (ref) => {
-    this._indexerOptions = ref;
+  onChildMounted = (saveCallback) => {
+    this._saveCallback = saveCallback;
   }
 
-  onHasPendingChange = (hasPendingChanges) => {
-    this.setState({
-      hasPendingChanges
-    });
+  onChildStateChange = (payload) => {
+    this.setState(payload);
   }
 
   onSavePress = () => {
-    this._indexerOptions.getWrappedInstance().save();
+    if (this._saveCallback) {
+      this._saveCallback();
+    }
   }
 
   //
   // Render
 
   render() {
+    const {
+      isSaving,
+      hasPendingChanges
+    } = this.state;
+
     return (
       <PageContent title="Indexer Settings">
         <SettingsToolbarConnector
-          hasPendingChanges={this.state.hasPendingChanges}
+          isSaving={isSaving}
+          hasPendingChanges={hasPendingChanges}
           onSavePress={this.onSavePress}
         />
 
@@ -51,8 +60,8 @@ class IndexerSettings extends Component {
           <IndexersConnector />
 
           <IndexerOptionsConnector
-            ref={this.setIndexerOptionsRef}
-            onHasPendingChange={this.onHasPendingChange}
+            onChildMounted={this.onChildMounted}
+            onChildStateChange={this.onChildStateChange}
           />
 
           <RestrictionsConnector />

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

@@ -76,6 +76,7 @@ class Indexer extends Component {
     return (
       <Card
         className={styles.indexer}
+        overlayContent={true}
         onPress={this.onEditIndexerPress}
       >
         <div className={styles.name}>

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

@@ -41,6 +41,7 @@ function IndexerOptions(props) {
               <FormInputGroup
                 type={inputTypes.NUMBER}
                 name="minimumAge"
+                min={0}
                 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}
@@ -53,6 +54,7 @@ function IndexerOptions(props) {
               <FormInputGroup
                 type={inputTypes.NUMBER}
                 name="maximumSize"
+                min={0}
                 helpText="Maximum size for a release to be grabbed in MB. Set to zero to set to unlimited."
                 onChange={onInputChange}
                 {...settings.maximumSize}
@@ -65,6 +67,7 @@ function IndexerOptions(props) {
               <FormInputGroup
                 type={inputTypes.NUMBER}
                 name="retention"
+                min={0}
                 helpText="Usenet only: Set to zero to set for unlimited retention"
                 onChange={onInputChange}
                 {...settings.retention}
@@ -80,6 +83,7 @@ function IndexerOptions(props) {
               <FormInputGroup
                 type={inputTypes.NUMBER}
                 name="rssSyncInterval"
+                min={0}
                 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/Sonarr/Sonarr/wiki/RSS-Sync"

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

@@ -21,10 +21,10 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchIndexerOptions,
-  setIndexerOptionsValue,
-  saveIndexerOptions,
-  clearPendingChanges
+  dispatchFetchIndexerOptions: fetchIndexerOptions,
+  dispatchSetIndexerOptionsValue: setIndexerOptionsValue,
+  dispatchSaveIndexerOptions: saveIndexerOptions,
+  dispatchClearPendingChanges: clearPendingChanges
 };
 
 class IndexerOptionsConnector extends Component {
@@ -33,31 +33,43 @@ class IndexerOptionsConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchIndexerOptions();
+    const {
+      dispatchFetchIndexerOptions,
+      dispatchSaveIndexerOptions,
+      onChildMounted
+    } = this.props;
+
+    dispatchFetchIndexerOptions();
+    onChildMounted(dispatchSaveIndexerOptions);
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.hasPendingChanges !== prevProps.hasPendingChanges) {
-      this.props.onHasPendingChange(this.props.hasPendingChanges);
+    const {
+      hasPendingChanges,
+      isSaving,
+      onChildStateChange
+    } = this.props;
+
+    if (
+      prevProps.isSaving !== isSaving ||
+      prevProps.hasPendingChanges !== hasPendingChanges
+    ) {
+      onChildStateChange({
+        isSaving,
+        hasPendingChanges
+      });
     }
   }
 
   componentWillUnmount() {
-    this.props.clearPendingChanges({ section: this.props.section });
-  }
-
-  //
-  // Control
-
-  save = () => {
-    this.props.saveIndexerOptions();
+    this.props.dispatchClearPendingChanges({ section: this.props.section });
   }
 
   //
   // Listeners
 
   onInputChange = ({ name, value }) => {
-    this.props.setIndexerOptionsValue({ name, value });
+    this.props.dispatchSetIndexerOptionsValue({ name, value });
   }
 
   //
@@ -75,18 +87,20 @@ class IndexerOptionsConnector extends Component {
 
 IndexerOptionsConnector.propTypes = {
   section: PropTypes.string.isRequired,
+  isSaving: PropTypes.bool.isRequired,
   hasPendingChanges: PropTypes.bool.isRequired,
-  fetchIndexerOptions: PropTypes.func.isRequired,
-  setIndexerOptionsValue: PropTypes.func.isRequired,
-  saveIndexerOptions: PropTypes.func.isRequired,
-  clearPendingChanges: PropTypes.func.isRequired,
-  onHasPendingChange: PropTypes.func.isRequired
+  dispatchFetchIndexerOptions: PropTypes.func.isRequired,
+  dispatchSetIndexerOptionsValue: PropTypes.func.isRequired,
+  dispatchSaveIndexerOptions: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  onChildMounted: PropTypes.func.isRequired,
+  onChildStateChange: PropTypes.func.isRequired
 };
 
 export default connectSection(
   createMapStateToProps,
   mapDispatchToProps,
   undefined,
-  { withRef: true },
+  undefined,
   { section: 'settings.indexerOptions' }
 )(IndexerOptionsConnector);

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

@@ -64,6 +64,7 @@ class Restriction extends Component {
     return (
       <Card
         className={styles.restriction}
+        overlayContent={true}
         onPress={this.onEditRestrictionPress}
       >
         <div>