New: Download Clients for Manual Grabs

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

@@ -0,0 +1,92 @@
+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 DownloadClientsConnector from './DownloadClients/DownloadClientsConnector';
+
+class DownloadClientSettings 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,
+      dispatchTestAllDownloadClients
+    } = this.props;
+
+    const {
+      isSaving,
+      hasPendingChanges
+    } = this.state;
+
+    return (
+      <PageContent title={translate('DownloadClientSettings')}>
+        <SettingsToolbarConnector
+          isSaving={isSaving}
+          hasPendingChanges={hasPendingChanges}
+          additionalButtons={
+            <Fragment>
+              <PageToolbarSeparator />
+
+              <PageToolbarButton
+                label={translate('TestAllClients')}
+                iconName={icons.TEST}
+                isSpinning={isTestingAll}
+                onPress={dispatchTestAllDownloadClients}
+              />
+            </Fragment>
+          }
+          onSavePress={this.onSavePress}
+        />
+
+        <PageContentBody>
+          <DownloadClientsConnector />
+        </PageContentBody>
+      </PageContent>
+    );
+  }
+}
+
+DownloadClientSettings.propTypes = {
+  isTestingAll: PropTypes.bool.isRequired,
+  dispatchTestAllDownloadClients: PropTypes.func.isRequired
+};
+
+export default DownloadClientSettings;

frontend/src/Settings/DownloadClients/DownloadClientSettingsConnector.js

@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { testAllDownloadClients } from 'Store/Actions/settingsActions';
+import DownloadClientSettings from './DownloadClientSettings';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.downloadClients.isTestingAll,
+    (isTestingAll) => {
+      return {
+        isTestingAll
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  dispatchTestAllDownloadClients: testAllDownloadClients
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(DownloadClientSettings);

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientItem.css

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

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModal.js

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

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.css

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

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContent.js

@@ -0,0 +1,122 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+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 translate from 'Utilities/String/translate';
+import AddDownloadClientItem from './AddDownloadClientItem';
+import styles from './AddDownloadClientModalContent.css';
+
+class AddDownloadClientModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      isSchemaFetching,
+      isSchemaPopulated,
+      schemaError,
+      usenetDownloadClients,
+      torrentDownloadClients,
+      onDownloadClientSelect,
+      onModalClose
+    } = this.props;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {translate('AddDownloadClient')}
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isSchemaFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isSchemaFetching && !!schemaError &&
+              <div>
+                {translate('UnableToAddANewDownloadClientPleaseTryAgain')}
+              </div>
+          }
+
+          {
+            isSchemaPopulated && !schemaError &&
+              <div>
+
+                <Alert kind={kinds.INFO}>
+                  <div>
+                    {translate('ProwlarrSupportsAnyDownloadClient')}
+                  </div>
+                  <div>
+                    {translate('ForMoreInformationOnTheIndividualDownloadClients')}
+                  </div>
+                </Alert>
+
+                <FieldSet legend={translate('Usenet')}>
+                  <div className={styles.downloadClients}>
+                    {
+                      usenetDownloadClients.map((downloadClient) => {
+                        return (
+                          <AddDownloadClientItem
+                            key={downloadClient.implementation}
+                            implementation={downloadClient.implementation}
+                            {...downloadClient}
+                            onDownloadClientSelect={onDownloadClientSelect}
+                          />
+                        );
+                      })
+                    }
+                  </div>
+                </FieldSet>
+
+                <FieldSet legend={translate('Torrents')}>
+                  <div className={styles.downloadClients}>
+                    {
+                      torrentDownloadClients.map((downloadClient) => {
+                        return (
+                          <AddDownloadClientItem
+                            key={downloadClient.implementation}
+                            implementation={downloadClient.implementation}
+                            {...downloadClient}
+                            onDownloadClientSelect={onDownloadClientSelect}
+                          />
+                        );
+                      })
+                    }
+                  </div>
+                </FieldSet>
+              </div>
+          }
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            onPress={onModalClose}
+          >
+            {translate('Close')}
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    );
+  }
+}
+
+AddDownloadClientModalContent.propTypes = {
+  isSchemaFetching: PropTypes.bool.isRequired,
+  isSchemaPopulated: PropTypes.bool.isRequired,
+  schemaError: PropTypes.object,
+  usenetDownloadClients: PropTypes.arrayOf(PropTypes.object).isRequired,
+  torrentDownloadClients: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onDownloadClientSelect: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default AddDownloadClientModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientModalContentConnector.js

@@ -0,0 +1,75 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchDownloadClientSchema, selectDownloadClientSchema } from 'Store/Actions/settingsActions';
+import AddDownloadClientModalContent from './AddDownloadClientModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.downloadClients,
+    (downloadClients) => {
+      const {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        schema
+      } = downloadClients;
+
+      const usenetDownloadClients = _.filter(schema, { protocol: 'usenet' });
+      const torrentDownloadClients = _.filter(schema, { protocol: 'torrent' });
+
+      return {
+        isSchemaFetching,
+        isSchemaPopulated,
+        schemaError,
+        usenetDownloadClients,
+        torrentDownloadClients
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  fetchDownloadClientSchema,
+  selectDownloadClientSchema
+};
+
+class AddDownloadClientModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchDownloadClientSchema();
+  }
+
+  //
+  // Listeners
+
+  onDownloadClientSelect = ({ implementation }) => {
+    this.props.selectDownloadClientSchema({ implementation });
+    this.props.onModalClose({ downloadClientSelected: true });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <AddDownloadClientModalContent
+        {...this.props}
+        onDownloadClientSelect={this.onDownloadClientSelect}
+      />
+    );
+  }
+}
+
+AddDownloadClientModalContentConnector.propTypes = {
+  fetchDownloadClientSchema: PropTypes.func.isRequired,
+  selectDownloadClientSchema: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(AddDownloadClientModalContentConnector);

frontend/src/Settings/DownloadClients/DownloadClients/AddDownloadClientPresetMenuItem.js

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

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClient.css

@@ -0,0 +1,19 @@
+.downloadClient {
+  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/DownloadClients/DownloadClients/DownloadClient.js

@@ -0,0 +1,126 @@
+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 { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
+import styles from './DownloadClient.css';
+
+class DownloadClient extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isEditDownloadClientModalOpen: false,
+      isDeleteDownloadClientModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onEditDownloadClientPress = () => {
+    this.setState({ isEditDownloadClientModalOpen: true });
+  }
+
+  onEditDownloadClientModalClose = () => {
+    this.setState({ isEditDownloadClientModalOpen: false });
+  }
+
+  onDeleteDownloadClientPress = () => {
+    this.setState({
+      isEditDownloadClientModalOpen: false,
+      isDeleteDownloadClientModalOpen: true
+    });
+  }
+
+  onDeleteDownloadClientModalClose= () => {
+    this.setState({ isDeleteDownloadClientModalOpen: false });
+  }
+
+  onConfirmDeleteDownloadClient = () => {
+    this.props.onConfirmDeleteDownloadClient(this.props.id);
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      id,
+      name,
+      enable,
+      priority
+    } = this.props;
+
+    return (
+      <Card
+        className={styles.downloadClient}
+        overlayContent={true}
+        onPress={this.onEditDownloadClientPress}
+      >
+        <div className={styles.name}>
+          {name}
+        </div>
+
+        <div className={styles.enabled}>
+          {
+            enable ?
+              <Label kind={kinds.SUCCESS}>
+                {translate('Enabled')}
+              </Label> :
+              <Label
+                kind={kinds.DISABLED}
+                outline={true}
+              >
+                {translate('Disabled')}
+              </Label>
+          }
+
+          {
+            priority > 1 &&
+              <Label
+                kind={kinds.DISABLED}
+                outline={true}
+              >
+                {translate('PrioritySettings', [priority])}
+              </Label>
+          }
+        </div>
+
+        <EditDownloadClientModalConnector
+          id={id}
+          isOpen={this.state.isEditDownloadClientModalOpen}
+          onModalClose={this.onEditDownloadClientModalClose}
+          onDeleteDownloadClientPress={this.onDeleteDownloadClientPress}
+        />
+
+        <ConfirmModal
+          isOpen={this.state.isDeleteDownloadClientModalOpen}
+          kind={kinds.DANGER}
+          title={translate('DeleteDownloadClient')}
+          message={translate('DeleteDownloadClientMessageText', [name])}
+          confirmLabel={translate('Delete')}
+          onConfirm={this.onConfirmDeleteDownloadClient}
+          onCancel={this.onDeleteDownloadClientModalClose}
+        />
+      </Card>
+    );
+  }
+}
+
+DownloadClient.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  enable: PropTypes.bool.isRequired,
+  priority: PropTypes.number.isRequired,
+  onConfirmDeleteDownloadClient: PropTypes.func.isRequired
+};
+
+export default DownloadClient;

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClients.css

@@ -0,0 +1,20 @@
+.downloadClients {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.addDownloadClient {
+  composes: downloadClient from '~./DownloadClient.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/DownloadClients/DownloadClients/DownloadClients.js

@@ -0,0 +1,115 @@
+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 AddDownloadClientModal from './AddDownloadClientModal';
+import DownloadClient from './DownloadClient';
+import EditDownloadClientModalConnector from './EditDownloadClientModalConnector';
+import styles from './DownloadClients.css';
+
+class DownloadClients extends Component {
+
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isAddDownloadClientModalOpen: false,
+      isEditDownloadClientModalOpen: false
+    };
+  }
+
+  //
+  // Listeners
+
+  onAddDownloadClientPress = () => {
+    this.setState({ isAddDownloadClientModalOpen: true });
+  }
+
+  onAddDownloadClientModalClose = ({ downloadClientSelected = false } = {}) => {
+    this.setState({
+      isAddDownloadClientModalOpen: false,
+      isEditDownloadClientModalOpen: downloadClientSelected
+    });
+  }
+
+  onEditDownloadClientModalClose = () => {
+    this.setState({ isEditDownloadClientModalOpen: false });
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      items,
+      onConfirmDeleteDownloadClient,
+      ...otherProps
+    } = this.props;
+
+    const {
+      isAddDownloadClientModalOpen,
+      isEditDownloadClientModalOpen
+    } = this.state;
+
+    return (
+      <FieldSet legend={translate('DownloadClients')}>
+        <PageSectionContent
+          errorMessage={translate('UnableToLoadDownloadClients')}
+          {...otherProps}
+        >
+          <div className={styles.downloadClients}>
+            {
+              items.map((item) => {
+                return (
+                  <DownloadClient
+                    key={item.id}
+                    {...item}
+                    onConfirmDeleteDownloadClient={onConfirmDeleteDownloadClient}
+                  />
+                );
+              })
+            }
+
+            <Card
+              className={styles.addDownloadClient}
+              onPress={this.onAddDownloadClientPress}
+            >
+              <div className={styles.center}>
+                <Icon
+                  name={icons.ADD}
+                  size={45}
+                />
+              </div>
+            </Card>
+          </div>
+
+          <AddDownloadClientModal
+            isOpen={isAddDownloadClientModalOpen}
+            onModalClose={this.onAddDownloadClientModalClose}
+          />
+
+          <EditDownloadClientModalConnector
+            isOpen={isEditDownloadClientModalOpen}
+            onModalClose={this.onEditDownloadClientModalClose}
+          />
+        </PageSectionContent>
+      </FieldSet>
+    );
+  }
+}
+
+DownloadClients.propTypes = {
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onConfirmDeleteDownloadClient: PropTypes.func.isRequired
+};
+
+export default DownloadClients;

frontend/src/Settings/DownloadClients/DownloadClients/DownloadClientsConnector.js

@@ -0,0 +1,56 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteDownloadClient, fetchDownloadClients } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByName from 'Utilities/Array/sortByName';
+import DownloadClients from './DownloadClients';
+
+function createMapStateToProps() {
+  return createSelector(
+    createSortedSectionSelector('settings.downloadClients', sortByName),
+    (downloadClients) => downloadClients
+  );
+}
+
+const mapDispatchToProps = {
+  fetchDownloadClients,
+  deleteDownloadClient
+};
+
+class DownloadClientsConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidMount() {
+    this.props.fetchDownloadClients();
+  }
+
+  //
+  // Listeners
+
+  onConfirmDeleteDownloadClient = (id) => {
+    this.props.deleteDownloadClient({ id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <DownloadClients
+        {...this.props}
+        onConfirmDeleteDownloadClient={this.onConfirmDeleteDownloadClient}
+      />
+    );
+  }
+}
+
+DownloadClientsConnector.propTypes = {
+  fetchDownloadClients: PropTypes.func.isRequired,
+  deleteDownloadClient: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(DownloadClientsConnector);

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModal.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 EditDownloadClientModalContentConnector from './EditDownloadClientModalContentConnector';
+
+function EditDownloadClientModal({ isOpen, onModalClose, ...otherProps }) {
+  return (
+    <Modal
+      size={sizes.MEDIUM}
+      isOpen={isOpen}
+      onModalClose={onModalClose}
+    >
+      <EditDownloadClientModalContentConnector
+        {...otherProps}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+EditDownloadClientModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default EditDownloadClientModal;

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalConnector.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 { cancelSaveDownloadClient, cancelTestDownloadClient } from 'Store/Actions/settingsActions';
+import EditDownloadClientModal from './EditDownloadClientModal';
+
+function createMapDispatchToProps(dispatch, props) {
+  const section = 'settings.downloadClients';
+
+  return {
+    dispatchClearPendingChanges() {
+      dispatch(clearPendingChanges({ section }));
+    },
+
+    dispatchCancelTestDownloadClient() {
+      dispatch(cancelTestDownloadClient({ section }));
+    },
+
+    dispatchCancelSaveDownloadClient() {
+      dispatch(cancelSaveDownloadClient({ section }));
+    }
+  };
+}
+
+class EditDownloadClientModalConnector extends Component {
+
+  //
+  // Listeners
+
+  onModalClose = () => {
+    this.props.dispatchClearPendingChanges();
+    this.props.dispatchCancelTestDownloadClient();
+    this.props.dispatchCancelSaveDownloadClient();
+    this.props.onModalClose();
+  }
+
+  //
+  // Render
+
+  render() {
+    const {
+      dispatchClearPendingChanges,
+      dispatchCancelTestDownloadClient,
+      dispatchCancelSaveDownloadClient,
+      ...otherProps
+    } = this.props;
+
+    return (
+      <EditDownloadClientModal
+        {...otherProps}
+        onModalClose={this.onModalClose}
+      />
+    );
+  }
+}
+
+EditDownloadClientModalConnector.propTypes = {
+  onModalClose: PropTypes.func.isRequired,
+  dispatchClearPendingChanges: PropTypes.func.isRequired,
+  dispatchCancelTestDownloadClient: PropTypes.func.isRequired,
+  dispatchCancelSaveDownloadClient: PropTypes.func.isRequired
+};
+
+export default connect(null, createMapDispatchToProps)(EditDownloadClientModalConnector);

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContent.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/DownloadClients/DownloadClients/EditDownloadClientModalContent.js

@@ -0,0 +1,197 @@
+import PropTypes from 'prop-types';
+import React, { Component } 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 './EditDownloadClientModalContent.css';
+
+class EditDownloadClientModalContent extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      advancedSettings,
+      isFetching,
+      error,
+      isSaving,
+      isTesting,
+      saveError,
+      item,
+      onInputChange,
+      onFieldChange,
+      onModalClose,
+      onSavePress,
+      onTestPress,
+      onDeleteDownloadClientPress,
+      ...otherProps
+    } = this.props;
+
+    const {
+      id,
+      implementationName,
+      name,
+      enable,
+      priority,
+      fields,
+      message
+    } = item;
+
+    return (
+      <ModalContent onModalClose={onModalClose}>
+        <ModalHeader>
+          {`${id ? translate('Edit') : translate('Add')} ${translate('DownloadClient')} - ${implementationName}`}
+        </ModalHeader>
+
+        <ModalBody>
+          {
+            isFetching &&
+              <LoadingIndicator />
+          }
+
+          {
+            !isFetching && !!error &&
+              <div>
+                {translate('UnableToAddANewDownloadClientPleaseTryAgain')}
+              </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('Enable')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.CHECK}
+                    name="enable"
+                    {...enable}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+                {
+                  fields.map((field) => {
+                    return (
+                      <ProviderFieldFormGroup
+                        key={field.name}
+                        advancedSettings={advancedSettings}
+                        provider="downloadClient"
+                        providerData={item}
+                        {...field}
+                        onChange={onFieldChange}
+                      />
+                    );
+                  })
+                }
+
+                <FormGroup
+                  advancedSettings={advancedSettings}
+                  isAdvanced={true}
+                >
+                  <FormLabel>{translate('ClientPriority')}</FormLabel>
+
+                  <FormInputGroup
+                    type={inputTypes.NUMBER}
+                    name="priority"
+                    helpText={translate('PriorityHelpText')}
+                    min={1}
+                    max={50}
+                    {...priority}
+                    onChange={onInputChange}
+                  />
+                </FormGroup>
+
+              </Form>
+          }
+        </ModalBody>
+        <ModalFooter>
+          {
+            id &&
+              <Button
+                className={styles.deleteButton}
+                kind={kinds.DANGER}
+                onPress={onDeleteDownloadClientPress}
+              >
+                {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>
+    );
+  }
+}
+
+EditDownloadClientModalContent.propTypes = {
+  advancedSettings: PropTypes.bool.isRequired,
+  isFetching: PropTypes.bool.isRequired,
+  error: PropTypes.object,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  isTesting: PropTypes.bool.isRequired,
+  item: PropTypes.object.isRequired,
+  onInputChange: PropTypes.func.isRequired,
+  onFieldChange: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onSavePress: PropTypes.func.isRequired,
+  onTestPress: PropTypes.func.isRequired,
+  onDeleteDownloadClientPress: PropTypes.func
+};
+
+export default EditDownloadClientModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/EditDownloadClientModalContentConnector.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 { saveDownloadClient, setDownloadClientFieldValue, setDownloadClientValue, testDownloadClient } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditDownloadClientModalContent from './EditDownloadClientModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createProviderSettingsSelector('downloadClients'),
+    (advancedSettings, downloadClient) => {
+      return {
+        advancedSettings,
+        ...downloadClient
+      };
+    }
+  );
+}
+
+const mapDispatchToProps = {
+  setDownloadClientValue,
+  setDownloadClientFieldValue,
+  saveDownloadClient,
+  testDownloadClient
+};
+
+class EditDownloadClientModalContentConnector extends Component {
+
+  //
+  // Lifecycle
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+      this.props.onModalClose();
+    }
+  }
+
+  //
+  // Listeners
+
+  onInputChange = ({ name, value }) => {
+    this.props.setDownloadClientValue({ name, value });
+  }
+
+  onFieldChange = ({ name, value }) => {
+    this.props.setDownloadClientFieldValue({ name, value });
+  }
+
+  onSavePress = () => {
+    this.props.saveDownloadClient({ id: this.props.id });
+  }
+
+  onTestPress = () => {
+    this.props.testDownloadClient({ id: this.props.id });
+  }
+
+  //
+  // Render
+
+  render() {
+    return (
+      <EditDownloadClientModalContent
+        {...this.props}
+        onSavePress={this.onSavePress}
+        onTestPress={this.onTestPress}
+        onInputChange={this.onInputChange}
+        onFieldChange={this.onFieldChange}
+      />
+    );
+  }
+}
+
+EditDownloadClientModalContentConnector.propTypes = {
+  id: PropTypes.number,
+  isFetching: PropTypes.bool.isRequired,
+  isSaving: PropTypes.bool.isRequired,
+  saveError: PropTypes.object,
+  item: PropTypes.object.isRequired,
+  setDownloadClientValue: PropTypes.func.isRequired,
+  setDownloadClientFieldValue: PropTypes.func.isRequired,
+  saveDownloadClient: PropTypes.func.isRequired,
+  testDownloadClient: PropTypes.func.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps, mapDispatchToProps)(EditDownloadClientModalContentConnector);

frontend/src/Settings/Settings.js

@@ -25,6 +25,17 @@ function Settings() {
           Applications and settings to configure how prowlarr interacts with your PVR programs
         </div>
 
+        <Link
+          className={styles.link}
+          to="/settings/downloadclients"
+        >
+          {translate('DownloadClients')}
+        </Link>
+
+        <div className={styles.summary}>
+          {translate('DownloadClientsSettingsSummary')}
+        </div>
+
         <Link
           className={styles.link}
           to="/settings/connect"