From a19ad25eaadba46bde58ed811b6deefc57f50f66 Mon Sep 17 00:00:00 2001
From: Olof Bourghardt <ob655088@gmail.com>
Date: Wed, 25 Aug 2021 11:30:32 +0200
Subject: [PATCH] Jaeger: support running queries with keyboard shortcut
 (#37958)

* Jaeger: add QueryField component

* Remove unused imports

* Fix e2e test so that it checks for QueryField component

* Remove comments

* Fix failing e2e test
---
 e2e/suite1/specs/trace-view-scrolling.spec.ts |  6 ++---
 .../jaeger/components/QueryEditor.tsx         | 24 +++++++++----------
 public/sass/_variables.dark.generated.scss    |  2 +-
 public/sass/_variables.light.generated.scss   |  2 +-
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/e2e/suite1/specs/trace-view-scrolling.spec.ts b/e2e/suite1/specs/trace-view-scrolling.spec.ts
index 789c50cfb33..ea438bdaea6 100644
--- a/e2e/suite1/specs/trace-view-scrolling.spec.ts
+++ b/e2e/suite1/specs/trace-view-scrolling.spec.ts
@@ -19,13 +19,13 @@ describe('Trace view', () => {
 
     e2e().contains('gdev-jaeger').scrollIntoView().should('be.visible').click();
 
-    e2e.components.DataSource.Jaeger.traceIDInput().should('be.visible').type('long-trace');
+    e2e.components.QueryField.container().should('be.visible').type('long-trace');
 
-    e2e.components.RefreshPicker.runButton().should('be.visible').click();
+    e2e.components.RefreshPicker.runButton().should('be.visible').focus();
 
     e2e().wait('@longTrace');
 
-    e2e.components.TraceViewer.spanBar().should('have.length', 100);
+    e2e.components.TraceViewer.spanBar().should('be.visible');
 
     e2e.pages.Explore.General.scrollBar().scrollTo('center');
 
diff --git a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
index 7f15aba20a8..a440a25483d 100644
--- a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
@@ -1,7 +1,6 @@
 import { css } from '@emotion/css';
 import { QueryEditorProps } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
-import { FileDropzone, InlineField, InlineFieldRow, Input, RadioButtonGroup, useTheme2 } from '@grafana/ui';
+import { FileDropzone, InlineField, InlineFieldRow, QueryField, RadioButtonGroup, useTheme2 } from '@grafana/ui';
 import React from 'react';
 import { JaegerDatasource } from '../datasource';
 import { JaegerQuery, JaegerQueryType } from '../types';
@@ -12,6 +11,11 @@ type Props = QueryEditorProps<JaegerDatasource, JaegerQuery>;
 export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props) {
   const theme = useTheme2();
 
+  const onChangeQuery = (value: string) => {
+    const nextQuery: JaegerQuery = { ...query, query: value };
+    onChange(nextQuery);
+  };
+
   const renderEditorBody = () => {
     switch (query.queryType) {
       case 'search':
@@ -32,16 +36,12 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
         return (
           <InlineFieldRow>
             <InlineField label="Trace ID" labelWidth={21} grow>
-              <Input
-                aria-label={selectors.components.DataSource.Jaeger.traceIDInput}
-                placeholder="Eg. 4050b8060d659e52"
-                value={query.query || ''}
-                onChange={(v) =>
-                  onChange({
-                    ...query,
-                    query: v.currentTarget.value,
-                  })
-                }
+              <QueryField
+                query={query.query}
+                onChange={onChangeQuery}
+                onRunQuery={onRunQuery}
+                placeholder={'Enter a Trace ID (run with Shift+Enter)'}
+                portalOrigin="jaeger"
               />
             </InlineField>
           </InlineFieldRow>
diff --git a/public/sass/_variables.dark.generated.scss b/public/sass/_variables.dark.generated.scss
index 9bd131b6ee9..850de6663cb 100644
--- a/public/sass/_variables.dark.generated.scss
+++ b/public/sass/_variables.dark.generated.scss
@@ -209,7 +209,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 // Forms
 // -------------------------
 $input-bg: #111217;
-$input-bg-disabled: rgba(204, 204, 220, 0.07);
+$input-bg-disabled: rgba(204, 204, 220, 0.04);
 
 $input-color: rgb(204, 204, 220);
 $input-border-color: rgba(204, 204, 220, 0.15);
diff --git a/public/sass/_variables.light.generated.scss b/public/sass/_variables.light.generated.scss
index 9b433e961f1..eef0e5558f7 100644
--- a/public/sass/_variables.light.generated.scss
+++ b/public/sass/_variables.light.generated.scss
@@ -204,7 +204,7 @@ $btn-active-box-shadow: 0px 0px 4px rgba(234, 161, 51, 0.6);
 // Forms
 // -------------------------
 $input-bg: #fff;
-$input-bg-disabled: rgba(36, 41, 46, 0.07);
+$input-bg-disabled: rgba(36, 41, 46, 0.04);
 
 $input-color: rgba(36, 41, 46, 1);
 $input-border-color: rgba(36, 41, 46, 0.30);