broken indexer selector

frontend/src/Components/Form/FormInputGroup.js

@@ -14,6 +14,7 @@ import PasswordInput from './PasswordInput';
 import PathInputConnector from './PathInputConnector';
 import QualityProfileSelectInputConnector from './QualityProfileSelectInputConnector';
 import LanguageProfileSelectInputConnector from './LanguageProfileSelectInputConnector';
+import IndexerSelectInputConnector from './IndexerSelectInputConnector';
 import RootFolderSelectInputConnector from './RootFolderSelectInputConnector';
 import SeriesTypeSelectInput from './SeriesTypeSelectInput';
 import SelectInput from './SelectInput';
@@ -61,6 +62,9 @@ function getComponent(type) {
     case inputTypes.LANGUAGE_PROFILE_SELECT:
       return LanguageProfileSelectInputConnector;
 
+    case inputTypes.INDEXER_SELECT:
+      return IndexerSelectInputConnector;
+
     case inputTypes.ROOT_FOLDER_SELECT:
       return RootFolderSelectInputConnector;
 

frontend/src/Components/Form/IndexerSelectInputConnector.js

@@ -0,0 +1,98 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import sortByName from 'Utilities/Array/sortByName';
+import SelectInput from './SelectInput';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.indexers,
+    (state, { includeNoChange }) => includeNoChange,
+    (state, { includeMixed }) => includeMixed,
+    (indexers, includeNoChange, includeMixed) => {
+      const values = _.map(indexers.items.sort(sortByName), (indexer) => {
+        return {
+          key: indexer.id,
+          value: indexer.name
+        };
+      });
+
+      if (includeNoChange) {
+        values.unshift({
+          key: 'noChange',
+          value: 'No Change',
+          disabled: true
+        });
+      }
+
+      if (includeMixed) {
+        values.unshift({
+          key: 'mixed',
+          value: '(Mixed)',
+          disabled: true
+        });
+      }
+
+      return {
+        values
+      };
+    }
+  );
+}
+
+class IndexerSelectInputConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    const {
+      name,
+      value,
+      values
+    } = this.props;
+
+    if (!value || !_.some(values, (option) => parseInt(option.key) === value)) {
+      const firstValue = _.find(values, (option) => !isNaN(parseInt(option.key)));
+
+      if (firstValue) {
+        this.onChange({ name, value: firstValue.key });
+      }
+    }
+  }
+
+  //
+  // Listeners
+
+  onChange = ({ name, value }) => {
+    this.props.onChange({ name, value: parseInt(value) });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <SelectInput
+        {...this.props}
+        onChange={this.onChange}
+      />
+    );
+  }
+}
+
+IndexerSelectInputConnector.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  values: PropTypes.arrayOf(PropTypes.object).isRequired,
+  includeNoChange: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired
+};
+
+IndexerSelectInputConnector.defaultProps = {
+  includeNoChange: false
+};
+
+export default connect(createMapStateToProps)(IndexerSelectInputConnector);

frontend/src/Helpers/Props/inputTypes.js

@@ -10,6 +10,7 @@ export const PASSWORD = 'password';
 export const PATH = 'path';
 export const QUALITY_PROFILE_SELECT = 'qualityProfileSelect';
 export const LANGUAGE_PROFILE_SELECT = 'languageProfileSelect';
+export const INDEXER_SELECT = 'indexerSelect';
 export const ROOT_FOLDER_SELECT = 'rootFolderSelect';
 export const SELECT = 'select';
 export const SERIES_TYPE_SELECT = 'seriesTypeSelect';
@@ -30,6 +31,7 @@ export const all = [
   PATH,
   QUALITY_PROFILE_SELECT,
   LANGUAGE_PROFILE_SELECT,
+  INDEXER_SELECT,
   ROOT_FOLDER_SELECT,
   SELECT,
   SERIES_TYPE_SELECT,

frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContent.js

@@ -123,7 +123,7 @@ function EditReleaseProfileModalContent(props) {
             <FormLabel>Indexer</FormLabel>
 
             <FormInputGroup
-              type={inputTypes.NUMBER}
+              type={inputTypes.INDEXER_SELECT}
               name="indexerId"
               helpText="Specify what indexer the profile applies to"
               {...indexerId}

frontend/src/Store/Selectors/createIndexerSelector.js

@@ -0,0 +1,15 @@
+import { createSelector } from 'reselect';
+
+function createIndexerSelector() {
+  return createSelector(
+    (state, { indexerId }) => indexerId,
+    (state) => state.settings.indexers.items,
+    (indexerId, indexers) => {
+      return indexers.find((profile) => {
+        return profile.id === indexerId;
+      });
+    }
+  );
+}
+
+export default createIndexerSelector;