Additional solr updates

- update kitconcept.solr to 2.0.0-a2, 2.0.0-alpha.2
- search result style changes
  - hide builtin search input
  - keep search term after being submitted
  - make search result page full width
  - highlight searchbox on hover and focus
- update lockfile, devmode volto-solr
- necessary updates on solrSearchAutosuggest
  - wire the search widget in the header
- make search keep current state (ie. sorting by, etc.)

Author: reekitconcept

backend/news/191.feature

@@ -0,0 +1 @@
+Add support for an autocomplete livesearch widget @reebalazs

backend/pyproject.toml

@@ -35,7 +35,7 @@ dependencies = [
     "pas.plugins.authomatic==2.0.0",
     "pas.plugins.keycloakgroups==1.0.0b1",
     "pas.plugins.oidc==2.0.0",
-    "kitconcept.solr==2.0.0a1",
+    "kitconcept.solr==2.0.0a2"
 ]
 
 [dependency-groups]
@@ -61,6 +61,9 @@ container = [
     "zeo==6.0.0",
 ]
 
+[tool.hatch.metadata]
+allow-direct-references = true
+
 [project.urls]
 Homepage = "https://github.com/kitconcept/kitconcept.intranet"
 PyPI = "https://pypi.python.org/pypi/kitconcept.intranet"
@@ -288,7 +291,7 @@ constraint-dependencies = [
     "jsonschema==4.24.0",
     "keyring==25.6.0",
     "kitconcept.core==1.0.0a22",
-    "kitconcept.solr==2.0.0a1",
+    "kitconcept.solr==2.0.0a2",
     "kitconcept.voltolighttheme==7.0.0a27",
     "legacy-cgi==2.6.2",
     "lockfile==0.12.2",

backend/uv.lock

@@ -128,6 +128,6 @@
     "url": "git@github.com:kitconcept/kitconcept.solr.git",
     "https": "https://github.com/kitconcept/kitconcept.solr.git",
     "path": "frontend",
-    "branch": "monorepo"
+    "branch": "2.0.0-alpha.2"
   }
 }

frontend/mrs.developer.json

@@ -14,6 +14,8 @@ import { connect } from 'react-redux';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import zoomSVG from '@plone/volto/icons/zoom.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   search: {
     id: 'Search',
@@ -29,11 +31,16 @@ const messages = defineMessages({
   },
 });
 
+// Fallback Input component in case kitconcept.solr is not installed
+// (which provides the SolrSearchAutosuggest widget)
+const FallbackInput = (props) => <Input {...props} />;
+
 /**
  * IntranetSearchWidget component class.
  * @class IntranetSearchWidget
  * @extends Component
  */
+
 class IntranetSearchWidget extends Component {
   /**
    * Property types.
@@ -86,18 +93,53 @@ class IntranetSearchWidget extends Component {
         ? `&path=${encodeURIComponent(this.props.pathname)}`
         : '';
 
+    /* START CUSTOMIZATION */
     if (searchURL) {
       // If searchURL contains {searchTerm}, replace it with the encoded search text
       const externalUrl =
         searchURL.replace('{searchTerm}', encodeURIComponent(this.state.text)) +
         path;
       window.open(externalUrl, '_blank', 'noopener,noreferrer');
     } else {
-      this.props.history.push(
-        `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
-      );
+      /*
+       * These could be imported directly:
+       *
+       * ```js
+       * import {
+       *   queryStateFromParams,
+       *   queryStateToParams,
+       *   qs,
+       * } from '@kitconcept/volto-solr/components';
+       * ```
+       *
+       * However, we want to avoid to require a dependency on kitconcept.volto-solr.
+       * So we access these utilities via the registry.
+       *
+       */
+      const voltoSolrUtils = config.views.voltoSolrUtils;
+      if (voltoSolrUtils !== undefined) {
+        const { queryStateFromParams, queryStateToParams, qs } = voltoSolrUtils;
+        // Update the URL query parameters with the new search text
+        // Keep the other query params, only update SearchableText.
+        // This way, sorting, filters, etc. are preserved.
+        const newQueryParams = queryStateToParams({
+          ...queryStateFromParams(qs.parse(this.props.history.location.search)),
+          searchword: this.state.text,
+          // Reset pagination
+          currentPage: 1,
+        });
+        this.props.history.push({
+          pathname: '/search',
+          search: qs.stringify(newQueryParams),
+        });
+      } else {
+        // Fall back without volto-solr. Only the search text is set, all other
+        // query parameters are lost.
+        this.props.history.push(
+          `/search?SearchableText=${encodeURIComponent(this.state.text)}${path}`,
+        );
+      }
     }
-    /* START CUSTOMIZATION */
     // reset input value
     // this.setState({
     //   text: '',
@@ -112,15 +154,20 @@ class IntranetSearchWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    // Get the SolrSearchAutosuggest widget from the registry,
+    // with a fallback in case kitconcept.solr is not installed
+    const SolrSearchAutosuggest =
+      config.widgets.SolrSearchAutosuggest || FallbackInput;
     const { intl } = this.props;
     const searchFieldPlaceholder =
       this.props.site['kitconcept.intranet.search_field_placeholder'];
     return (
       <Form action="/search" onSubmit={this.onSubmit}>
         <Form.Field className="searchbox">
-          <Input
+          <SolrSearchAutosuggest
             aria-label={intl.formatMessage(messages.search)}
             onChange={this.onChangeText}
+            onSubmit={this.onSubmit}
             name="SearchableText"
             value={this.state.text}
             transparent

frontend/packages/volto-intranet/src/customizations/@kitconcept/volto-light-theme/components/SearchWidget/IntranetSearchWidget.jsx

@@ -1,4 +1,5 @@
-import type { ConfigType } from '@plone/registry';
+import './theme/custom.scss';
+import { ConfigType } from '@plone/registry';
 import installSettings from './config/settings';
 import installSlots from './config/slots';
 import installWidgets from './config/widgets';
@@ -21,8 +22,9 @@ declare module '@plone/types' {
 const applyConfig = (config: ConfigType) => {
   installSettings(config);
   installSlots(config);
-  installWidgets(config);
-  installBlocks(config);
+  (
+    config.settings.solrSearchOptions as { showSearchInput?: boolean }
+  ).showSearchInput = false;
   return config;
 };
 

frontend/packages/volto-intranet/src/index.ts

@@ -0,0 +1,26 @@
+//  Make the search page full width
+#page-search > .ui.container {
+  width: 100% !important;
+  max-width: 1440px !important;
+  padding: 0 10px !important;
+  margin: 0 auto !important;
+}
+
+// Highlight searchbox on hover and focus
+.header-wrapper.intranet-header
+  .header
+  .search-wrapper
+  .search
+  .field.searchbox {
+  border: 1px solid transparent !important;
+  border-radius: 2px;
+  &:hover,
+  &:focus,
+  &:focus-within {
+    border-color: #2563b5 !important;
+    box-shadow: 0 0 0 3px rgba(124, 128, 131, 0.3);
+    transition:
+      box-shadow 0.2s,
+      border-color 0.2s;
+  }
+}