User primary search icon if search is not empty

When searching for a replica, migration or endpoint, don't reset the
search icon's color to grey when leaving the search input if the search
input is not empty. Thus, it is much clearer if the list items are
filtered or not.

src/components/molecules/SearchInput/index.jsx

@@ -62,6 +62,7 @@ type State = {
   open: boolean,
   hover?: boolean,
   focus?: boolean,
+  value: string,
 }
 class SearchInput extends React.Component<Props, State> {
   static defaultProps = {
@@ -76,6 +77,7 @@ class SearchInput extends React.Component<Props, State> {
 
     this.state = {
       open: false,
+      value: '',
     }
 
     // $FlowIssue
@@ -129,13 +131,21 @@ class SearchInput extends React.Component<Props, State> {
         <Input
           _ref={input => { this.input = input }}
           placeholder={this.props.placeholder}
-          onChange={e => { this.props.onChange(e.target.value) }}
+          onChange={e => {
+            this.setState({ value: e.target.value })
+            this.props.onChange(e.target.value)
+          }}
+          value={this.state.value}
           onFocus={() => { this.handleFocus() }}
           onBlur={() => { this.handleBlur() }}
           loading={this.props.loading}
         />
         <SearchButtonStyled
-          primary={this.state.open || (this.props.alwaysOpen && (this.state.hover || this.state.focus))}
+          primary={
+            this.state.open ||
+            (this.props.alwaysOpen && (this.state.hover || this.state.focus)) ||
+            (!this.props.alwaysOpen && this.state.value !== '')
+          }
           onClick={() => { this.handleSearchButtonClick() }}
         />
         {this.props.loading ? <StatusIconStyled status="RUNNING" /> : null}