make sure result list is structured with list elements only

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

packages/app/src/components/search/SearchModal.tsx

@@ -23,17 +23,11 @@ import {
   Grid,
   makeStyles,
   Paper,
-  useTheme,
 } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import BuildIcon from '@material-ui/icons/Build';
 import LaunchIcon from '@material-ui/icons/Launch';
-import {
-  CatalogIcon,
-  DocsIcon,
-  Link,
-  useContent,
-} from '@backstage/core-components';
+import { CatalogIcon, DocsIcon, Link } from '@backstage/core-components';
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { CatalogSearchResultListItem } from '@internal/plugin-catalog-customized';
 import {
@@ -78,9 +72,6 @@ const rootRouteRef = searchPlugin.routes.root;
 export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
   const classes = useStyles();
   const navigate = useNavigate();
-  const { transitions } = useTheme();
-  const { focusContent } = useContent();
-
   const catalogApi = useApi(catalogApiRef);
 
   const { term, types } = useSearch();
@@ -91,11 +82,14 @@ export const SearchModal = ({ toggleModal }: { toggleModal: () => void }) => {
     searchBarRef?.current?.focus();
   });
 
+<<<<<<< HEAD
   const handleSearchResultClick = useCallback(() => {
     toggleModal();
     setTimeout(focusContent, transitions.duration.leavingScreen);
   }, [toggleModal, focusContent, transitions]);
 
+=======
+>>>>>>> c224202137 (make sure result list is structured with list elements only)
   const handleSearchBarKeyDown = useCallback(
     (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
       if (e.key === 'Enter') {

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

@@ -18,7 +18,6 @@ import React, { ReactNode } from 'react';
 import {
   Box,
   Chip,
-  Divider,
   ListItem,
   ListItemIcon,
   ListItemText,
@@ -52,6 +51,7 @@ export interface CatalogSearchResultListItemProps {
   result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
+  toggleModal?: () => void;
 }
 
 /** @public */
@@ -66,49 +66,44 @@ export function CatalogSearchResultListItem(
   if (!result) return null;
 
   return (
-    <>
-      <ListItem alignItems="flex-start">
-        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-        <div className={classes.flexContainer}>
-          <ListItemText
-            className={classes.itemText}
-            primaryTypographyProps={{ variant: 'h6' }}
-            primary={
-              <Link noTrack to={result.location}>
-                {highlight?.fields.title ? (
-                  <HighlightedSearchResultText
-                    text={highlight.fields.title}
-                    preTag={highlight.preTag}
-                    postTag={highlight.postTag}
-                  />
-                ) : (
-                  result.title
-                )}
-              </Link>
-            }
-            secondary={
-              highlight?.fields.text ? (
+    <ListItem alignItems="flex-start" divider>
+      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+      <div className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            <Link noTrack to={result.location}>
+              {highlight?.fields.title ? (
                 <HighlightedSearchResultText
-                  text={highlight.fields.text}
+                  text={highlight.fields.title}
                   preTag={highlight.preTag}
                   postTag={highlight.postTag}
                 />
               ) : (
-                result.text
-              )
-            }
-          />
-          <Box>
-            {result.kind && (
-              <Chip label={`Kind: ${result.kind}`} size="small" />
-            )}
-            {result.lifecycle && (
-              <Chip label={`Lifecycle: ${result.lifecycle}`} size="small" />
-            )}
-          </Box>
-        </div>
-      </ListItem>
-      <Divider component="li" />
-    </>
+                result.title
+              )}
+            </Link>
+          }
+          secondary={
+            highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={highlight.fields.title}
+                preTag={highlight.preTag}
+                postTag={highlight.postTag}
+              />
+            ) : (
+              result.title
+            )
+          }
+        />
+        <Box>
+          {result.kind && <Chip label={`Kind: ${result.kind}`} size="small" />}
+          {result.lifecycle && (
+            <Chip label={`Lifecycle: ${result.lifecycle}`} size="small" />
+          )}
+        </Box>
+      </div>
+    </ListItem>
   );
 }

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

@@ -18,7 +18,6 @@ import React, { ReactNode } from 'react';
 import {
   Box,
   Chip,
-  Divider,
   ListItem,
   ListItemIcon,
   ListItemText,
@@ -52,6 +51,7 @@ export interface ToolSearchResultListItemProps {
   result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
+  toggleModal?: () => void;
 }
 
 /**  @public */
@@ -63,47 +63,42 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
   if (!result) return null;
 
   return (
-    <>
-      <ListItem alignItems="flex-start">
-        {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
-        <div className={classes.flexContainer}>
-          <ListItemText
-            className={classes.itemText}
-            primaryTypographyProps={{ variant: 'h6' }}
-            primary={
-              <Link noTrack to={result.location}>
-                {props.highlight?.fields.title ? (
-                  <HighlightedSearchResultText
-                    text={props.highlight.fields.title}
-                    preTag={props.highlight.preTag}
-                    postTag={props.highlight.postTag}
-                  />
-                ) : (
-                  result.title
-                )}
-              </Link>
-            }
-            secondary={
-              props.highlight?.fields.text ? (
+    <ListItem alignItems="flex-start" divider>
+      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+      <div className={classes.flexContainer}>
+        <ListItemText
+          className={classes.itemText}
+          primaryTypographyProps={{ variant: 'h6' }}
+          primary={
+            <Link noTrack to={result.location}>
+              {props.highlight?.fields.title ? (
                 <HighlightedSearchResultText
-                  text={props.highlight.fields.text}
+                  text={props.highlight.fields.title}
                   preTag={props.highlight.preTag}
                   postTag={props.highlight.postTag}
                 />
               ) : (
-                result.text
-              )
-            }
-          />
-          <Box>
-            {result.tags &&
-              result.tags.map((tag: string) => (
-                <Chip label={tag} size="small" />
-              ))}
-          </Box>
-        </div>
-      </ListItem>
-      <Divider component="li" />
-    </>
+                result.title
+              )}
+            </Link>
+          }
+          secondary={
+            props.highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={props.highlight.fields.text}
+                preTag={props.highlight.preTag}
+                postTag={props.highlight.postTag}
+              />
+            ) : (
+              result.text
+            )
+          }
+        />
+        <Box>
+          {result.tags &&
+            result.tags.map((tag: string) => <Chip label={tag} size="small" />)}
+        </Box>
+      </div>
+    </ListItem>
   );
 }

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

@@ -21,13 +21,7 @@ import {
   SearchDocument,
 } from '@backstage/plugin-search-common';
 import { HighlightedSearchResultText } from '../HighlightedSearchResultText';
-import {
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-  Box,
-  Divider,
-} from '@material-ui/core';
+import { ListItem, ListItemIcon, ListItemText, Box } from '@material-ui/core';
 import Typography from '@material-ui/core/Typography';
 import { Link } from '@backstage/core-components';
 
@@ -43,6 +37,7 @@ export type DefaultResultListItemProps = {
   highlight?: ResultHighlight;
   rank?: number;
   lineClamp?: number;
+  toggleModal?: () => void;
 };
 
 /**
@@ -60,50 +55,47 @@ export const DefaultResultListItemComponent = ({
   if (!result) return null;
 
   return (
-    <>
-      <ListItem alignItems="center">
-        {icon && <ListItemIcon>{icon}</ListItemIcon>}
-        <ListItemText
-          primaryTypographyProps={{ variant: 'h6' }}
-          primary={
-            <Link noTrack to={result.location}>
-              {highlight?.fields.title ? (
-                <HighlightedSearchResultText
-                  text={highlight?.fields.title || ''}
-                  preTag={highlight?.preTag || ''}
-                  postTag={highlight?.postTag || ''}
-                />
-              ) : (
-                result.title
-              )}
-            </Link>
-          }
-          secondary={
-            <Typography
-              component="span"
-              style={{
-                display: '-webkit-box',
-                WebkitBoxOrient: 'vertical',
-                WebkitLineClamp: lineClamp,
-                overflow: 'hidden',
-              }}
-            >
-              {highlight?.fields.text ? (
-                <HighlightedSearchResultText
-                  text={highlight.fields.text}
-                  preTag={highlight.preTag}
-                  postTag={highlight.postTag}
-                />
-              ) : (
-                result.text
-              )}
-            </Typography>
-          }
-        />
-        {secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
-      </ListItem>
-      <Divider />
-    </>
+    <ListItem alignItems="center" divider>
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText
+        primaryTypographyProps={{ variant: 'h6' }}
+        primary={
+          <Link noTrack to={result.location}>
+            {highlight?.fields.title ? (
+              <HighlightedSearchResultText
+                text={highlight?.fields.title || ''}
+                preTag={highlight?.preTag || ''}
+                postTag={highlight?.postTag || ''}
+              />
+            ) : (
+              result.title
+            )}
+          </Link>
+        }
+        secondary={
+          <Typography
+            component="span"
+            style={{
+              display: '-webkit-box',
+              WebkitBoxOrient: 'vertical',
+              WebkitLineClamp: lineClamp,
+              overflow: 'hidden',
+            }}
+          >
+            {highlight?.fields.text ? (
+              <HighlightedSearchResultText
+                text={highlight.fields.text}
+                preTag={highlight.preTag}
+                postTag={highlight.postTag}
+              />
+            ) : (
+              result.text
+            )}
+          </Typography>
+        }
+      />
+      {secondaryAction && <Box alignItems="flex-end">{secondaryAction}</Box>}
+    </ListItem>
   );
 };
 

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

@@ -16,7 +16,6 @@
 
 import React, { PropsWithChildren, ReactNode } from 'react';
 import {
-  Divider,
   ListItem,
   ListItemIcon,
   ListItemText,
@@ -156,13 +155,10 @@ export const TechDocsSearchResultListItem = (
 
   const ListItemWrapper = ({ children }: PropsWithChildren<{}>) =>
     asListItem ? (
-      <>
-        <ListItem alignItems="flex-start">
-          {icon && <ListItemIcon>{icon}</ListItemIcon>}
-          <div className={classes.flexContainer}>{children}</div>
-        </ListItem>
-        <Divider component="li" />
-      </>
+      <ListItem alignItems="flex-start" divider>
+        {icon && <ListItemIcon>{icon}</ListItemIcon>}
+        <div className={classes.flexContainer}>{children}</div>
+      </ListItem>
     ) : (
       <>{children}</>
     );