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