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>

public/app/core/services/search_srv.ts

@@ -26,7 +26,7 @@ export class SearchSrv {
       if (result.length > 0) {
         sections['recent'] = {
           title: 'Recent',
-          icon: 'fa fa-clock-o',
+          icon: 'clock-o',
           score: -1,
           removable: true,
           expanded: this.recentIsOpen,
@@ -81,7 +81,7 @@ export class SearchSrv {
       if (result.length > 0) {
         sections['starred'] = {
           title: 'Starred',
-          icon: 'fa fa-star-o',
+          icon: 'star-o',
           score: -2,
           expanded: this.starredIsOpen,
           toggle: this.toggleStarred.bind(this),
@@ -141,7 +141,7 @@ export class SearchSrv {
           items: [],
           toggle: this.toggleFolder.bind(this),
           url: hit.url,
-          icon: 'fa fa-folder',
+          icon: 'folder',
           score: _.keys(sections).length,
         };
       }
@@ -161,7 +161,7 @@ export class SearchSrv {
             title: hit.folderTitle,
             url: hit.folderUrl,
             items: [],
-            icon: 'fa fa-folder-open',
+            icon: 'folder-open',
             toggle: this.toggleFolder.bind(this),
             score: _.keys(sections).length,
           };
@@ -170,7 +170,7 @@ export class SearchSrv {
             id: 0,
             title: 'General',
             items: [],
-            icon: 'fa fa-folder-open',
+            icon: 'folder-open',
             toggle: this.toggleFolder.bind(this),
             score: _.keys(sections).length,
           };
@@ -186,7 +186,7 @@ export class SearchSrv {
 
   private toggleFolder(section: Section) {
     section.expanded = !section.expanded;
-    section.icon = section.expanded ? 'fa fa-folder-open' : 'fa fa-folder';
+    section.icon = section.expanded ? 'folder-open' : 'folder';
 
     if (section.items.length) {
       return Promise.resolve(section);