Fix UI issues with no indexers exist

frontend/src/Search/SearchFooter.js

@@ -51,7 +51,8 @@ class SearchFooter extends Component {
 
   render() {
     const {
-      isFetching
+      isFetching,
+      hasIndexers
     } = this.props;
 
     const {
@@ -97,7 +98,7 @@ class SearchFooter extends Component {
               <SpinnerButton
                 className={styles.deleteSelectedButton}
                 isSpinning={isFetching}
-                isDisabled={isFetching}
+                isDisabled={isFetching || !hasIndexers}
                 onPress={this.onSearchPress}
               >
                 Search
@@ -113,6 +114,7 @@ class SearchFooter extends Component {
 SearchFooter.propTypes = {
   isFetching: PropTypes.bool.isRequired,
   onSearchPress: PropTypes.func.isRequired,
+  hasIndexers: PropTypes.bool.isRequired,
   searchError: PropTypes.object
 };
 

frontend/src/Search/SearchIndex.js

@@ -12,6 +12,8 @@ import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import { align, icons, sortDirections } from 'Helpers/Props';
 import NoIndexer from 'Indexer/NoIndexer';
+import AddIndexerModal from 'Settings/Indexers/Indexers/AddIndexerModal';
+import EditIndexerModalConnector from 'Settings/Indexers/Indexers/EditIndexerModalConnector';
 import * as keyCodes from 'Utilities/Constants/keyCodes';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
@@ -39,6 +41,8 @@ class SearchIndex extends Component {
       scroller: null,
       jumpBarItems: { order: [] },
       jumpToCharacter: null,
+      isAddIndexerModalOpen: false,
+      isEditIndexerModalOpen: false,
       searchType: null,
       lastToggled: null
     };
@@ -123,6 +127,21 @@ class SearchIndex extends Component {
   //
   // Listeners
 
+  onAddIndexerPress = () => {
+    this.setState({ isAddIndexerModalOpen: true });
+  }
+
+  onAddIndexerModalClose = ({ indexerSelected = false } = {}) => {
+    this.setState({
+      isAddIndexerModalOpen: false,
+      isEditIndexerModalOpen: indexerSelected
+    });
+  }
+
+  onEditIndexerModalClose = () => {
+    this.setState({ isEditIndexerModalOpen: false });
+  }
+
   onJumpBarItemPress = (jumpToCharacter) => {
     this.setState({ jumpToCharacter });
   }
@@ -169,6 +188,8 @@ class SearchIndex extends Component {
     const {
       scroller,
       jumpBarItems,
+      isAddIndexerModalOpen,
+      isEditIndexerModalOpen,
       jumpToCharacter
     } = this.state;
 
@@ -248,7 +269,10 @@ class SearchIndex extends Component {
 
             {
               !error && !isFetching && !hasIndexers &&
-                <NoIndexer />
+                <NoIndexer
+                  totalItems={0}
+                  onAddIndexerPress={this.onAddIndexerPress}
+                />
             }
 
             {
@@ -268,8 +292,19 @@ class SearchIndex extends Component {
 
         <SearchFooter
           isFetching={isFetching}
+          hasIndexers={hasIndexers}
           onSearchPress={this.onSearchPress}
         />
+
+        <AddIndexerModal
+          isOpen={isAddIndexerModalOpen}
+          onModalClose={this.onAddIndexerModalClose}
+        />
+
+        <EditIndexerModalConnector
+          isOpen={isEditIndexerModalOpen}
+          onModalClose={this.onEditIndexerModalClose}
+        />
       </PageContent>
     );
   }

frontend/src/Search/SearchIndexConnector.js

@@ -6,13 +6,12 @@ import withScrollPosition from 'Components/withScrollPosition';
 import { fetchReleases, setReleasesFilter, setReleasesSort, setReleasesTableOption } from 'Store/Actions/releaseActions';
 import scrollPositions from 'Store/scrollPositions';
 import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import createIndexerClientSideCollectionItemsSelector from 'Store/Selectors/createIndexerClientSideCollectionItemsSelector';
 import createReleaseClientSideCollectionItemsSelector from 'Store/Selectors/createReleaseClientSideCollectionItemsSelector';
 import SearchIndex from './SearchIndex';
 
 function createMapStateToProps() {
   return createSelector(
-    createIndexerClientSideCollectionItemsSelector('indexerIndex'),
+    (state) => state.indexers,
     createReleaseClientSideCollectionItemsSelector('releases'),
     createDimensionsSelector(),
     (