Prepopulate document search with query string (#4004)

This is a small enhancement and follow-up #3879. It automatically prepopulates the document-scope search input with the query string of the global search. If for example a user searches for "Elizabeth Bennet" and they click on one of the PDF results, the document-scope search input will be prepopulated with "Elizabeth Bennet". If they want to find pages relevant to their search term, they don’t have to retype the search query and can simply press enter.

As an alternative I’ve considered adding a small banner below the tab bar ("Do you want to search for 'Elizabeth Bennet' in this document?") which would probably be more obvious. Decided to try this option first as it adds less clutter to the UI. If it turns out the functionality isn’t clear to users, we can always iterate.

ui/src/components/EntitySearch/EntitySearchResults.jsx

@@ -56,6 +56,7 @@ class EntitySearchResults extends Component {
       showPreview = true,
       updateSelection,
       selection,
+      query,
     } = this.props;
 
     if (result.isError) {
@@ -89,6 +90,7 @@ class EntitySearchResults extends Component {
                   selection={selection}
                   writeable={writeable}
                   columns={columns}
+                  queryText={query.getString('q')}
                 />
               ))}
               {result.isPending &&

ui/src/components/EntitySearch/EntitySearchResultsRow.jsx

@@ -40,11 +40,18 @@ class EntitySearchResultsRow extends Component {
   }
 
   renderCellContent(column) {
-    const { entity, model, showPreview } = this.props;
+    const { entity, model, showPreview, queryText } = this.props;
     const { isProperty, name, type } = column;
 
     if (name === 'caption') {
-      return <Entity.Link preview={showPreview} entity={entity} icon />;
+      return (
+        <Entity.Link
+          preview={showPreview}
+          previewQueryText={queryText}
+          entity={entity}
+          icon
+        />
+      );
     } else if (name === 'collection_id') {
       return (
         <Collection.Link

ui/src/components/common/Entity.jsx

@@ -20,7 +20,14 @@ class EntityLink extends PureComponent {
   }
 
   onClick(event) {
-    const { entity, navigate, location, preview, profile = true } = this.props;
+    const {
+      entity,
+      navigate,
+      location,
+      preview,
+      previewQueryText,
+      profile = true,
+    } = this.props;
     const modifierPressed =
       event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 
@@ -29,7 +36,7 @@ class EntityLink extends PureComponent {
     }
 
     event.preventDefault();
-    togglePreview(navigate, location, entity, profile);
+    togglePreview(navigate, location, entity, profile, previewQueryText);
   }
 
   render() {

ui/src/util/togglePreview.js

@@ -1,12 +1,21 @@
 import queryString from 'query-string';
 
-export default function togglePreview(navigate, location, entity, profile) {
+export default function togglePreview(
+  navigate,
+  location,
+  entity,
+  profile,
+  queryText
+) {
   const parsed = queryString.parse(location.hash);
   parsed['preview:mode'] = undefined;
   if (entity) {
     parsed['preview:id'] =
       parsed['preview:id'] === entity.id ? undefined : entity.id;
     parsed['preview:profile'] = profile;
+    if (queryText) {
+      parsed['preview:q'] = queryText;
+    }
   } else {
     parsed['preview:id'] = undefined;
     parsed['preview:profile'] = undefined;