From 6e8b17efd8a77d696b3ab0a49fd03f79c0311cec Mon Sep 17 00:00:00 2001
From: Andre Pereira <adrapereira@gmail.com>
Date: Thu, 20 Apr 2023 10:52:12 +0100
Subject: [PATCH] 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
---
 .../plugins/datasource/loki/getDerivedFields.ts  |  2 +-
 .../tempo/SearchTraceQLEditor/DurationInput.tsx  | 16 +++++++++++++++-
 .../tempo/SearchTraceQLEditor/SearchField.tsx    |  1 +
 .../tempo/SearchTraceQLEditor/utils.test.ts      |  5 ++++-
 .../tempo/SearchTraceQLEditor/utils.ts           |  2 +-
 5 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/loki/getDerivedFields.ts b/public/app/plugins/datasource/loki/getDerivedFields.ts
index 6fae391a7ef..04e4a32ec8c 100644
--- a/public/app/plugins/datasource/loki/getDerivedFields.ts
+++ b/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',
         },
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
index b65d6033a9c..f636af6dca2 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
+++ b/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 });
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
index a5fb47c4740..3049ba3c375 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx
+++ b/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 && (
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.test.ts b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.test.ts
index 603cd113f10..51f9143e08b 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.test.ts
+++ b/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', () => {
diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.ts b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.ts
index a0fcd660123..a49bbd94519 100644
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/utils.ts
+++ b/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;