Apply suggestions from code review

Co-authored-by: Camila Belo <camilaibs@gmail.com>
Signed-off-by: Emma Indal <emma.indahl@gmail.com>

.changeset/serious-pigs-watch.md

@@ -5,6 +5,6 @@
 '@backstage/plugin-search-react': patch
 ---
 
-`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems`. This is to make sure the list only contains list elements.
+`ListItem` wrapper component moved to `SearchResultListItemExtension` for all `*SearchResultListItems` that are exported as extensions. This is to make sure the list only contains list elements.
 
-Note: If you have implemented a custom result list item, you can remove the list item wrapper to avoid duplicated `<li>` elements.
+Note: If you have implemented a custom result list item, we recommend you to remove the list item wrapper to avoid nested `<li>` elements.

plugins/explore/api-report.md

@@ -139,7 +139,5 @@ export interface ToolSearchResultListItemProps {
   rank?: number;
   // (undocumented)
   result?: IndexableDocument;
-  // (undocumented)
-  toggleModal?: () => void;
 }
 ```

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

@@ -50,7 +50,6 @@ export interface ToolSearchResultListItemProps {
   result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
-  toggleModal?: () => void;
 }
 
 /**  @public */
@@ -94,8 +93,9 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
           }
         />
         <Box>
-          {result.tags &&
-            result.tags.map((tag: string) => <Chip label={tag} size="small" />)}
+          {result.tags?.map((tag: string) => (
+            <Chip label={tag} size="small" />
+          ))}
         </Box>
       </div>
     </>

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

@@ -17,7 +17,14 @@
 import React from 'react';
 import _unescape from 'lodash/unescape';
 import { Link } from '@backstage/core-components';
-import { ListItemText, ListItemIcon, Box, Chip } from '@material-ui/core';
+import {
+  Divider,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+  Box,
+  Chip,
+} from '@material-ui/core';
 import { useAnalytics } from '@backstage/core-plugin-api';
 import { ResultHighlight } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '@backstage/plugin-search-react';
@@ -45,44 +52,47 @@ export const StackOverflowSearchResultListItem = (
 
   return (
     <>
-      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-      <Box flexWrap="wrap">
-        <ListItemText
-          primaryTypographyProps={{ variant: 'h6' }}
-          primary={
-            <Link to={location} noTrack onClick={handleClick}>
-              {highlight?.fields?.title ? (
-                <HighlightedSearchResultText
-                  text={highlight.fields.title}
-                  preTag={highlight.preTag}
-                  postTag={highlight.postTag}
-                />
+      <ListItem alignItems="center">
+        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+        <Box flexWrap="wrap">
+          <ListItemText
+            primaryTypographyProps={{ variant: 'h6' }}
+            primary={
+              <Link to={location} noTrack onClick={handleClick}>
+                {highlight?.fields?.title ? (
+                  <HighlightedSearchResultText
+                    text={highlight.fields.title}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                ) : (
+                  _unescape(title)
+                )}
+              </Link>
+            }
+            secondary={
+              highlight?.fields?.text ? (
+                <>
+                  Author:{' '}
+                  <HighlightedSearchResultText
+                    text={highlight.fields.text}
+                    preTag={highlight.preTag}
+                    postTag={highlight.postTag}
+                  />
+                </>
               ) : (
-                _unescape(title)
-              )}
-            </Link>
-          }
-          secondary={
-            highlight?.fields?.text ? (
-              <>
-                Author:{' '}
-                <HighlightedSearchResultText
-                  text={highlight.fields.text}
-                  preTag={highlight.preTag}
-                  postTag={highlight.postTag}
-                />
-              </>
-            ) : (
-              `Author: ${text}`
-            )
-          }
-        />
-        <Chip label={`Answer(s): ${answers}`} size="small" />
-        {tags &&
-          tags.map((tag: string) => (
-            <Chip key={tag} label={`Tag: ${tag}`} size="small" />
-          ))}
-      </Box>
+                `Author: ${text}`
+              )
+            }
+          />
+          <Chip label={`Answer(s): ${answers}`} size="small" />
+          {tags &&
+            tags.map((tag: string) => (
+              <Chip key={tag} label={`Tag: ${tag}`} size="small" />
+            ))}
+        </Box>
+      </ListItem>
+      <Divider />
     </>
   );
 };