From a9255db370e8e2ac20ddeb0f0870c41665cd075c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A1bor=20Farkas?= <gabor.farkas@gmail.com>
Date: Wed, 19 May 2021 12:31:52 +0200
Subject: [PATCH] InfluxDB: InfluxQL: make nicer custom-select-value UI
 (#34289)

* influxdb: influxql: make niceer custom-select-value

* add code for missing case

* moved to the right place
---
 .../influxdb/components/VisualInfluxQLEditor/Seg.tsx      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
index db9af3b04ab..aa2d2e3b6b3 100644
--- a/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
+++ b/public/app/plugins/datasource/influxdb/components/VisualInfluxQLEditor/Seg.tsx
@@ -58,6 +58,12 @@ type SelReloadProps = {
   allowCustomValue?: boolean;
 };
 
+// when a custom value is written into a select-box,
+// by default the new value is prefixed with "Create:",
+// and that sounds confusing because here we do not create
+// anything. we change this to just be the entered string.
+const formatCreateLabel = (v: string) => v;
+
 const SelReload = ({ loadOptions, allowCustomValue, onChange, onClose }: SelReloadProps): JSX.Element => {
   // here we rely on the fact that writing text into the <AsyncSelect/>
   // does not cause a re-render of the current react component.
@@ -70,6 +76,7 @@ const SelReload = ({ loadOptions, allowCustomValue, onChange, onClose }: SelRelo
   return (
     <div className={selectClass}>
       <AsyncSelect
+        formatCreateLabel={formatCreateLabel}
         defaultOptions
         autoFocus
         isOpen
@@ -99,6 +106,7 @@ const SelSingleLoad = ({ loadOptions, allowCustomValue, onChange, onClose }: Sel
   return (
     <div className={selectClass}>
       <Select
+        formatCreateLabel={formatCreateLabel}
         autoFocus
         isOpen
         onCloseMenu={onClose}