Tempo: Improve UX of the query editors status select (#82167)

Improve status UX

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
         />
       )}

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