Alerting: Make folder filter clearable in Alert list panel (#50093)

public/app/core/components/Select/FolderPicker.tsx

@@ -3,7 +3,7 @@ import React, { PureComponent } from 'react';
 
 import { AppEvents, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { AsyncSelect } from '@grafana/ui';
+import { ActionMeta, AsyncSelect } from '@grafana/ui';
 import { contextSrv } from 'app/core/services/context_srv';
 import { createFolder, getFolderById, searchFolders } from 'app/features/manage-dashboards/state/actions';
 import { DashboardSearchHit } from 'app/features/search/types';
@@ -25,6 +25,7 @@ export interface Props {
   filter?: FolderPickerFilter;
   allowEmpty?: boolean;
   showRoot?: boolean;
+  onClear?: () => void;
   accessControlMetadata?: boolean;
   /**
    * Skips loading all folders in order to find the folder matching
@@ -116,11 +117,16 @@ export class FolderPicker extends PureComponent<Props, State> {
     return options;
   };
 
-  onFolderChange = (newFolder: SelectableValue<number>) => {
+  onFolderChange = (newFolder: SelectableValue<number>, actionMeta: ActionMeta) => {
     if (!newFolder) {
       newFolder = { value: 0, label: this.props.rootName };
     }
 
+    if (actionMeta.action === 'clear' && this.props.onClear) {
+      this.props.onClear();
+      return;
+    }
+
     this.setState(
       {
         folder: newFolder,
@@ -130,13 +136,17 @@ export class FolderPicker extends PureComponent<Props, State> {
   };
 
   createNewFolder = async (folderName: string) => {
-    // @ts-ignore
     const newFolder = await createFolder({ title: folderName });
     let folder = { value: -1, label: 'Not created' };
     if (newFolder.id > -1) {
       appEvents.emit(AppEvents.alertSuccess, ['Folder Created', 'OK']);
       folder = { value: newFolder.id, label: newFolder.title };
-      await this.onFolderChange(folder);
+      this.setState(
+        {
+          folder: newFolder,
+        },
+        () => this.props.onChange({ id: newFolder.value!, title: newFolder.label! })
+      );
     } else {
       appEvents.emit(AppEvents.alertError, ['Folder could not be created']);
     }
@@ -190,7 +200,8 @@ export class FolderPicker extends PureComponent<Props, State> {
 
   render() {
     const { folder } = this.state;
-    const { enableCreateNew, inputId } = this.props;
+    const { enableCreateNew, inputId, onClear } = this.props;
+    const isClearable = typeof onClear === 'function';
 
     return (
       <div data-testid={selectors.components.FolderPicker.containerV2}>
@@ -205,6 +216,7 @@ export class FolderPicker extends PureComponent<Props, State> {
           loadOptions={this.debouncedSearch}
           onChange={this.onFolderChange}
           onCreateOption={this.createNewFolder}
+          isClearable={isClearable}
         />
       </div>
     );

public/app/plugins/panel/alertlist/module.tsx

@@ -3,13 +3,13 @@ import React from 'react';
 import { PanelPlugin } from '@grafana/data';
 import { config, DataSourcePicker } from '@grafana/runtime';
 import { TagsInput } from '@grafana/ui';
-import { RuleFolderPicker } from 'app/features/alerting/unified/components/rule-editor/RuleFolderPicker';
-
+import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import {
   ALL_FOLDER,
   GENERAL_FOLDER,
   ReadonlyFolderPicker,
-} from '../../../core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
+} from 'app/core/components/Select/ReadonlyFolderPicker/ReadonlyFolderPicker';
+import { PermissionLevelString } from 'app/types';
 
 import { AlertList } from './AlertList';
 import { alertListPanelMigrationHandler } from './AlertListMigrationHandler';
@@ -238,12 +238,15 @@ const unifiedAlertList = new PanelPlugin<UnifiedAlertListOptions>(UnifiedAlertLi
       defaultValue: null,
       editor: function RenderFolderPicker(props) {
         return (
-          <RuleFolderPicker
-            {...props}
+          <FolderPicker
             enableReset={true}
-            onChange={({ title, id }) => {
-              return props.onChange({ title, id });
-            }}
+            showRoot={false}
+            allowEmpty={true}
+            initialTitle={props.value?.title}
+            initialFolderId={props.value?.id}
+            permissionLevel={PermissionLevelString.View}
+            onClear={() => props.onChange('')}
+            {...props}
           />
         );
       },