Fix search item links (#23210)

* Wrap search into into a

* Justify Icon

* Align items inside section header

* Remove log

* Fix clicking tags inside search item

packages/grafana-ui/src/components/Icon/Icon.tsx

@@ -16,6 +16,7 @@ const getIconStyles = stylesFactory(() => {
       display: inline-flex;
       width: 16px;
       align-items: center;
+      justify-content: center;
       height: 16px;
       text-align: center;
       font-size: 14px;

public/app/features/search/components/SearchItem.tsx

-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useRef, useEffect } from 'react';
 import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { e2e } from '@grafana/e2e';
@@ -20,6 +20,14 @@ const { selectors } = e2e.pages.Dashboards;
 export const SearchItem: FC<Props> = ({ item, editable, onToggleSelection, onTagSelected }) => {
   const theme = useTheme();
   const styles = getResultsItemStyles(theme);
+  const inputEl = useRef(null);
+
+  useEffect(() => {
+    inputEl.current.addEventListener('click', (event: MouseEvent) => {
+      // manually prevent default on TagList click, as doing it via normal onClick doesn't work inside angular
+      event.preventDefault();
+    });
+  }, []);
 
   const onItemClick = () => {
     //Check if one string can be found in the other
@@ -28,12 +36,7 @@ export const SearchItem: FC<Props> = ({ item, editable, onToggleSelection, onTag
     }
   };
 
-  const navigate = () => {
-    window.location.pathname = item.url;
-  };
-
   const tagSelected = (tag: string, event: React.MouseEvent<HTMLElement>) => {
-    event.stopPropagation();
     onTagSelected(tag);
   };
 
@@ -48,15 +51,18 @@ export const SearchItem: FC<Props> = ({ item, editable, onToggleSelection, onTag
     <li
       aria-label={selectors.dashboards(item.title)}
       className={cx(styles.wrapper, { [styles.selected]: item.selected })}
-      onClick={navigate}
     >
       <SearchCheckbox editable={editable} checked={item.checked} onClick={toggleItem} />
-      <Icon className={styles.icon} name="th-large" />
-      <div className={styles.body} onClick={onItemClick}>
-        <span>{item.title}</span>
-        <span className={styles.folderTitle}>{item.folderTitle}</span>
-      </div>
-      <TagList tags={item.tags} onClick={tagSelected} className={styles.tags} />
+      <a href={item.url} className={styles.link}>
+        <Icon className={styles.icon} name="th-large" />
+        <div className={styles.body} onClick={onItemClick}>
+          <span>{item.title}</span>
+          <span className={styles.folderTitle}>{item.folderTitle}</span>
+        </div>
+        <span ref={inputEl}>
+          <TagList tags={item.tags} onClick={tagSelected} className={styles.tags} />
+        </span>
+      </a>
     </li>
   );
 };
@@ -104,4 +110,9 @@ const getResultsItemStyles = stylesFactory((theme: GrafanaTheme) => ({
       display: none;
     }
   `,
+  link: css`
+    display: flex;
+    align-items: center;
+    width: 100%;
+  `,
 }));

public/app/features/search/components/SearchResults.tsx

@@ -120,6 +120,7 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
     wrapper: cx(
       css`
         display: flex;
+        align-items: center;
         font-size: ${theme.typography.size.base};
         padding: ${sm} ${xs} ${xs};
         color: ${theme.colors.textWeak};