components: SearchBar

- upgrade react-searchkit 1.0.0-alpha.3
- removed buttonColor, never used, and in case we use it, it has no effect since its overridden by the .ui.input.action.ils-searchbar styles
- subtitle to SearchError as child
- simplified search message when empty results
- closes inveniosoftware#226

package.json

@@ -39,7 +39,7 @@
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
     "react-scroll": "^1.7.16",
-    "react-searchkit": "^1.0.0-alpha.2",
+    "react-searchkit": "^1.0.0-alpha.3",
     "react-show-more": "^2.0.0",
     "react-tagcloud": "^2.0.0",
     "redux": "^4.0.5",
@@ -93,7 +93,7 @@
     "react-overridable": "^0.0.2",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-searchkit": "^1.0.0-alpha.2",
+    "react-searchkit": "^1.0.0-alpha.3",
     "react-scripts": "^3.4.1",
     "react-scroll": "^1.7.16",
     "react-show-more": "^2.0.0",

src/lib/components/SearchBar/SearchBar.js

@@ -42,7 +42,6 @@ class SearchBar extends Component {
 
   render() {
     const {
-      buttonColor,
       currentQueryString,
       executeSearch: parentSearch,
       onKeyPressHandler,
@@ -54,13 +53,13 @@ class SearchBar extends Component {
       ...otherProps
     } = this.props;
     const { currentValue } = this.state;
+    const searchAction = parentSearch || this.executeSearch;
     return (
       <>
         <Input
           action={{
-            color: buttonColor,
             icon: 'search',
-            onClick: parentSearch || this.executeSearch,
+            onClick: searchAction,
           }}
           size="big"
           fluid
@@ -91,7 +90,6 @@ class SearchBar extends Component {
 }
 
 SearchBar.propTypes = {
-  buttonColor: PropTypes.string,
   executeSearch: PropTypes.func,
   currentQueryString: PropTypes.string,
   onKeyPressHandler: PropTypes.func,
@@ -103,7 +101,6 @@ SearchBar.propTypes = {
 };
 
 SearchBar.defaultProps = {
-  buttonColor: null,
   currentQueryString: null,
   executeSearch: null,
   onKeyPressHandler: null,

src/lib/modules/SearchControls/ClearButton.js

@@ -15,7 +15,7 @@ export default class ClearButton extends Component {
         labelPosition="left"
         onClick={clickHandler}
       >
-        <Icon name="undo" />
+        <Icon name="close" />
         {text}
       </Button>
     );
@@ -30,7 +30,7 @@ ClearButton.propTypes = {
 };
 
 ClearButton.defaultProps = {
-  text: 'Clear query',
+  text: 'Clear search',
   fluid: false,
   disabled: false,
 };

src/lib/modules/SearchControls/SearchControlsOverrides.js

@@ -1,4 +1,4 @@
-import SearchBar from '@components/SearchBar/SearchBar';
+import { SearchBar } from '@components/SearchBar';
 import { MenuBucketAggregationValueElementOverrides } from '@modules/SearchControls/overridden/MenuBucketAggregationElement';
 import { AvailableLoanBucketAggregationValues } from './overridden/AvailableLoanBucketAggregationValues';
 import { AvailableLoanBucketAggregationElement } from './overridden/AvailableLoanBucketAggregationElement';

src/lib/modules/SearchControls/SearchEmptyResults.js

@@ -1,22 +1,20 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { Segment } from 'semantic-ui-react';
+import { Header, Segment } from 'semantic-ui-react';
 import ClearButton from '@modules/SearchControls/ClearButton';
 import { SearchMessage } from '@modules/SearchControls/SearchMessage';
 
 export default class SearchEmptyResults extends Component {
   render() {
     const { queryString, resetQuery, extraContent } = this.props;
-    const currentSearch = `Current search "${queryString}"`;
     return (
-      <SearchMessage title="No results found!" icon="search">
+      <SearchMessage title="No results found searching for" icon="search">
         {queryString && (
-          <>
-            <div className="empty-results-current">{currentSearch}</div>
-            <Segment.Inline>
-              <ClearButton clickHandler={resetQuery} /> {extraContent}
-            </Segment.Inline>
-          </>
+          <Segment.Inline>
+            <Header as="h1">{queryString}</Header>
+            <ClearButton clickHandler={resetQuery} />
+            {extraContent}
+          </Segment.Inline>
         )}
       </SearchMessage>
     );

src/lib/modules/SearchControls/SearchError.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import { Header } from 'semantic-ui-react';
 import { EmailLink } from '@components/EmailLink';
 import { invenioConfig } from '@config';
 import { SearchMessage } from '@modules/SearchControls/SearchMessage';
@@ -18,11 +19,13 @@ export const SearchError = ({ error }) => {
         title="Something went wrong while fetching results."
         icon="warning"
       >
-        Please try again later. If the problem persists,{' '}
-        <EmailLink email={invenioConfig.APP.supportEmail}>
-          contact the technical support
-        </EmailLink>
-        .
+        <Header.Subheader>
+          Please try again later. If the problem persists,{' '}
+          <EmailLink email={invenioConfig.APP.supportEmail}>
+            contact the technical support
+          </EmailLink>
+          .
+        </Header.Subheader>
       </SearchMessage>
     );
   }

src/lib/modules/SearchControls/SearchMessage.js

@@ -8,17 +8,17 @@ export const SearchMessage = ({ title, icon, children }) => (
       {icon && <Icon name={icon} />}
       {title}
     </Header>
-    {children && <Header.Subheader>{children}</Header.Subheader>}
+    {children}
   </Segment>
 );
 
 SearchMessage.propTypes = {
-  title: PropTypes.string.isRequired,
   children: PropTypes.node,
   icon: PropTypes.string,
+  title: PropTypes.string.isRequired,
 };
 
 SearchMessage.defaultProps = {
-  icon: null,
   children: null,
+  icon: null,
 };