feat(search): highlight search result terms

Signed-off-by: Phil Kuang <pkuang@factset.com>
2022-04-20 00:05:52 -04:00
parent 894f4022b6
commit 3a74e203a8
42 changed files with 947 additions and 69 deletions
@@ -3,6 +3,8 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).

 ```ts
+/// <reference types="react" />
+
 import { ApiRef } from '@backstage/core-plugin-api';
 import { AsyncState } from 'react-use/lib/useAsync';
 import { JsonObject } from '@backstage/types';
@@ -11,6 +13,20 @@ import { default as React_2 } from 'react';
 import { SearchQuery } from '@backstage/plugin-search-common';
 import { SearchResultSet } from '@backstage/plugin-search-common';

+// @public (undocumented)
+export const HighlightedSearchResultText: ({
+  text,
+  preTag,
+  postTag,
+}: HighlightedSearchResultTextProps) => JSX.Element;
+
+// @public (undocumented)
+export type HighlightedSearchResultTextProps = {
+  text: string;
+  preTag: string;
+  postTag: string;
+};
+
 // @public
 export class MockSearchApi implements SearchApi {
  constructor(mockedResults?: SearchResultSet | undefined);
@@ -35,7 +35,8 @@
    "@backstage/core-plugin-api": "^1.0.2-next.0",
    "@backstage/version-bridge": "^1.0.1",
    "react-use": "^17.3.2",
-    "@backstage/types": "^1.0.0"
+    "@backstage/types": "^1.0.0",
+    "@material-ui/core": "^4.12.2"
  },
  "peerDependencies": {
    "@types/react": "^16.13.1 || ^17.0.0",
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { renderInTestApp } from '@backstage/test-utils';
+import { HighlightedSearchResultText } from './HighlightedSearchResultText';
+
+describe('HighlightedSearchResultText', () => {
+  it('properly highlights result text', async () => {
+    await renderInTestApp(
+      <HighlightedSearchResultText
+        preTag="<tag>"
+        postTag="</tag>"
+        text="test <tag>highlighted</tag> restult <tag>text</tag>"
+      />,
+    );
+
+    expect(
+      screen.getByText('highlighted').tagName.toLocaleLowerCase('en-US'),
+    ).toEqual('mark');
+    expect(screen.getByText('text').tagName.toLocaleLowerCase('en-US')).toEqual(
+      'mark',
+    );
+  });
+});
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React, { useMemo } from 'react';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(
+  () => ({
+    highlight: {},
+  }),
+  { name: 'BackstageHighlightedSearchResultText' },
+);
+
+/**
+ * @public
+ */
+export type HighlightedSearchResultTextProps = {
+  text: string;
+  preTag: string;
+  postTag: string;
+};
+
+/**
+ * @public
+ */
+export const HighlightedSearchResultText = ({
+  text,
+  preTag,
+  postTag,
+}: HighlightedSearchResultTextProps) => {
+  const classes = useStyles();
+  const terms = useMemo(
+    () => text.split(new RegExp(`(${preTag}.+?${postTag})`)),
+    [postTag, preTag, text],
+  );
+  return (
+    <>
+      {terms.map((t, idx) =>
+        t.includes(preTag) ? (
+          <mark className={classes.highlight} key={idx}>
+            {t.replace(new RegExp(`${preTag}|${postTag}`, 'g'), '')}
+          </mark>
+        ) : (
+          t
+        ),
+      )}
+    </>
+  );
+};
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './HighlightedSearchResultText';
@@ -0,0 +1,17 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './HighlightedSearchResultText';
@@ -22,6 +22,7 @@

 export { searchApiRef, MockSearchApi } from './api';
 export type { SearchApi } from './api';
+export * from './components';
 export {
  SearchContextProvider,
  useSearch,