Merge pull request #14615 from jsundquist/master

fix(search): update to only link title in search results

.changeset/old-tips-cough.md

@@ -0,0 +1,9 @@
+---
+'@backstage/plugin-adr': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-search-react': patch
+'@backstage/plugin-stack-overflow': patch
+'@backstage/plugin-techdocs': patch
+---
+
+Update search links to only have header as linkable text

plugins/adr/src/search/AdrSearchResultListItem.tsx

@@ -64,21 +64,23 @@ export function AdrSearchResultListItem(props: {
   };
 
   return (
-    <Link noTrack to={result.location} onClick={handleClick}>
+    <>
       <ListItem alignItems="flex-start" className={classes.flexContainer}>
         <ListItemText
           className={classes.itemText}
           primaryTypographyProps={{ variant: 'h6' }}
           primary={
-            highlight?.fields.title ? (
-              <HighlightedSearchResultText
-                text={highlight.fields.title}
-                preTag={highlight.preTag}
-                postTag={highlight.postTag}
-              />
-            ) : (
-              result.title
-            )
+            <Link noTrack to={result.location} onClick={handleClick}>
+              {highlight?.fields.title ? (
+                <HighlightedSearchResultText
+                  text={highlight?.fields.title || ''}
+                  preTag={highlight?.preTag || ''}
+                  postTag={highlight?.postTag || ''}
+                />
+              ) : (
+                result.title
+              )}
+            </Link>
           }
           secondary={
             <span
@@ -116,6 +118,6 @@ export function AdrSearchResultListItem(props: {
         </Box>
       </ListItem>
       <Divider component="li" />
-    </Link>
+    </>
   );
 }

plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx

@@ -60,6 +60,7 @@ export function CatalogSearchResultListItem(
   props: CatalogSearchResultListItemProps,
 ) {
   const result = props.result as any;
+  const highlight = props.highlight as ResultHighlight;
 
   const classes = useStyles();
   const analytics = useAnalytics();
@@ -71,7 +72,7 @@ export function CatalogSearchResultListItem(
   };
 
   return (
-    <Link noTrack to={result.location} onClick={handleClick}>
+    <>
       <ListItem alignItems="flex-start">
         {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
         <div className={classes.flexContainer}>
@@ -79,22 +80,24 @@ export function CatalogSearchResultListItem(
             className={classes.itemText}
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
-              props.highlight?.fields.title ? (
-                <HighlightedSearchResultText
-                  text={props.highlight.fields.title}
-                  preTag={props.highlight.preTag}
-                  postTag={props.highlight.postTag}
-                />
-              ) : (
-                result.title
-              )
+              <Link noTrack to={result.location} onClick={handleClick}>
+                {highlight?.fields.title ? (
+                  <HighlightedSearchResultText
+                    text={highlight.fields.title}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                ) : (
+                  result.title
+                )}
+              </Link>
             }
             secondary={
-              props.highlight?.fields.text ? (
+              highlight?.fields.text ? (
                 <HighlightedSearchResultText
-                  text={props.highlight.fields.text}
-                  preTag={props.highlight.preTag}
-                  postTag={props.highlight.postTag}
+                  text={highlight.fields.text}
+                  preTag={highlight.preTag}
+                  postTag={highlight.postTag}
                 />
               ) : (
                 result.text
@@ -112,6 +115,6 @@ export function CatalogSearchResultListItem(
         </div>
       </ListItem>
       <Divider component="li" />
-    </Link>
+    </>
   );
 }

plugins/search-react/src/components/DefaultResultListItem/DefaultResultListItem.tsx

@@ -66,21 +66,23 @@ export const DefaultResultListItemComponent = ({
   };
 
   return (
-    <Link noTrack to={result.location} onClick={handleClick}>
+    <>
       <ListItem alignItems="center">
         {icon && <ListItemIcon>{icon}</ListItemIcon>}
         <ListItemText
           primaryTypographyProps={{ variant: 'h6' }}
           primary={
-            highlight?.fields.title ? (
-              <HighlightedSearchResultText
-                text={highlight.fields.title}
-                preTag={highlight.preTag}
-                postTag={highlight.postTag}
-              />
-            ) : (
-              result.title
-            )
+            <Link noTrack to={result.location} onClick={handleClick}>
+              {highlight?.fields.title ? (
+                <HighlightedSearchResultText
+                  text={highlight?.fields.title || ''}
+                  preTag={highlight?.preTag || ''}
+                  postTag={highlight?.postTag || ''}
+                />
+              ) : (
+                result.title
+              )}
+            </Link>
           }
           secondary={
             <span
@@ -106,7 +108,7 @@ export const DefaultResultListItemComponent = ({
         {secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
       </ListItem>
       <Divider />
-    </Link>
+    </>
   );
 };
 

plugins/stack-overflow/src/search/StackOverflowSearchResultListItem/StackOverflowSearchResultListItem.tsx

@@ -47,13 +47,17 @@ export const StackOverflowSearchResultListItem = (
   };
 
   return (
-    <Link to={location} noTrack onClick={handleClick}>
+    <>
       <ListItem alignItems="center">
         {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
         <Box flexWrap="wrap">
           <ListItemText
             primaryTypographyProps={{ variant: 'h6' }}
-            primary={_unescape(title)}
+            primary={
+              <Link to={location} noTrack onClick={handleClick}>
+                {_unescape(title)}
+              </Link>
+            }
             secondary={`Author: ${text}`}
           />
           <Chip label={`Answer(s): ${answers}`} size="small" />
@@ -64,6 +68,6 @@ export const StackOverflowSearchResultListItem = (
         </Box>
       </ListItem>
       <Divider />
-    </Link>
+    </>
   );
 };

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

@@ -81,6 +81,15 @@ export const TechDocsSearchResultListItem = (
     });
   };
 
+  const LinkWrapper = ({ children }: PropsWithChildren<{}>) =>
+    asLink ? (
+      <Link noTrack to={result.location} onClick={handleClick}>
+        {children}
+      </Link>
+    ) : (
+      <>{children}</>
+    );
+
   const TextItem = () => {
     const resultTitle = highlight?.fields.title ? (
       <HighlightedSearchResultText
@@ -117,13 +126,15 @@ export const TechDocsSearchResultListItem = (
         className={classes.itemText}
         primaryTypographyProps={{ variant: 'h6' }}
         primary={
-          title ? (
-            title
-          ) : (
-            <>
-              {resultTitle} | {entityTitle ?? resultName} docs
-            </>
-          )
+          <LinkWrapper>
+            {title ? (
+              title
+            ) : (
+              <>
+                {resultTitle} | {entityTitle ?? resultName} docs
+              </>
+            )}
+          </LinkWrapper>
         }
         secondary={
           <span
@@ -149,15 +160,6 @@ export const TechDocsSearchResultListItem = (
     );
   };
 
-  const LinkWrapper = ({ children }: PropsWithChildren<{}>) =>
-    asLink ? (
-      <Link noTrack to={result.location} onClick={handleClick}>
-        {children}
-      </Link>
-    ) : (
-      <>{children}</>
-    );
-
   const ListItemWrapper = ({ children }: PropsWithChildren<{}>) =>
     asListItem ? (
       <>
@@ -172,10 +174,8 @@ export const TechDocsSearchResultListItem = (
     );
 
   return (
-    <LinkWrapper>
-      <ListItemWrapper>
-        <TextItem />
-      </ListItemWrapper>
-    </LinkWrapper>
+    <ListItemWrapper>
+      <TextItem />
+    </ListItemWrapper>
   );
 };