feat(adrs): add highlighting to AdrSearchResultListItem

Signed-off-by: Phil Kuang <pkuang@factset.com>

.changeset/silly-wombats-flash.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-adr': patch
+---
+
+Adding term highlighting support to `AdrSearchResultListItem`

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;
 

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"
   },

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>