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

@@ -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');
 

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, QueryField, RadioButtonGroup, useTheme2 } from '@grafana/ui';
-import { FileDropzone, InlineField, InlineFieldRow, Input, 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
+              <QueryField
-                aria-label={selectors.components.DataSource.Jaeger.traceIDInput}
+                query={query.query}
-                placeholder="Eg. 4050b8060d659e52"
+                onChange={onChangeQuery}
-                value={query.query || ''}
+                onRunQuery={onRunQuery}
-                onChange={(v) =>
+                placeholder={'Enter a Trace ID (run with Shift+Enter)'}
-                  onChange({
+                portalOrigin="jaeger"
-                    ...query,
-                    query: v.currentTarget.value,
-                  })
-                }
               />
             </InlineField>
           </InlineFieldRow>

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);

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);