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
@@ -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,