New: Clone indexer button

Closes #3546

frontend/src/Settings/Indexers/Indexers/Indexer.css

@@ -4,6 +4,11 @@
   width: 290px;
 }
 
+.nameContainer {
+  display: flex;
+  justify-content: space-between;
+}
+
 .name {
   @add-mixin truncate;
 
@@ -12,6 +17,12 @@
   font-size: 24px;
 }
 
+.cloneButton {
+  composes: button from '~Components/Link/IconButton.css';
+
+  height: 36px;
+}
+
 .enabled {
   display: flex;
   flex-wrap: wrap;

frontend/src/Settings/Indexers/Indexers/Indexer.js

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
 import Card from 'Components/Card';
 import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import EditIndexerModalConnector from './EditIndexerModalConnector';
 import styles from './Indexer.css';
@@ -47,6 +48,15 @@ class Indexer extends Component {
     this.props.onConfirmDeleteIndexer(this.props.id);
   }
 
+  onCloneIndexerPress = () => {
+    const {
+      id,
+      onCloneIndexerPress
+    } = this.props;
+
+    onCloneIndexerPress(id);
+  }
+
   //
   // Render
 
@@ -67,8 +77,17 @@ class Indexer extends Component {
         overlayContent={true}
         onPress={this.onEditIndexerPress}
       >
-        <div className={styles.name}>
-          {name}
+        <div className={styles.nameContainer}>
+          <div className={styles.name}>
+            {name}
+          </div>
+
+          <IconButton
+            className={styles.cloneButton}
+            title="Clone Profile"
+            name={icons.CLONE}
+            onPress={this.onCloneIndexerPress}
+          />
         </div>
 
         <div className={styles.enabled}>
@@ -134,6 +153,7 @@ Indexer.propTypes = {
   enableInteractiveSearch: PropTypes.bool.isRequired,
   supportsRss: PropTypes.bool.isRequired,
   supportsSearch: PropTypes.bool.isRequired,
+  onCloneIndexerPress: PropTypes.func.isRequired,
   onConfirmDeleteIndexer: PropTypes.func.isRequired
 };
 

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

@@ -31,6 +31,11 @@ class Indexers extends Component {
     this.setState({ isAddIndexerModalOpen: true });
   }
 
+  onCloneIndexerPress = (id) => {
+    this.props.dispatchCloneIndexer({ id });
+    this.setState({ isEditIndexerModalOpen: true });
+  }
+
   onAddIndexerModalClose = ({ indexerSelected = false } = {}) => {
     this.setState({
       isAddIndexerModalOpen: false,
@@ -48,6 +53,7 @@ class Indexers extends Component {
   render() {
     const {
       items,
+      dispatchCloneIndexer,
       onConfirmDeleteIndexer,
       ...otherProps
     } = this.props;
@@ -70,6 +76,7 @@ class Indexers extends Component {
                   <Indexer
                     key={item.id}
                     {...item}
+                    onCloneIndexerPress={this.onCloneIndexerPress}
                     onConfirmDeleteIndexer={onConfirmDeleteIndexer}
                   />
                 );
@@ -108,6 +115,7 @@ Indexers.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  dispatchCloneIndexer: PropTypes.func.isRequired,
   onConfirmDeleteIndexer: PropTypes.func.isRequired
 };
 

frontend/src/Settings/Indexers/Indexers/IndexersConnector.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import sortByName from 'Utilities/Array/sortByName';
 import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
-import { fetchIndexers, deleteIndexer } from 'Store/Actions/settingsActions';
+import { fetchIndexers, deleteIndexer, cloneIndexer } from 'Store/Actions/settingsActions';
 import Indexers from './Indexers';
 
 function createMapStateToProps() {
@@ -15,8 +15,9 @@ function createMapStateToProps() {
 }
 
 const mapDispatchToProps = {
-  fetchIndexers,
-  deleteIndexer
+  dispatchFetchIndexers: fetchIndexers,
+  dispatchDeleteIndexer: deleteIndexer,
+  dispatchCloneIndexer: cloneIndexer
 };
 
 class IndexersConnector extends Component {
@@ -25,14 +26,14 @@ class IndexersConnector extends Component {
   // Lifecycle
 
   componentDidMount() {
-    this.props.fetchIndexers();
+    this.props.dispatchFetchIndexers();
   }
 
   //
   // Listeners
 
   onConfirmDeleteIndexer = (id) => {
-    this.props.deleteIndexer({ id });
+    this.props.dispatchDeleteIndexer({ id });
   }
 
   //
@@ -49,8 +50,9 @@ class IndexersConnector extends Component {
 }
 
 IndexersConnector.propTypes = {
-  fetchIndexers: PropTypes.func.isRequired,
-  deleteIndexer: PropTypes.func.isRequired
+  dispatchFetchIndexers: PropTypes.func.isRequired,
+  dispatchDeleteIndexer: PropTypes.func.isRequired,
+  dispatchCloneIndexer: PropTypes.func.isRequired
 };
 
 export default connect(createMapStateToProps, mapDispatchToProps)(IndexersConnector);