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={
-
+
{highlight?.fields.title ? (
(
},
}),
);
+
+/** @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={
-
+
{props.highlight?.fields.title ? (
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 = ({
+
{highlight?.fields.title ? (
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 ? (
-
+
{children}
) : (
@@ -122,6 +112,8 @@ export const TechDocsSearchResultListItem = (
result.name
);
+ if (!result) return null;
+
return (