17579: added check if search input contains value

[arvados-workbench2.git] / src / components / search-input / search-input.tsx

diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index f2ec2d6439024c066eebb2a0b8a18a0ec4fba901..50338f401c9387b680ef417a715e2130d932b265 100644 (file)
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment, Tooltip } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
 
@@ -34,6 +34,8 @@ const styles: StyleRulesCallback<CssRules> = theme => {
 
 interface SearchInputDataProps {
     value: string;
+    label?: string;
+    selfClearProp: string;
 }
 
 interface SearchInputActionProps {
@@ -45,6 +47,8 @@ type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyl
 
 interface SearchInputState {
     value: string;
+    label: string;
+    selfClearProp: string;
 }
 
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
@@ -52,18 +56,20 @@ export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 export const SearchInput = withStyles(styles)(
     class extends React.Component<SearchInputProps> {
         state: SearchInputState = {
-            value: ""
+            value: "",
+            label: "",
+            selfClearProp: ""
         };
 
         timeout: number;
 
         render() {
-            const { classes } = this.props;
             return <form onSubmit={this.handleSubmit}>
                 <FormControl>
-                    <InputLabel>Search</InputLabel>
+                    <InputLabel>{this.state.label}</InputLabel>
                     <Input
                         type="text"
+                        data-cy="search-input"
                         value={this.state.value}
                         onChange={this.handleChange}
                         endAdornment={
@@ -81,13 +87,20 @@ export const SearchInput = withStyles(styles)(
         }
 
         componentDidMount() {
-            this.setState({ value: this.props.value });
+            this.setState({
+                value: this.props.value,
+                label: this.props.label || 'Search'
+            });
         }
 
         componentWillReceiveProps(nextProps: SearchInputProps) {
             if (nextProps.value !== this.props.value) {
                 this.setState({ value: nextProps.value });
             }
+            if (this.state.value !== '' && nextProps.selfClearProp && nextProps.selfClearProp !== this.state.selfClearProp) {
+                this.props.onSearch('');
+                this.setState({ selfClearProp: nextProps.selfClearProp });
+            }
         }
 
         componentWillUnmount() {