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);

frontend/src/Indexer/Index/Table/CapabilitiesLabel.tsx

@@ -1,3 +1,4 @@
+import { uniqBy } from 'lodash';
 import React from 'react';
 import Label from 'Components/Label';
 import { IndexerCapabilities } from 'Indexer/Indexer';
@@ -23,14 +24,18 @@ function CapabilitiesLabel(props: CapabilitiesLabelProps) {
     );
   }
 
-  const nameList = Array.from(
+  const indexerCategories = uniqBy(filteredList, 'id').sort(
-    new Set(filteredList.map((item) => item.name).sort())
+    (a, b) => a.id - b.id
   );
 
   return (
     <span>
-      {nameList.map((category) => {
+      {indexerCategories.map((category) => {
-        return <Label key={category}>{category}</Label>;
+        return (
+          <Label key={category.id} title={`${category.id}`}>
+            {category.name}
+          </Label>
+        );
       })}
 
       {filteredList.length === 0 ? <Label>{'None'}</Label> : null}

frontend/src/Search/Table/CategoryLabel.js

@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Label from 'Components/Label';
-import Tooltip from 'Components/Tooltip/Tooltip';
-import { kinds, tooltipPositions } from 'Helpers/Props';
-
-function CategoryLabel({ categories }) {
-  const sortedCategories = categories.filter((cat) => cat.name !== undefined).sort((c) => c.id);
-
-  if (categories?.length === 0) {
-    return (
-      <Tooltip
-        anchor={<Label kind={kinds.DANGER}>Unknown</Label>}
-        tooltip="Please report this issue to the GitHub as this shouldn't be happening"
-        position={tooltipPositions.LEFT}
-      />
-    );
-  }
-
-  return (
-    <span>
-      {
-        sortedCategories.map((category) => {
-          return (
-            <Label key={category.name}>
-              {category.name}
-            </Label>
-          );
-        })
-      }
-    </span>
-  );
-}
-
-CategoryLabel.defaultProps = {
-  categories: []
-};
-
-CategoryLabel.propTypes = {
-  categories: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default CategoryLabel;

frontend/src/Search/Table/CategoryLabel.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Label from 'Components/Label';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { kinds, tooltipPositions } from 'Helpers/Props';
+import { IndexerCategory } from 'Indexer/Indexer';
+import translate from 'Utilities/String/translate';
+
+interface CategoryLabelProps {
+  categories: IndexerCategory[];
+}
+
+function CategoryLabel({ categories = [] }: CategoryLabelProps) {
+  if (categories?.length === 0) {
+    return (
+      <Tooltip
+        anchor={<Label kind={kinds.DANGER}>{translate('Unknown')}</Label>}
+        tooltip="Please report this issue to the GitHub as this shouldn't be happening"
+        position={tooltipPositions.LEFT}
+      />
+    );
+  }
+
+  const sortedCategories = categories
+    .filter((cat) => cat.name !== undefined)
+    .sort((a, b) => a.id - b.id);
+
+  return (
+    <span>
+      {sortedCategories.map((category) => {
+        return <Label key={category.id}>{category.name}</Label>;
+      })}
+    </span>
+  );
+}
+
+export default CategoryLabel;