Merge pull request #553 from StephenMcConnel/BL-13307-ImproveSearchDe…

…eperMsg Improve the UI for empty search and Search Deeper (BL-13307) (#553)
BloomBooks · Jul 10, 2024 · a3e3a12 · a3e3a12
2 parents e81091c + 8ecb369
commit a3e3a12
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 6 deletions.
diff --git 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
@@ -1,19 +1,33 @@
 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.
 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
@@ -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",