From 10b4868d910bd0ce0a0bb69c55718a2f2400309a Mon Sep 17 00:00:00 2001
From: Gilles De Mey <gilles.de.mey@gmail.com>
Date: Mon, 24 Feb 2025 12:26:17 +0100
Subject: [PATCH] Alerting: Use RTKQ for fetching folder information (#100645)

---
 .../alerting/unified/hooks/useFolder.ts       | 34 ++++++-------------
 .../alerting/unified/state/actions.ts         | 16 +--------
 .../alerting/unified/state/reducers.ts        |  2 --
 .../api/browseDashboardsAPI.ts                |  1 +
 4 files changed, 13 insertions(+), 40 deletions(-)

diff --git a/public/app/features/alerting/unified/hooks/useFolder.ts b/public/app/features/alerting/unified/hooks/useFolder.ts
index 8939ae8ad4c..7b06bf92020 100644
--- a/public/app/features/alerting/unified/hooks/useFolder.ts
+++ b/public/app/features/alerting/unified/hooks/useFolder.ts
@@ -1,35 +1,23 @@
-import { useEffect } from 'react';
+import { skipToken } from '@reduxjs/toolkit/query/react';
 
-import { FolderDTO, useDispatch } from 'app/types';
-
-import { fetchFolderIfNotFetchedAction } from '../state/actions';
-import { initialAsyncRequestState } from '../utils/redux';
-
-import { useUnifiedAlertingSelector } from './useUnifiedAlertingSelector';
+import { useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
+import { FolderDTO } from 'app/types';
 
 interface ReturnBag {
   folder?: FolderDTO;
   loading: boolean;
 }
 
+/**
+ * Returns a folderDTO for the given uid – uses cached values
+ * @TODO propagate error state
+ */
 export function useFolder(uid?: string): ReturnBag {
-  const dispatch = useDispatch();
-  const folderRequests = useUnifiedAlertingSelector((state) => state.folders);
-  useEffect(() => {
-    if (uid) {
-      dispatch(fetchFolderIfNotFetchedAction(uid));
-    }
-  }, [dispatch, uid]);
+  const fetchFolderState = useGetFolderQuery(uid || skipToken);
 
-  if (uid) {
-    const request = folderRequests[uid] || initialAsyncRequestState;
-    return {
-      folder: request.result,
-      loading: request.loading,
-    };
-  }
   return {
-    loading: false,
+    loading: fetchFolderState.isLoading,
+    folder: fetchFolderState.data,
   };
 }
 
@@ -39,6 +27,6 @@ export function stringifyFolder({ title, parents }: FolderDTO) {
     : encodeTitle(title);
 }
 
-export function encodeTitle(title: string): string {
+function encodeTitle(title: string): string {
   return title.replaceAll('/', '\\/');
 }
diff --git a/public/app/features/alerting/unified/state/actions.ts b/public/app/features/alerting/unified/state/actions.ts
index 91adf4a5568..5b03e36fe6b 100644
--- a/public/app/features/alerting/unified/state/actions.ts
+++ b/public/app/features/alerting/unified/state/actions.ts
@@ -10,11 +10,10 @@ import {
   Receiver,
   TestReceiversAlert,
 } from 'app/plugins/datasource/alertmanager/types';
-import { FolderDTO, ThunkResult } from 'app/types';
+import { ThunkResult } from 'app/types';
 import { RuleIdentifier, RuleNamespace, StateHistoryItem } from 'app/types/unified-alerting';
 import { RulerRuleDTO, RulerRulesConfigDTO } from 'app/types/unified-alerting-dto';
 
-import { backendSrv } from '../../../../core/services/backend_srv';
 import { withPromRulesMetadataLogging, withRulerRulesMetadataLogging } from '../Analytics';
 import {
   deleteAlertManagerConfig,
@@ -241,19 +240,6 @@ export const updateAlertManagerConfigAction = createAsyncThunk<void, UpdateAlert
     )
 );
 
-export const fetchFolderAction = createAsyncThunk(
-  'unifiedalerting/fetchFolder',
-  (uid: string): Promise<FolderDTO> => withSerializedError(backendSrv.getFolderByUid(uid, { withAccessControl: true }))
-);
-
-export const fetchFolderIfNotFetchedAction = (uid: string): ThunkResult<void> => {
-  return (dispatch, getState) => {
-    if (!getState().unifiedAlerting.folders[uid]?.dispatched) {
-      dispatch(fetchFolderAction(uid));
-    }
-  };
-};
-
 export const fetchAlertGroupsAction = createAsyncThunk(
   'unifiedalerting/fetchAlertGroups',
   (alertManagerSourceName: string): Promise<AlertmanagerGroup[]> => {
diff --git a/public/app/features/alerting/unified/state/reducers.ts b/public/app/features/alerting/unified/state/reducers.ts
index 19153a3bee1..71ba6a54e66 100644
--- a/public/app/features/alerting/unified/state/reducers.ts
+++ b/public/app/features/alerting/unified/state/reducers.ts
@@ -5,7 +5,6 @@ import { createAsyncMapSlice, createAsyncSlice } from '../utils/redux';
 import {
   deleteAlertManagerConfigAction,
   fetchAlertGroupsAction,
-  fetchFolderAction,
   fetchGrafanaAnnotationsAction,
   fetchPromRulesAction,
   fetchRulerRulesAction,
@@ -19,7 +18,6 @@ export const reducer = combineReducers({
     .reducer,
   saveAMConfig: createAsyncSlice('saveAMConfig', updateAlertManagerConfigAction).reducer,
   deleteAMConfig: createAsyncSlice('deleteAMConfig', deleteAlertManagerConfigAction).reducer,
-  folders: createAsyncMapSlice('folders', fetchFolderAction, (uid) => uid).reducer,
   amAlertGroups: createAsyncMapSlice(
     'amAlertGroups',
     fetchAlertGroupsAction,
diff --git a/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts b/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts
index fb411699d8a..51f08201927 100644
--- a/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts
+++ b/public/app/features/browse-dashboards/api/browseDashboardsAPI.ts
@@ -446,6 +446,7 @@ export const {
   useDeleteItemsMutation,
   useGetAffectedItemsQuery,
   useGetFolderQuery,
+  useLazyGetFolderQuery,
   useMoveFolderMutation,
   useMoveItemsMutation,
   useNewFolderMutation,