From 7b4a222fbff74af09004de5a88091564a7904695 Mon Sep 17 00:00:00 2001
From: Tobias Skarhed <1438972+tskarhed@users.noreply.github.com>
Date: Fri, 31 Mar 2023 08:49:03 +0200
Subject: [PATCH] Search: Move checkbox outside of item card (#65540)

* Move checkbox outside of SeachItem

* Add li element
---
 .../search/components/SearchCheckbox.tsx      |  4 +-
 .../features/search/components/SearchItem.tsx | 70 ++++++++++---------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/public/app/features/search/components/SearchCheckbox.tsx b/public/app/features/search/components/SearchCheckbox.tsx
index 9261556b7ef..c80ea84db75 100644
--- a/public/app/features/search/components/SearchCheckbox.tsx
+++ b/public/app/features/search/components/SearchCheckbox.tsx
@@ -13,9 +13,7 @@ interface Props {
 export const SearchCheckbox = memo(
   ({ onClick, className, checked = false, editable = false, 'aria-label': ariaLabel }: Props) => {
     return editable ? (
-      <div onClick={onClick} className={className}>
-        <Checkbox value={checked} aria-label={ariaLabel} />
-      </div>
+      <Checkbox onClick={onClick} className={className} value={checked} aria-label={ariaLabel} />
     ) : null;
   }
 );
diff --git a/public/app/features/search/components/SearchItem.tsx b/public/app/features/search/components/SearchItem.tsx
index ef106860a28..c904f403469 100644
--- a/public/app/features/search/components/SearchItem.tsx
+++ b/public/app/features/search/components/SearchItem.tsx
@@ -48,7 +48,6 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
   const handleCheckboxClick = useCallback(
     (ev: React.MouseEvent) => {
       ev.stopPropagation();
-      ev.preventDefault();
 
       if (onToggleChecked) {
         onToggleChecked(item);
@@ -68,38 +67,38 @@ export const SearchItem = ({ item, isSelected, editable, onToggleChecked, onTagS
   );
 
   return (
-    <Card
-      data-testid={selectors.dashboardItem(item.title)}
-      href={item.url}
-      style={{ minHeight: SEARCH_ITEM_HEIGHT }}
-      className={styles.container}
-      onClick={onClickItem}
-    >
-      <Card.Heading>{item.title}</Card.Heading>
+    <li className={styles.cardContainer}>
+      <SearchCheckbox
+        aria-label="Select dashboard"
+        editable={editable}
+        checked={isSelected}
+        onClick={handleCheckboxClick}
+      />
 
-      <Card.Figure align={'center'} className={styles.checkbox}>
-        <SearchCheckbox
-          aria-label="Select dashboard"
-          editable={editable}
-          checked={isSelected}
-          onClick={handleCheckboxClick}
-        />
-      </Card.Figure>
+      <Card
+        className={styles.card}
+        data-testid={selectors.dashboardItem(item.title)}
+        href={item.url}
+        style={{ minHeight: SEARCH_ITEM_HEIGHT }}
+        onClick={onClickItem}
+      >
+        <Card.Heading>{item.title}</Card.Heading>
 
-      <Card.Meta separator={''}>
-        <span className={styles.metaContainer}>{description}</span>
+        <Card.Meta separator={''}>
+          <span className={styles.metaContainer}>{description}</span>
 
-        {item.sortMetaName && (
-          <span className={styles.metaContainer}>
-            <Icon name={getIconFromMeta(item.sortMetaName)} />
-            {item.sortMeta} {item.sortMetaName}
-          </span>
-        )}
-      </Card.Meta>
-      <Card.Tags>
-        <TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} />
-      </Card.Tags>
-    </Card>
+          {item.sortMetaName && (
+            <span className={styles.metaContainer}>
+              <Icon name={getIconFromMeta(item.sortMetaName)} />
+              {item.sortMeta} {item.sortMetaName}
+            </span>
+          )}
+        </Card.Meta>
+        <Card.Tags>
+          <TagList tags={item.tags ?? []} onClick={tagSelected} getAriaLabel={(tag) => `Filter by tag "${tag}"`} />
+        </Card.Tags>
+      </Card>
+    </li>
   );
 };
 
@@ -116,9 +115,15 @@ function kindName(kind: DashboardViewItem['kind']) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
+    cardContainer: css`
+      display: flex;
+      list-style: none;
+      align-items: center;
       margin-bottom: ${theme.spacing(0.75)};
+    `,
+    card: css`
       padding: ${theme.spacing(1)} ${theme.spacing(2)};
+      margin-bottom: 0;
     `,
     metaContainer: css`
       display: flex;
@@ -129,8 +134,5 @@ const getStyles = (theme: GrafanaTheme2) => {
         margin-right: ${theme.spacing(0.5)};
       }
     `,
-    checkbox: css`
-      margin-right: 0;
-    `,
   };
 };