From a6458a120b1d6ef303954a94b4b2de55016f3e1c Mon Sep 17 00:00:00 2001
From: Phil Kuang <pkuang@factset.com>
Date: Wed, 18 May 2022 14:23:50 -0400
Subject: [PATCH] feat(adrs): add highlighting to AdrSearchResultListItem

Signed-off-by: Phil Kuang <pkuang@factset.com>
---
 .changeset/silly-wombats-flash.md             |  5 +++
 plugins/adr/api-report.md                     |  3 ++
 plugins/adr/package.json                      |  3 +-
 .../src/search/AdrSearchResultListItem.tsx    | 41 +++++++++++++++----
 4 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/silly-wombats-flash.md

diff --git a/.changeset/silly-wombats-flash.md b/.changeset/silly-wombats-flash.md
new file mode 100644
index 0000000000..d75196df76
--- /dev/null
+++ b/.changeset/silly-wombats-flash.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-adr': patch
+---
+
+Adding term highlighting support to `AdrSearchResultListItem`
diff --git a/plugins/adr/api-report.md b/plugins/adr/api-report.md
index 7d49689fc2..61cf231784 100644
--- a/plugins/adr/api-report.md
+++ b/plugins/adr/api-report.md
@@ -9,6 +9,7 @@ import { AdrDocument } from '@backstage/plugin-adr-common';
 import { AdrFilePathFilterFn } from '@backstage/plugin-adr-common';
 import { BackstagePlugin } from '@backstage/core-plugin-api';
 import { isAdrAvailable } from '@backstage/plugin-adr-common';
+import { ResultHighlight } from '@backstage/plugin-search-common';
 import { RouteRef } from '@backstage/core-plugin-api';
 
 // @public
@@ -45,9 +46,11 @@ export const AdrReader: {
 // @public
 export const AdrSearchResultListItem: ({
   lineClamp,
+  highlight,
   result,
 }: {
   lineClamp?: number | undefined;
+  highlight?: ResultHighlight | undefined;
   result: AdrDocument;
 }) => JSX.Element;
 
diff --git a/plugins/adr/package.json b/plugins/adr/package.json
index 5bad8c8f82..2274bdebd4 100644
--- a/plugins/adr/package.json
+++ b/plugins/adr/package.json
@@ -27,6 +27,8 @@
     "@backstage/integration-react": "^1.1.0",
     "@backstage/plugin-adr-common": "^0.1.0",
     "@backstage/plugin-catalog-react": "^1.1.0",
+    "@backstage/plugin-search-common": "^0.3.4",
+    "@backstage/plugin-search-react": "^0.2.0",
     "@backstage/theme": "^0.2.15",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.9.1",
@@ -35,7 +37,6 @@
     "octokit": "^1.7.1",
     "react-markdown": "^8.0.0",
     "react-router-dom": "6.0.0-beta.0",
-    "react-text-truncate": "^0.18.0",
     "react-use": "^17.2.4",
     "remark-gfm": "^3.0.1"
   },
diff --git a/plugins/adr/src/search/AdrSearchResultListItem.tsx b/plugins/adr/src/search/AdrSearchResultListItem.tsx
index 8b89629af6..484bac336e 100644
--- a/plugins/adr/src/search/AdrSearchResultListItem.tsx
+++ b/plugins/adr/src/search/AdrSearchResultListItem.tsx
@@ -15,7 +15,6 @@
  */
 
 import React from 'react';
-import TextTruncate from 'react-text-truncate';
 import {
   Box,
   Chip,
@@ -26,6 +25,8 @@ import {
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
 import { AdrDocument } from '@backstage/plugin-adr-common';
+import { ResultHighlight } from '@backstage/plugin-search-common';
+import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
 
 const useStyles = makeStyles({
   flexContainer: {
@@ -44,9 +45,11 @@ const useStyles = makeStyles({
  */
 export const AdrSearchResultListItem = ({
   lineClamp = 5,
+  highlight,
   result,
 }: {
   lineClamp?: number;
+  highlight?: ResultHighlight;
   result: AdrDocument;
 }) => {
   const classes = useStyles();
@@ -57,14 +60,36 @@ export const AdrSearchResultListItem = ({
         <ListItemText
           className={classes.itemText}
           primaryTypographyProps={{ variant: 'h6' }}
-          primary={result.title}
+          primary={
+            highlight?.fields.title ? (
+              <HighlightedSearchResultText
+                text={highlight.fields.title}
+                preTag={highlight.preTag}
+                postTag={highlight.postTag}
+              />
+            ) : (
+              result.title
+            )
+          }
           secondary={
-            <TextTruncate
-              line={lineClamp}
-              truncateText="…"
-              text={result.text}
-              element="span"
-            />
+            <span
+              style={{
+                display: '-webkit-box',
+                WebkitBoxOrient: 'vertical',
+                WebkitLineClamp: lineClamp,
+                overflow: 'hidden',
+              }}
+            >
+              {highlight?.fields.text ? (
+                <HighlightedSearchResultText
+                  text={highlight.fields.text}
+                  preTag={highlight.preTag}
+                  postTag={highlight.postTag}
+                />
+              ) : (
+                result.text
+              )}
+            </span>
           }
         />
         <Box>