feat(search): create catalog, explore, tools, and search extensions

Signed-off-by: Camila Belo <camilaibs@gmail.com>

plugins/techdocs/src/index.ts

@@ -37,11 +37,14 @@ export {
   TechDocsIndexPage,
   TechdocsPage,
   TechDocsReaderPage,
+  TechDocsSearchResultListItem,
   techdocsPlugin as plugin,
   techdocsPlugin,
 } from './plugin';
 export * from './Router';
 
+export type { TechDocsSearchResultListItemProps } from './search/components/TechDocsSearchResultListItem';
+
 /**
  * @deprecated Import from `@backstage/plugin-techdocs-react` instead
  *

plugins/techdocs/src/plugin.ts

@@ -33,6 +33,8 @@ import {
   fetchApiRef,
   identityApiRef,
 } from '@backstage/core-plugin-api';
+import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
+import { TechDocsSearchResultListItemProps } from './search/components/TechDocsSearchResultListItem';
 
 /**
  * The Backstage plugin that renders technical documentation for your components
@@ -153,3 +155,21 @@ export const TechDocsReaderPage = techdocsPlugin.provide(
     mountPoint: rootDocsRouteRef,
   }),
 );
+
+/**
+ * React extension used to render results on Search page or modal
+ *
+ * @public
+ */
+export const TechDocsSearchResultListItem: (
+  props: TechDocsSearchResultListItemProps,
+) => JSX.Element | null = techdocsPlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'TechDocsSearchResultListItem',
+    component: () =>
+      import('./search/components/TechDocsSearchResultListItem').then(
+        m => m.TechDocsSearchResultListItem,
+      ),
+    predicate: result => result.type === 'techdocs',
+  }),
+);

plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx

@@ -24,7 +24,6 @@ import {
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import { Link } from '@backstage/core-components';
-import { useAnalytics } from '@backstage/core-plugin-api';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
 
@@ -45,7 +44,7 @@ const useStyles = makeStyles({
  */
 export type TechDocsSearchResultListItemProps = {
   icon?: ReactNode;
-  result: any;
+  result?: any;
   highlight?: ResultHighlight;
   rank?: number;
   lineClamp?: number;
@@ -65,7 +64,6 @@ export const TechDocsSearchResultListItem = (
   const {
     result,
     highlight,
-    rank,
     lineClamp = 5,
     asListItem = true,
     asLink = true,
@@ -74,17 +72,9 @@ export const TechDocsSearchResultListItem = (
   } = props;
   const classes = useStyles();
 
-  const analytics = useAnalytics();
-  const handleClick = () => {
-    analytics.captureEvent('discover', result.title, {
-      attributes: { to: result.location },
-      value: rank,
-    });
-  };
-
   const LinkWrapper = ({ children }: PropsWithChildren<{}>) =>
     asLink ? (
-      <Link noTrack to={result.location} onClick={handleClick}>
+      <Link noTrack to={result.location}>
         {children}
       </Link>
     ) : (
@@ -122,6 +112,8 @@ export const TechDocsSearchResultListItem = (
       result.name
     );
 
+    if (!result) return null;
+
     return (
       <ListItemText
         className={classes.itemText}

plugins/techdocs/src/search/components/index.ts

@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export * from './TechDocsSearchResultListItem';
 export * from './TechDocsSearch';