Search: Save folder expanded state (#24496)

* Search: Save folder expanded state

* Search: Remember expanded state on search close

public/app/core/services/search_srv.ts

@@ -4,6 +4,7 @@ import impressionSrv from 'app/core/services/impression_srv';
 import store from 'app/core/store';
 import store from 'app/core/store';
 import { contextSrv } from 'app/core/services/context_srv';
 import { contextSrv } from 'app/core/services/context_srv';
 import { hasFilters } from 'app/features/search/utils';
 import { hasFilters } from 'app/features/search/utils';
+import { SECTION_STORAGE_KEY } from 'app/features/search/constants';
 import { DashboardSection, DashboardSearchItemType, DashboardSearchHit, SearchLayout } from 'app/features/search/types';
 import { DashboardSection, DashboardSearchItemType, DashboardSearchHit, SearchLayout } from 'app/features/search/types';
 import { backendSrv } from './backend_srv';
 import { backendSrv } from './backend_srv';
 
 
@@ -12,14 +13,6 @@ interface Sections {
 }
 }
 
 
 export class SearchSrv {
 export class SearchSrv {
-  recentIsOpen: boolean;
-  starredIsOpen: boolean;
-
-  constructor() {
-    this.recentIsOpen = store.getBool('search.sections.recent', true);
-    this.starredIsOpen = store.getBool('search.sections.starred', true);
-  }
-
   private getRecentDashboards(sections: DashboardSection[] | any) {
   private getRecentDashboards(sections: DashboardSection[] | any) {
     return this.queryForRecentDashboards().then((result: any[]) => {
     return this.queryForRecentDashboards().then((result: any[]) => {
       if (result.length > 0) {
       if (result.length > 0) {
@@ -27,7 +20,7 @@ export class SearchSrv {
           title: 'Recent',
           title: 'Recent',
           icon: 'clock-nine',
           icon: 'clock-nine',
           score: -1,
           score: -1,
-          expanded: this.recentIsOpen,
+          expanded: store.getBool(`${SECTION_STORAGE_KEY}.recent`, true),
           items: result,
           items: result,
           type: DashboardSearchItemType.DashFolder,
           type: DashboardSearchItemType.DashFolder,
         };
         };
@@ -59,7 +52,7 @@ export class SearchSrv {
           title: 'Starred',
           title: 'Starred',
           icon: 'star',
           icon: 'star',
           score: -2,
           score: -2,
-          expanded: this.starredIsOpen,
+          expanded: store.getBool(`${SECTION_STORAGE_KEY}.starred`, true),
           items: result,
           items: result,
           type: DashboardSearchItemType.DashFolder,
           type: DashboardSearchItemType.DashFolder,
         };
         };

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 { useLocalStorage } from 'react-use';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { Icon, IconButton, Spinner, stylesFactory, useTheme } from '@grafana/ui';
 import { Icon, IconButton, Spinner, 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';
+import { getSectionIcon, getSectionStorageKey } from '../utils';
 
 
 interface SectionHeaderProps {
 interface SectionHeaderProps {
   editable?: boolean;
   editable?: boolean;
@@ -21,8 +22,10 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
 }) => {
 }) => {
   const theme = useTheme();
   const theme = useTheme();
   const styles = getSectionHeaderStyles(theme, section.selected, editable);
   const styles = getSectionHeaderStyles(theme, section.selected, editable);
+  const setSectionExpanded = useLocalStorage(getSectionStorageKey(section.title), true)[1];
 
 
   const onSectionExpand = () => {
   const onSectionExpand = () => {
+    setSectionExpanded(!section.expanded);
     onSectionClick(section);
     onSectionClick(section);
   };
   };
 
 

public/app/features/search/constants.ts

@@ -3,3 +3,4 @@ export const NO_ID_SECTIONS = ['Recent', 'Starred'];
 export const SEARCH_ITEM_HEIGHT = 48;
 export const SEARCH_ITEM_HEIGHT = 48;
 export const SEARCH_ITEM_MARGIN = 4;
 export const SEARCH_ITEM_MARGIN = 4;
 export const DEFAULT_SORT = { label: 'A-Z', value: 'alpha-asc' };
 export const DEFAULT_SORT = { label: 'A-Z', value: 'alpha-asc' };
+export const SECTION_STORAGE_KEY = 'search.sections';

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 { 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, SECTION_STORAGE_KEY } from './constants';
 import { getDashboardSrv } from '../dashboard/services/DashboardSrv';
 import { getDashboardSrv } from '../dashboard/services/DashboardSrv';
 
 
 /**
 /**
@@ -217,3 +217,14 @@ export const getSectionIcon = (section: DashboardSection): IconName => {
 
 
   return section.expanded ? 'folder-open' : 'folder';
   return section.expanded ? 'folder-open' : 'folder';
 };
 };
+
+/**
+ * Get storage key for a dashboard folder by its title
+ * @param title
+ */
+export const getSectionStorageKey = (title: string) => {
+  if (!title) {
+    return '';
+  }
+  return `${SECTION_STORAGE_KEY}.${title.toLowerCase()}`;
+};