Redesign listing filters [MAILPOET-2778]

assets/css/src/components-plugin/_listing.scss

@@ -78,6 +78,15 @@
   display: inline-block;
 }
 
+.mailpoet-listing-filters {
+  display: inline-block;
+  padding-left: 16px;
+
+  .mailpoet-form-select {
+    min-height: 30px;
+  }
+}
+
 .mailpoet_listing_loading tbody tr,
 .mailpoet_form_loading tbody tr {
   opacity: .2;

assets/js/src/common/form/select/select.tsx

@@ -9,14 +9,14 @@ type Props = SelectHTMLAttributes<HTMLSelectElement> & {
   iconStart?: JSX.Element,
 };
 
-const Select = ({
+const Select = React.forwardRef(({
   children,
   dimension,
   isFullWidth,
   isMinWidth,
   iconStart,
   ...attributes
-}: Props) => (
+}: Props, ref?: React.Ref<HTMLSelectElement>) => (
   <div
     className={
       classnames(
@@ -32,10 +32,10 @@ const Select = ({
     }
   >
     {iconStart}
-    <select {...attributes}>
+    <select {...attributes} ref={ref}>
       {children}
     </select>
   </div>
-);
+));
 
 export default Select;

assets/js/src/listing/filters.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import jQuery from 'jquery';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
+import Select from 'common/form/select/select.tsx';
 
 class ListingFilters extends React.Component {
   componentDidUpdate() {
@@ -45,10 +46,13 @@ class ListingFilters extends React.Component {
     const filters = this.props.filters;
     const availableFilters = this.getAvailableFilters()
       .map((filter, i) => (
-        <select
+        <Select
+          isMinWidth
+          dimension="small"
           ref={(c) => { this[`filter-${i}`] = c; }}
           key={`filter-${filter}`}
           name={filter}
+          onChange={this.handleFilterAction}
         >
           { filters[filter].map((option) => (
             <option
@@ -58,23 +62,9 @@ class ListingFilters extends React.Component {
               { option.label }
             </option>
           )) }
-        </select>
+        </Select>
       ));
 
-    let button;
-
-    if (availableFilters.length > 0) {
-      button = (
-        <input
-          id="post-query-submit"
-          onClick={this.handleFilterAction}
-          type="submit"
-          value={MailPoet.I18n.t('filter')}
-          className="button"
-        />
-      );
-    }
-
     let emptyTrash;
     if (this.props.group === 'trash') {
       emptyTrash = (
@@ -89,9 +79,8 @@ class ListingFilters extends React.Component {
     }
 
     return (
-      <div className="alignleft actions actions">
+      <div className="mailpoet-listing-filters">
         { availableFilters }
-        { button }
         { emptyTrash }
       </div>
     );