1import React from 'react';
2import { TextArea } from '@grafana/ui';
3
4export interface Props {
5  onChange: (query: string) => void;
6  onRunQuery: () => void;
7  query: string;
8}
9
10export function MQLQueryEditor({ query, onChange, onRunQuery }: React.PropsWithChildren<Props>) {
11  const onKeyDown = (event: any) => {
12    if (event.key === 'Enter' && (event.shiftKey || event.ctrlKey)) {
13      event.preventDefault();
14      onRunQuery();
15    }
16  };
17
18  return (
19    <>
20      <TextArea
21        name="Query"
22        className="slate-query-field"
23        value={query}
24        rows={10}
25        placeholder="Enter a Cloud Monitoring MQL query (Run with Shift+Enter)"
26        onBlur={onRunQuery}
27        onChange={(e) => onChange(e.currentTarget.value)}
28        onKeyDown={onKeyDown}
29      />
30    </>
31  );
32}
33