BrowseDashboards: Add RadioButtonGroup to be able to chose between 'Browse' or 'List' view (#77561)

public/app/features/browse-dashboards/components/BrowseFilters.tsx

@@ -10,7 +10,6 @@ export function BrowseFilters() {
   return (
     <div>
       <ActionRow
-        hideLayout
         showStarredFilter
         state={searchState}
         getTagOptions={stateManager.getTagOptions}

public/app/features/search/page/components/ActionRow.tsx

@@ -70,7 +70,10 @@ export const ActionRow = ({
   const layout = getValidQueryLayout(state);
 
   // Disabled folder layout option when query is present
-  const disabledOptions = state.query || state.datasource || state.panel_type ? [SearchLayout.Folders] : [];
+  const disabledOptions =
+    state.tag.length || state.starred || state.query || state.datasource || state.panel_type
+      ? [SearchLayout.Folders]
+      : [];
 
   return (
     <div className={styles.actionRow}>

public/app/features/search/state/SearchStateManager.test.ts

@@ -64,6 +64,8 @@ describe('SearchStateManager', () => {
         sort: 'alpha-asc',
       }));
       const stm = getSearchStateManager();
+      // Set list layout since folders layout implies sort to be undefined
+      stm.onLayoutChange(SearchLayout.List);
       stm.initStateFromUrl();
 
       // Verify that they have been set

public/app/features/search/state/SearchStateManager.ts

@@ -35,6 +35,14 @@ export const defaultQueryParams: SearchQueryParams = {
   layout: null,
 };
 
+const getLocalStorageLayout = () => {
+  const selectedLayout = localStorage.getItem(SEARCH_SELECTED_LAYOUT);
+  if (selectedLayout === SearchLayout.List) {
+    return SearchLayout.List;
+  } else {
+    return SearchLayout.Folders;
+  }
+};
 export class SearchStateManager extends StateManagerBase<SearchState> {
   updateLocation = debounce((query) => locationService.partial(query, true), 300);
   doSearchWithDebounce = debounce(() => this.doSearch(), 300);
@@ -50,9 +58,16 @@ export class SearchStateManager extends StateManagerBase<SearchState> {
       stateFromUrl.layout = SearchLayout.List;
     }
 
+    const layout = getLocalStorageLayout();
+    const prevSort = localStorage.getItem(SEARCH_SELECTED_SORT) ?? undefined;
+    const sort = layout === SearchLayout.List ? stateFromUrl.sort || prevSort : null;
+
     stateManager.setState({
       ...initialState,
       ...stateFromUrl,
+      layout,
+      sort: sort ?? initialState.sort,
+      prevSort,
       folderUid: folderUid,
       eventTrackingNamespace: folderUid ? 'manage_dashboards' : 'dashboard_search',
     });
@@ -174,7 +189,14 @@ export class SearchStateManager extends StateManagerBase<SearchState> {
   };
 
   hasSearchFilters() {
-    return this.state.query || this.state.tag.length || this.state.starred || this.state.panel_type || this.state.sort;
+    return (
+      this.state.query ||
+      this.state.tag.length ||
+      this.state.starred ||
+      this.state.panel_type ||
+      this.state.sort ||
+      this.state.layout === SearchLayout.List
+    );
   }
 
   getSearchQuery() {