From 2f91e1684eae3f202f82dad721586f66b4889287 Mon Sep 17 00:00:00 2001
From: Camila Belo <camilaibs@gmail.com>
Date: Mon, 23 Jan 2023 17:45:19 +0100
Subject: [PATCH] feat(search): create catalog, explore, tools, and search
 extensions

Signed-off-by: Camila Belo <camilaibs@gmail.com>
---
 .../CatalogSearchResultListItem.tsx           | 14 ++++---------
 plugins/catalog/src/index.ts                  |  3 ++-
 plugins/catalog/src/plugin.ts                 | 16 +++++++++++++++
 .../ToolSearchResultListItem.tsx              | 16 +++++----------
 plugins/explore/src/components/index.ts       |  1 -
 plugins/explore/src/index.ts                  |  8 +++++++-
 plugins/explore/src/plugin.ts                 | 16 +++++++++++++++
 .../DefaultResultListItem.tsx                 | 15 ++++----------
 plugins/search/src/index.ts                   |  2 +-
 plugins/techdocs/src/index.ts                 |  3 +++
 plugins/techdocs/src/plugin.ts                | 20 +++++++++++++++++++
 .../TechDocsSearchResultListItem.tsx          | 16 ++++-----------
 .../techdocs/src/search/components/index.ts   |  1 -
 13 files changed, 82 insertions(+), 49 deletions(-)

diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
index 2e5cbe2899..cf60138d99 100644
--- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
+++ b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.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,7 +49,7 @@ const useStyles = makeStyles({
  */
 export interface CatalogSearchResultListItemProps {
   icon?: ReactNode;
-  result: IndexableDocument;
+  result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
 }
@@ -63,13 +62,8 @@ export function CatalogSearchResultListItem(
   const highlight = props.highlight as ResultHighlight;
 
   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 (
     <>
@@ -80,7 +74,7 @@ export function CatalogSearchResultListItem(
             className={classes.itemText}
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
-              <Link noTrack to={result.location} onClick={handleClick}>
+              <Link noTrack to={result.location}>
                 {highlight?.fields.title ? (
                   <HighlightedSearchResultText
                     text={highlight.fields.title}
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 7de332cf51..42150dfd66 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -29,7 +29,6 @@ export type {
 } from './components/AboutCard';
 export { AboutContent, AboutField } from './components/AboutCard';
 export * from './components/CatalogKindHeader';
-export * from './components/CatalogSearchResultListItem';
 export * from './components/CatalogTable';
 export * from './components/EntityLayout';
 export * from './components/EntityOrphanWarning';
@@ -53,6 +52,7 @@ export {
   EntityLinksCard,
   EntityLabelsCard,
   RelatedEntitiesCard,
+  CatalogSearchResultListItem,
 } from './plugin';
 
 export type { DependencyOfComponentsCardProps } from './components/DependencyOfComponentsCard';
@@ -72,3 +72,4 @@ export type { HasResourcesCardProps } from './components/HasResourcesCard';
 export type { HasSubcomponentsCardProps } from './components/HasSubcomponentsCard';
 export type { HasSystemsCardProps } from './components/HasSystemsCard';
 export type { RelatedEntitiesCardProps } from './components/RelatedEntitiesCard';
+export type { CatalogSearchResultListItemProps } from './components/CatalogSearchResultListItem';
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index c83657b85a..12c22eb537 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -31,6 +31,7 @@ import {
   fetchApiRef,
   storageApiRef,
 } from '@backstage/core-plugin-api';
+import { createSearchResultListItemExtension } from '@backstage/plugin-search-react';
 import { DefaultStarredEntitiesApi } from './apis';
 import { AboutCardProps } from './components/AboutCard';
 import { DefaultCatalogPageProps } from './components/CatalogPage';
@@ -42,6 +43,7 @@ import { HasResourcesCardProps } from './components/HasResourcesCard';
 import { HasSubcomponentsCardProps } from './components/HasSubcomponentsCard';
 import { HasSystemsCardProps } from './components/HasSystemsCard';
 import { RelatedEntitiesCardProps } from './components/RelatedEntitiesCard';
+import { CatalogSearchResultListItemProps } from './components/CatalogSearchResultListItem';
 import { rootRouteRef } from './routes';
 import { CatalogInputPluginOptions, CatalogPluginOptions } from './options';
 
@@ -249,3 +251,17 @@ export const RelatedEntitiesCard: <T extends Entity>(
     },
   }),
 );
+
+/** @public */
+export const CatalogSearchResultListItem: (
+  props: CatalogSearchResultListItemProps,
+) => JSX.Element | null = catalogPlugin.provide(
+  createSearchResultListItemExtension({
+    name: 'CatalogSearchResultListItem',
+    component: () =>
+      import('./components/CatalogSearchResultListItem').then(
+        m => m.CatalogSearchResultListItem,
+      ),
+    predicate: result => result.type === 'software-catalog',
+  }),
+);
diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
index 3f5a515efb..c9e8946f26 100644
--- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
+++ b/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}
diff --git a/plugins/explore/src/components/index.ts b/plugins/explore/src/components/index.ts
index d3af1b99c2..f8fba16910 100644
--- a/plugins/explore/src/components/index.ts
+++ b/plugins/explore/src/components/index.ts
@@ -16,4 +16,3 @@
 
 export * from './DomainCard';
 export * from './ExploreLayout';
-export * from './ToolSearchResultListItem';
diff --git a/plugins/explore/src/index.ts b/plugins/explore/src/index.ts
index 24591211f7..ec910640cd 100644
--- a/plugins/explore/src/index.ts
+++ b/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';
diff --git a/plugins/explore/src/plugin.ts b/plugins/explore/src/plugin.ts
index ab8eedf7ef..5a4bec53c5 100644
--- a/plugins/explore/src/plugin.ts
+++ b/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',
+  }),
+);
diff --git a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx
index 6158aed008..6ea5e4d1a2 100644
--- a/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx
+++ b/plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx
@@ -15,7 +15,7 @@
  */
 
 import React, { ReactNode } from 'react';
-import { AnalyticsContext, useAnalytics } from '@backstage/core-plugin-api';
+import { AnalyticsContext } from '@backstage/core-plugin-api';
 import {
   ResultHighlight,
   SearchDocument,
@@ -39,7 +39,7 @@ import { Link } from '@backstage/core-components';
 export type DefaultResultListItemProps = {
   icon?: ReactNode;
   secondaryAction?: ReactNode;
-  result: SearchDocument;
+  result?: SearchDocument;
   highlight?: ResultHighlight;
   rank?: number;
   lineClamp?: number;
@@ -53,18 +53,11 @@ export type DefaultResultListItemProps = {
 export const DefaultResultListItemComponent = ({
   result,
   highlight,
-  rank,
   icon,
   secondaryAction,
   lineClamp = 5,
 }: DefaultResultListItemProps) => {
-  const analytics = useAnalytics();
-  const handleClick = () => {
-    analytics.captureEvent('discover', result.title, {
-      attributes: { to: result.location },
-      value: rank,
-    });
-  };
+  if (!result) return null;
 
   return (
     <>
@@ -73,7 +66,7 @@ export const DefaultResultListItemComponent = ({
         <ListItemText
           primaryTypographyProps={{ variant: 'h6' }}
           primary={
-            <Link noTrack to={result.location} onClick={handleClick}>
+            <Link noTrack to={result.location}>
               {highlight?.fields.title ? (
                 <HighlightedSearchResultText
                   text={highlight?.fields.title || ''}
diff --git a/plugins/search/src/index.ts b/plugins/search/src/index.ts
index 8e1db7c2b8..66b032c83c 100644
--- a/plugins/search/src/index.ts
+++ b/plugins/search/src/index.ts
@@ -47,7 +47,7 @@ export type { SidebarSearchModalProps } from './components/SidebarSearchModal';
 export {
   HomePageSearchBar,
   SearchPage,
+  SidebarSearchModal,
   searchPlugin as plugin,
   searchPlugin,
-  SidebarSearchModal,
 } from './plugin';
diff --git a/plugins/techdocs/src/index.ts b/plugins/techdocs/src/index.ts
index 13b71d49ed..c759d43fe9 100644
--- a/plugins/techdocs/src/index.ts
+++ b/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
  *
diff --git a/plugins/techdocs/src/plugin.ts b/plugins/techdocs/src/plugin.ts
index 4ad8b98e37..331eefe121 100644
--- a/plugins/techdocs/src/plugin.ts
+++ b/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',
+  }),
+);
diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx
index 800fba2260..f058fd0a9e 100644
--- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx
+++ b/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}
diff --git a/plugins/techdocs/src/search/components/index.ts b/plugins/techdocs/src/search/components/index.ts
index 1f7615b4ff..c70681fc53 100644
--- a/plugins/techdocs/src/search/components/index.ts
+++ b/plugins/techdocs/src/search/components/index.ts
@@ -14,5 +14,4 @@
  * limitations under the License.
  */
 
-export * from './TechDocsSearchResultListItem';
 export * from './TechDocsSearch';