react-searchkit: portals integration

* ID-assigned searchbar
* remove double searchbar

invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/App.js

@@ -10,7 +10,6 @@ import React, { Component } from "react";
 import { Container, Grid } from "semantic-ui-react";
 import {
   ReactSearchKit,
-  SearchBar,
   BucketAggregation,
   EmptyResults,
   Error,
@@ -21,6 +20,8 @@ import PropTypes from "prop-types";
 import { Results } from "./Results";
 import { InvenioSearchApi } from "react-searchkit";
 import { OverridableContext, overrideStore } from "react-overridable";
+import InvenioSearchUISearchBar
+  from "./InvenioSearchUISearchBar";
 
 const OnResults = withState(Results);
 
@@ -48,7 +49,8 @@ export class App extends Component {
               <Grid.Row>
                 <Grid.Column width={4} />
                 <Grid.Column width={12}>
-                  <SearchBar />
+                  <InvenioSearchUISearchBar
+                    searchBarUID={this.props.config.searchbar_id}/>
                 </Grid.Column>
               </Grid.Row>
             </Grid>

invenio_search_ui/assets/semantic-ui/js/invenio_search_ui/InvenioSearchUISearchBar.js

@@ -0,0 +1,32 @@
+/*
+ * This file is part of Invenio.
+ * Copyright (C) 2020 CERN.
+ *
+ * Invenio is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { Component } from "react";
+import { SearchBar } from "react-searchkit";
+import ReactDOM from "react-dom";
+import PropTypes from "prop-types";
+
+
+export default class InvenioSearchUISearchBar extends Component {
+
+  render() {
+    if (!this.props.searchBarUID){
+      return <SearchBar/>
+    }
+    const searchNode = document.getElementById(this.props.searchBarUID);
+    searchNode.innerHTML = "";
+    if (searchNode) {
+      return ReactDOM.createPortal(<SearchBar />, searchNode);
+    }
+    return <SearchBar/>;
+  }
+}
+
+InvenioSearchUISearchBar.propTypes = {
+  searchBarUID: PropTypes.string,
+}

invenio_search_ui/templates/semantic-ui/invenio_search_ui/header.html

@@ -0,0 +1,20 @@
+{# -*- coding: utf-8 -*-
+
+This file is part of Invenio.
+Copyright (C) 2015-2018 CERN.
+
+Invenio is free software; you can redistribute it and/or modify it
+under the terms of the MIT License; see LICENSE file for more details.
+#}
+{%- block navbar_search %}
+<div class="ui basic segment" id="invenio-theme-searchbar">
+  <form class="ui form" action="{{url_for('invenio_search_ui.search')}}"
+        role="search">
+    <div class="ui action icon input">
+      <input type="text" name="q" placeholder="{{_('Search')}}">
+      <button type="submit" class="ui icon button"><i class="icon search"></i>
+      </button>
+    </div>
+  </form>
+</div>
+{%- endblock navbar_search %}

invenio_search_ui/views.py

@@ -106,9 +106,10 @@ def format_config(config, endpoint_name):
         'api': config.get('SEARCH_UI_SEARCH_API'),
         'mimetype': config.get('SEARCH_UI_SEARCH_MIMETYPE',
                                'application/json'),
-        "sort_options": searchkit_sort_options(
+        'searchbar_id': "invenio-theme-searchbar",
+        'sort_options': searchkit_sort_options(
             config_sort_options, config_default_sort
         ),
-        "aggs": searchkit_aggs(config.get('RECORDS_REST_FACETS', {}).get(
+        'aggs': searchkit_aggs(config.get('RECORDS_REST_FACETS', {}).get(
             search_index).get("aggs", {})),
     }