New: Import Lists Base (#196)

* New: Import Lists Base

frontend/src/App/AppRoutes.js

@@ -22,6 +22,7 @@ import MediaManagementConnector from 'Settings/MediaManagement/MediaManagementCo
 import Profiles from 'Settings/Profiles/Profiles';
 import Quality from 'Settings/Quality/Quality';
 import IndexerSettings from 'Settings/Indexers/IndexerSettings';
+import ImportListSettings from 'Settings/ImportLists/ImportListSettings';
 import DownloadClientSettings from 'Settings/DownloadClients/DownloadClientSettings';
 import NotificationSettings from 'Settings/Notifications/NotificationSettings';
 import MetadataSettings from 'Settings/Metadata/MetadataSettings';
@@ -175,6 +176,11 @@ function AppRoutes(props) {
         component={DownloadClientSettings}
       />
 
+      <Route
+        path="/settings/importlists"
+        component={ImportListSettings}
+      />
+
       <Route
         path="/settings/connect"
         component={NotificationSettings}

frontend/src/Components/Page/Sidebar/PageSidebar.js

@@ -111,6 +111,10 @@ const links = [
         title: 'Download Clients',
         to: '/settings/downloadclients'
       },
+      {
+        title: 'Import Lists',
+        to: '/settings/importlists'
+      },
       {
         title: 'Connect',
         to: '/settings/connect'

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import ImportListsConnector from './ImportLists/ImportListsConnector';
+
+class ImportListSettings extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      hasPendingChanges: false
+    };
+  }
+
+  //
+  // Listeners
+
+  setListOptionsRef = (ref) => {
+    this._listOptions = ref;
+  }
+
+  onHasPendingChange = (hasPendingChanges) => {
+    this.setState({
+      hasPendingChanges
+    });
+  }
+
+  onSavePress = () => {
+    this._listOptions.getWrappedInstance().save();
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <PageContent title="Import List Settings">
+        <SettingsToolbarConnector
+          hasPendingChanges={this.state.hasPendingChanges}
+          onSavePress={this.onSavePress}
+        />
+
+        <PageContentBodyConnector>
+          <ImportListsConnector />
+        </PageContentBodyConnector>
+      </PageContent>
+    );
+  }
+}
+
+export default ImportListSettings;

frontend/src/Settings/ImportLists/ImportLists/AddImportListItem.css

@@ -0,0 +1,44 @@
+.list {
+  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/ImportLists/ImportLists/AddImportListItem.js

@@ -0,0 +1,110 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { sizes } from 'Helpers/Props';
+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 AddImportListPresetMenuItem from './AddImportListPresetMenuItem';
+import styles from './AddImportListItem.css';
+
+class AddImportListItem extends Component {
+
+  //
+  // Listeners
+
+  onImportListSelect = () => {
+    const {
+      implementation
+    } = this.props;
+
+    this.props.onImportListSelect({ implementation });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      implementation,
+      implementationName,
+      infoLink,
+      presets,
+      onImportListSelect
+    } = this.props;
+
+    const hasPresets = !!presets && !!presets.length;
+
+    return (
+      <div
+        className={styles.list}
+      >
+        <Link
+          className={styles.underlay}
+          onPress={this.onImportListSelect}
+        />
+
+        <div className={styles.overlay}>
+          <div className={styles.name}>
+            {implementationName}
+          </div>
+
+          <div className={styles.actions}>
+            {
+              hasPresets &&
+                <span>
+                  <Button
+                    size={sizes.SMALL}
+                    onPress={this.onListSelect}
+                  >
+                    Custom
+                  </Button>
+
+                  <Menu className={styles.presetsMenu}>
+                    <Button
+                      className={styles.presetsMenuButton}
+                      size={sizes.SMALL}
+                    >
+                      Presets
+                    </Button>
+
+                    <MenuContent>
+                      {
+                        presets.map((preset) => {
+                          return (
+                            <AddImportListPresetMenuItem
+                              key={preset.name}
+                              name={preset.name}
+                              implementation={implementation}
+                              onPress={onImportListSelect}
+                            />
+                          );
+                        })
+                      }
+                    </MenuContent>
+                  </Menu>
+                </span>
+            }
+
+            <Button
+              to={infoLink}
+              size={sizes.SMALL}
+            >
+              More info
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+AddImportListItem.propTypes = {
+  implementation: PropTypes.string.isRequired,
+  implementationName: PropTypes.string.isRequired,
+  infoLink: PropTypes.string.isRequired,
+  presets: PropTypes.arrayOf(PropTypes.object),
+  onImportListSelect: PropTypes.func.isRequired
+};
+
+export default AddImportListItem;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModal.js

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

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.css

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

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContent.js

@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { kinds } from 'Helpers/Props';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import FieldSet from 'Components/FieldSet';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import AddImportListItem from './AddImportListItem';
+import styles from './AddImportListModalContent.css';
+
+class AddImportListModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isFetching,
+      isPopulated,
+      error,
+      allLists,
+      onImportListSelect,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          Add List
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>Unable to add a new list, please try again.</div>
+          }
+
+          {
+            isPopulated && !error &&
+              <div>
+
+                <Alert kind={kinds.INFO}>
+                  <div>Lidarr supports multiple lists for importing Albums and Artists into the database.</div>
+                  <div>For more information on the individual lists, clink on the info buttons.</div>
+                </Alert>
+
+                <FieldSet legend="Import Lists">
+                  <div className={styles.lists}>
+                    {
+                      allLists.map((list) => {
+                        return (
+                          <AddImportListItem
+                            key={list.implementation}
+                            implementation={list.implementation}
+                            {...list}
+                            onImportListSelect={onImportListSelect}
+                          />
+                        );
+                      })
+                    }
+                  </div>
+                </FieldSet>
+              </div>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            Close
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddImportListModalContent.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  isPopulated: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  allLists: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onImportListSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/AddImportListModalContentConnector.js

@@ -0,0 +1,72 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchImportListSchema, selectImportListSchema } from 'Store/Actions/settingsActions';
+import AddImportListModalContent from './AddImportListModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.importLists,
+    (importLists) => {
+      const {
+        isFetching,
+        error,
+        isPopulated,
+        schema
+      } = importLists;
+
+      const allLists = schema;
+
+      return {
+        isFetching,
+        error,
+        isPopulated,
+        allLists
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchImportListSchema,
+  selectImportListSchema
+};
+
+class AddImportListModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchImportListSchema();
+  }
+
+  //
+  // Listeners
+
+  onImportListSelect = ({ implementation, name }) => {
+    this.props.selectImportListSchema({ implementation, presetName: name });
+    this.props.onModalClose({ listSelected: true });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddImportListModalContent
+        {...this.props}
+        onImportListSelect={this.onImportListSelect}
+      />
+    );
+  }
+}
+
+AddImportListModalContentConnector.propTypes = {
+  fetchImportListSchema: PropTypes.func.isRequired,
+  selectImportListSchema: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddImportListModalContentConnector);

frontend/src/Settings/ImportLists/ImportLists/AddImportListPresetMenuItem.js

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class AddImportListPresetMenuItem 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>
+    );
+  }
+}
+
+AddImportListPresetMenuItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  implementation: PropTypes.string.isRequired,
+  onPress: PropTypes.func.isRequired
+};
+
+export default AddImportListPresetMenuItem;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModal.js

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

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalConnector.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 { cancelTestImportList, cancelSaveImportList } from 'Store/Actions/settingsActions';
+import EditImportListModal from './EditImportListModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  const section = 'settings.importLists';
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    },
+
+    dispatchCancelTestImportList() {
+      dispatch(cancelTestImportList({ section }));
+    },
+
+    dispatchCancelSaveImportList() {
+      dispatch(cancelSaveImportList({ section }));
+    }
+  };
+}
+
+class EditImportListModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.dispatchClearPendingChanges();
+    this.props.dispatchCancelTestImportList();
+    this.props.dispatchCancelSaveImportList();
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchClearPendingChanges,
+      dispatchCancelTestImportList,
+      dispatchCancelSaveImportList,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <EditImportListModal
+        {...otherProps}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditImportListModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  dispatchCancelTestImportList: PropTypes.func.isRequired,
+  dispatchCancelSaveImportList: PropTypes.func.isRequired
+};
+
+export default connect(null, createMapDispatchToProps)(EditImportListModalConnector);

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.css

@@ -0,0 +1,12 @@
+.deleteButton {
+  composes: button from 'Components/Link/Button.css';
+
+  margin-right: auto;
+}
+
+.hideLanguageProfile,
+.hideMetadataProfile {
+  composes: group from 'Components/Form/FormGroup.css';
+
+  display: none;
+}

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -0,0 +1,234 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { inputTypes, kinds } from 'Helpers/Props';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import styles from './EditImportListModalContent.css';
+
+function EditImportListModalContent(props) {
+  const {
+    advancedSettings,
+    isFetching,
+    error,
+    isSaving,
+    isTesting,
+    saveError,
+    item,
+    onInputChange,
+    onFieldChange,
+    onModalClose,
+    onSavePress,
+    onTestPress,
+    onDeleteImportListPress,
+    showLanguageProfile,
+    showMetadataProfile,
+    ...otherProps
+  } = props;
+
+  const {
+    id,
+    name,
+    enableAutomaticAdd,
+    shouldMonitor,
+    rootFolderPath,
+    profileId,
+    languageProfileId,
+    metadataProfileId,
+    fields
+  } = item;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {id ? 'Edit List' : 'Add List'}
+      </ModalHeader>
+
+      <ModalBody>
+        {
+          isFetching &&
+            <LoadingIndicator />
+        }
+
+        {
+          !isFetching && !!error &&
+            <div>Unable to add a new list, please try again.</div>
+        }
+
+        {
+          !isFetching && !error &&
+            <Form
+              {...otherProps}
+            >
+              <FormGroup>
+                <FormLabel>Name</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.TEXT}
+                  name="name"
+                  {...name}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>Enable Automatic Add</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="enableAutomaticAdd"
+                  helpText={'Add artist/albums to Lidarr when syncs are performed via the UI or by Lidarr'}
+                  {...enableAutomaticAdd}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>Monitor</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.CHECK}
+                  name="shouldMonitor"
+                  helpText={'Monitor artists and albums added from this list'}
+                  {...shouldMonitor}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>Root Folder</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.ROOT_FOLDER_SELECT}
+                  name="rootFolderPath"
+                  helpText={'Root Folder list items will be added to'}
+                  {...rootFolderPath}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup>
+                <FormLabel>Quality Profile</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.QUALITY_PROFILE_SELECT}
+                  name="profileId"
+                  helpText={'Quality Profile list items should be added with'}
+                  {...profileId}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup className={showLanguageProfile ? undefined : styles.hideLanguageProfile}>
+                <FormLabel>Language Profile</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.LANGUAGE_PROFILE_SELECT}
+                  name="languageProfileId"
+                  helpText={'Language Profile list items should be added with'}
+                  {...languageProfileId}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              <FormGroup className={showMetadataProfile ? undefined : styles.hideMetadataProfile}>
+                <FormLabel>Metadata Profile</FormLabel>
+
+                <FormInputGroup
+                  type={inputTypes.METADATA_PROFILE_SELECT}
+                  name="metadataProfileId"
+                  helpText={'Metadata Profile list items should be added with'}
+                  {...metadataProfileId}
+                  onChange={onInputChange}
+                />
+              </FormGroup>
+
+              {
+                !!fields && !!fields.length &&
+                <div>
+                  {
+                    fields.map((field) => {
+                      return (
+                        <ProviderFieldFormGroup
+                          key={field.name}
+                          advancedSettings={advancedSettings}
+                          provider="importList"
+                          providerData={item}
+                          {...field}
+                          onChange={onFieldChange}
+                        />
+                      );
+                    })
+                  }
+                </div>
+              }
+
+            </Form>
+        }
+      </ModalBody>
+      <ModalFooter>
+        {
+          id &&
+            <Button
+              className={styles.deleteButton}
+              kind={kinds.DANGER}
+              onPress={onDeleteImportListPress}
+            >
+              Delete
+            </Button>
+        }
+
+        <SpinnerErrorButton
+          isSpinning={isTesting}
+          error={saveError}
+          onPress={onTestPress}
+        >
+          Test
+        </SpinnerErrorButton>
+
+        <Button
+          onPress={onModalClose}
+        >
+          Cancel
+        </Button>
+
+        <SpinnerErrorButton
+          isSpinning={isSaving}
+          error={saveError}
+          onPress={onSavePress}
+        >
+          Save
+        </SpinnerErrorButton>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+EditImportListModalContent.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,
+  showLanguageProfile: PropTypes.bool.isRequired,
+  showMetadataProfile: PropTypes.bool.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onTestPress: PropTypes.func.isRequired,
+  onDeleteImportListPress: PropTypes.func
+};
+
+export default EditImportListModalContent;

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContentConnector.js

@@ -0,0 +1,98 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { createSelector } from 'reselect';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import { setImportListValue, setImportListFieldValue, saveImportList, testImportList } from 'Store/Actions/settingsActions';
+import connectSection from 'Store/connectSection';
+import EditImportListModalContent from './EditImportListModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    (state) => state.settings.languageProfiles,
+    (state) => state.settings.metadataProfiles,
+    createProviderSettingsSelector(),
+    (advancedSettings, languageProfiles, metadataProfiles, importList) => {
+      return {
+        advancedSettings,
+        showLanguageProfile: languageProfiles.items.length > 1,
+        showMetadataProfile: metadataProfiles.items.length > 1,
+        ...importList
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setImportListValue,
+  setImportListFieldValue,
+  saveImportList,
+  testImportList
+};
+
+class EditImportListModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setImportListValue({ name, value });
+  }
+
+  onFieldChange = ({ name, value }) => {
+    this.props.setImportListFieldValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveImportList({ id: this.props.id });
+  }
+
+  onTestPress = () => {
+    this.props.testImportList({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditImportListModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onTestPress={this.onTestPress}
+        onInputChange={this.onInputChange}
+        onFieldChange={this.onFieldChange}
+      />
+    );
+  }
+}
+
+EditImportListModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setImportListValue: PropTypes.func.isRequired,
+  setImportListFieldValue: PropTypes.func.isRequired,
+  saveImportList: PropTypes.func.isRequired,
+  testImportList: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connectSection(
+  createMapStateToProps,
+  mapDispatchToProps,
+  undefined,
+  undefined,
+  { section: 'importLists' }
+)(EditImportListModalContentConnector);

frontend/src/Settings/ImportLists/ImportLists/ImportList.css

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

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -0,0 +1,119 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { kinds } from 'Helpers/Props';
+import Card from 'Components/Card';
+import Label from 'Components/Label';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import EditImportListModalConnector from './EditImportListModalConnector';
+import styles from './ImportList.css';
+
+function getLabelKind(supports, enabled) {
+  if (!supports) {
+    return kinds.DEFAULT;
+  }
+
+  if (!enabled) {
+    return kinds.DANGER;
+  }
+
+  return kinds.SUCCESS;
+}
+
+class ImportList extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditImportListModalOpen: false,
+      isDeleteImportListModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditImportListPress = () => {
+    this.setState({ isEditImportListModalOpen: true });
+  }
+
+  onEditImportListModalClose = () => {
+    this.setState({ isEditImportListModalOpen: false });
+  }
+
+  onDeleteImportListPress = () => {
+    this.setState({
+      isEditImportListModalOpen: false,
+      isDeleteImportListModalOpen: true
+    });
+  }
+
+  onDeleteImportListModalClose= () => {
+    this.setState({ isDeleteImportListModalOpen: false });
+  }
+
+  onConfirmDeleteImportList = () => {
+    this.props.onConfirmDeleteImportList(this.props.id);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      name,
+      enableAutomaticAdd
+    } = this.props;
+
+    return (
+      <Card
+        className={styles.list}
+        overlayContent={true}
+        onPress={this.onEditImportListPress}
+      >
+        <div className={styles.name}>
+          {name}
+        </div>
+
+        <div className={styles.enabled}>
+          <Label
+            kind={getLabelKind(true, enableAutomaticAdd)}
+            outline={true && !enableAutomaticAdd}
+          >
+            Automatic Add
+          </Label>
+        </div>
+
+        <EditImportListModalConnector
+          id={id}
+          isOpen={this.state.isEditImportListModalOpen}
+          onModalClose={this.onEditImportListModalClose}
+          onDeleteImportListPress={this.onDeleteImportListPress}
+        />
+
+        <ConfirmModal
+          isOpen={this.state.isDeleteImportListModalOpen}
+          kind={kinds.DANGER}
+          title="Delete Import List"
+          message={`Are you sure you want to delete the list '${name}'?`}
+          confirmLabel="Delete"
+          onConfirm={this.onConfirmDeleteImportList}
+          onCancel={this.onDeleteImportListModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+ImportList.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  enableAutomaticAdd: PropTypes.bool.isRequired,
+  onConfirmDeleteImportList: PropTypes.func.isRequired
+};
+
+export default ImportList;

frontend/src/Settings/ImportLists/ImportLists/ImportLists.css

@@ -0,0 +1,20 @@
+.lists {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.addList {
+  composes: list from './ImportList.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/ImportLists/ImportLists/ImportLists.js

@@ -0,0 +1,117 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import sortByName from 'Utilities/Array/sortByName';
+import { icons } from 'Helpers/Props';
+import FieldSet from 'Components/FieldSet';
+import Card from 'Components/Card';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import ImportList from './ImportList';
+import AddImportListModal from './AddImportListModal';
+import EditImportListModalConnector from './EditImportListModalConnector';
+import styles from './ImportLists.css';
+
+class ImportLists extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddImportListModalOpen: false,
+      isEditImportListModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onAddImportListPress = () => {
+    this.setState({ isAddImportListModalOpen: true });
+  }
+
+  onAddImportListModalClose = ({ listSelected = false } = {}) => {
+    this.setState({
+      isAddImportListModalOpen: false,
+      isEditImportListModalOpen: listSelected
+    });
+  }
+
+  onEditImportListModalClose = () => {
+    this.setState({ isEditImportListModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      onConfirmDeleteImportList,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isAddImportListModalOpen,
+      isEditImportListModalOpen
+    } = this.state;
+
+    return (
+      <FieldSet
+        legend="Import Lists"
+      >
+        <PageSectionContent
+          errorMessage="Unable to load Lists"
+          {...otherProps}
+        >
+          <div className={styles.lists}>
+            {
+              items.sort(sortByName).map((item) => {
+                return (
+                  <ImportList
+                    key={item.id}
+                    {...item}
+                    onConfirmDeleteImportList={onConfirmDeleteImportList}
+                  />
+                );
+              })
+            }
+
+            <Card
+              className={styles.addList}
+              onPress={this.onAddImportListPress}
+            >
+              <div className={styles.center}>
+                <Icon
+                  name={icons.ADD}
+                  size={45}
+                />
+              </div>
+            </Card>
+          </div>
+
+          <AddImportListModal
+            isOpen={isAddImportListModalOpen}
+            onModalClose={this.onAddImportListModalClose}
+          />
+
+          <EditImportListModalConnector
+            isOpen={isEditImportListModalOpen}
+            onModalClose={this.onEditImportListModalClose}
+          />
+        </PageSectionContent>
+      </FieldSet>
+    );
+  }
+}
+
+ImportLists.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteImportList: PropTypes.func.isRequired
+};
+
+export default ImportLists;

frontend/src/Settings/ImportLists/ImportLists/ImportListsConnector.js

@@ -0,0 +1,62 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchImportLists, deleteImportList } from 'Store/Actions/settingsActions';
+import { fetchRootFolders } from 'Store/Actions/rootFolderActions';
+import ImportLists from './ImportLists';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.importLists,
+    (importLists) => {
+      return {
+        ...importLists
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchImportLists,
+  deleteImportList,
+  fetchRootFolders
+};
+
+class ListsConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchImportLists();
+    this.props.fetchRootFolders();
+  }
+
+  //
+  // Listeners
+
+  onConfirmDeleteImportList = (id) => {
+    this.props.deleteImportList({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <ImportLists
+        {...this.props}
+        onConfirmDeleteImportList={this.onConfirmDeleteImportList}
+      />
+    );
+  }
+}
+
+ListsConnector.propTypes = {
+  fetchImportLists: PropTypes.func.isRequired,
+  deleteImportList: PropTypes.func.isRequired,
+  fetchRootFolders: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(ListsConnector);

frontend/src/Settings/Settings.js

@@ -68,6 +68,17 @@ function Settings() {
           Download clients, download handling and remote path mappings
         </div>
 
+        <Link
+          className={styles.link}
+          to="/settings/importlists"
+        >
+          Import Lists
+        </Link>
+
+        <div className={styles.summary}>
+          Import Lists
+        </div>
+
         <Link
           className={styles.link}
           to="/settings/connect"

frontend/src/Store/Actions/Settings/importLists.js

@@ -0,0 +1,113 @@
+import { createAction } from 'redux-actions';
+import { createThunk } from 'Store/thunks';
+import selectProviderSchema from 'Utilities/State/selectProviderSchema';
+import createSetSettingValueReducer from 'Store/Actions/Creators/Reducers/createSetSettingValueReducer';
+import createSetProviderFieldValueReducer from 'Store/Actions/Creators/Reducers/createSetProviderFieldValueReducer';
+import createFetchHandler from 'Store/Actions/Creators/createFetchHandler';
+import createFetchSchemaHandler from 'Store/Actions/Creators/createFetchSchemaHandler';
+import createSaveProviderHandler, { createCancelSaveProviderHandler } from 'Store/Actions/Creators/createSaveProviderHandler';
+import createTestProviderHandler, { createCancelTestProviderHandler } from 'Store/Actions/Creators/createTestProviderHandler';
+import createRemoveItemHandler from 'Store/Actions/Creators/createRemoveItemHandler';
+
+//
+// Variables
+
+const section = 'settings.importLists';
+
+//
+// Actions Types
+
+export const FETCH_IMPORT_LISTS = 'settings/importlists/fetchImportLists';
+export const FETCH_IMPORT_LIST_SCHEMA = 'settings/importlists/fetchImportListSchema';
+export const SELECT_IMPORT_LIST_SCHEMA = 'settings/importlists/selectImportListSchema';
+export const SET_IMPORT_LIST_VALUE = 'settings/importlists/setImportListValue';
+export const SET_IMPORT_LIST_FIELD_VALUE = 'settings/importlists/setImportListFieldValue';
+export const SAVE_IMPORT_LIST = 'settings/importlists/saveImportList';
+export const CANCEL_SAVE_IMPORT_LIST = 'settings/importlists/cancelSaveImportList';
+export const DELETE_IMPORT_LIST = 'settings/importlists/deleteImportList';
+export const TEST_IMPORT_LIST = 'settings/importlists/testImportList';
+export const CANCEL_TEST_IMPORT_LIST = 'settings/importlists/cancelTestImportList';
+
+//
+// Action Creators
+
+export const fetchImportLists = createThunk(FETCH_IMPORT_LISTS);
+export const fetchImportListSchema = createThunk(FETCH_IMPORT_LIST_SCHEMA);
+export const selectImportListSchema = createAction(SELECT_IMPORT_LIST_SCHEMA);
+
+export const saveImportList = createThunk(SAVE_IMPORT_LIST);
+export const cancelSaveImportList = createThunk(CANCEL_SAVE_IMPORT_LIST);
+export const deleteImportList = createThunk(DELETE_IMPORT_LIST);
+export const testImportList = createThunk(TEST_IMPORT_LIST);
+export const cancelTestImportList = createThunk(CANCEL_TEST_IMPORT_LIST);
+
+export const setImportListValue = createAction(SET_IMPORT_LIST_VALUE, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
+export const setImportListFieldValue = createAction(SET_IMPORT_LIST_FIELD_VALUE, (payload) => {
+  return {
+    section,
+    ...payload
+  };
+});
+
+//
+// Details
+
+export default {
+
+  //
+  // State
+
+  defaultState: {
+    isFetching: false,
+    isPopulated: false,
+    error: null,
+    isFetchingSchema: false,
+    isSchemaPopulated: false,
+    schemaError: null,
+    schema: [],
+    selectedSchema: {},
+    isSaving: false,
+    saveError: null,
+    isTesting: false,
+    items: [],
+    pendingChanges: {}
+  },
+
+  //
+  // Action Handlers
+
+  actionHandlers: {
+    [FETCH_IMPORT_LISTS]: createFetchHandler(section, '/importlist'),
+    [FETCH_IMPORT_LIST_SCHEMA]: createFetchSchemaHandler(section, '/importlist/schema'),
+
+    [SAVE_IMPORT_LIST]: createSaveProviderHandler(section, '/importlist'),
+    [CANCEL_SAVE_IMPORT_LIST]: createCancelSaveProviderHandler(section),
+    [DELETE_IMPORT_LIST]: createRemoveItemHandler(section, '/importlist'),
+    [TEST_IMPORT_LIST]: createTestProviderHandler(section, '/importlist'),
+    [CANCEL_TEST_IMPORT_LIST]: createCancelTestProviderHandler(section)
+  },
+
+  //
+  // Reducers
+
+  reducers: {
+    [SET_IMPORT_LIST_VALUE]: createSetSettingValueReducer(section),
+    [SET_IMPORT_LIST_FIELD_VALUE]: createSetProviderFieldValueReducer(section),
+
+    [SELECT_IMPORT_LIST_SCHEMA]: (state, { payload }) => {
+      return selectProviderSchema(state, section, payload, (selectedSchema) => {
+        selectedSchema.enableRss = selectedSchema.supportsRss;
+        selectedSchema.enableSearch = selectedSchema.supportsSearch;
+
+        return selectedSchema;
+      });
+    }
+  }
+
+};

frontend/src/Store/Actions/settingsActions.js

@@ -8,6 +8,7 @@ import general from './Settings/general';
 import indexerOptions from './Settings/indexerOptions';
 import indexers from './Settings/indexers';
 import languageProfiles from './Settings/languageProfiles';
+import importLists from './Settings/importLists';
 import metadataProfiles from './Settings/metadataProfiles';
 import mediaManagement from './Settings/mediaManagement';
 import metadata from './Settings/metadata';
@@ -25,6 +26,7 @@ export * from './Settings/delayProfiles';
 export * from './Settings/downloadClients';
 export * from './Settings/downloadClientOptions';
 export * from './Settings/general';
+export * from './Settings/importLists';
 export * from './Settings/indexerOptions';
 export * from './Settings/indexers';
 export * from './Settings/languageProfiles';
@@ -59,6 +61,7 @@ export const defaultState = {
   indexerOptions: indexerOptions.defaultState,
   indexers: indexers.defaultState,
   languageProfiles: languageProfiles.defaultState,
+  importLists: importLists.defaultState,
   metadataProfiles: metadataProfiles.defaultState,
   mediaManagement: mediaManagement.defaultState,
   metadata: metadata.defaultState,
@@ -98,6 +101,7 @@ export const actionHandlers = handleThunks({
   ...indexerOptions.actionHandlers,
   ...indexers.actionHandlers,
   ...languageProfiles.actionHandlers,
+  ...importLists.actionHandlers,
   ...metadataProfiles.actionHandlers,
   ...mediaManagement.actionHandlers,
   ...metadata.actionHandlers,
@@ -128,6 +132,7 @@ export const reducers = createHandleActions({
   ...indexerOptions.reducers,
   ...indexers.reducers,
   ...languageProfiles.reducers,
+  ...importLists.reducers,
   ...metadataProfiles.reducers,
   ...mediaManagement.reducers,
   ...metadata.reducers,