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 = ({
+ ) : (
+ result.title
+ )
+ }
secondary={
-
+
+ {highlight?.fields.text ? (
+
+ ) : (
+ result.text
+ )}
+
}
/>