Tempo: Add query ref in the query editor (#81343)

* Add query ref

* Fix lint

* Add comment

* Update public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>

---------

Co-authored-by: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
This commit is contained in:
Joey 2024-01-31 09:08:06 +00:00 committed by GitHub
parent 0d9886a654
commit b9f5042044
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -1,6 +1,6 @@
import { css } from '@emotion/css';
import { defaults } from 'lodash';
import React, { useState } from 'react';
import React, { useRef, useState } from 'react';
import { QueryEditorProps } from '@grafana/data';
import { config, reportInteraction } from '@grafana/runtime';
@ -27,8 +27,14 @@ export function QueryEditor(props: Props) {
return genQuery === query.query || genQuery === '{}';
});
// The Monaco Editor uses the first version of props.onChange in handleOnMount i.e. always has the initial
// value of query because underlying Monaco editor is passed `query` below in the onEditorChange callback.
// handleOnMount is called only once when the editor is mounted and does not get updates to query.
// So we need useRef to get the latest version of query in the onEditorChange callback.
const queryRef = useRef(query);
queryRef.current = query;
const onEditorChange = (value: string) => {
props.onChange({ ...query, query: value });
props.onChange({ ...queryRef.current, query: value });
};
return (