Add Encoding, Language, Description Indexer props

frontend/src/Indexer/Index/Table/IndexerIndexRow.js

@@ -9,6 +9,7 @@ import TagListConnector from 'Components/TagListConnector';
 import { icons } from 'Helpers/Props';
 import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
 import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
+import IndexerInfoModal from 'Indexer/Info/IndexerInfoModal';
 import titleCase from 'Utilities/String/titleCase';
 import translate from 'Utilities/String/translate';
 import CapabilitiesLabel from './CapabilitiesLabel';
@@ -26,7 +27,8 @@ class IndexerIndexRow extends Component {
 
     this.state = {
       isEditIndexerModalOpen: false,
-      isDeleteMovieModalOpen: false
+      isDeleteMovieModalOpen: false,
+      isIndexerInfoModalOpen: false
     };
   }
 
@@ -34,10 +36,18 @@ class IndexerIndexRow extends Component {
     this.setState({ isEditIndexerModalOpen: true });
   }
 
+  onIndexerInfoPress = () => {
+    this.setState({ isIndexerInfoModalOpen: true });
+  }
+
   onEditIndexerModalClose = () => {
     this.setState({ isEditIndexerModalOpen: false });
   }
 
+  onIndexerInfoModalClose = () => {
+    this.setState({ isIndexerInfoModalOpen: false });
+  }
+
   onDeleteMoviePress = () => {
     this.setState({
       isEditIndexerModalOpen: false,
@@ -81,7 +91,8 @@ class IndexerIndexRow extends Component {
 
     const {
       isEditIndexerModalOpen,
-      isDeleteMovieModalOpen
+      isDeleteMovieModalOpen,
+      isIndexerInfoModalOpen
     } = this.state;
 
     return (
@@ -215,6 +226,12 @@ class IndexerIndexRow extends Component {
                   key={column.name}
                   className={styles[column.name]}
                 >
+                  <IconButton
+                    name={icons.INFO}
+                    title={'Indexer info'}
+                    onPress={this.onIndexerInfoPress}
+                  />
+
                   <IconButton
                     className={styles.externalLink}
                     name={icons.EXTERNAL_LINK}
@@ -242,6 +259,12 @@ class IndexerIndexRow extends Component {
           onDeleteIndexerPress={this.onDeleteMoviePress}
         />
 
+        <IndexerInfoModal
+          indexerId={id}
+          isOpen={isIndexerInfoModalOpen}
+          onModalClose={this.onIndexerInfoModalClose}
+        />
+
         <DeleteIndexerModal
           isOpen={isDeleteMovieModalOpen}
           indexerId={id}

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

frontend/src/Indexer/Info/IndexerInfoModalContent.css

@@ -0,0 +1,5 @@
+.description {
+  composes: description from '~Components/DescriptionList/DescriptionListItemDescription.css';
+
+  overflow-wrap: break-word;
+}

frontend/src/Indexer/Info/IndexerInfoModalContent.js

@@ -0,0 +1,82 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import DescriptionList from 'Components/DescriptionList/DescriptionList';
+import DescriptionListItem from 'Components/DescriptionList/DescriptionListItem';
+import DescriptionListItemDescription from 'Components/DescriptionList/DescriptionListItemDescription';
+import DescriptionListItemTitle from 'Components/DescriptionList/DescriptionListItemTitle';
+import Link from 'Components/Link/Link';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import translate from 'Utilities/String/translate';
+import styles from './IndexerInfoModalContent.css';
+
+function IndexerInfoModalContent(props) {
+  const {
+    id,
+    name,
+    description,
+    encoding,
+    language,
+    baseUrl,
+    protocol,
+    onModalClose
+  } = props;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>
+        {`${name}`}
+      </ModalHeader>
+
+      <ModalBody>
+        <DescriptionList>
+          <DescriptionListItem
+            descriptionClassName={styles.description}
+            title={translate('Id')}
+            data={id}
+          />
+          <DescriptionListItem
+            descriptionClassName={styles.description}
+            title={translate('Description')}
+            data={description ? description : '-'}
+          />
+          <DescriptionListItem
+            descriptionClassName={styles.description}
+            title={translate('Encoding')}
+            data={encoding ? encoding : '-'}
+          />
+          <DescriptionListItem
+            descriptionClassName={styles.description}
+            title={translate('Language')}
+            data={language ?? '-'}
+          />
+
+          <DescriptionListItemTitle>Indexer Site</DescriptionListItemTitle>
+          <DescriptionListItemDescription>
+            <Link to={baseUrl}>{baseUrl}</Link>
+          </DescriptionListItemDescription>
+
+          <DescriptionListItemTitle>{protocol === 'usenet' ? 'Newznab' : 'Torznab'} Url</DescriptionListItemTitle>
+          <DescriptionListItemDescription>
+            {`${window.Prowlarr.apiRoot}/indexer/${id}/newznab`}
+          </DescriptionListItemDescription>
+
+        </DescriptionList>
+      </ModalBody>
+    </ModalContent>
+  );
+}
+
+IndexerInfoModalContent.propTypes = {
+  id: PropTypes.number.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  encoding: PropTypes.string.isRequired,
+  language: PropTypes.string.isRequired,
+  baseUrl: PropTypes.string.isRequired,
+  protocol: PropTypes.string.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default IndexerInfoModalContent;

frontend/src/Indexer/Info/IndexerInfoModalContentConnector.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createIndexerSelector from 'Store/Selectors/createIndexerSelector';
+import IndexerInfoModalContent from './IndexerInfoModalContent';
+
+function createMapStateToProps() {
+  return createSelector(
+    (state) => state.settings.advancedSettings,
+    createIndexerSelector(),
+    (advancedSettings, indexer) => {
+      console.log(indexer);
+      return {
+        advancedSettings,
+        ...indexer
+      };
+    }
+  );
+}
+
+class IndexerInfoModalContentConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    return (
+      <IndexerInfoModalContent
+        {...this.props}
+      />
+    );
+  }
+}
+
+IndexerInfoModalContentConnector.propTypes = {
+  indexerId: PropTypes.number,
+  onModalClose: PropTypes.func.isRequired
+};
+
+export default connect(createMapStateToProps)(IndexerInfoModalContentConnector);

frontend/src/Store/Selectors/createIndexerSelector.js

@@ -5,9 +5,9 @@ function createIndexerSelector() {
     (state, { indexerId }) => indexerId,
     (state) => state.indexers.itemMap,
     (state) => state.indexers.items,
-    (indexerId, itemMap, allMovies) => {
-      if (allMovies && itemMap && indexerId in itemMap) {
-        return allMovies[itemMap[indexerId]];
+    (indexerId, itemMap, allIndexers) => {
+      if (allIndexers && itemMap && indexerId in itemMap) {
+        return allIndexers[itemMap[indexerId]];
       }
       return undefined;
     }