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

Signed-off-by: Jonathan Sundquist <jonathan.sundquist@factset.com>

Author: jsundquist

.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,20 +64,24 @@ 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}
-              />
+              <Link noTrack to={result.location} onClick={handleClick}>
+                <HighlightedSearchResultText
+                  text={highlight.fields.title}
+                  preTag={highlight.preTag}
+                  postTag={highlight.postTag}
+                />
+              </Link>
             ) : (
-              result.title
+              <Link noTrack to={result.location} onClick={handleClick}>
+                {result.title}
+              </Link>
             )
           }
           secondary={
@@ -116,6 +120,6 @@ export function AdrSearchResultListItem(props: {
         </Box>
       </ListItem>
       <Divider component="li" />
-    </Link>
+    </>
   );
 }

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

@@ -71,7 +71,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}>
@@ -80,13 +80,17 @@ export function CatalogSearchResultListItem(
             primaryTypographyProps={{ variant: 'h6' }}
             primary={
               props.highlight?.fields.title ? (
-                <HighlightedSearchResultText
-                  text={props.highlight.fields.title}
-                  preTag={props.highlight.preTag}
-                  postTag={props.highlight.postTag}
-                />
+                <Link noTrack to={result.location} onClick={handleClick}>
+                  <HighlightedSearchResultText
+                    text={props.highlight.fields.title}
+                    preTag={props.highlight.preTag}
+                    postTag={props.highlight.postTag}
+                  />
+                </Link>
               ) : (
-                result.title
+                <Link noTrack to={result.location} onClick={handleClick}>
+                  {result.title}
+                </Link>
               )
             }
             secondary={
@@ -112,6 +116,6 @@ export function CatalogSearchResultListItem(
         </div>
       </ListItem>
       <Divider component="li" />
-    </Link>
+    </>
   );
 }

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

@@ -66,20 +66,24 @@ 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}
-              />
+              <Link noTrack to={result.location} onClick={handleClick}>
+                <HighlightedSearchResultText
+                  text={highlight.fields.title}
+                  preTag={highlight.preTag}
+                  postTag={highlight.postTag}
+                />
+              </Link>
             ) : (
-              result.title
+              <Link noTrack to={result.location} onClick={handleClick}>
+                {result.title}
+              </Link>
             )
           }
           secondary={
@@ -106,7 +110,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
@@ -118,11 +127,11 @@ export const TechDocsSearchResultListItem = (
         primaryTypographyProps={{ variant: 'h6' }}
         primary={
           title ? (
-            title
+            <LinkWrapper>{title}</LinkWrapper>
           ) : (
-            <>
+            <LinkWrapper>
               {resultTitle} | {entityTitle ?? resultName} docs
-            </>
+            </LinkWrapper>
           )
         }
         secondary={
@@ -149,15 +158,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 +172,8 @@ export const TechDocsSearchResultListItem = (
     );
 
   return (
-    <LinkWrapper>
-      <ListItemWrapper>
-        <TextItem />
-      </ListItemWrapper>
-    </LinkWrapper>
+    <ListItemWrapper>
+      <TextItem />
+    </ListItemWrapper>
   );
 };