Fixed: Move Search Tab Filter Menu Up to TabPanel

frontend/src/InteractiveSearch/InteractiveSearchContent.js

@@ -1,13 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { align, icons, sortDirections } from 'Helpers/Props';
+import { icons, sortDirections } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Icon from 'Components/Icon';
-import FilterMenu from 'Components/Menu/FilterMenu';
-import PageMenuButton from 'Components/Menu/PageMenuButton';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
-import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector';
 import InteractiveSearchRow from './InteractiveSearchRow';
 import styles from './InteractiveSearchContent.css';
 
@@ -90,32 +87,16 @@ function InteractiveSearchContent(props) {
     error,
     totalReleasesCount,
     items,
-    selectedFilterKey,
-    filters,
-    customFilters,
     sortKey,
     sortDirection,
     longDateFormat,
     timeFormat,
     onSortPress,
-    onFilterSelect,
     onGrabPress
   } = props;
 
   return (
     <div>
-      <div className={styles.filterMenuContainer}>
-        <FilterMenu
-          alignMenu={align.RIGHT}
-          selectedFilterKey={selectedFilterKey}
-          filters={filters}
-          customFilters={customFilters}
-          buttonComponent={PageMenuButton}
-          filterModalConnectorComponent={InteractiveSearchFilterModalConnector}
-          onFilterSelect={onFilterSelect}
-        />
-      </div>
-
       {
         isFetching &&
           <LoadingIndicator />
@@ -186,15 +167,11 @@ InteractiveSearchContent.propTypes = {
   error: PropTypes.object,
   totalReleasesCount: PropTypes.number.isRequired,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
-  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
-  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
   sortKey: PropTypes.string,
   sortDirection: PropTypes.string,
   longDateFormat: PropTypes.string.isRequired,
   timeFormat: PropTypes.string.isRequired,
   onSortPress: PropTypes.func.isRequired,
-  onFilterSelect: PropTypes.func.isRequired,
   onGrabPress: PropTypes.func.isRequired
 };
 

frontend/src/InteractiveSearch/InteractiveSearchFilterMenu.js

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { align } from 'Helpers/Props';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageMenuButton from 'Components/Menu/PageMenuButton';
+import InteractiveSearchFilterModalConnector from './InteractiveSearchFilterModalConnector';
+import styles from './InteractiveSearchContent.css';
+
+function InteractiveSearchFilterMenu(props) {
+  const {
+    selectedFilterKey,
+    filters,
+    customFilters,
+    onFilterSelect
+  } = props;
+
+  return (
+    <div className={styles.filterMenuContainer}>
+      <FilterMenu
+        alignMenu={align.RIGHT}
+        selectedFilterKey={selectedFilterKey}
+        filters={filters}
+        customFilters={customFilters}
+        buttonComponent={PageMenuButton}
+        filterModalConnectorComponent={InteractiveSearchFilterModalConnector}
+        onFilterSelect={onFilterSelect}
+      />
+    </div>
+  );
+}
+
+InteractiveSearchFilterMenu.propTypes = {
+  selectedFilterKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  customFilters: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onFilterSelect: PropTypes.func.isRequired
+};
+
+export default InteractiveSearchFilterMenu;

frontend/src/InteractiveSearch/InteractiveSearchFilterMenuConnector.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { setReleasesFilter } from 'Store/Actions/releaseActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import InteractiveSearchFilterMenu from './InteractiveSearchFilterMenu';
+
+function createMapStateToProps(appState) {
+  return createSelector(
+    createClientSideCollectionSelector('releases'),
+    (releases) => {
+      return {
+        ...releases
+      };
+    }
+  );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+  return {
+    onFilterSelect(selectedFilterKey) {
+      dispatch(setReleasesFilter({ selectedFilterKey }));
+    }
+  };
+}
+
+class InteractiveSearchFilterMenuConnector extends Component {
+
+  //
+  // Render
+
+  render() {
+    const {
+      ...otherProps
+    } = this.props;
+
+    return (
+
+      <InteractiveSearchFilterMenu
+        {...otherProps}
+      />
+    );
+  }
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(InteractiveSearchFilterMenuConnector);