diff --git a/public/app/features/search/constants.ts b/public/app/features/search/constants.ts index 1ba8a9056aa..9563a641fea 100644 --- a/public/app/features/search/constants.ts +++ b/public/app/features/search/constants.ts @@ -9,3 +9,4 @@ export const GENERAL_FOLDER_UID = 'general'; export const GENERAL_FOLDER_TITLE = 'General'; export const PREVIEWS_LOCAL_STORAGE_KEY = 'grafana.dashboard.previews'; export const SEARCH_PANELS_LOCAL_STORAGE_KEY = 'grafana.search.include.panels'; +export const SEARCH_SELECTED_LAYOUT = 'grafana.search.layout'; diff --git a/public/app/features/search/hooks/useSearchQuery.ts b/public/app/features/search/hooks/useSearchQuery.ts index 359ca90a8a1..a1b231ad487 100644 --- a/public/app/features/search/hooks/useSearchQuery.ts +++ b/public/app/features/search/hooks/useSearchQuery.ts @@ -4,6 +4,7 @@ import { FormEvent, useCallback, useReducer } from 'react'; import { SelectableValue } from '@grafana/data'; import { locationService } from '@grafana/runtime'; +import { SEARCH_SELECTED_LAYOUT } from '../constants'; import { ADD_TAG, CLEAR_FILTERS, @@ -23,6 +24,10 @@ const updateLocation = debounce((query) => locationService.partial(query), 300); export const useSearchQuery = (defaults: Partial) => { const queryParams = parseRouteParams(locationService.getSearchObject()); const initialState = { ...defaultQuery, ...defaults, ...queryParams }; + const selectedLayout = localStorage.getItem(SEARCH_SELECTED_LAYOUT) as SearchLayout; + if (!queryParams.layout?.length && selectedLayout?.length) { + initialState.layout = selectedLayout; + } const [query, dispatch] = useReducer(queryReducer, initialState); const onQueryChange = useCallback((query: string) => { diff --git a/public/app/features/search/page/components/ActionRow.tsx b/public/app/features/search/page/components/ActionRow.tsx index da1e7d1c21a..cd7399e4c0c 100644 --- a/public/app/features/search/page/components/ActionRow.tsx +++ b/public/app/features/search/page/components/ActionRow.tsx @@ -7,6 +7,7 @@ import { HorizontalGroup, RadioButtonGroup, useStyles2, Checkbox, Button } from import { SortPicker } from 'app/core/components/Select/SortPicker'; import { TagFilter, TermCount } from 'app/core/components/TagFilter/TagFilter'; +import { SEARCH_SELECTED_LAYOUT } from '../../constants'; import { DashboardQuery, SearchLayout } from '../../types'; export const layoutOptions = [ @@ -69,6 +70,11 @@ export const ActionRow: FC = ({ // Disabled folder layout option when query is present const disabledOptions = query.query ? [SearchLayout.Folders] : []; + const updateLayoutPreference = (layout: SearchLayout) => { + localStorage.setItem(SEARCH_SELECTED_LAYOUT, layout); + onLayoutChange(layout); + }; + return (
@@ -77,7 +83,7 @@ export const ActionRow: FC = ({ )}