Redesign listing search [MAILPOET-2778]

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

@@ -74,6 +74,10 @@
   }
 }
 
+.mailpoet-listing-search {
+  display: inline-block;
+}
+
 .mailpoet_listing_loading tbody tr,
 .mailpoet_form_loading tbody tr {
   opacity: .2;

assets/js/src/listing/assets/search_icon.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default (
+  <svg viewBox="3 3 18 18">
+    <path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
+  </svg>
+);

assets/js/src/listing/listing.jsx

@@ -595,8 +595,7 @@ class Listing extends React.Component {
         { this.state.meta.mta_method && <MailerError {...this.state.meta} /> }
         <div className="mailpoet-listing">
           { groups }
-          { search }
+          <div>
-          <div className="tablenav top clearfix">
             <ListingBulkActions
               count={this.state.count}
               bulk_actions={bulkActions}
@@ -604,6 +603,7 @@ class Listing extends React.Component {
               selected_ids={this.state.selected_ids}
               onBulkAction={this.handleBulkAction}
             />
+            { search }
             <ListingFilters
               filters={this.state.filters}
               filter={this.state.filter}

assets/js/src/listing/search.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import MailPoet from 'mailpoet';
+import _ from 'underscore';
 import PropTypes from 'prop-types';
+import Input from 'common/form/input/input.tsx';
+import icon from './assets/search_icon.tsx';
 
 class ListingSearch extends React.Component {
   constructor(props) {
@@ -9,6 +12,7 @@ class ListingSearch extends React.Component {
       search: '',
     };
     this.handleSearch = this.handleSearch.bind(this);
+    this.debouncedHandleSearch = _.debounce(this.handleSearch, 300);
     this.onChange = this.onChange.bind(this);
   }
 
@@ -22,10 +26,10 @@ class ListingSearch extends React.Component {
 
   onChange(e) {
     this.setState({ search: e.target.value });
+    this.debouncedHandleSearch();
   }
 
-  handleSearch(e) {
+  handleSearch() {
-    e.preventDefault();
     this.props.onSearch(
       this.state.search.trim()
     );
@@ -36,25 +40,23 @@ class ListingSearch extends React.Component {
       return false;
     }
     return (
-      <form name="search" onSubmit={this.handleSearch}>
+      <div className="mailpoet-listing-search">
-        <p className="search-box">
+        <form name="search" onSubmit={(e) => { e.preventDefault(); this.handleSearch(); }}>
           <label htmlFor="search_input" className="screen-reader-text">
             {MailPoet.I18n.t('searchLabel')}
           </label>
-          <input
+          <Input
+            dimension="small"
+            iconStart={icon}
             type="search"
             id="search_input"
             name="s"
             onChange={this.onChange}
             value={this.state.search}
+            placeholder={MailPoet.I18n.t('searchLabel')}
           />
-          <input
-            type="submit"
-            value={MailPoet.I18n.t('searchLabel')}
-            className="button"
-          />
-        </p>
         </form>
+      </div>
     );
   }
 }

tests/_support/AcceptanceTester.php

@@ -190,12 +190,12 @@ class AcceptanceTester extends \Codeception\Actor {
     expect($attributeValue)->notContains($notContains);
   }
 
-  public function searchFor($query, $element = '#search_input', $button = 'Search') {
+  public function searchFor($query, $element = '#search_input') {
     $i = $this;
     $i->waitForElement($element);
     $i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
     $i->fillField($element, $query);
-    $i->click($button);
+    $i->pressKey($element, \WebDriverKeys::ENTER);
     $i->waitForElementNotVisible(self::LISTING_LOADING_SELECTOR);
   }