Tempo: TraceQL query builder QoL improvements (#66865)

* Remove focus on duration inputs to match the other selects

* Allow users to create options while they load

* Options without type default to not have quotes around them

* Fix #66571 - set query type to traceql when linking from logs to traces

* Fix test

public/app/plugins/datasource/loki/getDerivedFields.ts

@@ -49,7 +49,7 @@ function fieldFromDerivedFieldConfig(derivedFieldConfigs: DerivedFieldConfig[]):
         url: '',
         // This is hardcoded for Jaeger or Zipkin not way right now to specify datasource specific query object
         internal: {
-          query: { query: derivedFieldConfig.url },
+          query: { query: derivedFieldConfig.url, queryType: dsSettings?.type === 'tempo' ? 'traceql' : undefined },
           datasourceUid: derivedFieldConfig.datasourceUid,
           datasourceName: dsSettings?.name ?? 'Data source not found',
         },

public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx

@@ -1,6 +1,7 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { Select, HorizontalGroup, Input } from '@grafana/ui';
+import { Select, HorizontalGroup, Input, useStyles2 } from '@grafana/ui';
 
 import { TraceqlFilter } from '../dataquery.gen';
 
@@ -15,7 +16,18 @@ interface Props {
 
 const validationRegex = /^\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h)$/;
 
+const getStyles = () => ({
+  noBoxShadow: css`
+    box-shadow: none;
+    *:focus {
+      box-shadow: none;
+    }
+  `,
+});
+
 const DurationInput = ({ filter, operators, updateFilter }: Props) => {
+  const styles = useStyles2(getStyles);
+
   let invalid = false;
   if (typeof filter.value === 'string') {
     invalid = filter.value ? !validationRegex.test(filter.value.concat('')) : false;
@@ -24,6 +36,7 @@ const DurationInput = ({ filter, operators, updateFilter }: Props) => {
   return (
     <HorizontalGroup spacing={'none'}>
       <Select
+        className={styles.noBoxShadow}
         inputId={`${filter.id}-operator`}
         options={operators.map(operatorSelectableValue)}
         value={filter.operator}
@@ -36,6 +49,7 @@ const DurationInput = ({ filter, operators, updateFilter }: Props) => {
         width={8}
       />
       <Input
+        className={styles.noBoxShadow}
         value={filter.value}
         onChange={(v) => {
           updateFilter({ ...filter, value: v.currentTarget.value });

public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx

@@ -170,6 +170,7 @@ const SearchField = ({
           aria-label={`select ${filter.id} value`}
           allowCustomValue={true}
           isMulti
+          allowCreateWhileLoading
         />
       )}
       {allowDelete && (

public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.test.ts

@@ -21,8 +21,11 @@ describe('generateQueryFromFilters generates the correct query for', () => {
 
   it('a field with tag, operator and tag', () => {
     expect(generateQueryFromFilters([{ id: 'foo', tag: 'footag', value: 'foovalue', operator: '=' }])).toBe(
-      '{.footag="foovalue"}'
+      '{.footag=foovalue}'
     );
+    expect(
+      generateQueryFromFilters([{ id: 'foo', tag: 'footag', value: 'foovalue', operator: '=', valueType: 'string' }])
+    ).toBe('{.footag="foovalue"}');
   });
 
   it('a field with valueType as integer', () => {

public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.ts

@@ -16,7 +16,7 @@ const valueHelper = (f: TraceqlFilter) => {
   if (Array.isArray(f.value) && f.value.length > 1) {
     return `"${f.value.join('|')}"`;
   }
-  if (!f.valueType || f.valueType === 'string') {
+  if (f.valueType === 'string') {
     return `"${f.value}"`;
   }
   return f.value;