From 8ecb3695e8cc48a25b86a2bc6852b084fac912bd Mon Sep 17 00:00:00 2001
From: Steve McConnel <stephen_mcconnel@sil.org>
Date: Mon, 1 Jul 2024 09:54:10 -0600
Subject: [PATCH] Improve the UI for empty search and Search Deeper (BL-13307)

---
 src/components/ListOfBookGroups.tsx |  1 -
 src/components/NoSearchResults.tsx  | 20 +++++++++++++++++---
 src/localization/Code Strings.json  |  4 ++--
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/ListOfBookGroups.tsx b/src/components/ListOfBookGroups.tsx
index d96a5206..896a1674 100644
--- a/src/components/ListOfBookGroups.tsx
+++ b/src/components/ListOfBookGroups.tsx
@@ -28,7 +28,6 @@ export const ListOfBookGroups: React.FunctionComponent<{
     <ul
         css={css`
             padding-left: 20px;
-            min-height: 200px;
             flex-shrink: 0;
             list-style: none;
         `}
diff --git a/src/components/NoSearchResults.tsx b/src/components/NoSearchResults.tsx
index c9532dd0..cdee8cf2 100644
--- a/src/components/NoSearchResults.tsx
+++ b/src/components/NoSearchResults.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { useTrack } from "../analytics/Analytics";
-import { FormattedMessage } from "react-intl";
+import { useIntl, FormattedMessage } from "react-intl";
 
 // This is displayed when the user types a search and there are no matches.
 // It also reports this event to analytics.
@@ -8,12 +8,26 @@ export const NoSearchResults: React.FunctionComponent<{ match: string }> = (
     props
 ) => {
     useTrack("Search Failed", { match: props.match }, true);
+    const l10n = useIntl();
+    const buttonLabel = l10n.formatMessage({
+        id: "header.searchDeeper",
+        defaultMessage: "Search Deeper",
+    });
+    const message =
+        "We didn't find an exact match in a title for {searchTerms}. Click {buttonLabel} to search in other fields and with looser matching.";
     return (
         <div>
             <FormattedMessage
                 id="search.noSearchResults"
-                defaultMessage="No books in the library match the search {searchString}"
-                values={{ searchString: props.match }}
+                defaultMessage={message}
+                values={{
+                    searchTerms: (
+                        <strong>
+                            <em>{props.match}</em>
+                        </strong>
+                    ),
+                    buttonLabel: <em>{buttonLabel}</em>,
+                }}
             />
         </div>
     );
diff --git a/src/localization/Code Strings.json b/src/localization/Code Strings.json
index 6e43c10e..cd70f4d9 100644
--- a/src/localization/Code Strings.json	
+++ b/src/localization/Code Strings.json	
@@ -88,8 +88,8 @@
         "message": "search for books"
     },
     "search.noSearchResults": {
-        "description": "",
-        "message": "No books in the library match the search {searchString}"
+        "description": "The \"{searchTerms}\" must be left untranslated in the place where the search terms would be substituted for displaying to the user.  The \"{buttonLabel}\" must be left untranslated in the place where the label for the \"Search Deeper\" button would be substituted for displaying to the user.",
+        "message": "We didn't find an exact match in a title for {searchTerms}. Click {buttonLabel} to search in other fields and with looser matching."
     },
     "search": {
         "description": "Priority - Low",