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

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

plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx

@@ -25,7 +25,6 @@ import {
   makeStyles,
 } from '@material-ui/core';
 import { Link } from '@backstage/core-components';
-import { useAnalytics } from '@backstage/core-plugin-api';
 import {
   IndexableDocument,
   ResultHighlight,
@@ -50,23 +49,18 @@ const useStyles = makeStyles({
  */
 export interface ToolSearchResultListItemProps {
   icon?: ReactNode;
-  result: IndexableDocument;
+  result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
 }
 
-/** @public */
+/**  @public */
 export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
   const result = props.result as any;
 
   const classes = useStyles();
-  const analytics = useAnalytics();
-  const handleClick = () => {
-    analytics.captureEvent('discover', result.title, {
-      attributes: { to: result.location },
-      value: props.rank,
-    });
-  };
+
+  if (!result) return null;
 
   return (
     <>
@@ -77,7 +71,7 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
             className={classes.itemText}
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
-              <Link noTrack to={result.location} onClick={handleClick}>
+              <Link noTrack to={result.location}>
                 {props.highlight?.fields.title ? (
                   <HighlightedSearchResultText
                     text={props.highlight.fields.title}

plugins/explore/src/components/index.ts

@@ -16,4 +16,3 @@
 
 export * from './DomainCard';
 export * from './ExploreLayout';
-export * from './ToolSearchResultListItem';

plugins/explore/src/index.ts

@@ -23,5 +23,11 @@
 export * from './api';
 export * from './components';
 export * from './extensions';
-export { explorePlugin, explorePlugin as plugin } from './plugin';
+export {
+  ToolSearchResultListItem,
+  explorePlugin,
+  explorePlugin as plugin,
+} from './plugin';
 export * from './routes';
+
+export type { ToolSearchResultListItemProps } from './components/ToolSearchResultListItem';

plugins/explore/src/plugin.ts

@@ -22,7 +22,9 @@ import {
   discoveryApiRef,
   fetchApiRef,
 } from '@backstage/core-plugin-api';
+import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
 import { ExploreClient, exploreApiRef } from './api';
+import { ToolSearchResultListItemProps } from './components/ToolSearchResultListItem';
 // import { exampleTools } from './util/examples';
 
 /** @public */
@@ -65,3 +67,17 @@ export const explorePlugin = createPlugin({
     catalogEntity: catalogEntityRouteRef,
   },
 });
+
+/** @public */
+export const ToolSearchResultListItem: (
+  props: ToolSearchResultListItemProps,
+) => JSX.Element | null = explorePlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'ToolSearchResultListItem',
+    component: () =>
+      import('./components/ToolSearchResultListItem').then(
+        m => m.ToolSearchResultListItem,
+      ),
+    predicate: result => result.type === 'tools',
+  }),
+);