From b81c3ab9c1231103466658f03bd83d2e1b86304d Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Thu, 15 Feb 2024 09:34:14 +0000
Subject: [PATCH] Tempo: Improve UX of the query editors status select (#82167)

Improve status UX
---
 .../tempo/SearchTraceQLEditor/SearchField.tsx          | 10 +++++++---
 .../tempo/SearchTraceQLEditor/TraceQLSearch.tsx        |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
index b2737726ad8..68cc5a2676d 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
@@ -33,6 +33,8 @@ interface Props {
   hideTag?: boolean;
   hideValue?: boolean;
   query: string;
+  isMulti?: boolean;
+  allowCustomValue?: boolean;
 }
 const SearchField = ({
   filter,
@@ -45,6 +47,8 @@ const SearchField = ({
   hideTag,
   hideValue,
   query,
+  isMulti = true,
+  allowCustomValue = true,
 }: Props) => {
   const styles = useStyles2(getStyles);
   const scopedTag = useMemo(() => filterScopedTag(filter), [filter]);
@@ -195,10 +199,10 @@ const SearchField = ({
             }
           }}
           placeholder="Select value"
-          isClearable={false}
+          isClearable={true}
           aria-label={`select ${filter.id} value`}
-          allowCustomValue={true}
-          isMulti
+          allowCustomValue={allowCustomValue}
+          isMulti={isMulti}
           allowCreateWhileLoading
         />
       )}
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
index 0a03044c63a..43cb42ce2c4 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
@@ -151,6 +151,8 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app }: Pro
               hideScope={true}
               hideTag={true}
               query={traceQlQuery}
+              isMulti={false}
+              allowCustomValue={false}
             />
           </InlineSearchField>
           <InlineSearchField