Fixed: Move Search Tab Filter Menu Up to TabPanel

frontend/src/Components/Menu/PageMenuButton.css

@@ -6,12 +6,6 @@
   }
 }
 
-.indicatorContainer {
-  position: absolute;
-  top: 10px;
-  right: 12px;
-}
-
 .label {
   margin-left: 5px;
 }

frontend/src/Components/Menu/PageMenuButton.js

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
-import { icons } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import MenuButton from 'Components/Menu/MenuButton';
 import styles from './PageMenuButton.css';
@@ -9,8 +7,8 @@ import styles from './PageMenuButton.css';
 function PageMenuButton(props) {
   const {
     iconName,
-    text,
     indicator,
+    text,
     ...otherProps
   } = props;
 
@@ -24,21 +22,6 @@ function PageMenuButton(props) {
         size={18}
       />
 
-      {
-        indicator &&
-          <span
-            className={classNames(
-              styles.indicatorContainer,
-              'fa-layers fa-fw'
-            )}
-          >
-            <Icon
-              name={icons.CIRCLE}
-              size={9}
-            />
-          </span>
-      }
-
       <div className={styles.label}>
         {text}
       </div>

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

frontend/src/Movie/Details/MovieDetails.css

@@ -83,6 +83,10 @@
   margin-left: 20px;
 }
 
+.filterIcon {
+  float: right;
+}
+
 .movieNavigationButtons {
   white-space: nowrap;
 }

frontend/src/Movie/Details/MovieDetails.js

@@ -33,7 +33,8 @@ import MovieHistoryTable from 'Movie/History/MovieHistoryTable';
 import MovieTitlesTable from 'Movie/Titles/MovieTitlesTable';
 import MovieAlternateTitles from './MovieAlternateTitles';
 import MovieDetailsLinks from './MovieDetailsLinks';
-import InteractiveSearchTable from '../../InteractiveSearch/InteractiveSearchTable';
+import InteractiveSearchTable from 'InteractiveSearch/InteractiveSearchTable';
+import InteractiveSearchFilterMenuConnector from 'InteractiveSearch/InteractiveSearchFilterMenuConnector';
 // import MovieTagsConnector from './MovieTagsConnector';
 import styles from './MovieDetails.css';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
@@ -74,6 +75,7 @@ class MovieDetails extends Component {
       allExpanded: false,
       allCollapsed: false,
       expandedState: {},
+      selectedTabIndex: 0,
       overviewHeight: 0
     };
   }
@@ -192,7 +194,8 @@ class MovieDetails extends Component {
       isEditMovieModalOpen,
       isDeleteMovieModalOpen,
       isInteractiveImportModalOpen,
-      overviewHeight
+      overviewHeight,
+      selectedTabIndex
     } = this.state;
 
     return (
@@ -447,7 +450,7 @@ class MovieDetails extends Component {
                 <div>Loading movie files failed</div>
             }
 
-            <Tabs>
+            <Tabs selectedIndex={this.state.tabIndex} onSelect={(tabIndex) => this.setState({ selectedTabIndex: tabIndex })}>
               <TabList
                 className={styles.tabList}
               >
@@ -478,6 +481,14 @@ class MovieDetails extends Component {
                 >
                   Titles
                 </Tab>
+
+                {
+                  selectedTabIndex === 1 &&
+                    <div className={styles.filterIcon}>
+                      <InteractiveSearchFilterMenuConnector />
+                    </div>
+                }
+
               </TabList>
 
               <TabPanel>