Zipkin: support running queries with keyboard shortcut (#37960)

* Zipkin: replace input field with QueryField component

* Fix failing tests

* Remove console.log

* Partially migrate test to react

* Zipkin: finish migration from enzyme to react

* Remove comments

public/app/plugins/datasource/zipkin/QueryField.test.tsx

@@ -1,16 +1,16 @@
-import { ButtonCascader, CascaderOption } from '@grafana/ui';
+import { CascaderOption } from '@grafana/ui';
 import { act, renderHook } from '@testing-library/react-hooks';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { ZipkinDatasource } from './datasource';
-import { QueryField, useLoadOptions, useServices } from './QueryField';
+import { ZipkinQueryField, useLoadOptions, useServices } from './QueryField';
 import { ZipkinQuery } from './types';
 
 describe('QueryField', () => {
   it('renders properly', () => {
     const ds = {} as ZipkinDatasource;
-    const wrapper = shallow(
+    render(
-      <QueryField
+      <ZipkinQueryField
         history={[]}
         datasource={ds}
         query={{ query: '1234' } as ZipkinQuery}
@@ -19,9 +19,8 @@ describe('QueryField', () => {
       />
     );
 
-    expect(wrapper.find(ButtonCascader).length).toBe(1);
+    expect(screen.getByText(/1234/i)).toBeInTheDocument();
-    expect(wrapper.find('input').length).toBe(1);
+    expect(screen.getByText(/Traces/i)).toBeInTheDocument();
-    expect(wrapper.find('input').props().value).toBe('1234');
   });
 });
 
@@ -52,7 +51,6 @@ describe('useLoadOptions', () => {
           return Promise.resolve(['span1', 'span2']);
         }
 
-        console.log({ url });
         if (url === '/api/v2/traces' && params?.serviceName === 'service1' && params?.spanName === 'span1') {
           return Promise.resolve([[{ name: 'trace1', duration: 10_000, traceId: 'traceId1' }]]);
         }

public/app/plugins/datasource/zipkin/QueryField.tsx

@@ -1,6 +1,5 @@
 import { css } from '@emotion/css';
 import { ExploreQueryFieldProps } from '@grafana/data';
-import { selectors } from '@grafana/e2e-selectors';
 import {
   ButtonCascader,
   CascaderOption,
@@ -9,6 +8,7 @@ import {
   InlineFieldRow,
   RadioButtonGroup,
   useTheme2,
+  QueryField,
 } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import { createErrorNotification } from 'app/core/copy/appNotification';
@@ -23,7 +23,7 @@ import { ZipkinQuery, ZipkinQueryType, ZipkinSpan } from './types';
 
 type Props = ExploreQueryFieldProps<ZipkinDatasource, ZipkinQuery>;
 
-export const QueryField = ({ query, onChange, onRunQuery, datasource }: Props) => {
+export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Props) => {
   const serviceOptions = useServices(datasource);
   const theme = useTheme2();
   const { onLoadOptions, allOptions } = useLoadOptions(datasource);
@@ -39,6 +39,11 @@ export const QueryField = ({ query, onChange, onRunQuery, datasource }: Props) =
     [onChange, onRunQuery, query]
   );
 
+  const onChangeQuery = (value: string) => {
+    const nextQuery = { ...query, query: value };
+    onChange(nextQuery);
+  };
+
   let cascaderOptions = useMapToCascaderOptions(serviceOptions, allOptions);
 
   return (
@@ -78,21 +83,14 @@ export const QueryField = ({ query, onChange, onRunQuery, datasource }: Props) =
               Traces
             </ButtonCascader>
           </div>
-          <div className="gf-form gf-form--grow flex-shrink-1">
+          <div className="gf-form gf-form--grow flex-shrink-1 min-width-15">
-            <div className="slate-query-field__wrapper">
+            <QueryField
-              <div className="slate-query-field" aria-label={selectors.components.QueryField.container}>
+              query={query.query}
-                <input
+              onChange={onChangeQuery}
-                  style={{ width: '100%' }}
+              onRunQuery={onRunQuery}
-                  value={query.query || ''}
+              placeholder={'Insert Trace ID (run with Shift+Enter)'}
-                  onChange={(e) =>
+              portalOrigin="zipkin"
-                    onChange({
+            />
-                      ...query,
-                      query: e.currentTarget.value,
-                    })
-                  }
-                />
-              </div>
-            </div>
           </div>
         </div>
       )}

public/app/plugins/datasource/zipkin/module.ts

@@ -1,8 +1,8 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { ZipkinDatasource } from './datasource';
-import { QueryField } from './QueryField';
+import { ZipkinQueryField } from './QueryField';
 import { ConfigEditor } from './ConfigEditor';
 
 export const plugin = new DataSourcePlugin(ZipkinDatasource)
   .setConfigEditor(ConfigEditor)
-  .setExploreQueryField(QueryField);
+  .setExploreQueryField(ZipkinQueryField);