DOP-3374: Render search results with empty previews (#738)

mongodb · Nov 22, 2022 · 52e4e18 · 52e4e18
1 parent b6bc36d
commit 52e4e18
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 0 deletions.
diff --git a/src/components/SearchResults/SearchResults.js b/src/components/SearchResults/SearchResults.js
@@ -53,6 +53,7 @@ const HeaderContainer = styled('div')`
 `;
 
 const HeaderText = styled('h1')`
+  color: ${palette.black} !important;
   font-size: 18px;
   line-height: 21px;
   ${commonTextStyling};

diff --git a/src/components/Searchbar/SearchResult.js b/src/components/Searchbar/SearchResult.js
@@ -77,6 +77,8 @@ const StyledPreviewText = styled(Body)`
   line-height: 20px;
   margin-bottom: ${theme.size.default};
   ${({ maxLines }) => truncate(maxLines)};
+  // Reserve some space inside of the search result card when there is no preview
+  min-height: 20px;
 `;
 
 const StyledResultTitle = styled('p')`

diff --git a/src/utils/escape-reserved-html-characters.js b/src/utils/escape-reserved-html-characters.js
@@ -4,6 +4,8 @@
  * See DOP-2863 for rationale.
  */
 export const escapeHtml = (unsafe) => {
+  if (!unsafe) return '';
+
   return unsafe
     .replaceAll('&', '&amp;')
     .replaceAll('<', '&lt;')

diff --git a/tests/unit/__snapshots__/SearchResults.test.js.snap b/tests/unit/__snapshots__/SearchResults.test.js.snap
@@ -34,6 +34,7 @@ exports[`Search Results Page considers a given search filter query param and dis
 }
 
 .emotion-4 {
+  color: #001E2B!important;
   font-size: 18px;
   line-height: 21px;
   font-family: Akzidenz;
@@ -335,6 +336,7 @@ exports[`Search Results Page considers a given search filter query param and dis
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  min-height: 20px;
 }
 
 .emotion-29 {
@@ -1093,6 +1095,7 @@ exports[`Search Results Page does not return results for a given search term wit
 }
 
 .emotion-4 {
+  color: #001E2B!important;
   font-size: 18px;
   line-height: 21px;
   font-family: Akzidenz;
@@ -2252,6 +2255,7 @@ exports[`Search Results Page renders loading images before returning no results
 }
 
 .emotion-4 {
+  color: #001E2B!important;
   font-size: 18px;
   line-height: 21px;
   font-family: Akzidenz;
@@ -3035,6 +3039,7 @@ exports[`Search Results Page renders loading images before returning nonempty re
 }
 
 .emotion-4 {
+  color: #001E2B!important;
   font-size: 18px;
   line-height: 21px;
   font-family: Akzidenz;
@@ -3818,6 +3823,7 @@ exports[`Search Results Page renders results from a given search term query para
 }
 
 .emotion-4 {
+  color: #001E2B!important;
   font-size: 18px;
   line-height: 21px;
   font-family: Akzidenz;
@@ -4075,6 +4081,7 @@ exports[`Search Results Page renders results from a given search term query para
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  min-height: 20px;
 }
 
 .emotion-23 {