Search/migrate search results (#22930)

* Search: Setup SearchResults.tsx

* Search: add watchDepth

* Search: Use SearchResults.tsx in Angular template

* Search: Render search result header

* Search: Move new search components to features/search

* Search: Render nested dashboards

* Search: Expand dashboard folder

* Search: Remove fa prefix from icon names

* Search: Enable search results toggling

* Search: Add onItemClick handler

* Search: Add missing aria-label

* Search: Add no results message

* Search: Fix e2e selectors

* Search: Update SearchField imports

* Search: Add conditional classes

* Search: Abstract DashboardCheckbox

* Search: Separate ResultItem

* Search: Style ResultItem

* Search: Separate search components

* Search: Tweak checkbox styling

* Search: Simplify component names

* Search: Separate tag component

* Search: Checkbox docs

* Search: Remove inline on click

* Add Tag component

* Add Tag story

* Add TagList

* Group Tab and TabList

* Fix typechecks

* Remove Meta

* Use forwardRef for the Tag

* Search: Use TagList from grafana/ui

* Search: Add media query for TagList

* Search: Add types

* Search: Remove selectThemeVariant from SearchItem.tsx

* Search: Style section + header

* Search: Use semantic html

* Search: Adjust section padding

* Search: Setup tests

* Search: Fix tests

* Search: tweak result styles

* Search: Expand SearchResults tests

* Search: Add SearchItem tests

* Search: Use SearchResults in search.html

* Search: Toggle search result sections

* Search: Make selected prop optional

* Search: Fix tag selection

* Search: Fix tag filter onChange

* Search: Fix uncontrolled state change warning

* Search: Update icon names

* Search: memoize SearchCheckbox.tsx

* Search: Update types

* Search: Cleanup events

* Search: Semantic html

* Use styleMixins

* Search: Tweak styling

* Search: useCallback for checkbox toggle

* Search: Add stylesFactory

Co-authored-by: CirceCI <circleci@grafana.com>

packages/grafana-ui/src/components/Tags/Tag.tsx

@@ -4,19 +4,21 @@ import { GrafanaTheme } from '@grafana/data';
 import { useTheme } from '../../themes';
 import { getTagColorsFromName } from '../../utils';
 
+export type OnTagClick = (name: string, event: React.MouseEvent<HTMLElement>) => any;
+
 export interface Props extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
   /** Name of the tag to display */
   name: string;
-  onClick?: (name: string) => any;
+  onClick?: OnTagClick;
 }
 
 export const Tag = forwardRef<HTMLElement, Props>(({ name, onClick, className, ...rest }, ref) => {
   const theme = useTheme();
   const styles = getTagStyles(theme, name);
 
-  const onTagClick = () => {
+  const onTagClick = (event: React.MouseEvent<HTMLElement>) => {
     if (onClick) {
-      onClick(name);
+      onClick(name, event);
     }
   };
 

packages/grafana-ui/src/components/Tags/TagList.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import { cx, css } from 'emotion';
-import { Tag } from './Tag';
+import { OnTagClick, Tag } from './Tag';
 
 export interface Props {
   tags: string[];
-  onClick?: (name: string) => any;
+  onClick?: OnTagClick;
   /** Custom styles for the wrapper component */
   className?: string;
 }

packages/grafana-ui/src/themes/mixins.ts

@@ -47,6 +47,13 @@ export function listItem(theme: GrafanaTheme): string {
     `;
 }
 
+export function listItemSelected(theme: GrafanaTheme): string {
+  return `
+       background: ${theme.isLight ? theme.colors.gray6 : theme.colors.dark9};
+       color: ${theme.colors.textStrong};
+    `;
+}
+
 export const panelEditorNestedListStyles = stylesFactory((theme: GrafanaTheme) => {
   const borderColor = selectThemeVariant(
     {

packages/grafana-ui/src/utils/tags.ts

@@ -66,7 +66,7 @@ const TAG_BORDER_COLORS = [
  * Returns tag badge background and border colors based on hashed tag name.
  * @param name tag name
  */
-export function getTagColorsFromName(name: string): { color: string; borderColor: string } {
+export function getTagColorsFromName(name = ''): { color: string; borderColor: string } {
   const hash = djb2(name.toLowerCase());
   const color = TAG_COLORS[Math.abs(hash % TAG_COLORS.length)];
   const borderColor = TAG_BORDER_COLORS[Math.abs(hash % TAG_BORDER_COLORS.length)];