Rework Add Indexer Modal

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -1,98 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component, Fragment } from 'react';
-import PageContent from 'Components/Page/PageContent';
-import PageContentBody from 'Components/Page/PageContentBody';
-import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
-import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
-import { icons } from 'Helpers/Props';
-import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
-import translate from 'Utilities/String/translate';
-import IndexersConnector from './Indexers/IndexersConnector';
-import IndexerOptionsConnector from './Options/IndexerOptionsConnector';
-
-class IndexerSettings extends Component {
-
-  //
-  // Lifecycle
-
-  constructor(props, context) {
-    super(props, context);
-
-    this._saveCallback = null;
-
-    this.state = {
-      isSaving: false,
-      hasPendingChanges: false
-    };
-  }
-
-  //
-  // Listeners
-
-  onChildMounted = (saveCallback) => {
-    this._saveCallback = saveCallback;
-  }
-
-  onChildStateChange = (payload) => {
-    this.setState(payload);
-  }
-
-  onSavePress = () => {
-    if (this._saveCallback) {
-      this._saveCallback();
-    }
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      isTestingAll,
-      dispatchTestAllIndexers
-    } = this.props;
-
-    const {
-      isSaving,
-      hasPendingChanges
-    } = this.state;
-
-    return (
-      <PageContent title={translate('IndexerSettings')}>
-        <SettingsToolbarConnector
-          isSaving={isSaving}
-          hasPendingChanges={hasPendingChanges}
-          additionalButtons={
-            <Fragment>
-              <PageToolbarSeparator />
-
-              <PageToolbarButton
-                label={translate('TestAllIndexers')}
-                iconName={icons.TEST}
-                isSpinning={isTestingAll}
-                onPress={dispatchTestAllIndexers}
-              />
-            </Fragment>
-          }
-          onSavePress={this.onSavePress}
-        />
-
-        <PageContentBody>
-          <IndexersConnector />
-
-          <IndexerOptionsConnector
-            onChildMounted={this.onChildMounted}
-            onChildStateChange={this.onChildStateChange}
-          />
-        </PageContentBody>
-      </PageContent>
-    );
-  }
-}
-
-IndexerSettings.propTypes = {
-  isTestingAll: PropTypes.bool.isRequired,
-  dispatchTestAllIndexers: PropTypes.func.isRequired
-};
-
-export default IndexerSettings;

frontend/src/Settings/Indexers/IndexerSettingsConnector.js

@@ -1,21 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { testAllIndexers } from 'Store/Actions/indexerActions';
-import IndexerSettings from './IndexerSettings';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.indexers.isTestingAll,
-    (isTestingAll) => {
-      return {
-        isTestingAll
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchTestAllIndexers: testAllIndexers
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(IndexerSettings);

frontend/src/Settings/Indexers/Indexers/AddIndexerItem.css

@@ -1,44 +0,0 @@
-.indexer {
-  composes: card from '~Components/Card.css';
-
-  position: relative;
-  width: 300px;
-  height: 100px;
-}
-
-.underlay {
-  @add-mixin cover;
-}
-
-.overlay {
-  @add-mixin linkOverlay;
-
-  padding: 10px;
-}
-
-.name {
-  text-align: center;
-  font-weight: lighter;
-  font-size: 24px;
-}
-
-.actions {
-  margin-top: 20px;
-  text-align: right;
-}
-
-.presetsMenu {
-  composes: menu from '~Components/Menu/Menu.css';
-
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.presetsMenuButton {
-  composes: button from '~Components/Link/Button.css';
-
-  &::after {
-    margin-left: 5px;
-    content: '\25BE';
-  }
-}

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

@@ -1,112 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Button from 'Components/Link/Button';
-import Link from 'Components/Link/Link';
-import Menu from 'Components/Menu/Menu';
-import MenuContent from 'Components/Menu/MenuContent';
-import { sizes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import AddIndexerPresetMenuItem from './AddIndexerPresetMenuItem';
-import styles from './AddIndexerItem.css';
-
-class AddIndexerItem extends Component {
-
-  //
-  // Listeners
-
-  onIndexerSelect = () => {
-    const {
-      implementation,
-      name
-    } = this.props;
-
-    this.props.onIndexerSelect({ implementation, name });
-  }
-
-  //
-  // Render
-
-  render() {
-    const {
-      name,
-      implementation,
-      infoLink,
-      presets,
-      onIndexerSelect
-    } = this.props;
-
-    const hasPresets = !!presets && !!presets.length;
-
-    return (
-      <div
-        className={styles.indexer}
-      >
-        <Link
-          className={styles.underlay}
-          onPress={this.onIndexerSelect}
-        />
-
-        <div className={styles.overlay}>
-          <div className={styles.name}>
-            {name}
-          </div>
-
-          <div className={styles.actions}>
-            {
-              hasPresets &&
-                <span>
-                  <Button
-                    size={sizes.SMALL}
-                    onPress={this.onIndexerSelect}
-                  >
-                    Custom
-                  </Button>
-
-                  <Menu className={styles.presetsMenu}>
-                    <Button
-                      className={styles.presetsMenuButton}
-                      size={sizes.SMALL}
-                    >
-                      Presets
-                    </Button>
-
-                    <MenuContent>
-                      {
-                        presets.map((preset) => {
-                          return (
-                            <AddIndexerPresetMenuItem
-                              key={preset.name}
-                              name={preset.name}
-                              implementation={implementation}
-                              onPress={onIndexerSelect}
-                            />
-                          );
-                        })
-                      }
-                    </MenuContent>
-                  </Menu>
-                </span>
-            }
-
-            <Button
-              to={infoLink}
-              size={sizes.SMALL}
-            >
-              {translate('MoreInfo')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-AddIndexerItem.propTypes = {
-  name: PropTypes.string.isRequired,
-  implementation: PropTypes.string.isRequired,
-  infoLink: PropTypes.string.isRequired,
-  presets: PropTypes.arrayOf(PropTypes.object),
-  onIndexerSelect: PropTypes.func.isRequired
-};
-
-export default AddIndexerItem;

frontend/src/Settings/Indexers/Indexers/AddIndexerModalContent.css

@@ -3,3 +3,28 @@
   justify-content: center;
   flex-wrap: wrap;
 }
+
+.modalBody {
+  composes: modalBody from '~Components/Modal/ModalBody.css';
+
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.filterInput {
+  composes: input from '~Components/Form/TextInput.css';
+
+  flex: 0 0 auto;
+  margin-bottom: 20px;
+}
+
+.alert {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 20px;
+}
+
+.scroller {
+  flex: 1 1 auto;
+}

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

@@ -1,102 +1,152 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import Alert from 'Components/Alert';
-import FieldSet from 'Components/FieldSet';
+import TextInput from 'Components/Form/TextInput';
 import Button from 'Components/Link/Button';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import ModalBody from 'Components/Modal/ModalBody';
 import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
-import { kinds } from 'Helpers/Props';
+import Scroller from 'Components/Scroller/Scroller';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { kinds, scrollDirections } from 'Helpers/Props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
-import AddIndexerItem from './AddIndexerItem';
+import SelectIndexerRow from './SelectIndexerRow';
 import styles from './AddIndexerModalContent.css';
 
+const columns = [
+  {
+    name: 'protocol',
+    label: 'Protocol',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'name',
+    label: 'Name',
+    isSortable: true,
+    isVisible: true
+  },
+  {
+    name: 'privacy',
+    label: 'Privacy',
+    isSortable: true,
+    isVisible: true
+  }
+];
+
 class AddIndexerModalContent extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      filter: ''
+    };
+  }
+
+  //
+  // Listeners
+
+  onFilterChange = ({ value }) => {
+    this.setState({ filter: value });
+  }
+
   //
   // Render
 
   render() {
     const {
-      isSchemaFetching,
-      isSchemaPopulated,
-      schemaError,
-      usenetIndexers,
-      torrentIndexers,
+      indexers,
       onIndexerSelect,
+      sortKey,
+      sortDirection,
+      isFetching,
+      isPopulated,
+      error,
+      onSortPress,
       onModalClose
     } = this.props;
 
+    const filter = this.state.filter;
+    const filterLower = filter.toLowerCase();
+
+    const errorMessage = getErrorMessage(error, 'Unable to load indexers');
+
     return (
       <ModalContent onModalClose={onModalClose}>
         <ModalHeader>
           Add Indexer
         </ModalHeader>
 
-        <ModalBody>
-          {
-            isSchemaFetching &&
-              <LoadingIndicator />
-          }
+        <ModalBody
+          className={styles.modalBody}
+          scrollDirection={scrollDirections.NONE}
+        >
+          <TextInput
+            className={styles.filterInput}
+            placeholder={translate('FilterPlaceHolder')}
+            name="filter"
+            value={filter}
+            autoFocus={true}
+            onChange={this.onFilterChange}
+          />
 
-          {
-            !isSchemaFetching && !!schemaError &&
-              <div>
-                {translate('UnableToAddANewIndexerPleaseTryAgain')}
-              </div>
-          }
+          <Alert
+            kind={kinds.INFO}
+            className={styles.alert}
+          >
+            <div>
+              {translate('ProwlarrSupportsAnyIndexer')}
+            </div>
+          </Alert>
 
-          {
-            isSchemaPopulated && !schemaError &&
-              <div>
-
-                <Alert kind={kinds.INFO}>
-                  <div>
-                    {translate('ProwlarrSupportsAnyIndexer')}
-                  </div>
-                  <div>
-                    {translate('ForMoreInformationOnTheIndividualIndexers')}
-                  </div>
-                </Alert>
-
-                <FieldSet legend={translate('Usenet')}>
-                  <div className={styles.indexers}>
+          <Scroller
+            className={styles.scroller}
+            autoFocus={false}
+          >
+            {
+              isFetching ? <LoadingIndicator /> : null
+            }
+            {
+              error ? <div>{errorMessage}</div> : null
+            }
+            {
+              isPopulated && !!indexers.length ?
+                <Table
+                  columns={columns}
+                  sortKey={sortKey}
+                  sortDirection={sortDirection}
+                  onSortPress={onSortPress}
+                >
+                  <TableBody>
                     {
-                      usenetIndexers.map((indexer) => {
-                        return (
-                          <AddIndexerItem
-                            key={indexer.name}
-                            implementation={indexer.implementation}
-                            {...indexer}
-                            onIndexerSelect={onIndexerSelect}
-                          />
-                        );
+                      indexers.map((indexer) => {
+                        return indexer.name.toLowerCase().includes(filterLower) ?
+                          (
+                            <SelectIndexerRow
+                              key={indexer.name}
+                              implementation={indexer.implementation}
+                              {...indexer}
+                              onIndexerSelect={onIndexerSelect}
+                            />
+                          ) :
+                          null;
                       })
                     }
-                  </div>
-                </FieldSet>
-
-                <FieldSet legend={translate('Torrents')}>
-                  <div className={styles.indexers}>
-                    {
-                      torrentIndexers.map((indexer) => {
-                        return (
-                          <AddIndexerItem
-                            key={indexer.name}
-                            implementation={indexer.implementation}
-                            {...indexer}
-                            onIndexerSelect={onIndexerSelect}
-                          />
-                        );
-                      })
-                    }
-                  </div>
-                </FieldSet>
-              </div>
-          }
+                  </TableBody>
+                </Table> :
+                null
+            }
+          </Scroller>
         </ModalBody>
+
         <ModalFooter>
           <Button
             onPress={onModalClose}
@@ -110,11 +160,13 @@ class AddIndexerModalContent extends Component {
 }
 
 AddIndexerModalContent.propTypes = {
-  isSchemaFetching: PropTypes.bool.isRequired,
-  isSchemaPopulated: PropTypes.bool.isRequired,
-  schemaError: PropTypes.object,
-  usenetIndexers: PropTypes.arrayOf(PropTypes.object).isRequired,
-  torrentIndexers: PropTypes.arrayOf(PropTypes.object).isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  sortKey: PropTypes.string,
+  sortDirection: PropTypes.string,
+  onSortPress: PropTypes.func.isRequired,
+  indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
   onIndexerSelect: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };

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

@@ -1,31 +1,31 @@
-import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { fetchIndexerSchema, selectIndexerSchema } from 'Store/Actions/indexerActions';
+import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import AddIndexerModalContent from './AddIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
-    (state) => state.indexers,
+    createClientSideCollectionSelector('indexers.schema'),
     (indexers) => {
       const {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        schema
+        isFetching,
+        isPopulated,
+        error,
+        items,
+        sortDirection,
+        sortKey
       } = indexers;
 
-      const usenetIndexers = _.filter(schema, { protocol: 'usenet' });
-      const torrentIndexers = _.filter(schema, { protocol: 'torrent' });
-
       return {
-        isSchemaFetching,
-        isSchemaPopulated,
-        schemaError,
-        usenetIndexers,
-        torrentIndexers
+        isFetching,
+        isPopulated,
+        error,
+        indexers: items,
+        sortKey,
+        sortDirection
       };
     }
   );
@@ -33,7 +33,8 @@ function createMapStateToProps() {
 
 const mapDispatchToProps = {
   fetchIndexerSchema,
-  selectIndexerSchema
+  selectIndexerSchema,
+  setIndexerSchemaSort
 };
 
 class AddIndexerModalContentConnector extends Component {
@@ -53,6 +54,10 @@ class AddIndexerModalContentConnector extends Component {
     this.props.onModalClose({ indexerSelected: true });
   }
 
+  onSortPress = (sortKey, sortDirection) => {
+    this.props.setIndexerSchemaSort({ sortKey, sortDirection });
+  }
+
   //
   // Render
 
@@ -60,6 +65,7 @@ class AddIndexerModalContentConnector extends Component {
     return (
       <AddIndexerModalContent
         {...this.props}
+        onSortPress={this.onSortPress}
         onIndexerSelect={this.onIndexerSelect}
       />
     );
@@ -69,6 +75,7 @@ class AddIndexerModalContentConnector extends Component {
 AddIndexerModalContentConnector.propTypes = {
   fetchIndexerSchema: PropTypes.func.isRequired,
   selectIndexerSchema: PropTypes.func.isRequired,
+  setIndexerSchemaSort: PropTypes.func.isRequired,
   onModalClose: PropTypes.func.isRequired
 };
 

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

@@ -3,13 +3,13 @@ import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { saveIndexer, setIndexerFieldValue, setIndexerValue, testIndexer } from 'Store/Actions/indexerActions';
-import createProviderSelector from 'Store/Selectors/createProviderSelector';
+import createIndexerSchemaSelector from 'Store/Selectors/createIndexerSchemaSelector';
 import EditIndexerModalContent from './EditIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.settings.advancedSettings,
-    createProviderSelector('indexers'),
+    createIndexerSchemaSelector(),
     (advancedSettings, indexer) => {
       return {
         advancedSettings,

frontend/src/Settings/Indexers/Indexers/SelectIndexerRow.css

@@ -0,0 +1,5 @@
+.protocol {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  width: 32px;
+}

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

@@ -0,0 +1,60 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import styles from './SelectIndexerRow.css';
+
+class SelectIndexerRow extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      implementation,
+      name
+    } = this.props;
+
+    this.props.onIndexerSelect({ implementation, name });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      protocol,
+      privacy,
+      name
+    } = this.props;
+
+    return (
+      <TableRowButton onPress={this.onPress}>
+        <TableRowCell className={styles.protocol}>
+          <ProtocolLabel
+            protocol={protocol}
+          />
+        </TableRowCell>
+
+        <TableRowCell>
+          {name}
+        </TableRowCell>
+
+        <TableRowCell>
+          {privacy}
+        </TableRowCell>
+      </TableRowButton>
+    );
+  }
+}
+
+SelectIndexerRow.propTypes = {
+  name: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  privacy: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onIndexerSelect: PropTypes.func.isRequired
+};
+
+export default SelectIndexerRow;

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

@@ -1,171 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import FieldSet from 'Components/FieldSet';
-import Form from 'Components/Form/Form';
-import FormGroup from 'Components/Form/FormGroup';
-import FormInputGroup from 'Components/Form/FormInputGroup';
-import FormLabel from 'Components/Form/FormLabel';
-import LoadingIndicator from 'Components/Loading/LoadingIndicator';
-import { inputTypes } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-
-function IndexerOptions(props) {
-  const {
-    advancedSettings,
-    isFetching,
-    error,
-    settings,
-    hasSettings,
-    onInputChange
-  } = props;
-
-  return (
-    <FieldSet legend={translate('Options')}>
-      {
-        isFetching &&
-          <LoadingIndicator />
-      }
-
-      {
-        !isFetching && error &&
-          <div>
-            {translate('UnableToLoadIndexerOptions')}
-          </div>
-      }
-
-      {
-        hasSettings && !isFetching && !error &&
-          <Form>
-            <FormGroup>
-              <FormLabel>{translate('MinimumAge')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.NUMBER}
-                name="minimumAge"
-                min={0}
-                unit="minutes"
-                helpText={translate('MinimumAgeHelpText')}
-                onChange={onInputChange}
-                {...settings.minimumAge}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('Retention')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.NUMBER}
-                name="retention"
-                min={0}
-                unit="days"
-                helpText={translate('RetentionHelpText')}
-                onChange={onInputChange}
-                {...settings.retention}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('MaximumSize')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.NUMBER}
-                name="maximumSize"
-                min={0}
-                unit="MB"
-                helpText={translate('MaximumSizeHelpText')}
-                onChange={onInputChange}
-                {...settings.maximumSize}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('PreferIndexerFlags')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="preferIndexerFlags"
-                helpText={translate('PreferIndexerFlagsHelpText')}
-                helpLink="https://github.com/Prowlarr/Prowlarr/wiki/Indexer-Flags"
-                onChange={onInputChange}
-                {...settings.preferIndexerFlags}
-              />
-            </FormGroup>
-
-            <FormGroup>
-              <FormLabel>{translate('AvailabilityDelay')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.NUMBER}
-                name="availabilityDelay"
-                unit="Days"
-                helpText={translate('AvailabilityDelayHelpText')}
-                onChange={onInputChange}
-                {...settings.availabilityDelay}
-              />
-            </FormGroup>
-
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-            >
-              <FormLabel>{translate('RSSSyncInterval')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.NUMBER}
-                name="rssSyncInterval"
-                min={0}
-                max={120}
-                unit="minutes"
-                helpText={translate('HelpText')}
-                helpTextWarning={translate('RSSSyncIntervalHelpTextWarning')}
-                helpLink="https://github.com/Prowlarr/Prowlarr/wiki/RSS-Sync"
-                onChange={onInputChange}
-                {...settings.rssSyncInterval}
-              />
-            </FormGroup>
-
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-            >
-              <FormLabel>{translate('WhitelistedSubtitleTags')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.TEXT_TAG}
-                name="whitelistedHardcodedSubs"
-                helpText={translate('WhitelistedHardcodedSubsHelpText')}
-                onChange={onInputChange}
-                {...settings.whitelistedHardcodedSubs}
-              />
-            </FormGroup>
-
-            <FormGroup
-              advancedSettings={advancedSettings}
-              isAdvanced={true}
-            >
-              <FormLabel>{translate('AllowHardcodedSubs')}</FormLabel>
-
-              <FormInputGroup
-                type={inputTypes.CHECK}
-                name="allowHardcodedSubs"
-                helpText={translate('AllowHardcodedSubsHelpText')}
-                onChange={onInputChange}
-                {...settings.allowHardcodedSubs}
-              />
-            </FormGroup>
-          </Form>
-      }
-    </FieldSet>
-  );
-}
-
-IndexerOptions.propTypes = {
-  advancedSettings: PropTypes.bool.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-  error: PropTypes.object,
-  settings: PropTypes.object.isRequired,
-  hasSettings: PropTypes.bool.isRequired,
-  onInputChange: PropTypes.func.isRequired
-};
-
-export default IndexerOptions;

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

@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { clearPendingChanges } from 'Store/Actions/baseActions';
-import { fetchIndexerOptions, saveIndexerOptions, setIndexerOptionsValue } from 'Store/Actions/settingsActions';
-import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
-import IndexerOptions from './IndexerOptions';
-
-const SECTION = 'indexerOptions';
-
-function createMapStateToProps() {
-  return createSelector(
-    (state) => state.settings.advancedSettings,
-    createSettingsSectionSelector(SECTION),
-    (advancedSettings, sectionSettings) => {
-      return {
-        advancedSettings,
-        ...sectionSettings
-      };
-    }
-  );
-}
-
-const mapDispatchToProps = {
-  dispatchFetchIndexerOptions: fetchIndexerOptions,
-  dispatchSetIndexerOptionsValue: setIndexerOptionsValue,
-  dispatchSaveIndexerOptions: saveIndexerOptions,
-  dispatchClearPendingChanges: clearPendingChanges
-};
-
-class IndexerOptionsConnector extends Component {
-
-  //
-  // Lifecycle
-
-  componentDidMount() {
-    const {
-      dispatchFetchIndexerOptions,
-      dispatchSaveIndexerOptions,
-      onChildMounted
-    } = this.props;
-
-    dispatchFetchIndexerOptions();
-    onChildMounted(dispatchSaveIndexerOptions);
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      hasPendingChanges,
-      isSaving,
-      onChildStateChange
-    } = this.props;
-
-    if (
-      prevProps.isSaving !== isSaving ||
-      prevProps.hasPendingChanges !== hasPendingChanges
-    ) {
-      onChildStateChange({
-        isSaving,
-        hasPendingChanges
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    this.props.dispatchClearPendingChanges({ section: `settings.${SECTION}` });
-  }
-
-  //
-  // Listeners
-
-  onInputChange = ({ name, value }) => {
-    this.props.dispatchSetIndexerOptionsValue({ name, value });
-  }
-
-  //
-  // Render
-
-  render() {
-    return (
-      <IndexerOptions
-        onInputChange={this.onInputChange}
-        {...this.props}
-      />
-    );
-  }
-}
-
-IndexerOptionsConnector.propTypes = {
-  isSaving: PropTypes.bool.isRequired,
-  hasPendingChanges: PropTypes.bool.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 connect(createMapStateToProps, mapDispatchToProps)(IndexerOptionsConnector);