Elasticsearch: ensure query model has timeField configured in datasource settings (#29807)

public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.test.tsx

@@ -1,5 +1,6 @@
 import React, { FunctionComponent } from 'react';
 import { renderHook } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react';
 import { ElasticsearchProvider, useDatasource, useQuery } from './ElasticsearchQueryContext';
 import { ElasticsearchQuery } from '../../types';
 import { ElasticDatasource } from '../../datasource';
@@ -11,6 +12,22 @@ const query: ElasticsearchQuery = {
 };
 
 describe('ElasticsearchQueryContext', () => {
+  it('Should call onChange with the default query when the query is empty', () => {
+    const datasource = { timeField: 'TIMEFIELD' } as ElasticDatasource;
+    const onChange = jest.fn();
+
+    render(<ElasticsearchProvider query={{ refId: 'A' }} onChange={onChange} datasource={datasource} />);
+
+    const changedQuery: ElasticsearchQuery = onChange.mock.calls[0][0];
+    expect(changedQuery.query).toBeDefined();
+    expect(changedQuery.alias).toBeDefined();
+    expect(changedQuery.metrics).toBeDefined();
+    expect(changedQuery.bucketAggs).toBeDefined();
+
+    // Should also set timeField to the configured `timeField` option in datasource configuration
+    expect(changedQuery.timeField).toBe(datasource.timeField);
+  });
+
   describe('useQuery Hook', () => {
     it('Should throw when used outside of ElasticsearchQueryContext', () => {
       const { result } = renderHook(() => useQuery());

public/app/plugins/datasource/elasticsearch/components/QueryEditor/ElasticsearchQueryContext.tsx

@@ -24,7 +24,12 @@ export const ElasticsearchProvider: FunctionComponent<Props> = ({ children, onCh
     bucketAggs: bucketAggsReducer,
   });
 
-  const dispatch = useStatelessReducer(newState => onChange({ ...query, ...newState }), query, reducer);
+  const dispatch = useStatelessReducer(
+    // timeField is part of the query model, but its value is always set to be the one from datasource settings.
+    newState => onChange({ ...query, ...newState, timeField: datasource.timeField }),
+    query,
+    reducer
+  );
 
   // This initializes the query by dispatching an init action to each reducer.
   // useStatelessReducer will then call `onChange` with the newly generated query