From 05febc46655e5fcad5edfd82e9b947ee1f2a5f8c Mon Sep 17 00:00:00 2001
From: Virginia Cepeda <virginia.cepeda@grafana.com>
Date: Wed, 15 Nov 2023 08:48:10 -0300
Subject: [PATCH] Alerting: Allow to clear datasource selection in panel list
 (#77960)

* Allow to clear datasource selection

Also improve texts for linked alerts switch

* Remove onClear prop as it does not work

* Change text on datasource selection filter

* Change datasource filter description
---
 public/app/plugins/panel/alertlist/module.tsx | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/public/app/plugins/panel/alertlist/module.tsx b/public/app/plugins/panel/alertlist/module.tsx
index 33f3126f923..8250c7fd4d4 100644
--- a/public/app/plugins/panel/alertlist/module.tsx
+++ b/public/app/plugins/panel/alertlist/module.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { DataSourceInstanceSettings, PanelPlugin } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { TagsInput } from '@grafana/ui';
+import { Button, Stack, TagsInput } from '@grafana/ui';
 import { OldFolderPicker } from 'app/core/components/Select/OldFolderPicker';
 import {
   ALL_FOLDER,
@@ -228,8 +228,8 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
     })
     .addBooleanSwitch({
       path: 'dashboardAlerts',
-      name: 'Alerts from this dashboard',
-      description: 'Show alerts from this dashboard',
+      name: 'Alerts linked to this dashboard',
+      description: 'Only show alerts linked to this dashboard',
       defaultValue: false,
       category: ['Options'],
     })
@@ -250,19 +250,23 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
     .addCustomEditor({
       path: 'datasource',
       name: 'Datasource',
-      description: 'Filter alerts from selected datasource',
+      description: 'Filter from alert source',
       id: 'datasource',
       defaultValue: null,
       editor: function RenderDatasourcePicker(props) {
         return (
-          <DataSourcePicker
-            {...props}
-            type={['prometheus', 'loki', 'grafana']}
-            noDefault
-            current={props.value}
-            onChange={(ds: DataSourceInstanceSettings) => props.onChange(ds.name)}
-            onClear={() => props.onChange(null)}
-          />
+          <Stack gap={1}>
+            <DataSourcePicker
+              {...props}
+              type={['prometheus', 'loki', 'grafana']}
+              noDefault
+              current={props.value}
+              onChange={(ds: DataSourceInstanceSettings) => props.onChange(ds.name)}
+            />
+            <Button variant="secondary" onClick={() => props.onChange(null)}>
+              Clear
+            </Button>
+          </Stack>
         );
       },
       category: ['Filter'],