13494: Adds ability to customize the search label on DataExplorer.

Also, fixed DataExplorer's default search label as it was showing
'Search files' on wrong contexts (ie: Projects panel).

Also, hides the search feature on the Collection PDH panel, as it doesn't
make sense to search for files on different collections with identical
contents, and also kind of gets stuck when searching for collection names
and having one result, the panel auto navigates to the collection panel.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas@di-pentima.com.ar>

diff --git a/src/components/collection-panel-files/collection-panel-files.tsx b/src/components/collection-panel-files/collection-panel-files.tsx
index 29f20be26fbc61a9dab267d5707f62774ee3fa57..6a9f0f4068506869ea019e8eade5424cd56cb403 100644 (file)
--- a/src/components/collection-panel-files/collection-panel-files.tsx
+++ b/src/components/collection-panel-files/collection-panel-files.tsx
@@ -84,6 +84,7 @@ export const CollectionPanelFilesComponent = ({ onItemMenuOpen, onSearchChange,
                     <span className={classes.cardHeaderContentTitle}>Files</span>
                     <SearchInput
                         value={searchValue}
+                        label='Search files'
                         onSearch={setSearchValue} />
                 </div>
             }

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 7107bd70823526226e45aa16687bdbcb5609b38a..28ae86cdfb9d76350092c3e05013c105e46c5841 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -47,6 +47,7 @@ interface DataExplorerDataProps<T> {
     items: T[];
     itemsAvailable: number;
     columns: DataColumns<T>;
+    searchLabel?: string;
     searchValue: string;
     rowsPerPage: number;
     rowsPerPageOptions: number[];
@@ -90,7 +91,7 @@ export const DataExplorer = withStyles(styles)(
         render() {
             const {
                 columns, onContextMenu, onFiltersChange, onSortToggle, working, extractKey,
-                rowsPerPage, rowsPerPageOptions, onColumnToggle, searchValue, onSearch,
+                rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch,
                 items, itemsAvailable, onRowClick, onRowDoubleClick, classes,
                 dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput,
                 paperKey, fetchMode, currentItemUuid, title
@@ -101,6 +102,7 @@ export const DataExplorer = withStyles(styles)(
                     <Grid container justify="space-between" wrap="nowrap" alignItems="center">
                         <div className={classes.searchBox}>
                             {!hideSearchInput && <SearchInput
+                                label={searchLabel}
                                 value={searchValue}
                                 onSearch={onSearch} />}
                         </div>

diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 3b4ab35a1f669e388740fc325bdfede2185a7d2d..02c193c2d34e3f867d541a9a3ee41ea6eb126649 100644 (file)
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -34,6 +34,7 @@ const styles: StyleRulesCallback<CssRules> = theme => {
 
 interface SearchInputDataProps {
     value: string;
+    label?: string;
 }
 
 interface SearchInputActionProps {
@@ -45,6 +46,7 @@ type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyl
 
 interface SearchInputState {
     value: string;
+    label: string;
 }
 
 export const DEFAULT_SEARCH_DEBOUNCE = 1000;
@@ -52,7 +54,8 @@ export const DEFAULT_SEARCH_DEBOUNCE = 1000;
 export const SearchInput = withStyles(styles)(
     class extends React.Component<SearchInputProps> {
         state: SearchInputState = {
-            value: ""
+            value: "",
+            label: ""
         };
 
         timeout: number;
@@ -60,14 +63,14 @@ export const SearchInput = withStyles(styles)(
         render() {
             return <form onSubmit={this.handleSubmit}>
                 <FormControl>
-                    <InputLabel>Search files</InputLabel>
+                    <InputLabel>{this.state.label}</InputLabel>
                     <Input
                         type="text"
                         value={this.state.value}
                         onChange={this.handleChange}
                         endAdornment={
                             <InputAdornment position="end">
-                                <Tooltip title='Search files'>
+                                <Tooltip title='Search'>
                                     <IconButton
                                         onClick={this.handleSubmit}>
                                         <SearchIcon />
@@ -80,7 +83,10 @@ 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) {

diff --git a/src/views/collection-content-address-panel/collection-content-address-panel.tsx b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
index 925c5848db6b502ccd4576dfae38b26e9fc1f634..038fea2fd44eb4bb3de3d060a3cf163fedd9b6bb 100644 (file)
--- a/src/views/collection-content-address-panel/collection-content-address-panel.tsx
+++ b/src/views/collection-content-address-panel/collection-content-address-panel.tsx
@@ -145,6 +145,7 @@ export const CollectionsContentAddressPanel = withStyles(styles)(
                     </Button>
                     <DataExplorer
                         id={COLLECTIONS_CONTENT_ADDRESS_PANEL_ID}
+                        hideSearchInput
                         onRowClick={this.props.onItemClick}
                         onRowDoubleClick={this.props.onItemDoubleClick}
                         onContextMenu={this.props.onContextMenu}