New: Per Indexer Proxies

Fixes #281

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyItem.css

@@ -0,0 +1,44 @@
+.indexerProxy {
+  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/IndexerProxies/AddIndexerProxyItem.js

@@ -0,0 +1,111 @@
+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 AddIndexerProxyPresetMenuItem from './AddIndexerProxyPresetMenuItem';
+import styles from './AddIndexerProxyItem.css';
+
+class AddIndexerProxyItem extends Component {
+
+  //
+  // Listeners
+
+  onIndexerProxySelect = () => {
+    const {
+      implementation
+    } = this.props;
+
+    this.props.onIndexerProxySelect({ implementation });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      implementation,
+      implementationName,
+      infoLink,
+      presets,
+      onIndexerProxySelect
+    } = this.props;
+
+    const hasPresets = !!presets && !!presets.length;
+
+    return (
+      <div
+        className={styles.indexerProxy}
+      >
+        <Link
+          className={styles.underlay}
+          onPress={this.onIndexerProxySelect}
+        />
+
+        <div className={styles.overlay}>
+          <div className={styles.name}>
+            {implementationName}
+          </div>
+
+          <div className={styles.actions}>
+            {
+              hasPresets &&
+                <span>
+                  <Button
+                    size={sizes.SMALL}
+                    onPress={this.onIndexerProxySelect}
+                  >
+                    Custom
+                  </Button>
+
+                  <Menu className={styles.presetsMenu}>
+                    <Button
+                      className={styles.presetsMenuButton}
+                      size={sizes.SMALL}
+                    >
+                      Presets
+                    </Button>
+
+                    <MenuContent>
+                      {
+                        presets.map((preset) => {
+                          return (
+                            <AddIndexerProxyPresetMenuItem
+                              key={preset.name}
+                              name={preset.name}
+                              implementation={implementation}
+                              onPress={onIndexerProxySelect}
+                            />
+                          );
+                        })
+                      }
+                    </MenuContent>
+                  </Menu>
+                </span>
+            }
+
+            <Button
+              to={infoLink}
+              size={sizes.SMALL}
+            >
+              {translate('MoreInfo')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AddIndexerProxyItem.propTypes = {
+  implementation: PropTypes.string.isRequired,
+  implementationName: PropTypes.string.isRequired,
+  infoLink: PropTypes.string.isRequired,
+  presets: PropTypes.arrayOf(PropTypes.object),
+  onIndexerProxySelect: PropTypes.func.isRequired
+};
+
+export default AddIndexerProxyItem;

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyModal.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import AddIndexerProxyModalContentConnector from './AddIndexerProxyModalContentConnector';
+
+function AddIndexerProxyModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <AddIndexerProxyModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+AddIndexerProxyModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddIndexerProxyModal;

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyModalContent.css

@@ -0,0 +1,5 @@
+.indexerProxies {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyModalContent.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+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 translate from 'Utilities/String/translate';
+import AddIndexerProxyItem from './AddIndexerProxyItem';
+import styles from './AddIndexerProxyModalContent.css';
+
+class AddIndexerProxyModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isSchemaFetching,
+      isSchemaPopulated,
+      schemaError,
+      schema,
+      onIndexerProxySelect,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add IndexerProxy
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isSchemaFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isSchemaFetching && !!schemaError &&
+              <div>
+                {translate('UnableToAddANewIndexerProxyPleaseTryAgain')}
+              </div>
+          }
+
+          {
+            isSchemaPopulated && !schemaError &&
+              <div>
+                <div className={styles.indexerProxies}>
+                  {
+                    schema.map((indexerProxy) => {
+                      return (
+                        <AddIndexerProxyItem
+                          key={indexerProxy.implementation}
+                          implementation={indexerProxy.implementation}
+                          {...indexerProxy}
+                          onIndexerProxySelect={onIndexerProxySelect}
+                        />
+                      );
+                    })
+                  }
+                </div>
+              </div>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Close')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddIndexerProxyModalContent.propTypes = {
+  isSchemaFetching: PropTypes.bool.isRequired,
+  isSchemaPopulated: PropTypes.bool.isRequired,
+  schemaError: PropTypes.object,
+  schema: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onIndexerProxySelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddIndexerProxyModalContent;

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyModalContentConnector.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchIndexerProxySchema, selectIndexerProxySchema } from 'Store/Actions/settingsActions';
+import AddIndexerProxyModalContent from './AddIndexerProxyModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.indexerProxies,
+    (indexerProxies) => {
+      const {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        schema
+      } = indexerProxies;
+
+      return {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        schema
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchIndexerProxySchema,
+  selectIndexerProxySchema
+};
+
+class AddIndexerProxyModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchIndexerProxySchema();
+  }
+
+  //
+  // Listeners
+
+  onIndexerProxySelect = ({ implementation, name }) => {
+    this.props.selectIndexerProxySchema({ implementation, presetName: name });
+    this.props.onModalClose({ indexerProxySelected: true });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddIndexerProxyModalContent
+        {...this.props}
+        onIndexerProxySelect={this.onIndexerProxySelect}
+      />
+    );
+  }
+}
+
+AddIndexerProxyModalContentConnector.propTypes = {
+  fetchIndexerProxySchema: PropTypes.func.isRequired,
+  selectIndexerProxySchema: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddIndexerProxyModalContentConnector);

frontend/src/Settings/Indexers/IndexerProxies/AddIndexerProxyPresetMenuItem.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class AddIndexerProxyPresetMenuItem extends Component {
+
+  //
+  // Listeners
+
+  onPress = () => {
+    const {
+      name,
+      implementation
+    } = this.props;
+
+    this.props.onPress({
+      name,
+      implementation
+    });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      name,
+      implementation,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <MenuItem
+        {...otherProps}
+        onPress={this.onPress}
+      >
+        {name}
+      </MenuItem>
+    );
+  }
+}
+
+AddIndexerProxyPresetMenuItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default AddIndexerProxyPresetMenuItem;

frontend/src/Settings/Indexers/IndexerProxies/EditIndexerProxyModal.js

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import EditIndexerProxyModalContentConnector from './EditIndexerProxyModalContentConnector';
+
+function EditIndexerProxyModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditIndexerProxyModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditIndexerProxyModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditIndexerProxyModal;

frontend/src/Settings/Indexers/IndexerProxies/EditIndexerProxyModalConnector.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { cancelSaveIndexerProxy, cancelTestIndexerProxy } from 'Store/Actions/settingsActions';
+import EditIndexerProxyModal from './EditIndexerProxyModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  const section = 'settings.indexerProxies';
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    },
+
+    dispatchCancelTestIndexerProxy() {
+      dispatch(cancelTestIndexerProxy({ section }));
+    },
+
+    dispatchCancelSaveIndexerProxy() {
+      dispatch(cancelSaveIndexerProxy({ section }));
+    }
+  };
+}
+
+class EditIndexerProxyModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.dispatchClearPendingChanges();
+    this.props.dispatchCancelTestIndexerProxy();
+    this.props.dispatchCancelSaveIndexerProxy();
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchClearPendingChanges,
+      dispatchCancelTestIndexerProxy,
+      dispatchCancelSaveIndexerProxy,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <EditIndexerProxyModal
+        {...otherProps}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditIndexerProxyModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  dispatchCancelTestIndexerProxy: PropTypes.func.isRequired,
+  dispatchCancelSaveIndexerProxy: PropTypes.func.isRequired
+};
+
+export default connect(null, createMapDispatchToProps)(EditIndexerProxyModalConnector);

frontend/src/Settings/Indexers/IndexerProxies/EditIndexerProxyModalContent.css

@@ -0,0 +1,11 @@
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: auto;
+}
+
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

frontend/src/Settings/Indexers/IndexerProxies/EditIndexerProxyModalContent.js

@@ -0,0 +1,175 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from 'Components/Alert';
+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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+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 { inputTypes, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './EditIndexerProxyModalContent.css';
+
+function EditIndexerProxyModalContent(props) {
+  const {
+    advancedSettings,
+    isFetching,
+    error,
+    isSaving,
+    isTesting,
+    saveError,
+    item,
+    onInputChange,
+    onFieldChange,
+    onModalClose,
+    onSavePress,
+    onTestPress,
+    onDeleteIndexerProxyPress,
+    ...otherProps
+  } = props;
+
+  const {
+    id,
+    implementationName,
+    name,
+    tags,
+    fields,
+    message
+  } = item;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {`${id ? 'Edit' : 'Add'} Proxy - ${implementationName}`}
+      </ModalHeader>
+
+      <ModalBody>
+        {
+          isFetching &&
+            <LoadingIndicator />
+        }
+
+        {
+          !isFetching && !!error &&
+            <div>
+              {translate('UnableToAddANewIndexerProxyPleaseTryAgain')}
+            </div>
+        }
+
+        {
+          !isFetching && !error &&
+            <Form {...otherProps}>
+              {
+                !!message &&
+                  <Alert
+                    className={styles.message}
+                    kind={message.value.type}
+                  >
+                    {message.value.message}
+                  </Alert>
+              }
+
+              <FormGroup>
+                <FormLabel>{translate('Name')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="name"
+                  {...name}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>{translate('Tags')}</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TAG}
+                  name="tags"
+                  helpText={translate('TagsHelpText')}
+                  {...tags}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              {
+                fields.map((field) => {
+                  return (
+                    <ProviderFieldFormGroup
+                      key={field.name}
+                      advancedSettings={advancedSettings}
+                      provider="indexerProxy"
+                      providerData={item}
+                      section="settings.indexerProxies"
+                      {...field}
+                      onChange={onFieldChange}
+                    />
+                  );
+                })
+              }
+
+            </Form>
+        }
+      </ModalBody>
+      <ModalFooter>
+        {
+          id &&
+            <Button
+              className={styles.deleteButton}
+              kind={kinds.DANGER}
+              onPress={onDeleteIndexerProxyPress}
+            >
+              {translate('Delete')}
+            </Button>
+        }
+
+        <SpinnerErrorButton
+          isSpinning={isTesting}
+          error={saveError}
+          onPress={onTestPress}
+        >
+          {translate('Test')}
+        </SpinnerErrorButton>
+
+        <Button
+          onPress={onModalClose}
+        >
+          {translate('Cancel')}
+        </Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={onSavePress}
+        >
+          {translate('Save')}
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+EditIndexerProxyModalContent.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  isTesting: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onTestPress: PropTypes.func.isRequired,
+  onDeleteIndexerProxyPress: PropTypes.func
+};
+
+export default EditIndexerProxyModalContent;

frontend/src/Settings/Indexers/IndexerProxies/EditIndexerProxyModalContentConnector.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveIndexerProxy, setIndexerProxyFieldValue, setIndexerProxyValue, testIndexerProxy } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditIndexerProxyModalContent from './EditIndexerProxyModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('indexerProxies'),
+    (advancedSettings, indexerProxy) => {
+      return {
+        advancedSettings,
+        ...indexerProxy
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setIndexerProxyValue,
+  setIndexerProxyFieldValue,
+  saveIndexerProxy,
+  testIndexerProxy
+};
+
+class EditIndexerProxyModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setIndexerProxyValue({ name, value });
+  }
+
+  onFieldChange = ({ name, value }) => {
+    this.props.setIndexerProxyFieldValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveIndexerProxy({ id: this.props.id });
+  }
+
+  onTestPress = () => {
+    this.props.testIndexerProxy({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditIndexerProxyModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onTestPress={this.onTestPress}
+        onInputChange={this.onInputChange}
+        onFieldChange={this.onFieldChange}
+      />
+    );
+  }
+}
+
+EditIndexerProxyModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setIndexerProxyValue: PropTypes.func.isRequired,
+  setIndexerProxyFieldValue: PropTypes.func.isRequired,
+  saveIndexerProxy: PropTypes.func.isRequired,
+  testIndexerProxy: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditIndexerProxyModalContentConnector);

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.css

@@ -0,0 +1,20 @@
+.indexerProxies {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.addIndexerProxy {
+  composes: indexerProxy from '~./IndexerProxy.css';
+
+  background-color: $cardAlternateBackgroundColor;
+  color: $gray;
+  text-align: center;
+}
+
+.center {
+  display: inline-block;
+  padding: 5px 20px 0;
+  border: 1px solid $borderColor;
+  border-radius: 4px;
+  background-color: $white;
+}

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxies.js

@@ -0,0 +1,121 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import AddIndexerProxyModal from './AddIndexerProxyModal';
+import EditIndexerProxyModalConnector from './EditIndexerProxyModalConnector';
+import IndexerProxy from './IndexerProxy';
+import styles from './IndexerProxies.css';
+
+class IndexerProxies extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddIndexerProxyModalOpen: false,
+      isEditIndexerProxyModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onAddIndexerProxyPress = () => {
+    this.setState({ isAddIndexerProxyModalOpen: true });
+  }
+
+  onAddIndexerProxyModalClose = ({ indexerProxySelected = false } = {}) => {
+    this.setState({
+      isAddIndexerProxyModalOpen: false,
+      isEditIndexerProxyModalOpen: indexerProxySelected
+    });
+  }
+
+  onEditIndexerProxyModalClose = () => {
+    this.setState({ isEditIndexerProxyModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      tagList,
+      indexerList,
+      onConfirmDeleteIndexerProxy,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isAddIndexerProxyModalOpen,
+      isEditIndexerProxyModalOpen
+    } = this.state;
+
+    return (
+      <FieldSet legend={translate('Indexer Proxies')}>
+        <PageSectionContent
+          errorMessage={translate('UnableToLoadIndexerProxies')}
+          {...otherProps}
+        >
+          <div className={styles.indexerProxies}>
+            {
+              items.map((item) => {
+                return (
+                  <IndexerProxy
+                    key={item.id}
+                    {...item}
+                    tagList={tagList}
+                    indexerList={indexerList}
+                    onConfirmDeleteIndexerProxy={onConfirmDeleteIndexerProxy}
+                  />
+                );
+              })
+            }
+
+            <Card
+              className={styles.addIndexerProxy}
+              onPress={this.onAddIndexerProxyPress}
+            >
+              <div className={styles.center}>
+                <Icon
+                  name={icons.ADD}
+                  size={45}
+                />
+              </div>
+            </Card>
+          </div>
+
+          <AddIndexerProxyModal
+            isOpen={isAddIndexerProxyModalOpen}
+            onModalClose={this.onAddIndexerProxyModalClose}
+          />
+
+          <EditIndexerProxyModalConnector
+            isOpen={isEditIndexerProxyModalOpen}
+            onModalClose={this.onEditIndexerProxyModalClose}
+          />
+        </PageSectionContent>
+      </FieldSet>
+    );
+  }
+}
+
+IndexerProxies.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  indexerList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteIndexerProxy: PropTypes.func.isRequired
+};
+
+export default IndexerProxies;

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxiesConnector.js

@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteIndexerProxy, fetchIndexerProxies } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByName from 'Utilities/Array/sortByName';
+import IndexerProxies from './IndexerProxies';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSortedSectionSelector('settings.indexerProxies', sortByName),
+    createSortedSectionSelector('indexers', sortByName),
+    createTagsSelector(),
+    (indexerProxies, indexers, tagList) => {
+      return {
+        ...indexerProxies,
+        indexerList: indexers.items,
+        tagList
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchIndexerProxies,
+  deleteIndexerProxy
+};
+
+class IndexerProxiesConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchIndexerProxies();
+  }
+
+  //
+  // Listeners
+
+  onConfirmDeleteIndexerProxy = (id) => {
+    this.props.deleteIndexerProxy({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <IndexerProxies
+        {...this.props}
+        onConfirmDeleteIndexerProxy={this.onConfirmDeleteIndexerProxy}
+      />
+    );
+  }
+}
+
+IndexerProxiesConnector.propTypes = {
+  fetchIndexerProxies: PropTypes.func.isRequired,
+  deleteIndexerProxy: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(IndexerProxiesConnector);

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxy.css

@@ -0,0 +1,23 @@
+.indexerProxy {
+  composes: card from '~Components/Card.css';
+
+  width: 290px;
+}
+
+.name {
+  @add-mixin truncate;
+
+  margin-bottom: 20px;
+  font-weight: 300;
+  font-size: 24px;
+}
+
+.indexers {
+  flex: 1 0 auto;
+}
+
+.enabled {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 5px;
+}

frontend/src/Settings/Indexers/IndexerProxies/IndexerProxy.js

@@ -0,0 +1,144 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import EditIndexerProxyModalConnector from './EditIndexerProxyModalConnector';
+import styles from './IndexerProxy.css';
+
+class IndexerProxy extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditIndexerProxyModalOpen: false,
+      isDeleteIndexerProxyModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditIndexerProxyPress = () => {
+    this.setState({ isEditIndexerProxyModalOpen: true });
+  }
+
+  onEditIndexerProxyModalClose = () => {
+    this.setState({ isEditIndexerProxyModalOpen: false });
+  }
+
+  onDeleteIndexerProxyPress = () => {
+    this.setState({
+      isEditIndexerProxyModalOpen: false,
+      isDeleteIndexerProxyModalOpen: true
+    });
+  }
+
+  onDeleteIndexerProxyModalClose= () => {
+    this.setState({ isDeleteIndexerProxyModalOpen: false });
+  }
+
+  onConfirmDeleteIndexerProxy = () => {
+    this.props.onConfirmDeleteIndexerProxy(this.props.id);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      name,
+      tags,
+      tagList,
+      indexerList
+    } = this.props;
+
+    return (
+      <Card
+        className={styles.indexerProxy}
+        overlayContent={true}
+        onPress={this.onEditIndexerProxyPress}
+      >
+        <div className={styles.name}>
+          {name}
+        </div>
+
+        <TagList
+          tags={tags}
+          tagList={tagList}
+        />
+
+        <div className={styles.indexers}>
+          {
+            tags.map((t) => {
+              const indexers = _.filter(indexerList, { tags: [t] });
+
+              if (!indexers || indexers.length === 0) {
+                return null;
+              }
+
+              return indexers.map((i) => {
+                return (
+                  <Label
+                    key={i.name}
+                    kind={kinds.SUCCESS}
+                  >
+                    {i.name}
+                  </Label>
+                );
+              });
+            })
+          }
+        </div>
+
+        {
+          !tags || tags.length === 0 ?
+            <Label
+              kind={kinds.DISABLED}
+              outline={true}
+            >
+              Disabled
+            </Label> :
+            null
+        }
+
+        <EditIndexerProxyModalConnector
+          id={id}
+          isOpen={this.state.isEditIndexerProxyModalOpen}
+          onModalClose={this.onEditIndexerProxyModalClose}
+          onDeleteIndexerProxyPress={this.onDeleteIndexerProxyPress}
+        />
+
+        <ConfirmModal
+          isOpen={this.state.isDeleteIndexerProxyModalOpen}
+          kind={kinds.DANGER}
+          title={translate('DeleteIndexerProxy')}
+          message={translate('DeleteIndexerProxyMessageText', [name])}
+          confirmLabel={translate('Delete')}
+          onConfirm={this.onConfirmDeleteIndexerProxy}
+          onCancel={this.onDeleteIndexerProxyModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+IndexerProxy.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+  tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  indexerList: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteIndexerProxy: PropTypes.func.isRequired
+};
+
+export default IndexerProxy;

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
+import IndexerProxiesConnector from './IndexerProxies/IndexerProxiesConnector';
+
+function IndexerSettings() {
+  return (
+    <PageContent title={translate('Proxies')}>
+      <SettingsToolbarConnector
+        showSave={false}
+      />
+
+      <PageContentBody>
+        <IndexerProxiesConnector />
+      </PageContentBody>
+    </PageContent>
+  );
+}
+
+export default IndexerSettings;