New: Edit and Delete Buttons in Indexer Info modal

frontend/src/Indexer/Edit/EditIndexerModal.js

@@ -7,7 +7,7 @@ import EditIndexerModalContentConnector from './EditIndexerModalContentConnector
 function EditIndexerModal({ isOpen, onModalClose, ...otherProps }) {
   return (
     <Modal
-      size={sizes.LARGE}
+      size={sizes.MEDIUM}
       isOpen={isOpen}
       onModalClose={onModalClose}
     >

frontend/src/Indexer/Info/IndexerInfoModalContent.css

@@ -3,3 +3,9 @@
 
   overflow-wrap: break-word;
 }
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: auto;
+}

frontend/src/Indexer/Info/IndexerInfoModalContent.css.d.ts

@@ -1,6 +1,7 @@
 // This file is automatically generated.
 // Please do not change this file!
 interface CssExports {
+  'deleteButton': string;
   'description': string;
 }
 export const cssExports: CssExports;

frontend/src/Indexer/Info/IndexerInfoModalContent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { createSelector } from 'reselect';
 import DescriptionList from 'Components/DescriptionList/DescriptionList';
@@ -14,6 +14,8 @@ import ModalContent from 'Components/Modal/ModalContent';
 import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import { kinds } from 'Helpers/Props';
+import DeleteIndexerModal from 'Indexer/Delete/DeleteIndexerModal';
+import EditIndexerModalConnector from 'Indexer/Edit/EditIndexerModalConnector';
 import Indexer from 'Indexer/Indexer';
 import createIndexerSelector from 'Store/Selectors/createIndexerSelector';
 import translate from 'Utilities/String/translate';
@@ -58,6 +60,28 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
     fields.find((field) => field.name === 'baseUrl')?.value ??
     (Array.isArray(indexerUrls) ? indexerUrls[0] : undefined);
 
+  const [isEditIndexerModalOpen, setIsEditIndexerModalOpen] = useState(false);
+  const [isDeleteIndexerModalOpen, setIsDeleteIndexerModalOpen] =
+    useState(false);
+
+  const onEditIndexerPress = useCallback(() => {
+    setIsEditIndexerModalOpen(true);
+  }, [setIsEditIndexerModalOpen]);
+
+  const onEditIndexerModalClose = useCallback(() => {
+    setIsEditIndexerModalOpen(false);
+  }, [setIsEditIndexerModalOpen]);
+
+  const onDeleteIndexerPress = useCallback(() => {
+    setIsEditIndexerModalOpen(false);
+    setIsDeleteIndexerModalOpen(true);
+  }, [setIsDeleteIndexerModalOpen]);
+
+  const onDeleteIndexerModalClose = useCallback(() => {
+    setIsDeleteIndexerModalOpen(false);
+    onModalClose();
+  }, [setIsDeleteIndexerModalOpen, onModalClose]);
+
   return (
     <ModalContent onModalClose={onModalClose}>
       <ModalHeader>{`${name}`}</ModalHeader>
@@ -191,8 +215,29 @@ function IndexerInfoModalContent(props: IndexerInfoModalContentProps) {
         </FieldSet>
       </ModalBody>
       <ModalFooter>
+        <Button
+          className={styles.deleteButton}
+          kind={kinds.DANGER}
+          onPress={onDeleteIndexerPress}
+        >
+          {translate('Delete')}
+        </Button>
+        <Button onPress={onEditIndexerPress}>{translate('Edit')}</Button>
         <Button onPress={onModalClose}>{translate('Close')}</Button>
       </ModalFooter>
+
+      <EditIndexerModalConnector
+        isOpen={isEditIndexerModalOpen}
+        id={id}
+        onModalClose={onEditIndexerModalClose}
+        onDeleteIndexerPress={onDeleteIndexerPress}
+      />
+
+      <DeleteIndexerModal
+        isOpen={isDeleteIndexerModalOpen}
+        indexerId={id}
+        onModalClose={onDeleteIndexerModalClose}
+      />
     </ModalContent>
   );
 }