From 8f49ec91dfa8cfa12207374d7cf7747e4e9c1c4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= <laura.fernandez@grafana.com>
Date: Tue, 7 Nov 2023 16:16:43 +0100
Subject: [PATCH] BrowseDashboards: Add `RadioButtonGroup` to be able to chose
 between 'Browse' or 'List' view (#77561)

---
 .../components/BrowseFilters.tsx              |  1 -
 .../search/page/components/ActionRow.tsx      |  5 +++-
 .../search/state/SearchStateManager.test.ts   |  2 ++
 .../search/state/SearchStateManager.ts        | 24 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/public/app/features/browse-dashboards/components/BrowseFilters.tsx b/public/app/features/browse-dashboards/components/BrowseFilters.tsx
index 34fec506496..43e64d57cc2 100644
--- a/public/app/features/browse-dashboards/components/BrowseFilters.tsx
+++ b/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}
diff --git a/public/app/features/search/page/components/ActionRow.tsx b/public/app/features/search/page/components/ActionRow.tsx
index 378908270bc..3d9434280ee 100644
--- a/public/app/features/search/page/components/ActionRow.tsx
+++ b/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}>
diff --git a/public/app/features/search/state/SearchStateManager.test.ts b/public/app/features/search/state/SearchStateManager.test.ts
index 702c1fba586..547ceaf9f42 100644
--- a/public/app/features/search/state/SearchStateManager.test.ts
+++ b/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
diff --git a/public/app/features/search/state/SearchStateManager.ts b/public/app/features/search/state/SearchStateManager.ts
index 33f9f7524cb..6f0478537e9 100644
--- a/public/app/features/search/state/SearchStateManager.ts
+++ b/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() {