diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css
index 774a63517..41456c9cf 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -1,19 +1,8 @@
.enhancedSelect {
composes: input from '~Components/Form/Input.css';
- composes: link from '~Components/Link/Link.css';
- position: relative;
display: flex;
align-items: center;
- padding: 6px 16px;
- width: 100%;
- height: 35px;
- border: 1px solid $inputBorderColor;
- border-radius: 4px;
- background-color: $white;
- box-shadow: inset 0 1px 1px $inputBoxShadowColor;
- color: $black;
- cursor: default;
}
.hasError {
diff --git a/frontend/src/Components/Form/FormInputGroup.js b/frontend/src/Components/Form/FormInputGroup.js
index 87f39bab3..393a6b0ba 100644
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/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 EnhancedSelectInput from './EnhancedSelectInput';
@@ -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;
diff --git a/frontend/src/Components/Form/IndexerSelectInputConnector.js b/frontend/src/Components/Form/IndexerSelectInputConnector.js
new file mode 100644
index 000000000..72de50f3a
--- /dev/null
+++ b/frontend/src/Components/Form/IndexerSelectInputConnector.js
@@ -0,0 +1,102 @@
+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 { fetchIndexers } from 'Store/Actions/settingsActions';
+import EnhancedSelectInput from './EnhancedSelectInput';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.indexers,
+ (state, { includeAny }) => includeAny,
+ (indexers, includeAny) => {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items
+ } = indexers;
+
+ const values = _.map(items.sort(sortByName), (indexer) => {
+ return {
+ key: indexer.id,
+ value: indexer.name
+ };
+ });
+
+ if (includeAny) {
+ values.unshift({
+ key: 0,
+ value: '(Any)'
+ });
+ }
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ values
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchIndexers: fetchIndexers
+};
+
+class IndexerSelectInputConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ if (!this.props.isPopulated) {
+ this.props.dispatchFetchIndexers();
+ }
+
+ const {
+ name,
+ value,
+ values
+ } = this.props;
+ }
+
+ //
+ // Listeners
+
+ onChange = ({ name, value }) => {
+ this.props.onChange({ name, value: parseInt(value) });
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+