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 e5dceaf5d..57e64f153 100644
--- a/frontend/src/Components/Form/FormInputGroup.js
+++ b/frontend/src/Components/Form/FormInputGroup.js
@@ -9,6 +9,7 @@ import CheckInput from './CheckInput';
import DeviceInputConnector from './DeviceInputConnector';
import EnhancedSelectInput from './EnhancedSelectInput';
import FormInputHelpText from './FormInputHelpText';
+import IndexerSelectInputConnector from './IndexerSelectInputConnector';
import KeyValueListInput from './KeyValueListInput';
import MetadataProfileSelectInputConnector from './MetadataProfileSelectInputConnector';
import MonitorAlbumsSelectInput from './MonitorAlbumsSelectInput';
@@ -69,6 +70,9 @@ function getComponent(type) {
case inputTypes.ALBUM_RELEASE_SELECT:
return AlbumReleaseSelectInputConnector;
+ 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..838107286
--- /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 { fetchIndexers } from 'Store/Actions/settingsActions';
+import sortByName from 'Utilities/Array/sortByName';
+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 (
+