Search: Fix expanded folder icon (#23903)

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

 import React, { FC, useCallback } from 'react';
 import React, { FC, useCallback } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
-import { Icon, IconButton, IconName, stylesFactory, useTheme } from '@grafana/ui';
+import { Icon, IconButton, stylesFactory, useTheme } from '@grafana/ui';
 import { DashboardSection, OnToggleChecked } from '../types';
 import { DashboardSection, OnToggleChecked } from '../types';
 import { SearchCheckbox } from './SearchCheckbox';
 import { SearchCheckbox } from './SearchCheckbox';
+import { getSectionIcon } from '../utils';
 
 
 interface SectionHeaderProps {
 interface SectionHeaderProps {
   editable?: boolean;
   editable?: boolean;
@@ -41,7 +42,7 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
       <SearchCheckbox editable={editable} checked={section.checked} onClick={onSectionChecked} />
       <SearchCheckbox editable={editable} checked={section.checked} onClick={onSectionChecked} />
 
 
       <div className={styles.icon}>
       <div className={styles.icon}>
-        <Icon name={section.icon as IconName} />
+        <Icon name={getSectionIcon(section)} />
       </div>
       </div>
 
 
       <span className={styles.text}>{section.title}</span>
       <span className={styles.text}>{section.title}</span>

public/app/features/search/utils.ts

 import { parse, SearchParserResult } from 'search-query-parser';
 import { parse, SearchParserResult } from 'search-query-parser';
+import { IconName } from '@grafana/ui';
 import { DashboardQuery, DashboardSection, DashboardSectionItem, SearchAction, UidsToDelete } from './types';
 import { DashboardQuery, DashboardSection, DashboardSectionItem, SearchAction, UidsToDelete } from './types';
 import { NO_ID_SECTIONS } from './constants';
 import { NO_ID_SECTIONS } from './constants';
 import { getDashboardSrv } from '../dashboard/services/DashboardSrv';
 import { getDashboardSrv } from '../dashboard/services/DashboardSrv';
@@ -194,9 +195,25 @@ export const getParsedQuery = (query: DashboardQuery, queryParsing = false) => {
   return { ...parsedQuery, query: parseQuery(query.query).text as string, folderIds };
   return { ...parsedQuery, query: parseQuery(query.query).text as string, folderIds };
 };
 };
 
 
+/**
+ * Check if search query has filters enabled. Excludes folderId
+ * @param query
+ */
 export const hasFilters = (query: DashboardQuery) => {
 export const hasFilters = (query: DashboardQuery) => {
   if (!query) {
   if (!query) {
     return false;
     return false;
   }
   }
   return Boolean(query.query || query.tag?.length > 0 || query.starred || query.sort);
   return Boolean(query.query || query.tag?.length > 0 || query.starred || query.sort);
 };
 };
+
+/**
+ * Get section icon depending on expanded state. Currently works for folder icons only
+ * @param section
+ */
+export const getSectionIcon = (section: DashboardSection): IconName => {
+  if (!hasId(section.title)) {
+    return section.icon as IconName;
+  }
+
+  return section.expanded ? 'folder-open' : 'folder';
+};