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 3b4ab35a1f669e388740fc325bdfede2185a7d2d..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,7 +56,9 @@ export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 export const SearchInput = withStyles(styles)(
     class extends React.Component<SearchInputProps> {
         state: SearchInputState = {
-            value: ""
+            value: "",
+            label: "",
+            selfClearProp: ""
         };
 
         timeout: number;
@@ -60,14 +66,15 @@ export const SearchInput = withStyles(styles)(
         render() {
             return <form onSubmit={this.handleSubmit}>
                 <FormControl>
-                    <InputLabel>Search files</InputLabel>
+                    <InputLabel>{this.state.label}</InputLabel>
                     <Input
                         type="text"
+                        data-cy="search-input"
                         value={this.state.value}
                         onChange={this.handleChange}
                         endAdornment={
                             <InputAdornment position="end">
-                                <Tooltip title='Search files'>
+                                <Tooltip title='Search'>
                                     <IconButton
                                         onClick={this.handleSubmit}>
                                         <SearchIcon />
@@ -80,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() {