From 519e840f975d8dbb71fbdb9ddaacaff620b90bb4 Mon Sep 17 00:00:00 2001
From: Sonia Aguilar <33540275+soniaAguilarPeiron@users.noreply.github.com>
Date: Wed, 28 Jun 2023 15:38:32 +0200
Subject: [PATCH] Alerting: Render folder selector in options for Alert List
 Panel only when having Grafana datasource (#70816)

Render folder selector in options for Alert List Panel only when no datasource is selected or when Grafana is selected as the datasource
---
 public/app/plugins/panel/alertlist/module.tsx | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx
index e0a40db6c7b..e435aaea8d2 100644
--- a/public/app/plugins/panel/alertlist/module.tsx
+++ b/public/app/plugins/panel/alertlist/module.tsx
@@ -11,6 +11,8 @@ import {
 } from 'app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
 import { PermissionLevelString } from 'app/types';
 
+import { GRAFANA_DATASOURCE_NAME } from '../../../features/alerting/unified/utils/datasource';
+
 import { AlertList } from './AlertList';
 import { alertListPanelMigrationHandler } from './AlertListMigrationHandler';
 import { GroupBy } from './GroupByWithLoading';
@@ -244,6 +246,27 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       category: ['Filter'],
     })
     .addCustomEditor({
+      path: 'datasource',
+      name: 'Datasource',
+      description: 'Filter alerts from selected datasource',
+      id: 'datasource',
+      defaultValue: null,
+      editor: function RenderDatasourcePicker(props) {
+        return (
+          <DataSourcePicker
+            {...props}
+            type={['prometheus', 'loki', 'grafana']}
+            noDefault
+            current={props.value}
+            onChange={(ds) => props.onChange(ds.name)}
+            onClear={() => props.onChange(null)}
+          />
+        );
+      },
+      category: ['Filter'],
+    })
+    .addCustomEditor({
+      showIf: (options) => options.datasource === GRAFANA_DATASOURCE_NAME || !Boolean(options.datasource),
       path: 'folder',
       name: 'Folder',
       description: 'Filter for alerts in the selected folder (only for Grafana alerts)',
@@ -265,26 +288,6 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       },
       category: ['Filter'],
     })
-    .addCustomEditor({
-      path: 'datasource',
-      name: 'Datasource',
-      description: 'Filter alerts from selected datasource',
-      id: 'datasource',
-      defaultValue: null,
-      editor: function RenderDatasourcePicker(props) {
-        return (
-          <DataSourcePicker
-            {...props}
-            type={['prometheus', 'loki', 'grafana']}
-            noDefault
-            current={props.value}
-            onChange={(ds) => props.onChange(ds.name)}
-            onClear={() => props.onChange(null)}
-          />
-        );
-      },
-      category: ['Filter'],
-    })
     .addBooleanSwitch({
       path: 'stateFilter.firing',
       name: 'Alerting / Firing',