From bc2f68dc56aaabaefb1264a86c677a5ab6bc9a6a Mon Sep 17 00:00:00 2001
From: Ryan McKinley <ryantxu@gmail.com>
Date: Tue, 28 Feb 2023 11:15:30 -0800
Subject: [PATCH] FieldNamePicker: support the isClearable option (#63828)

---
 .../grafana-data/src/field/overrides/processors.ts    |  3 +++
 .../src/components/MatchersUI/FieldNamePicker.tsx     | 11 ++++-------
 .../editors/ConvertFieldTypeTransformerEditor.tsx     |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/grafana-data/src/field/overrides/processors.ts b/packages/grafana-data/src/field/overrides/processors.ts
index ae1201b9199..d829f7963a9 100644
--- a/packages/grafana-data/src/field/overrides/processors.ts
+++ b/packages/grafana-data/src/field/overrides/processors.ts
@@ -195,4 +195,7 @@ export interface FieldNamePickerConfigSettings {
    * Placeholder text to display when nothing is selected.
    */
   placeholderText?: string;
+
+  /** When set to false, the value can not be removed */
+  isClearable?: boolean;
 }
diff --git a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
index 7b5ff5e2f46..9c2f70dcfe2 100644
--- a/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
+++ b/packages/grafana-ui/src/components/MatchersUI/FieldNamePicker.tsx
@@ -6,13 +6,10 @@ import { Select } from '../Select/Select';
 
 import { useFieldDisplayNames, useSelectOptions, frameHasName } from './utils';
 
+type Props = StandardEditorProps<string, FieldNamePickerConfigSettings>;
+
 // Pick a field name out of the fields
-export const FieldNamePicker: React.FC<StandardEditorProps<string, FieldNamePickerConfigSettings>> = ({
-  value,
-  onChange,
-  context,
-  item,
-}) => {
+export const FieldNamePicker = ({ value, onChange, context, item }: Props) => {
   const settings: FieldNamePickerConfigSettings = item.settings ?? {};
   const names = useFieldDisplayNames(context.data, settings?.filter);
   const selectOptions = useSelectOptions(names, value);
@@ -37,7 +34,7 @@ export const FieldNamePicker: React.FC<StandardEditorProps<string, FieldNamePick
         onChange={onSelectChange}
         noOptionsMessage={settings.noFieldsMessage}
         width={settings.width}
-        isClearable={true}
+        isClearable={settings.isClearable !== false}
       />
     </>
   );
diff --git a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
index 57e42086b3a..5589e33e898 100644
--- a/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ConvertFieldTypeTransformerEditor.tsx
@@ -18,7 +18,7 @@ import { Button, InlineField, InlineFieldRow, Input, Select } from '@grafana/ui'
 import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
 
 const fieldNamePickerSettings: StandardEditorsRegistryItem<string, FieldNamePickerConfigSettings> = {
-  settings: { width: 24 },
+  settings: { width: 24, isClearable: false },
 } as any;
 
 export const ConvertFieldTypeTransformerEditor = ({