New: Show indexer categories in Add Indexer modal

frontend/src/Indexer/Add/AddIndexerModal.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
 import AddIndexerModalContentConnector from './AddIndexerModalContentConnector';
 import styles from './AddIndexerModal.css';
 
@@ -8,6 +9,7 @@ function AddIndexerModal({ isOpen, onModalClose, onSelectIndexer, ...otherProps
   return (
     <Modal
       isOpen={isOpen}
+      size={sizes.EXTRA_LARGE}
       onModalClose={onModalClose}
       className={styles.modal}
     >

frontend/src/Indexer/Add/AddIndexerModalContent.js

@@ -16,7 +16,7 @@ import TableBody from 'Components/Table/TableBody';
 import { kinds, scrollDirections } from 'Helpers/Props';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import translate from 'Utilities/String/translate';
-import SelectIndexerRowConnector from './SelectIndexerRowConnector';
+import SelectIndexerRow from './SelectIndexerRow';
 import styles from './AddIndexerModalContent.css';
 
 const columns = [
@@ -49,6 +49,12 @@ const columns = [
     label: () => translate('Privacy'),
     isSortable: true,
     isVisible: true
+  },
+  {
+    name: 'categories',
+    label: () => translate('Categories'),
+    isSortable: false,
+    isVisible: true
   }
 ];
 
@@ -260,7 +266,7 @@ class AddIndexerModalContent extends Component {
                   <TableBody>
                     {
                       filteredIndexers.map((indexer) => (
-                        <SelectIndexerRowConnector
+                        <SelectIndexerRow
                           key={`${indexer.implementation}-${indexer.name}`}
                           implementation={indexer.implementation}
                           implementationName={indexer.implementationName}

frontend/src/Indexer/Add/AddIndexerModalContentConnector.js

@@ -1,15 +1,18 @@
+import { some } from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { fetchIndexerSchema, selectIndexerSchema, setIndexerSchemaSort } from 'Store/Actions/indexerActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
 import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
 import AddIndexerModalContent from './AddIndexerModalContent';
 
 function createMapStateToProps() {
   return createSelector(
     createClientSideCollectionSelector('indexers.schema'),
-    (indexers) => {
+    createAllIndexersSelector(),
+    (indexers, allIndexers) => {
       const {
         isFetching,
         isPopulated,
@@ -19,11 +22,19 @@ function createMapStateToProps() {
         sortKey
       } = indexers;
 
+      const indexerList = items.map((item) => {
+        const { definitionName } = item;
+        return {
+          ...item,
+          isExistingIndexer: some(allIndexers, { definitionName })
+        };
+      });
+
       return {
         isFetching,
         isPopulated,
         error,
-        indexers: items,
+        indexers: indexerList,
         sortKey,
         sortDirection
       };

frontend/src/Indexer/Add/SelectIndexerRow.js

@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Icon from 'Components/Icon';
-import TableRowCell from 'Components/Table/Cells/TableRowCell';
-import TableRowButton from 'Components/Table/TableRowButton';
-import { icons } from 'Helpers/Props';
-import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
-import firstCharToUpper from 'Utilities/String/firstCharToUpper';
-import translate from 'Utilities/String/translate';
-import styles from './SelectIndexerRow.css';
-
-class SelectIndexerRow extends Component {
-
-  //
-  // Listeners
-
-  onPress = () => {
-    const {
-      implementation,
-      implementationName,
-      name
-    } = this.props;
-
-    this.props.onIndexerSelect({ implementation, implementationName, name });
-  };
-
-  //
-  // Render
-
-  render() {
-    const {
-      protocol,
-      privacy,
-      name,
-      language,
-      description,
-      isExistingIndexer
-    } = this.props;
-
-    return (
-      <TableRowButton onPress={this.onPress}>
-        <TableRowCell className={styles.protocol}>
-          <ProtocolLabel
-            protocol={protocol}
-          />
-        </TableRowCell>
-
-        <TableRowCell>
-          {name}
-          {
-            isExistingIndexer ?
-              <Icon
-                className={styles.alreadyExistsIcon}
-                name={icons.CHECK_CIRCLE}
-                size={15}
-                title={translate('IndexerAlreadySetup')}
-              /> :
-              null
-          }
-        </TableRowCell>
-
-        <TableRowCell>
-          {language}
-        </TableRowCell>
-
-        <TableRowCell>
-          {description}
-        </TableRowCell>
-
-        <TableRowCell>
-          {translate(firstCharToUpper(privacy))}
-        </TableRowCell>
-      </TableRowButton>
-    );
-  }
-}
-
-SelectIndexerRow.propTypes = {
-  name: PropTypes.string.isRequired,
-  protocol: PropTypes.string.isRequired,
-  privacy: PropTypes.string.isRequired,
-  language: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-  implementation: PropTypes.string.isRequired,
-  implementationName: PropTypes.string.isRequired,
-  onIndexerSelect: PropTypes.func.isRequired,
-  isExistingIndexer: PropTypes.bool.isRequired
-};
-
-export default SelectIndexerRow;

frontend/src/Indexer/Add/SelectIndexerRow.tsx

@@ -0,0 +1,75 @@
+import React, { useCallback } from 'react';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import CapabilitiesLabel from 'Indexer/Index/Table/CapabilitiesLabel';
+import ProtocolLabel from 'Indexer/Index/Table/ProtocolLabel';
+import { IndexerCapabilities } from 'Indexer/Indexer';
+import firstCharToUpper from 'Utilities/String/firstCharToUpper';
+import translate from 'Utilities/String/translate';
+import styles from './SelectIndexerRow.css';
+
+interface SelectIndexerRowProps {
+  name: string;
+  protocol: string;
+  privacy: string;
+  language: string;
+  description: string;
+  capabilities: IndexerCapabilities;
+  implementation: string;
+  implementationName: string;
+  isExistingIndexer: boolean;
+  onIndexerSelect(...args: unknown[]): void;
+}
+
+function SelectIndexerRow(props: SelectIndexerRowProps) {
+  const {
+    name,
+    protocol,
+    privacy,
+    language,
+    description,
+    capabilities,
+    implementation,
+    implementationName,
+    isExistingIndexer,
+    onIndexerSelect,
+  } = props;
+
+  const onPress = useCallback(() => {
+    onIndexerSelect({ implementation, implementationName, name });
+  }, [implementation, implementationName, name, onIndexerSelect]);
+
+  return (
+    <TableRowButton onPress={onPress}>
+      <TableRowCell className={styles.protocol}>
+        <ProtocolLabel protocol={protocol} />
+      </TableRowCell>
+
+      <TableRowCell>
+        {name}
+        {isExistingIndexer ? (
+          <Icon
+            className={styles.alreadyExistsIcon}
+            name={icons.CHECK_CIRCLE}
+            size={15}
+            title={translate('IndexerAlreadySetup')}
+          />
+        ) : null}
+      </TableRowCell>
+
+      <TableRowCell>{language}</TableRowCell>
+
+      <TableRowCell>{description}</TableRowCell>
+
+      <TableRowCell>{translate(firstCharToUpper(privacy))}</TableRowCell>
+
+      <TableRowCell>
+        <CapabilitiesLabel capabilities={capabilities} />
+      </TableRowCell>
+    </TableRowButton>
+  );
+}
+
+export default SelectIndexerRow;

frontend/src/Indexer/Add/SelectIndexerRowConnector.js

@@ -1,18 +0,0 @@
-
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createExistingIndexerSelector from 'Store/Selectors/createExistingIndexerSelector';
-import SelectIndexerRow from './SelectIndexerRow';
-
-function createMapStateToProps() {
-  return createSelector(
-    createExistingIndexerSelector(),
-    (isExistingIndexer, dimensions) => {
-      return {
-        isExistingIndexer
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(SelectIndexerRow);